Layout atau tata letak adalah komponen penting dalam membangun aplikasi baik di Platform Android, maupun iOS. Hal tersebut sangat mempengaruhi User Experience para pengguna aplikasi kamu.
Layout yang baik ialah layout yang tidak hanya responsive di berbagai layar tetapi juga harus dikemas dengan style menarik agar menarik mata pengguna
Pada Tutorial kali ini, kita akan membuat relative layout beserta contoh coding dan hasil outputnya biar aplikasi kamu tambah keren.
Definisi Relative Layout
Relative Layout seperti namanya, menunjukkan posisi komponen relatif satu sama lain. Posisi dapat ditentukan sehubungan dengan elemen berurutan atau ke komponen induk. Relative Layout adalah tata letak paling fleksibel yang disediakan oleh Android.
Ini memungkinkan kamu memposisikan elemen di layar. Secara default, Relative Layout menetapkan semua komponen di bagian kiri atas desain. Gambar berikut menunjukkan bagaimana tampilan Relative Layout :
Atribut Relative Layout
Berikut ini adalah atribut-atribut yang ada pada Relative Layout :
- Id : Mendefinisikan Layoutnya
- Gravity : Menspesifikasikan posisi plan X – Y suatu objek
- IgnoreGravity : Mengabaikan fungsi Gravity pada komponen tertentu
Relative Layout Constructor
Dalam Relative Layout, Ia memiliki 4 konstruktor yang berbeda, antara lain :
- RelativeLayout( Contetxt context)
- RelativeLayout( Contetxt context, AttributeSet attrs)
- RelativeLayout( Contetxt context, AttributeSet attrs, int defStyleAttribute)
- RelativeLayout( Contetxt context, AttributeSet attrs, int defStyleAttribute, int defStyleRes)
Method pada Relative Layout
Berikut ini adalah Metode yang perlu kamu ingat dalam membangun Relative Layout :
- setGravity(): Mengatur gravity komponen child baik itu di bagian tengah, kiri, atau kanan
- setHorizontalGravity(): Digunakan untuk memposisikan element secara horizontal.
- setVerticalGravity(): Digunakan untuk memposisikan element secara vertical.
- requestLayout(): digunakan untuk memanggil layout
- setIgnoreGravity(): digunakan untuk mengabaikan gravity pada element tertentu.
- getGravity(): digunakan untuk memposisikan element
- getAccessibilityClassName(): mengembalikan nama class suatu objek.
Attribut XML pada Relative Layout
android: layout_above, Memposisikan tepi bawah komponen yang diberikan di atas ID komponen yang ditentukan.
android: layout_alignBaseline, memposisikan garis dasar komponen yang diberikan di atas garis dasar ID komponen yang ditentukan.
android: layout_alignBottom, Menyelaraskan di bagian bawah ID komponen yang diberikan.
android: layout_alignEnd, Menyelaraskan di akhir ID komponen yang diberikan.
android: layout_alignLeft, Memposisikan Komponen menjadi Rata kiri
android: layout_alignRight, Memposisikan komponen menjadi Rata Kanan
Contoh Relative Layout
Contoh berikut menunjukkan Relative Layout di Android. Buat project baru dan seret Relative Layout dari palet ke layar. Dan kemudian seret komponen GUI yang kamu butuhkan. Berikut Ini file XML nya.
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout android:layout_width=”368dp”
android:layout_height=”495dp”
xmlns:tools=”http://schemas.android.com/tools”
tools:layout_editor_absoluteX=”8dp”
tools:layout_editor_absoluteY=”8dp”
xmlns:android=”http://schemas.android.com/apk/res/android”>
<TextView
android:id=”@+id/textView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true”
android:layout_alignParentTop=”true”
android:layout_marginLeft=”141dp”
android:layout_marginStart=”141dp”
android:layout_marginTop=”89dp”
android:text=”Sign In”
android:textColor=”@android:color/black”
android:textColorLink=”@android:color/black”
android:textSize=”28sp” />
<TextView
android:id=”@+id/textView2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginTop=”43dp”
android:text=”ID”
android:textColor=”@android:color/black”
android:textSize=”18sp”
android:typeface=”normal”
android:layout_below=”@+id/textView”
android:layout_alignLeft=”@+id/textView5″
android:layout_alignStart=”@+id/textView5″
android:layout_marginLeft=”10dp”
android:layout_marginStart=”10dp” />
<EditText
android:id=”@+id/editText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:ems=”10″
android:inputType=”textPersonName”
android:text=”Enter ID”
android:layout_alignBaseline=”@+id/textView2″
android:layout_alignBottom=”@+id/textView2″
android:layout_alignLeft=”@+id/editText2″
android:layout_alignStart=”@+id/editText2″ />
<TextView
android:id=”@+id/textView5″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textSize=”18sp”
android:textColor=”@android:color/black”
android:text=”Password”
android:layout_alignBottom=”@+id/editText2″
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true”
android:layout_marginLeft=”32dp”
android:layout_marginStart=”32dp” />
<EditText
android:id=”@+id/editText2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentEnd=”true”
android:layout_alignParentRight=”true”
android:layout_below=”@+id/editText”
android:ems=”10″
android:text=”Password”
android:inputType=”textPassword” />
<Button
android:id=”@+id/S”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentEnd=”true”
android:layout_alignParentRight=”true”
android:layout_below=”@+id/editText2″
android:layout_marginTop=”32dp”
android:text=”SignIn” />
</RelativeLayout>
Inilah hasil outputnya :
Sumber : Javatutorial.net
