Mengintip Komponen Baru di Android Support Library v28

Belum lama ini versi 28 dari Android support library telah diumumkan. Di versi yang masih dalam tahap alpha ini ada beberapa penambahan fitur yang menarik untuk kita bahas.

Material Button

Material Button adalah widget yang bisa dipakai untuk membuat button dengan gaya material. kelas MaterialButton meng-extends AppCompatButton yang pasti sedang atau sudah pernah pembaca pakai. Perbedaan utama antara button yang biasa kita pakai dengan Material Button ini adalah style yang sudah material design tanpa perlu pengaturan apapun.

Tombol di atas bisa ditambah dengan kode:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

Secara otomatis, kelas MaterialButton akan memakai colorAccent untuk warna latarnya dengan warna putih untuk warna teks.

Kita bisa menambah pengaturan tambahan jika mau untuk memanipulasi tampilan widget ini. Beberapa atribut tambahan yang bisa dipakai diantaranya:

app:icon - untuk menentukan sebuah drawable yang bisa ditampilkan diposisi start.

app:iconTint - Dipakai untuk mewarnai gambar ikon yang ditambahkan di app:icon.

app:iconTintMode - Dipakai untuk menentukan mode yang dipakai iconTint.

app:iconPadding - Memberikan padding untuk gambar ikon.

app:additionalPaddingLeftForIcon - Memberikan padding ke sebelah kiri gambar ikon.

app:additionalPaddingRightForIcon - Memberikan padding ke sebelah kanan gambar ikon.

app:rippleColor - Menentukan warna yang untuk efek ripple.

app:backgroundTint - Dipakai untuk mengubah warna latar button. Jangan gunakan atribut background untuk mencegah bentrok.

app:backgroundTintMode - Menentukan mode untuk background tint.

app:strokeColor - Warna yang dipakai untuk stroke (garis diluar button).

app:strokeWidth - Menentukan tebal stroke.

app:cornerRadius - Menentukan radius untuk sudut-sudut button.

Chip

Chip dipakai untuk menampilkan kumpulan teks yang bisa ditambah atau dibuang oleh user. Biasanya dipakai untuk menampilkan tag atau yang sejenisnya.

Kita bisa menambah sebuah Chip ke layout sebagai berikut menggunakan atribut app:chipText untuk menuliskan teks didalamnya.

<android.support.design.chip.Chip
    android:id="@+id/some_chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="This is a chip" />

Ada juga beberapa atribut yang bisa dipakai:

app:checkable - Untuk menentukan apakah chip bisa di toggle dengan status selected/not selected. Jika di disabled, maka ia bertingkah seperti sebuah button.

app:chipIcon - Untuk menampilkan gambar di dalam chip.

app:closeIcon - Untuk menampilkan sebuah ikon close di dalam chip.

Chip Group

Jika ada banyak chip, tentu kita ingin akan chip-chip tersebut terkelompokkan. Oleh karena itu, kita bisa memakai ChipGroup untuk mengelompokkan mereka.

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="is" />

    // more chips...

</android.support.design.chip.ChipGroup>

Tanpa perlu mengatur atribut apapun ChipGroup sudah bekerja dengan baik. Tapi, jika ingin memberikan jarak tertentu untuk chip-chip yang ada di dalamnya, kita bisa memanfaatkan atribut-atribut:

• app:chipSpacing - Jarak vertikal dan horizontal
• app:chipSpacingHorizontal - Jarak horizontal saja
• app:chipSpacingVertical - Jarak vertikal saja

Material Card View

Material Card View adalah komponen untuk menambahkan sebuah card view yang sudah ter-style dengan bagus dari sananya.

Card view ini bisa ditambahkan dengan kode:

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">
    ... child views ...
</android.support.design.card.MaterialCardView>

Bottom App Bar

Bottom App Bar adalah komponen baru yang memungkinkan kita untuk menampilkan komponen seperti toolbar di bagian bawah layout aplikasi kita.

Komponen ini bisa ditambahkan dengan kode XML:

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

Untuk bisa tampil (setidaknya di versi alpha), BottomAppBar memerlukan sebuah menu. Menu ini bisa ditambahkan lewat Java/Kotlin.

bottom_app_bar.replaceMenu(R.menu.main)	

BottomBar bisa diatur untuk bekerjasama dengan FAB melalui beberapa atribut.

app:fabAttached - Mengatur apakah FAB akan menempel dengan BottomBar atau tidak. Jika iya, maka FAB akan menempel di BottomBar seperti pada gambar di atas. Jika tidak maka FAB akan tetap melayang seperti biasa.

app:fabAlignmentMode - Menentukan posisi FAB yang menempela di BottomAppBar.

app:backgroundTint - Untuk mengganti warna latar BottomAppBar. Jangan gunakan atribut background agar view tetap stabil.

Penutup

Bagaimana coders? Tidak sabar ya menunggu Android support library yang baru ini untuk dirilis agar kita bisa memakai komponen yang sudah material dari sananya tanpa perlu banyak konfigurasi atau memasang library tambahan.

Sumber: Exploring Android