Tutorial Android Studio : #6 Komponen Layout Android

Komponen layout merupakan desain interaktif user interface aplikasi dengan user, misalnya ada komponen input (TextView, EditText, TootleButon dan lain sebagainya), untuk referensi lengkap mengenai komponen layout android bisa dibaca di sini.

Dalam membuat aplikasi, tentunya Kita akan menggunakan komponen-kompenen yang letaknya di dalam layout. Adapun komponen pada layout android dapat dilihat pada gambar berikut ini :

Dari gambar di atas dapat kita lihat banyak sekali komponen yang bisa digunakan dalam mendesain aplikasi android. Cara menggunakannya pun sangat mudah, tinggal di drag & drop ke layout yang kita desain. Ukurannya pun dapat kita sesuikan dengan kebutuhan.

Sebagai contoh penggunaan komponen layout android, kita akan membuat desain sederhana. Dimana dalam desain tampilan ini kita akan menggunakan beberapa komponen seperti TextView, Edittext, RadioButton dan Button. Berikut mockup tampilan yang akan kita buat :

Adapun cara untuk membuat tampilan seperti mockup di atas adalah :

Pertama buka Android Studio dan buat satu layout android yang akan didesain, drag atau tuliskan sintak untuk komponen yang diperlukan ke layout tersebut. Setelah itu atur ukurannya sesuai dengan diperlukan. Setelah komponen yang dibutuhkan sudah tersedia di layout, maka ada beberapa yang perlu ditambahkan, seperti android:hint, android:textColor, dan lain-lain. Untuk lebih jelas apa yang ditambahkan, perhatikan sintak berikut :

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingRight="4dp"
    android:paddingLeft="4dp"
    android:paddingTop="10dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txt_username"
        android:hint="Username"/>

    <EditText
        android:id="@+id/txt_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txt_username"
        android:hint="Password"/>

    <EditText
        android:id="@+id/txt_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/txt_password"
        android:ems="10"
        android:inputType="textEmailAddress"
        android:hint="Email"/>

    <EditText
        android:id="@+id/txt_phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/txt_email"
        android:ems="10"
        android:inputType="phone"
        android:hint="Phone"/>

    <TextView
        android:id="@+id/txt_kelamin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jenis Kelamin"
        android:layout_marginTop="14dp"
        android:layout_below="@+id/txt_phone"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <RadioButton
        android:id="@+id/radioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Laki-Laki"
        android:layout_marginLeft="18dp"
        android:layout_marginStart="18dp"
        android:layout_alignBaseline="@+id/txt_kelamin"
        android:layout_alignBottom="@+id/txt_kelamin"
        android:layout_toRightOf="@+id/txt_kelamin"
        android:layout_toEndOf="@+id/txt_kelamin"/>

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Perempuan"
        android:layout_alignBaseline="@+id/radioButton"
        android:layout_alignBottom="@+id/radioButton"
        android:layout_toRightOf="@+id/radioButton"
        android:layout_toEndOf="@+id/radioButton"
        android:layout_marginLeft="11dp"
        android:layout_marginStart="11dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Register"
        android:textColor="#fff"
        android:background="@color/colorPrimaryDark"
        android:layout_below="@+id/radioButton"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="27dp"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:layout_below="@+id/button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="@color/colorPrimary"
        android:textColor="#fff"/>

</RelativeLayout>

Sekarang coba bandingkan dengan sintak hasil dari drag & drop  yang sudah dilakukan dan lihat apa yang ditambahkan dalam mendesain halaman di atas.

berikut tampilan setelah aplikasi di jalankan :

Dari hasil yang dijalankan dapat dilihat, untuk komponen EditText sendiri memiliki beberapa type, seperti : password, email,phone dan masih banyak lainnya. Kita hanya tinggal menggunakannya saja.

Demikian tutorial Android studio bagian ke-6 dengan materi komponen layout android, kita berjumpa kembali di tutorial android studio selanjutnya.