Tutorial Linear Layout (2/2)

Tujuan Tutorial

Kita masih di seri tutorial belajar layout dasar android. Pada tutorial sebelumnya kita telah membuat activity baru yang berisi form inputan menggunakan LinearLayout. Pada tutorial kali ini kita akan menambahkan aksi baru: yaitu toggle expand form input name.

Kita akan memodifikasi tampilan layout secara programmatically melalui kotlin. Pada Gambar 1 di bawah, adalah ilustrasi hasil akhir dari tutorial kali ini.

Gambar 1: hasil akhir tutorial ini.

Skenario Alur Program

Sebelum kita mulai aksi ngoding, kita coba pikirkan dulu alur program yang akan kita buat. Kita perhatikan ilustrasi skenario alur program pada Gambar 2 di bawah. Ada beberapa langkah utama yang akan kita lakukan.

Gambar 2: hasil akhir tutorial ini.

Kita akan bungkus widget @+id/etName dengan sebuah LinearLayout berorientasi vertical. Lalu kita tambahkan di bawahnya tiga inputan baru akan tetapi kita buat inputan tersebut tidak nampak dengan men-set properti visibility menjadi GONE. Masing-masing inputan tersebut adalah: First Name, Last Name, dan Nick Name.
Ketika tombol @+id/imgBtnToggleName diketuk, kita akan melakukan menyembunyikan inputan Name, dan menampilkan tiga inputan lainnya. Dan jika ternyata inputan Name dalam keadaan tidak aktif, kita lakukan aksi sebaliknya yaitu menampilkan inputan Name dan menyembunyikan tiga inputan yang lain. Ini lah yang dinamakan toggle.
Ketika tombol @+id/imgBtnToggleName diketuk, kita akan men-toggle icon tombol tersebut secara bergantian dari @drawable/ic_expand_more_near_black_24dp ke @drawable/ic_expand_less_near_black_24dp.

Sudah mendapatkan gambaran? Jika sudah, mari kita implementasikan skenario yang telah kita bahas di atas.

Implementasi Layout (XML)

1. Bungkus widget `@+id/etName` dengan `LinearLayout`

Bungkus widget @+id/etName dengan LinearLayout berorientasi vertical. Pindahkan layout_width, layout_height, layout_marginLeft dan layout_marginRight dari elemen @+id/etName ke LinearLayout. Lalu set layout_width dari @+id/etName menjadi match_parent.

Ini membuat LinearLayout yang baru kita tambahkan bisa menggantikan posisi @+id/etName. Silakan lihat kode berikut dan perhatikan baris yang ter-highlight.

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:orientation="vertical">

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

</LinearLayout>

2. Tambahkan 3 input baru dibawah `@+id/etName`

Setelah itu kita tambahkan 3 input baru di bawah @+id/etName. Semua properti atributnya sama, kita hanya mengubah attribut id dan hint-nya saja, ditambah marginTop untuk memberi jarak. Anda bisa langsung tambahkan 3 input ini dengan atribut sebagai berikut:

First Name
- id: @+id/etFirstName
- hint: "First Name"
Last Name
- id: @+id/etLastName
- hint: "Last Name"
- marginTop: 16dp
Nick Name
- id: @+id/etNickName
- hint: "Nick Name"
- marginTop: 16dp

Setelah itu kita aktifkan mode Design. Hasil sementara bisa kita lihat pada tangkapan layar Gambar 3 di bawah ini:

Gambar 3: hasil akhir sementara.

3. Sembunyikan 3 input baru dengan visibility gone

Selanjutnya kita akan sembunyikan 3 input yang baru kita tambahkan. Caranya adalah dengan mengatur attribut visibility dengan nilai gone.

<EditText
    android:id="@+id/etFirstName"
    ...
    android:visibility="gone"></EditText>

<EditText
    android:id="@+id/etLastName"
    ...
    android:visibility="gone"></EditText>

<EditText
    android:id="@+id/etNickName"
    ...
    android:visibility="gone"></EditText>

Sekarang jika kita kembali ke mode Design, kita akan melihat bahwa penampakan layout kembali seperti semmula, tidak ada tambahan 3 input baru di bawah inputan @+id/etName karena kita telah mengatur atribut visibility-nya dengan nilai gone.

Implementasi Kotlin

Selanjutnya kita akan menangani bagian sisi belakang, yaitu bagian kotlin. Ada beberapa skenario yang akan kita lakukan: membuat event listener untuk tombol @+id/imgBtnToggleName ketika diklik. Lalu kita akan menampilkan 3 field yang telah kita sembunyikan dan sebaliknya kita akan menyembunyikan field @+id/etName. Dan juga kita akan mengganti icon dari tombol @+id/imgBtnToggleName menjadi icon versi terbalik.

Buka file LinearLayoutActivity.kt laku ikuti langkah-langkah berikut:

1. Mempersiapkan variabel

...
class LinearLayoutActivity : AppCompatActivity() {

    var btnToggleName: ImageButton? = null
    var etName: EditText? = null
    var etFirstName: EditText? = null
    var etLastName: EditText? = null
    var etNickName: EditText? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_linear_layout)

        btnToggleName = findViewById(R.id.imgBtnToggleName)
        etName = findViewById(R.id.etName)
        etFirstName = findViewById(R.id.etFirstName)
        etLastName = findViewById(R.id.etLastName)
        etNickName = findViewById(R.id.etNickName)
    }
}

2. Membuat fungsi `toggleName(view: View)`

fun toggleName (view: View) {
    // di sini nanti kita akan menulis logic-nya
}

3. Memanggil fungsi `toggleName` ketika tombol diklik

<!-- File res/layout/activity_linear_layout.xml -->
<ImageButton
    android:id="@+id/imgBtnToggleName"
    ...
    android:onClick="toggleName"
    ...></ImageButton>

4. Menampilkan 3 field yang tersembunyi

fun toggleName (view: View) {
    if (etName?.visibility == View.VISIBLE) {
        etName?.visibility = View.GONE
        etFirstName?.visibility = View.VISIBLE
        etLastName?.visibility = View.VISIBLE
        etNickName?.visibility = View.VISIBLE
        btnToggleName?.setImageResource(R.drawable.ic_expand_less_near_black_24dp)
        etFirstName?.requestFocus()
    } else {
        // untuk menyembunyikan 3 field 
        // dan mengembalikan semua seperti semula
    }
}

5. Menyembunyikan lagi 3 field yang tersembunyi

fun toggleName (view: View) {
    if (etName?.visibility == View.VISIBLE) {
        ...
    } else {
        etName?.visibility = View.VISIBLE
        etFirstName?.visibility = View.GONE
        etLastName?.visibility = View.GONE
        etNickName?.visibility = View.GONE
        btnToggleName?.setImageResource(R.drawable.ic_expand_more_near_black_24dp)
        etName?.requestFocus()
    }
}

Kesimpulan

Kita telah menyelesaikan pembelajaran LinearLayout pada seri tutorial ini. Insyaallah pada tutorial selanjutnya kita akan membuat struktur layout yang sama persis dengan yang telah kita buat ini, hanya saja kita akan membuatnya dengan RelativeLayout. Setellah itu insyaallah kita lanjut dengan ConstraintLayout –yang mana itu disarankan oleh google sendiri.

Kode Sumber Lengkap

File LinearLayoutActivity.kt

package com.jagongoding.belajarlayoutdasar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.EditText
import android.widget.ImageButton

class LinearLayoutActivity : AppCompatActivity() {

    var btnToggleName: ImageButton? = null
    var etName: EditText? = null
    var etFirstName: EditText? = null
    var etLastName: EditText? = null
    var etNickName: EditText? = null


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_linear_layout)

        btnToggleName = findViewById(R.id.imgBtnToggleName)
        etName = findViewById(R.id.etName)
        etFirstName = findViewById(R.id.etFirstName)
        etLastName = findViewById(R.id.etLastName)
        etNickName = findViewById(R.id.etNickName)
    }

    fun toggleName (view: View) {
        if (etName?.visibility == View.VISIBLE) {
            etName?.visibility = View.GONE
            etFirstName?.visibility = View.VISIBLE
            etLastName?.visibility = View.VISIBLE
            etNickName?.visibility = View.VISIBLE
            btnToggleName?.setImageResource(R.drawable.ic_expand_less_near_black_24dp)
            etFirstName?.requestFocus()
        } else {
            etName?.visibility = View.VISIBLE
            etFirstName?.visibility = View.GONE
            etLastName?.visibility = View.GONE
            etNickName?.visibility = View.GONE
            btnToggleName?.setImageResource(R.drawable.ic_expand_more_near_black_24dp)
            etName?.requestFocus()
        }
    }
}

File activity_linear_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".LinearLayoutActivity"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/imgName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_person_near_black_24dp"></ImageView>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:layout_marginRight="16dp"
                    android:orientation="vertical">

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

                    <EditText
                        android:id="@+id/etFirstName"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="First Name"
                        android:visibility="gone"></EditText>

                    <EditText
                        android:id="@+id/etLastName"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:hint="Last Name"
                        android:visibility="gone"></EditText>

                    <EditText
                        android:id="@+id/etNickName"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:hint="Nick Name"
                        android:visibility="gone"></EditText>
                </LinearLayout>

                <ImageButton
                    android:id="@+id/imgBtnToggleName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:onClick="toggleName"
                    app:srcCompat="@drawable/ic_expand_more_near_black_24dp"></ImageButton>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgPhone"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_phone_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etPhone"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:inputType="phone"
                    android:hint="Phone"></EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgEmail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_email_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etEmail"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:inputType="textEmailAddress"
                    android:hint="Email"></EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgWork"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_business_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etWork"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:hint="Work"></EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgGroups"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_people_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etGroups"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:hint="Groups"></EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgAddress"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_location_on_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etAddress"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:hint="Address"></EditText>
            </LinearLayout>

        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Cancel"></Button>
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Save"></Button>
    </LinearLayout>
</LinearLayout>