Tutorial Android | User Interface & layout Android Bagian 1

Tutorial Android User Interface dan layout

Hey Dab! 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:

1. Sebagai pendeklarasi elemen-elemen UI (Seperti Button, Text View, dan lain-lain). dan menggunakan bahasa XML.
2. 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.

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. Lihat Contoh berikut ini:

Code Vertical Layout :

<Linearlayout android:orientation="vertical"> ..... </LinearLayout>

Code Horizontal Layout:

<Linearlayout android:orientation="horizontal"> ..... </LinearLayout>

Oke Sekarang Saya akan kasih Contoh untuk membuat Layout Sederhana Seperti contoh Berikut ini:

Oke Sebelum Kita mulai Lebih Jauh saya akan Menjelaskan sedikit tentang konsep membuat layout yang benar. Pertama di Android itu mengenal Parent dan Child, atau susunan dalam Layout itu Sendiri. Parent itu terletak dibawahnya Child. jadi untuk kasus ini yang parent itu yang Vertikal Linear layout dan Childnya Horizontal Linear layout. Dan itu jika dituliskan pada code singkat :

// Parent Codenya terletak di luar.

<Linearlayout android:orientation="vertical"> 

// Child Codenya terletak didalam Parent.
<Linearlayout android:orientation="horizontal">

</LinearLayout>

</LinearLayout>

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 :