Belajar mengenal Layout Pada Android Studio - naskahkode.com


Belajar mengenal Layout Pada Android Studio - naskahkode.com


 Teori Singkat

Tata letak Android adalah kelas yang menangani pengaturan cara anaknya muncul di layar.
Apa pun yang merupakan View (atau mewarisi dari View) bisa menjadi turunan dari sebuah layout. Semua tata letak mewarisi dari ViewGroup (yang diwarisi dari View) sehingga Anda bisa menumpuk tata letak. Anda juga dapat membuat tata letak kustom Anda sendiri dengan membuat kelas yang diturunkan dari ViewGroup. Gambar di bawah mengilustrasikan hierarki pewarisan antar tampilan di Android

Pengenalan Layout

Blok penyusun dasar untuk antarmuka pengguna adalah objek View yang dibuat
dari kelas View dan menempati area persegi panjang di layar dan bertanggung jawab untuk menggambar dan menangani event. View adalah kelas dasar untuk widget, yang digunakan untuk membuat komponen UI interaktif seperti tombol, bidang teks, dll.


ViewGroup adalah subkelas View dan menyediakan wadah tak terlihat yang menampung Tampilan lain atau ViewGroup lain dan menentukan properti tata letaknya. 


Berikut jenis-jenis layout yang dapat kita gunakan dalam android :
  1. LinearLayout : Viewgroup yang childnya diposisikan dan disejajarkan secara horizontal atau secara vertikal
  2. RelativeLayout : Viewgroup yang childnya diposisikan dan disejajarkan relatif terhadap tampilan komponen dalam lainnya.
  3. ConstrainLayout : Viewgroup yang childnya menggunakan titik jangkar, tepi, dan panduan untuk mengontrol posisi tampilan relatif terhadap komponen lain di layout. ConstrainLayout didesain untuk mempermudah saat menyeret dan melepaskan tampilan di editor layout.
  4. AbsoluteLayout : ViewGroup yang childnya disusun ke dalam baris dan kolom
  5. FrameLayout : Viewgroup childnya bertumpuk.
  6. GridLayout : Viewgroup childnya ditempatkan dalam kotak persegi panjang yang bisa digulir.
Beberapa Macam Layout Pada Android Studio

Atribut umum yang terdapat pada Viewgroup

  • layout_height : untuk mengatur tinggi dari View
  • layout_width : untuk mengatur lebar dari View
  • layout_margin : untuk mengatur extra space di semua sisi luar View.
  • layout_marginTop : mengatur extra space sisi atas layout.
  • layout_marginBottom :mengatur extra space sisi bawah layout.
  • layout_marginLeft : mengatur extra space sisi kiri layout.
  • layout_marginRight : mengatur extra space sisi kanan layout.
  • layout_gravity : menentukan posisi child View.
  • layout_weight : menentukan seberapa banyak extra space dialokasikan.
  • layout_x : menentukan koordinat x layout.
  • layout_y : menentukan koordinat y layout.
  • paddingLeft : mengisi padding kiri layout.
  • paddingRight : mengisi padding kanan layout.
  • paddingTop : mengisi padding atas layout.
  • paddingBottom : mengisi padding bawah layout

 

1. Penggunaan Linear Layout

LinearLayout adalah grup tampilan yang meratakan semua Child view baik secara vertikal maupun horizontal. LinearLayout mengelompokkan child view-nya dengan menampilkan dalam satu baris atau kolom (vertikal atau horizontal). Viewgroup biasa digunakan untuk membuat form.

A. Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 
  • Pilih → Start a new Android Studio Project 
  • Pilih → Empty Activity → Next

Mengonfigurasi projek

 



B. Menambahkan TextView  , dan LinearLayout dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#6645C0"
android:padding="16dp"
android:text="Vertical 1"
android:textColor="@android:color/white"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F3D029"
android:padding="16dp"
android:text="Vertical 2"
android:textColor="@android:color/white"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#26A96C"
android:padding="16dp"
android:text="Horizontal 1"
android:textColor="@android:color/white"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F05F5E"
android:padding="16dp"
android:text="Horizontal 2"
android:textColor="@android:color/white"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#3322AA"
android:padding="16dp"
android:text="Horizontal 3"
android:textColor="@android:color/white"/>

</LinearLayout>
</LinearLayout>

D. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini 

 



E. Kemudian kita akan mencoba Kembali untuk membuat App seperti email menggunakan LinearLayout yang kedua


Pertama jalankan aplikasi IDE Android Studio, caranya :

  • Pilih Start → Android Studio 
  • Pilih → Start a new Android Studio Project 
  • Pilih → Empty Activity → Next

     


F. Menambahkan EditText ,Button dan LinearLayout dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja atur sedemikian rupa agar menyerupai UI email

G. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical"
tools:context=".MainActivity">

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="to"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject"/>
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="Message"/>
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="send"/>
</LinearLayout>


H. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini





2. Penggunaan Relative Layout

Relative Layout merupakan layout yang penataan nya ini merupakan penataan yang menempatkan widget-widget didalamnya misalnya layer, sebagai akibatnya sebuah widget bisa berada pada atas/pada bawah widget lainnya atau menggunakan istilah lain Relative adalah layout yang penataannya lebih bebas (Relative) sebagai akibatnya sanggup pada rapikan pada mana saja.


A. Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 
  • Pilih → Start a new Android Studio Project 
  • Pilih → Empty Activity → Next

Mengonfigurasi projek 


B. Menambahkan Button  , dan RelativeLayout dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja atur sedemikian rupa agar tiap button di sisi app

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BAECBD"
tools:context=".MainActivity">

<EditText
android:id="@+id/name"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#f8eff8f3"
android:hint="Nama"
android:padding="16dp"/>
<EditText
android:id="@+id/email"
android:layout_width="210dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@+id/name"
android:background="#f8eff8f3"
android:hint="Alamat Email"
android:padding="16dp"/>
<EditText
android:id="@+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_below="@+id/name"
android:background="#f8eff8f3"
android:hint="Subject"
android:padding="16dp"/>
<EditText
android:id="@+id/message"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="16dp"
android:layout_below="@+id/subject"
android:background="#f8eff8f3"
android:gravity="top"
android:hint="Pesan"
android:padding="16dp"/>
<Button
android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/message"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:padding="16dp"
android:text="KIRIM"/>

</RelativeLayout>

D. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini



E. Kemudian kita akan mencoba Kembali untuk membuat App menggunakan Relative Layout yang kedua
Pertama jalankan aplikasi IDE Android Studio, caranya :

  • Pilih Start → Android Studio 
  • Pilih → Start a new Android Studio Project 
  • Pilih → Empty Activity → Next

F. Menambahkan Button  ,EditText dan RelativeLayout dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja atur sedemikian rupa agar menyerupai UI email

G. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BAECBD"
tools:context=".MainActivity">

<EditText
android:id="@+id/name"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#f8eff8f3"
android:hint="Nama"
android:padding="16dp"/>
<EditText
android:id="@+id/email"
android:layout_width="210dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@+id/name"
android:background="#f8eff8f3"
android:hint="Alamat Email"
android:padding="16dp"/>
<EditText
android:id="@+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_below="@+id/name"
android:background="#f8eff8f3"
android:hint="Subject"
android:padding="16dp"/>
<EditText
android:id="@+id/message"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="16dp"
android:layout_below="@+id/subject"
android:background="#f8eff8f3"
android:gravity="top"
android:hint="Pesan"
android:padding="16dp"/>
<Button
android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/message"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:padding="16dp"
android:text="KIRIM"/>

</RelativeLayout>

H. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini



3. Penggunaan Table Layout

Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom.

TableLayout pada Android adalah subkelas ViewGroup yang digunakan untuk menampilkan elemen View child dalam baris dan kolom untuk mengatur semua elemen child menjadi baris dan kolom dan tidak menampilkan garis batas di antara baris, kolom atau cells.

A. Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 
  • Pilih → Start a new Android Studio Project 
  • Pilih → Empty Activity → Next

Mengonfigurasi projek

 

B. Menambahkan Button , TextView, TableLayout dan TableRow dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja atur sedemikian rupa agar tampilan UI seperti email

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 
 
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:stretchColumns="1, 3"
tools:context=".MainActivity">

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_span="4"
android:text="Form Login"
android:textSize="22sp"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="User Name"/>
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:ems="10"
android:inputType="textPersonName"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="Password"/>
<EditText
android:id="@+id/editTex2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:ems="10"
android:inputType="textPassword"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="right"
android:text="Login"/>
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"/>
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Forget Pswd ?"/>
</TableRow>
</TableLayout>

</RelativeLayout>

D. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini 

 


E. Kemudian kita akan mencoba Kembali untuk membuat App menggunakan Tabel Layout yang kedua

  • Pilih Start → Android Studio 
  • Pilih → Start a new Android Studio Project 
  • Pilih → Empty Activity → Next

Mengonfigurasi projek


 

 

F. Menambahkan View , TextView, TableLayout dan TableRow dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja atur sedemikian rupa agar tampilan UI seperti email

G. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 
 
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
tools:context=".MainActivity">

<TableRow
android:background="#22ff">
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip"/>
<TextView
android:text="Ctrl-O"
android:layout_gravity="right"
android:padding="3dip"/>
</TableRow>
<TableRow
android:background="#22ff">
<TextView
android:layout_column="1"
android:text="Save.."
android:padding="3dip"/>
<TextView
android:text="Ctrl-S"
android:layout_gravity="right"
android:padding="3dip"/>
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090"/>
<TableRow android:background="#ffff00">
<TextView
android:text="X"
android:padding="3dip"/>
<TextView
android:text="Import.."
android:padding="3dip"/>
</TableRow>
<TableRow android:background="#ffff00">
<TextView
android:text="X"
android:padding="3dip"/>
<TextView
android:text="Export.."
android:padding="3dip" />
<TextView
android:text="Ctrl-E"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090"/>
<TableRow android:background="#aaf">
<TextView
android:layout_column="1"
android:text="Quit"
android:padding="3dip"/>
</TableRow>
</TableLayout>

H. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini 

 

4. Penggunaan Absolute Layout

Absolute Layout menggunakan angka/koordinat untuk mengatur si widget tersebut. Atribut yang digunakan adalah layout_x dan layout_y. 

Android AbsoluteLayout digunakan ketika komponen UI di layar diposisikan pada posisi mereka mutlak sehubungan dengan asal di sudut kiri atas layout. AbsoluteLayout sudah tidak direkomendasikan karena membuat UI tidak fleksibel, dan sebenarnya AbsoluteLayout sudah jarang digunakan.

A. Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 
  • Pilih → Start a new Android Studio Project 
  • Pilih → Empty Activity → Next

Mengonfigurasi projek

B. Menambahkan Button , TextView ,EditText, dan AbsoluteLayout dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja atur sedemikian rupa agar tampilan UI seperti email

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 
 
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:background="#FFF5F5F5"
tools:ignore="Desprecated"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Contoh Absolute Layout"
android:textSize="15sp"
android:textStyle="bold"
tools:layout_editor_absoluteX="64dp"
tools:layout_editor_absoluteY="72dp"/>
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_y="30dp"
android:hint="Email"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="28dp"/>
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_y="80dp"
android:hint="Password"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="28dp"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_y="125dp"
android:text="Masuk"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="126dp"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="215dp"
android:layout_y="125dp"
android:text="Daftar"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="126dp"/>
</AbsoluteLayout>

D. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini 

 



You may like these posts