Mempelajari Layout pada Android Studio

Apa sih Layout itu?

Sebelum kita membahas tentang jenis dan fungsi Layout, alangkah lebih baiknya jika kita membahas dulu apa sebenernya Layout itu. Layout merupakan suatu tampilan tata letak di Android untuk mengatur penempatan teks, gambar, ataupun komponen lainnya sehingga tampilan pada aplikasi yang dibuat terlihat rapih dan nyaman untuk dilihat oleh pengguna. Android Studio sendiri masih banyak nih yang masih binggung tentang jenis,fungsi dan penggunaan layout itu sendiri. Maka pada kesempatan kali ini kita akan bahas itu semua.

Jenis - jenis dan fungsi Layout

1. Linear Layout

Linear Layout adalah layout yang menyejajarkan semua child view-nya dalam satu arah, secara vertikal atau horizontal. Anda bisa menetapkan arah layout dengan atribut android:orientation.

Semua anak LinearLayout akan ditumpuk satu sama lain, jadi daftar vertikal hanya akan memiliki satu anak per baris, seberapa pun lebarnya, dan daftar horizontal hanya akan setinggi satu baris (tinggi anak yang tertinggi, ditambah pengisi). LinearLayout akan mengikuti margin antara anak dan gravity (sejajar kanan, tengah, atau kiri) setiap anak.

Contoh

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/send" />
</LinearLayout>

Hasil

2. Relative Layout

Relative Layout adalah layout yang penataan nya ini adalah penataan yang menempatkan widget-widget didalamnya seperti layer, sehingga sebuah widget dapat berada di atas/di bawah widget lainnya atau dengan kata lain Relative merupakan layout yang penataannya lebih bebas (Relative) sehingga bisa di tata di mana saja.

Jadi dapat diartikan bahwa Relative Layout adalah desain tampilan pada aplikasi dengan tata letak objek atau komponen secara bebas tanpa aturan sesuai orientasi (horizontal atau vertical) seperti yang diterapkan pada Linear Layout.

Contoh:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

Hasil

3. Constraint Layout

Sebenarnya Constraint Layout mirip dengan Relative Layout, karena letak View bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya. Contohnya di Relative Layout kita bisa meletakkan sebuah View di atas, bawah, atau samping View lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan tetapi, Constraint Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.

Pada Constraint Layout, setiap View memiliki tali (Constraint) yang menarik tiap sisinya, yang mana tali tersebut bisa kita atur Elastisitas, Margin, dsb. Tali tersebut wajib kita “ikatkan” kepada anchor point atau suatu titik yang dapat berupa sisi dari Parent Layout, View lain, ataupun titik bantu (helper) yang bisa kita buat sendiri.

Contoh:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bggradient"
        tools:context=".MainActivity">


    <android.support.v7.widget.CardView
            android:layout_width="300dp"
            android:layout_height="50dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:cardCornerRadius="15dp" 
            app:cardElevation="20dp"
            android:id="@+id/cardView" 
            app:cardBackgroundColor="@color/colorAccent"
            android:layout_marginBottom="50dp">
        <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <TextView
                    android:text="Login"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    android:layout_marginTop="16dp"
                    app:layout_constraintEnd_toEndOf="parent" 
                    android:id="@+id/textView"
                    android:layout_marginBottom="8dp" 
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:fontFamily="sans-serif" 
                    android:textColor="@android:color/background_light"
                    android:textSize="24sp"
                    app:layout_constraintVertical_bias="1.0"/>
        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.CardView
            android:layout_width="320dp"
            android:layout_height="400dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" 
            android:layout_marginTop="8dp" 
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/cardView"
            app:cardCornerRadius="15dp"
            app:cardElevation="20dp"
            app:layout_constraintVertical_bias="0.781" 
            android:id="@+id/cardView2">
        <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <ImageView
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    app:srcCompat="@drawable/logo"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:id="@+id/imageView" 
                    android:layout_marginTop="36dp"
                    app:layout_constraintTop_toTopOf="parent"
                    android:layout_marginBottom="8dp" 
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintVertical_bias="0.0"/>
            <android.support.design.widget.TextInputLayout
                    android:layout_width="300dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:id="@+id/textInputLayout2"
                    app:layout_constraintTop_toBottomOf="@+id/imageView" 
                    android:layout_marginTop="50dp"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    app:passwordToggleTint="@color/colorAccent">

                <android.support.design.widget.TextInputEditText
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="Email" 
                        android:inputType="textEmailAddress"/>
            </android.support.design.widget.TextInputLayout>
            <android.support.design.widget.TextInputLayout
                    android:layout_width="300dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:layout_marginBottom="16dp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent" android:id="@+id/textInputLayout3"
                    android:layout_marginTop="8dp"
                    app:layout_constraintTop_toBottomOf="@+id/textInputLayout2"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    app:passwordToggleTint="@color/colorAccent">

                <android.support.design.widget.TextInputEditText
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="Password"
                        android:inputType="textPassword"/>
            </android.support.design.widget.TextInputLayout>
        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

Hasil

4. Frame Layout

Frame Layout adalah Layout yang biasanya digunakan untuk membuat objek yang saling bertindihan contohnya yaitu kita membuat button di atas image. Untuk lebih jelasnya lihat contoh dibawah:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#1113">

   
    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="@color/colorPrimary"
        
         />

    <Button
        android:layout_width="300px"
        android:layout_height="100px"
        android:layout_gravity="center"
        android:text="Tombol"
        android:background="@color/colorAccent"
        android:textColor="#fff"
        android:textSize="20sp" />
</FrameLayout>

Hasil

5. Table Layout

Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom. **Table Layout ** terdiri dari:

1. Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang dapat disimpan.
2. Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.

Tag Table Layout

Beberapa tag pada Table Layout :

1. TableLayout : Tag pembuka untuk menggunakan TableLayout
2. TableRow : Tag untuk membuat Baris

Untuk gambaran lebih jelasnya perhatikan contoh di bawah ini

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >


    <TableRow
        android:paddingTop="10px"
        android:gravity="center"
        android:layout_marginTop="20px">

        <TextView
            android:id="@+id/status"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:layout_span="2"
            android:text="LOGIN"
            android:textColor="#890000"
            android:textSize="25sp"
            android:textStyle="bold" />

    </TableRow>

    <TableRow
        android:layout_marginTop="20dip" >

        <TextView
            android:layout_width="wrap_content"
            android:text="Username :"
            android:textSize="20sp"
            android:textColor="#000000"
            android:layout_marginLeft="20dip"
            ></TextView>

        <EditText
            android:id="@+id/screenName"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" >

        </EditText>

    </TableRow>


    <TableRow
        android:layout_marginTop="20dip" >

        <TextView android:text="Password :"
            android:layout_width="wrap_content"
            android:textSize="20sp"
            android:textColor="#000000"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"></TextView>

        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" >

        </EditText>

    </TableRow>


    <TableRow
        android:gravity="center"
        android:layout_marginTop="20dip" >

        <Button
            android:text="Submit"
            android:clickable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/save" android:layout_span="2" ></Button>
    </TableRow>

</TableLayout>

Hasil

Nah setelah membaca artikel diatas diharapkan kawan - kawan sudah mengerti tentang jenis - jenis dan fungsi Layout pada Android Studio. Pada Artikel berikutnya kita akan tentang Constraint Layout lebih lanjut jadi ayo cek terus update artikel di Code Politan.

#WajibNgulik