Selasa, 15 April 2014

Tutorial Android | User Interface & layout Android Linear Layout

Kali ini saya akan ngebahas tentang layout di android. Saya akan ngebahas buat layout yang standar dan terlihat bagus. Dalam android tentu kita mengenal UI (User Interface), nah Layout adalah salah satu komponen dasar untuk membuat UI yang bagus. Pada dasarnya Layout di Android memiliki dua fungsi yaitu:

  • Sebagai pendeklarasi elemen-elemen UI (Seperti Button, Text View, dan lain-lain). dan menggunakan bahasa XML.
  • Membangun Tampilan Aplikasi itu sendiri.

Lalu Di Android Sendiri Memiliki 4 Jenis layout yaitu : Linear layout, Relative Layout, Frame Layout dan Table layout. Sekarang Saya hanya akan Membahas Linear Layout.

Apa itu Linear Layout? Secara gampangnya ya untuk mengatur Widget dalam bentuk horizontal ataupun vertikal. Kedua jenis itu sering di gunakan dan sangat penting kalian ketahui bedanya. Keduanya yang membedakan adalah Orientation, itu terdapat didalam code.

Oke yuk langsung kita buat perogramnya

1. Buat Terlebih Dahulu Project baru Android (Terserah mau dinamain apa Projectnya)


2. Setelah itu Bukalah Layout pada res->layout->activity_main.xml (ini nama layout yang saya pakai).

3. Ketikkan Code pada activity_main.xml, Pertama Kita membuat untuk layout linear orientation vertical
<?xml version="1.0" encoding="utf-8"?>
<!--Vertical Orientation -->
<Linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:padding="5dip"
android:text="Email:" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
4. Lalu Barau kita buat Untuk linear layout orientation Horizontal, ketikkan code berikut ini setelah <Button .../>
<!-- Horizontal Orientation -->
<Linearlayout 
android:layout_width="fill_parent"
android:layout_height="Wrap_Content"
android:orientation="horizontal"
android:background="#2a2a2a"> 

<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="15dip"
android:text="Home"
android:textColor="#ffffff" />

<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="15dip"
android:text="About"
android:textColor="#ffffff" />

</LinearLayout>
5. Maka Lihat hasilnya Seperti ini : 


Hohoho Sekian dulu nanti kita lanjut lagi

Posting Lebih Baru Posting Lama Beranda

0 komentar:

Posting Komentar