Membuat Tampilan Beranda dengan Relative Layout di Android Studio

Salah satu layout yang bisa digunakan untuk membuat tampilan di Android Studio adalah Relative Layout. Dulu penulis suka memakai layout ini saat masih memakai Android Studio versi 2. Layout ini masuk menu Legacy., alias sudah cukup lama 🙂

RelativeLayout adalah grup tampilan yang menampilkan tampilan turunan di posisi relatif. Posisi setiap tampilan dapat ditentukan sebagai posisi relatif terhadap elemen yang setara (seperti di sebelah kiri atau di bawah tampilan lain) atau di posisi relatif terhadap RelativeLayout induk (seperti sejajar dengan bagian bawah, kiri, atau tengah).

Untuk membuat tampilan berikut, jangan lupa menyimpan 1 file gambar dengan nama logo di folder drawable di project kamu ya:

Sintaks / coding yang diperlukan untuk membuat tampilan seperti diatas adalah:

<?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"
    tools:context=".cobaRelative">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/logo"
        android:layout_marginTop="180dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageView2"
        android:layout_centerHorizontal="true"
        android:text="Selamat Datang\nSilahkan Login Dulu" />

    <EditText
        android:id="@+id/isiannama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:layout_below="@id/textView"
        android:layout_centerHorizontal="true"
        android:hint="Name" />

    <EditText
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:layout_below="@id/isiannama"
        android:layout_centerHorizontal="true"
        android:hint="Password" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/password"
        android:layout_centerHorizontal="true"
        android:text="Login" />
    
</RelativeLayout>

Selamat Mencoba Ya.