[Bagian 3] Jetpack Compose — Migrasi Komponen View (Input Text) pada Existing Layout

Pada artikel sebelumnya telah dijelaskan mengenai setup pada existing project yang akan dimigrasi. Jika anda belum membaca artikel sebelumnya, silakan kunjungi terlebih dahulu artikel sebelumnya untuk memahami lebih dalam proses migrasi project ini.
Bagian 1: Jetpack Compose — Pengenalan
Bagian 2: Jetpack Compose — Persiapan Migrasi Existing Layout to Compose
Bagian 3: Jetpack Compose — Migrasi Komponen View (Input Text) pada Existing Layout
Bagian 4: Jetpack Compose — Mengimplementasi Compose View dalam ViewGroup

Seperti yang telah dibahas pada artikel sebelumnya bahwa dalam melakukan migrasi projek ke Compose dapat dilakukan dengan menggunakan ComposeView dan AndroidView. Untuk yang pertama akan coba implementasi adalah ComposeView. Namun terdapat 2 mekanisme yang perlu diperhatikan dalam melakukan migrasi ke Compose.

1. Melakukan migrasi dari komponen terkecil yaitu berupa view seperti (TextView, ImageView, Button, EditText) menjadi componen Widget pada compose seperti (Text, Image, Button, TextField), mekanisme ini biasa disebut sebagai Bottom-up.
2. Melakukan migrasi dari komponen terbesar yaitu berupa viewgroup seperti (LinearLayout, RecyclerView) menjadi komponen compose (Column, Row, LazyList), mekanisme ini biasa disebut sebagai Top-Down.

Untuk mempelajari proses migrasi secara perlahan, mari kita mulai dengan menggunakan mekanisme Bottom-up. Sebelumnya jangan lupa clone starter code yang dapat di download pada link berikut, dan pilih branch before-migrate sebagai starter code.

Compile starter code maka akan muncul tampilan layout yang nantinya akan kita migrasi. Tampilannya seperti dibawah ini.

Untuk memudahkan kita dalam menyusun layout compose nantinya dengan menggunakan mekanisme Bottom-up kita bisa membuat komponen Input Text terlebih dahulu. Jika diperhatikan terdapat dua input text yang memiliki desain yang mirip. Sehingga kita bisa membuat base widget untuk input text agar lebih reusable dan meringkas penulisan kode. Untuk detailnya perhatikan langkah — langkah berikut ini :

1. Buat duplicate color pada sebuah kotlin file agar lebih mudah digunakan saat membuat komponen compose. Buat sebuah package dengan nama theme, selanjutnya buat file Color.kt pada folder theme, seperti dibawah ini.

2. Buat duplicate color.xml pada file Color.kt seperti dibawah ini.

color.xml

Color.kt

3. Selanjutnya buat base widget untuk input text seperti dibawah ini, namun sebagai awal buat package widget dan tambahkan file InputText.kt pada widget package.

Input Text

widget package

Sebagai detail referensi setiap atribut (color, radius, margin, etc) dari widget yang akan dibuat dapat menggunakan view yang ada di xml file. Perhatikan view code TextInputField dibawah ini.

TextInputField

4. Pada file InputText.kt buatlah composable function untuk InputText compose widget dengan nama InputTextField. Composable function adalah blok penyusun yang digunakan untuk membuat user interface untuk aplikasi yang dibangun dengan Jetpack Compose. Untuk membuat sebuah composable function diperlukan @Composable, namun terdapat shorcut yang mempermudah jika menggunakan ketik saja “comp” pada kotlin file anda dan klik enter, seperti dibawah ini.

5. Tambahkan beberapa parameter pada function InputTextField agar mudah di customize saat digunakan nantinya.

@Composable
fun InputTextField(
    modifier: Modifier,
    hint: String,
    type: KeyboardType,
    capitalization: KeyboardCapitalization, 
    color: Color
) {}

6. Pada komponen input text terdapat sebuah perubahan value pada widget sehingga diperlukan sebuah variable yang dapat menyimpan perubahan value pada widget, buatlah dengan format dibawah ini.

var inputValue by remember { mutableStateOf(TextFieldValue()) }

7. Terdapat sebuah tipe input text yang harus dibuat yaitu dengan toogle password dengan kodisi hide dan show. Sehingga diperlukan sebuah variable yang digunakan untuk menyimpan perubahan status toggle. Maka buatlah variable seperti dibawah ini.

var passwordMode by rememberSaveable { mutableStateOf(false) }

8. Untuk membuah sebuah komponen Input Text kita dapat menggunakan TextField(). Tambahkan attribut value untuk menerima input dari user, serta onValueChange untuk menerima perubahan value pada textfield.

TextField(
  value = inputValue,
  onValueChange = { inputValue = it })

9. Selanjutnya tambahkan label text dengan parameter hint pada InputTextField function seperti dibawah ini. Label ini membutuhkan text sehingga hint parameter dimasukkan pada widget text.

TextField(
    value = inputValue,
    onValueChange = { inputValue = it },
    label = {
        Text(
            text = hint
        )
    })

10. Pada kondisi tertentu textfield akan digunakan untuk menerima input berupa password dengan kondisi hidden sehingga perlu menggunakan attribut visualTransformation seperti dibawah ini.

TextField(
    value = inputValue,
    onValueChange = { inputValue = it },
    label = {
        Text(
            text = hint
        )
    },
    visualTransformation = if (passwordMode) VisualTransformation.None else PasswordVisualTransformation())

11. Untuk menambahkan sebuah icon diakhir textfield pada kondisi input password maka tambahkan attribut trailingIcon. Tambahkan sebuah implementasi logika bahwa icon ini hanya muncul jika KeyboardType yang digunakan adalah password if (type == KeyboardType.Password) {}.

TextField(
    value = inputValue,
    onValueChange = { inputValue = it },
    label = {
        Text(
            text = hint
        )
    },
    visualTransformation = if (passwordMode) VisualTransformation.None else PasswordVisualTransformation(),
    trailingIcon = {
        if (type == KeyboardType.Password) {
            val image =
                if (passwordMode) Icons.Filled.Visibility else Icons.Filled.VisibilityOff
            val desc = if (passwordMode) "Hide Password" else "Show Password"
            IconButton(onClick = { passwordMode = !passwordMode }) {
                Icon(imageVector = image, contentDescription = desc)

            }
        }
    })

12. Buatlah textfield hanya menerima input dalam satu baris dengan menambahkan komponen singleLine seperti dibawah ini.

    singleLine = true

13. Tambahkan padding disekeliling input filed serta tambahkan input type dengan parameter type pada InputField function.

keyboardOptions = KeyboardOptions(
    capitalization = capitalization, autoCorrect = true, keyboardType = type
),

14. Lalu buat agar textfield berbentuk circular rectangle dengan menambahkan komponen shape dan value RoundedCornerShape. Atur radius pada setiap corner 15 dp.

shape = RoundedCornerShape(15.dp),

15. Hilangkan underline pada mode disable, focused dan unfocused pada textfield dengan mengatur warna transparent, serta atur warna background dari textfield dengan parameter color pada InputTextField function.

colors = TextFieldDefaults.textFieldColors(
    unfocusedIndicatorColor = Color.Transparent,
    focusedIndicatorColor = Color.Transparent,
    disabledIndicatorColor = Color.Transparent,
    containerColor = color
)

16. Untuk melihat preview dari setiap widget, tambahkan code dibawah ini.

@Preview
@Composable
fun PreviewWidget() {
    Column() {
        InputTextField(
            modifier = Modifier,
            hint = "Enter Username",
            type = KeyboardType.Text,
            capitalization = KeyboardCapitalization.None, color = White
        )
        InputTextField(
            modifier = Modifier,
            hint = "Password",
            type = KeyboardType.Password,
            capitalization = KeyboardCapitalization.None, color = White
        )
    }
}

Sehingga keseluruhan codenya akan menjadi seperti berikut.

Salah satu widget dari screen yang akan dimigrasi telah selesai, untuk proses selanjutnya akan dibahas pada artikel berikutnya. Sampai jumpa di artikel berikutnya!