Menggunakan Relative Layout di Android Studio

ViewGroup Relative Layout di Android Studio

Pada artikel Belajar Memahami ViewGroup di Android Studio, sudah saya sebutkan bahwa Relative Layout ini memiliki dua cara untuk meletakkan atau memposisikan tampilan yang ada di dalamnya. Pertama anda dapat meletakkan tampilan yang ada di dalamnya, relative terhadap tampilan induknya. Kedua anda dapat meletakkan tampilan yang ada di dalamnya, relative terhadap tampilan lainnya satu sama lain. Untuk lebih memahami maksud dari relative terhadap induk dan relative terhadap tampilan lainnya, silahkan anda simak penjelasannya di bawah ini.

Relative Terhadap Tampilan Induk

Relative terhadap tampilan induk artinya setiap tampilan anak yang ada di dalam Relative Layout ini akan mengacu pada tampilan induknya, dengan kata lain mengacu pada Relative Layout itu sendiri. Untuk lebih memperjelasnya cobalah anda lihat illustrasi di bawah ini.

Misalkan kita mengatur ukuran tinggi dan lebar dari Relative Layout dengan match_parent, maka anda dapat memposisikan tampilan anaknya di bagian tepi atas, tepi bawah, tepi kiri, tepi kanan dan tepat ditengah. Anda juga dapat memposisikan tampilan anaknya lebih beragam lagi menggunakan beberapa atribut, dan ini adalah beberapa atribut pada tampilan yang dapat digunakan untuk relatif terhadap tampilan induknya.

1. android:layout_centerInParent

Atribut ini digunakan untuk menempatkan tampilan atau widget di tengah-tengah tampilan induk atau di tengah-tengah Relative Layout. Atribut ini hanya memiliki dua nilai yaitu true dan false. Jika bernilai true, maka tampilan akan ditempatkan ditengah-tengah tampilan induk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:text="Tengah"

    android:background="#673AB7"
    android:textSize="30sp"

    android:layout_centerInParent="true"/>

    android:textColor="#fff"

2. android:layout_alignParentTop

Atribut ini digunakan untuk menempatkan tampilan atau widget diatas tampilan induk. Atribut ini juga hanya memiliki dua nilai yaitu true dan false. Secara default Relative Layout akan menampatkan tampilan yang memakai atribut ini, di sisi kiri atas dari tampilan induk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:text="Atas"

    android:background="#673AB7"
    android:textSize="30sp"

    android:layout_alignParentTop="true"/>

    android:textColor="#fff"

3. android:layout_alignParentBottom

Atribut ini digunakan untuk menempatkan tampilan atau widget dibawah tampilan induk. Atribut ini juga hanya memiliki dua nilai yaitu true dan false. Secara default Relative Layout akan menampatkan tampilan yang memakai atribut ini, di sisi kiri bawah dari tampilan induk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:text="Bawah"

    android:background="#673AB7"
    android:textSize="30sp"

    android:layout_alignParentBottom="true"/>

    android:textColor="#fff"

4. android:layout_alignParentleft

Atribut ini digunakan untuk menempatkan tampilan atau widget di sisi kiri dari tampilan induk. Atribut ini juga hanya memiliki dua nilai yaitu true dan false. Secara default Relative Layout akan menampatkan tampilan yang memakai atribut ini, di sisi kiri atas dari tampilan induk. Anda mungkin tidak melihat perbedaan antara atribut alignParentTop dengan alignParentLeft. Anda baru dapat melihat perbedaan dari kedua atribut ini ketika digabungkan dengan beberapa atribut yang lainnya.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:text="Kiri"

    android:background="#673AB7"
    android:textSize="30sp"

    android:layout_alignParentLeft="true"/>

    android:textColor="#fff"

5. android:layout_alignParentRight

Atribut ini digunakan untuk menempatkan tampilan atau widget di sisi kanan dari tampilan induk. Atribut ini juga hanya memiliki dua nilai yaitu true dan false. Secara default Relative Layout akan menampatkan tampilan yang memakai atribut ini, di sisi kanan atas dari tampilan induk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:text="Kanan"

    android:background="#673AB7"
    android:textSize="30sp"

    android:layout_alignParentRight="true"/>

    android:textColor="#fff"

6. android:layout_centerVertical

Atribut ini digunakan untuk menempatkan tampilan atau widget di tengah tampilan induk secara vertikal. Atribut ini juga hanya memiliki dua nilai yaitu true dan false. Secara default Relative Layout akan menampatkan tampilan yang memakai atribut ini, di sisi kiri tengah dari tampilan induk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:text="Tengah"

    android:background="#673AB7"
    android:textSize="30sp"

    android:layout_centerVertical="true"/>

    android:textColor="#fff"

7. android:layout_centerHorizontal

Atribut ini digunakan untuk menempatkan tampilan atau widget di tengah tampilan induk secara horizontal. Atribut ini juga hanya memiliki dua nilai yaitu true dan false. Secara default Relative Layout akan menampatkan tampilan yang memakai atribut ini, di sisi bagian atas tengah dari tampilan induk.


<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"
        android:text="Tengah"

        android:background="#673AB7"
        android:textSize="30sp"

        android:layout_centerHorizontal="true"/>
        android:textColor="#fff"

</RelativeLayout>

Sebenarnya masih ada beberapa atribut yang tidak saya sebutkan disini, tetapi untuk pemula anda bisa menggunakan ketujuh atribut diatas.

Relative Terhadap Tampilan Lain

Dengan Relative Layout di Android Studio ini anda juga dapat membuat suatu tampilan mengacu pada tampilan lainnya. Sebagai contoh, jika ada satu ImageView ditengah-tengah layar ponsel maka anda dapat menempatkan sebuah TextView di atas, di bawah, di kanan, atau di kiri dari ImageView tersebut. Ketika kita ingin merujuk sebuah tampilan terhadap tampilan dengan menggunakan Relative Layout, maka anda harus menambahkan atribut android:id pada tampilan tersebut. Dengan android:id lah, suatu tampilan bisa dirujuk oleh tampilan lainnya.

Ini adalah beberapa atribut yang digunakan untuk merujuk suatu tampilan oleh tampilan lainnya.

1. android:layout_above

Atribut ini digunakan untuk menempatkan suatu tampilan atau widget di atas tampilan yang lainnya. Nilai dari atribut ini menggunakan id dari tampilan yang dirujuk. Secara default Relative Layout di Android Studio akan menempatkan tampilan yang menggunakan atribut ini di sisi kiri diatas tampilan yang dirujuk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/textview2"

    android:textSize="30sp"
    android:text="Atas"

    android:textColor="#fff"
    android:background="#673AB7"

    android:layout_above="@id/textview1"/>

2. android:layout_below

Atribut ini digunakan untuk menempatkan suatu tampilan atau widget di bawah tampilan yang lainnya. Nilai dari atribut ini menggunakan id dari tampilan yang dirujuk. Secara default Relative Layout di Android Studio akan menempatkan tampilan yang menggunakan atribut ini di sisi kiri di bawah tampilan yang dirujuk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/textview2"

    android:textSize="30sp"
    android:text="bawah"

    android:textColor="#fff"
    android:background="#673AB7"

    android:layout_below="@id/textview1"/>

3. android:layout_toLeftOf

Atribut ini digunakan untuk menempatkan suatu tampilan atau widget di sisi kiri tampilan yang lainnya. Nilai dari atribut ini menggunakan id dari tampilan yang dirujuk. Secara default Relative Layout di Android Studio akan menempatkan tampilan yang menggunakan atribut ini di sisi kiri di atas tampilan yang dirujuk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/textview2"

    android:textSize="30sp"
    android:text="Kiri Atas"

    android:textColor="#fff"
    android:background="#673AB7"

    android:layout_toLeftOf="@id/textview1"/>

4. android:layout_toRightOf

Atribut ini digunakan untuk menempatkan suatu tampilan atau widget di sisi kanan tampilan yang lainnya. Nilai dari atribut ini menggunakan id dari tampilan yang dirujuk. Secara default Relative Layout akan menempatkan tampilan yang menggunakan atribut ini di sisi kanan di atas tampilan yang dirujuk.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/textview2"

    android:textSize="30sp"
    android:text="Kanan Atas"

    android:layout_toRightOf="@id/textview1"/>
    android:background="#673AB7"

    android:textColor="#fff"

5. android:layout_alignTop

Bisa dibilang atribut ini digunakan untuk menempatkan suatu tampilan di atas tetapi sejajar dengan latar belakang dari tampilan yang dirujuk. Catat bahwa atribut ini berbeda dengan atribut layout_above. Untuk lebih jelasnya anda bisa melihat contohnya di bawah ini.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/textview2"

    android:textSize="20sp"
    android:text="Di atas"

    android:textColor="#fff"
    android:background="#673AB7"

    android:layout_alignTop="@id/textview1"/>

6. android:layout_alignBottom

Sama seperti layout_alignTop, hanya saja atribut ini menempatkannya di bawah sejajar dengan latar belakang dari tampilan yang dirujuk. Untuk lebih jelasnya anda bisa melihat contohnya di bawah ini.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/textview2"

    android:textSize="20sp"
    android:text="Di Bawah"

    android:textColor="#fff"
    android:background="#673AB7"

    android:layout_alignBottom="@id/textview1"/>

7. android:layout_alignLeft

Sama seperti layout_alignTop, hanya saja atribut ini menempatkannya di sebelah kiri sejajar dengan latar belakang dari tampilan yang dirujuk. Untuk lebih jelasnya anda bisa melihat contohnya di bawah ini.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/textview2"

    android:textSize="20sp"
    android:text="Di Kiri"

    android:textColor="#fff"
    android:background="#673AB7"

    android:layout_alignLeft="@id/textview1"/>

8. android:layout_alignRight

Sama seperti layout_alignTop, hanya saja atribut ini menempatkannya di sebelah kanan sejajar dengan latar belakang dari tampilan yang dirujuk. Untuk lebih jelasnya anda bisa melihat contohnya di bawah ini.


<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/textview2"

    android:textSize="20sp"
    android:text="Di Kanan"

    android:textColor="#fff"
    android:background="#673AB7"

    android:layout_alignRight="@id/textview1"/>

Ok saya rasa sudah cukup banyak atribut yang sudah saya sebutkan di artikel ini. Sebenarnya masih ada beberapa atribut lainnya yang tidak saya sebutkan disini, karena mungkin anda akan kekenyangan membaca artikel ini. Untuk pemula kedelapan atribut tersebut dapat anda gunakan, karena biasanya kedelapan atribut itulah yang sering digunakan ketika menggunakan Relative Layout. Disini saya juga membuat contoh sederhana penggunaan atribut-atribut yang sudah saya jelaskan. Berikut ini contohnya.


<RelativeLayout

    android:layout_width="match_parent"

    android:layout_height="match_parent">
    <TextView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:text="Login User"
        android:id="@+id/textview1"
        android:textAlignment="center"

        android:textColor="#000"
        android:textStyle="bold"
        android:textSize="30sp"
        android:layout_marginBottom="10dp"

        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_height="wrap_content"
        android:id="@+id/textview2"

        android:layout_alignBottom="@id/edittext1"/>
        android:text="Username"
        android:textSize="25sp"
        android:textColor="#000"
        android:layout_marginBottom="5dp"

    <TextView

        android:textSize="25sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textview3"
        android:text="Password"
        android:textColor="#000"

        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_alignBottom="@id/edittext2"/>

    <EditText
        android:layout_width="match_parent"
        android:id="@+id/edittext1"
        android:textSize="20sp"

        android:id="@+id/edittext2"
        android:layout_below="@id/textview1"
        android:layout_toRightOf="@id/textview2"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"

        android:background="@color/colorPrimary"
        android:layout_below="@id/textview2"
        android:layout_toRightOf="@id/textview3"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:id="@+id/button1"

        android:text="Batal"
        android:textColor="#fff"
        android:layout_marginTop="10dp"
        android:layout_below="@id/edittext2"
        android:layout_alignLeft="@id/edittext2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

</RelativeLayout>
        android:id="@+id/button2"
        android:background="#F44336"
        android:textColor="#fff"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="5dp"
        android:layout_below="@id/edittext2"

        android:layout_toRightOf="@id/button1"/>