Promo Member Baru 40%! Program Full Stack Membership! Hanya 3 Hari! Klaim Promo
Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Mengintip Komponen Baru di Android Support Library v28

Ditulis oleh Takagi Fujimaru, dipublikasi pada 23 Apr 2018 dalam kategori Info
Mengintip Komponen Baru di Android Support Library v28 - CodePolitan.com

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.

img

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.

img

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

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

img

app:iconPadding - Memberikan padding untuk gambar ikon.

img

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

img

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

img

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.

img

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

app:strokeWidth - Menentukan tebal stroke.

img

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

img

Chip

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

img

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.

img

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

img

Chip Group

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

img

<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

img

Material Card View

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

img

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.

img

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.

img

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

img

img

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


background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP