Cara Mudah Membuat Relative Layout Pada Aplikasi Android

0

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

Share.

About Author

Techfor Id

Leave A Reply