[Bagian 4] Jetpack Compose — Mengimplementasi Compose View dalam ViewGroup
Hi Folks, ini adalah bagian terakhir dari seri migrasi existing view ke compose. Membaca seri sebelumnya sangat disarankan, jika anda belum membaca seri sebelumnya kunjungi link berikut:
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
Sebelumnya jangan lupa clone starter code yang dapat di download pada link berikut, dan pilih branch before-migrate sebagai starter code. Pada artikel sebelumnya telah dijelaskan detail pembuatan custom widget dengan menggunakan compose.
Selanjutnya pada artikel ini, kita hanya perlu menambahkan component custom widget pada compose view. Terdapat 2 component custom widget yang telah dibuat yaitu input text dan image button, sehingga kita perlu mengganti view input text dan button pada xml view dengan custom widget yang telah dibuat.
Untuk lebih detailnya perhatikan langkah — langkah berikut :
- Buka activity_main.xml lalu hapus komponen text input field view berikut
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/el_username"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:background="@color/backgroundColor"
app:boxCornerRadiusBottomEnd="15dp"
app:boxCornerRadiusBottomStart="15dp"
app:boxCornerRadiusTopEnd="15dp"
app:boxCornerRadiusTopStart="15dp"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_subtitle">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="@color/white"
android:hint="@string/enter_username" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/el_password"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginTop="15dp"
android:background="@color/backgroundColor"
app:boxCornerRadiusBottomEnd="15dp"
app:boxCornerRadiusBottomStart="15dp"
app:boxCornerRadiusTopEnd="15dp"
app:boxCornerRadiusTopStart="15dp"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:layout_constraintEnd_toEndOf="@+id/el_username"
app:layout_constraintStart_toStartOf="@+id/el_username"
app:layout_constraintTop_toBottomOf="@+id/el_username"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/backgroundColor">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="@color/white"
android:hint="@string/password"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>Lalu tambahkan komponen compose view dengan code berikut sebagai pengganti komponen view input text.
<androidx.compose.ui.platform.ComposeView
android:id="@+id/input_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
app:layout_constraintBottom_toTopOf="@id/tv_recovery"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_subtitle" />2. Selain komponen input text, hapus kode untuk komponen Image Button berikut.
<FrameLayout
android:id="@+id/fl_google"
android:layout_width="70dp"
android:layout_height="50dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:background="@drawable/image_background"
app:layout_constraintStart_toStartOf="@+id/btn_signin"
app:layout_constraintTop_toBottomOf="@+id/tv_continue">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp"
android:src="@drawable/google" />
</FrameLayout>
<FrameLayout
android:id="@+id/fl_facebook"
android:layout_width="70dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:background="@drawable/image_background"
app:layout_constraintEnd_toEndOf="@+id/btn_signin"
app:layout_constraintTop_toBottomOf="@+id/tv_continue">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp"
android:scaleType="centerCrop"
android:src="@drawable/fb" />
</FrameLayout>
<FrameLayout
android:id="@+id/fl_apple"
android:layout_width="70dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@drawable/image_background"
app:layout_constraintEnd_toStartOf="@+id/fl_facebook"
app:layout_constraintStart_toEndOf="@+id/fl_google"
app:layout_constraintTop_toBottomOf="@+id/tv_continue">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp"
android:scaleType="centerCrop"
android:src="@drawable/apple" />
</FrameLayout>Lalu tambahkan komponen compose view dengan code berikut sebagai pengganti komponen view image button.
<androidx.compose.ui.platform.ComposeView
android:id="@+id/button_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="@id/btn_signin"
app:layout_constraintStart_toStartOf="@id/btn_signin"
app:layout_constraintTop_toBottomOf="@id/tv_continue" />Sehingga kodenya lengkapnya akan menjadi sebagai berikut.
3. Tambahkan viewbinding support untuk menginisialisasi id compose view yang disematkan pada file xml pada activity class. Buka .gradle file lalu tambahkan code berikut lalu sync.
buildFeatures {
viewBinding true
}4. Inisialisasi layout activity_main.xml pada activty class seperti dibawah ini.
- Buat variable mainBinding
private lateinit var mainBinding: ActivityMainBinding- Tambahkan value pada mainBinding didalam onCreate function
mainBinding = ActivityMainBinding.inflate(layoutInflater)- Lalu tambahkan value pada setContentView seperti dibawah ini
setContentView(mainBinding.root)5. Untuk langkah selanjutnya panggil compose view dengan id inputText yang sebelumnya telah disematkan pada xml file. Lalu tambahkan setContent untuk menambahkan komponen compose pada compose view seperti code dibawah ini.
mainBinding.inputText.setContent {}6. Karena InputText bersusun secara vertical, gunakan column untuk menyusun layout pada compose view. Lalu panggil widget InputTextField dan tambahkan parameter sesuai dengan tipe input dengan beberapa parameter penting sebagai berikut.
- hint, untuk menambahkan hint text
- type, untuk menambahkan jenis input text
- color, untuk mengatur warna container pada input text.
mainBinding.inputText.setContent {
Column(modifier = Modifier) {
InputTextField(
modifier = Modifier,
hint = "Username",
type = KeyboardType.Text,
capitalization = KeyboardCapitalization.None,
color = White
)
InputTextField(
modifier = Modifier,
hint = "Enter Password",
type = KeyboardType.Password,
capitalization = KeyboardCapitalization.None,
color = White
)
}
}7. Lakukan hal yang sama pada komponen compose view dengan id buttonImage, panggil id dan tambahkan setContent. Karena Image button disusun secara horizontal gunakan komponen Row untuk menyusun layout pada compose view. Panggil widget ImageSignIn dan tambahkan value pada parameter image. Selain itu untuk membuat setiap button memiliki jarak yang seimbang tambahkan attribut arangament secara horizontal dengan value ScapeEvenly.
mainBinding.buttonImage.setContent {
Row(horizontalArrangement = Arrangement.SpaceEvenly) {
ImageSignIn(modifier = Modifier, image = R.drawable.google)
ImageSignIn(modifier = Modifier, image = R.drawable.apple)
ImageSignIn(modifier = Modifier, image = R.drawable.fb)
}
}Sehingga keseluruhan codenya akan menjadi seperti dibawah ini.
Lalu jika dicompile UI telah dimigrasi akan memberikan tampilan yang sama dengan ketika sebelum dimigrasi tetapi secara komponen penyusun Input Text dan Image Button dibangun dengan menggunakan compose. Mudah bukan :) https://github.com/veroanggra/MigratingToComposeSample.git
