android 101 : Membuat Halaman Dengan Colapsable Toolbar, Tab, dan List

I’m new in android, so I try to note everything I’ve done. Ketika saya melakukan pencarian di google tentang android tutorial, hasil pencarian pertama yg muncul salah satunya adalah android developer link. Saya jelas langsung menuju halaman tersebut, karena itu merupakan official android site.

Hal pertama yang saya lakukan adalah menginstall android studio (saya tidak akan membahasnya disini). Ketika sekilas membaca tentang tutorial nya, dan dari situ saya memutuskan untuk mencoba membuat satu halaman seperti halaman whatsapp, dimana halaman tersebut mempunyai tab dan list, dan ketika discroll ke atas toolbar nya menghilang (material design), seperti gambar di bawah ini.

Setelah menginstall android studio (versi 1.4), saya membuat new project dengan defaut blank activity. Class, file xml, semua di generate oleh android studio. Mungkin ini salah satu kelebihan IDE, sekaligus kekurangan kali yaa, dengan digenerate, kita dimudahkan, tapi sekaligus, kalau buat saya pribadi, ini rada menyesatkan, karena saya masih belum paham apa saya yang dibutuhkan, file xml apa saja ini class apa ini @_@ hahhahaa (nanti saya bahas, insyaAllah ^^v)

Setelah new project dengan blank activity saya digenerate, saya langsung membuka class activity dan xml dari activity saya. Ketika saya membuka xml activity (activity_main.xml) di bagian preview, ada yg aneh, ada error :

Ketika saya google, ternyata itu adalah error dari android studio nya terkait dengan proses rendering. Setelah googling untuk menghilangkan error tersebut, sepemahaman saya, yang menyebabkan error adalah karena theme nya. Di versi appCompat yang paling baru, ActionBar digantikan dengan Toolbar. Saya kemudian menuju style.xml dan mengganti theme menjadi :

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Refresh preview dan error nya pun hilang.

Langkah selanjut nya adalah, saya ingin membuat halaman seperti whatsapp tadi, setelah googling dan baca-baca, ada beberapa component (saya kurang tahu sebutan ini tepat atau tidak) yang saya perlukan.

1. CoordinatorLayout, mengapa saya menggunakan coordinator layout, karena dari yangg saya baca di sini, CoordinatorLayout merupakan super power frame layout yang biasa digunakan sebagai top level application decor (disclaimer : saya belum membandingkan semua layout).
2. Agar action bar bisa hidden saat di scroll (implementasi dari material design) saya membutuh kan AppBarLayout.
3. Toolbar, mengutip penjelasan android developer blog.
   
   In this release, Android introduces a new Toolbar widget. This is a generalization of the Action Bar pattern that gives you much more control and flexibility. Toolbar is a view in your hierarchy just like any other, making it easier to interleave with the rest of your views, animate it, and react to scroll events. You can also set it as your Activity’s action bar, meaning that your standard options menu actions will be display within it.
4. TabLayout, cukup jelas saya rasa :)
5. ViewPager, tempat/ container untuk fragment yang akan kita buat. ViewPager ini nantinya akan diset kedalam tabLayout.

Component 1 - 5, ada di activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.antin.fragment.activity.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            app:tabGravity="fill"
            app:tabMode="fixed" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

Khusus untuk TabLayout, tabMode fixed akan membuat lebar dari tab sesuai dengan lebar layar, dan itu fixed width (tidak bisa di scroll ke samping).

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            app:tabGravity="fill"
            app:tabMode="fixed" />

6. Fragment, fragment merupakan bagian dari Activity, kita dapat menggunakan banyak fragment dalam satu activity. Kelebihannya adalah ketika membutuhkan banyak pergantian UI dalam satu Activity. Lifecycle nya sendiri mengikuti activity parent nya.
7. RecycleView, merupakan tempat (wadah) yang akan digunakan untuk menempatkan list of object yang akan ditampilkan.
8. PagerAdapter, merupakan base class yang digunakan untuk mem-populate fragment yg akan kita set di ViewPager.
9. ViewHolder, merupakan tempat yang digunakan untuk menaruk component-component list yg akan dibuat (misal dalah contoh ini sayamembutuhkan TextView dalam untuk menampilkan list nama).

Contoh layout fragment yang didalam nya terdapat recycler view :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <android.support.v7.widget.RecyclerView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Contoh fragment view holder :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/txtName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"/>

</LinearLayout>

Secara garis besar class yang dibutuhkan adalah seperti gambar di bawah ini, penjelasan tentang detail class nya akan saya bahas di posting-an saya selanjut nya. Namun jangan khawatir source lengkap bisa di unduh disini. ^^v

Dan hasil nya adalah :



see you on my next post, happy coding \(^^)/

disclamer : I'm android new bie. Know nothing about android development.

Customize listview android

Pada blog kali ini saya akan membahas bagaimana customize listview di android.  List view adalah widget untuk menampilkan data dalam bentuk list yang dapat di-scroll.

1. Langkah pertama buat new Android project.
2. Pada activity.xml tambahkan komponen listview
   
3. Create file list_item_adapter.xml
   
4. Create class SampleAdapter
   
5. Sisipkan code seperti gambar dibawah pada MainActivity.java 
   
6. Langkah terakhir, jalankan di emulator:
   

Sekian blog singkat saya, semoga bermanfaat :)

Source code:

https://github.com/andywiranata/SampleCustomListview

Android UI Tips & Tricks : Multiple-Choice List

Selamat berjumpa kembali, pada kesempatan kali ini saya akan menjelaskan sebuah fitur dari komponen ListView pada platform android yang (mungkin) jarang di ketahui secara umum.

ListView adalah sebuah komponen antar-muka yang sangat fundamental pada platform android yang biasa digunakan untuk menampilkan data sebagai list yang dapat di scroll (apabila data terlalu banyak sehingga tidak dapat di tampilkan seluruhnya pada layar).

Secara default, mode seleksi pada ListView adalah "single selection", yang berarti user hanya dapat memilih satu data. Namun komponen ini juga dapat di konfigurasi agar user dapat memilih lebih dari satu data (multiple selection).

Caranya sangat mudah, yang harus anda lakukan adalah memanggil setChoiceMode dengan parameter CHOICE_MODE_MULTIPLE sehingga mode seleksinya menjadi "multiple selection". Dan yang tidak kalah pentingnya adalah, gunakan layout yang sesuai untuk list item-nya, dimana ini bertujuan agar terdapat indikator yang menunjukkan bahwa item pada list telah di seleksi.

Enough talk, let's get down to code!

Buat sebuah project baru, tambahkan sebuah Activity dengan ListView sebagai komponen utamanya, atau anda dapat menggunakan ListActivity sebagai alternatif.

Set ListView selection mode menjadi multiple selection.

Buat string-array resource yang akan digunakan sebagai data dummy.

Buat ArrayAdapter yang akan digunakan sebagai sumber data dari ListView, dengan parameter sebagai berikut:

• resource id: android.R.layout.simple_list_item_multiple_choice
• data: string array yang sudah di buat sebelumnya

(Note, saya menggunakan layout yang telah disediakan oleh android, layout ini menampilkan checkmark/centang sebagai indikator)

Set adapter tersebut ke komponen ListView

Selamat!, anda sudah berhasil membuat multiple-choice list sederhana di platform android.

Sebagai bukti bahwa ini berjalan sesuai dengan tujuan, kita akan membuat sebuah tombol (Button) di mana saat tombol ini di klik akan menunjukkan item-item yang terseleksi pada list.

Karena saya menggunakan ListActivity, maka untuk mempersingkat, saya letakkan saja tombol tersebut sebagai Header pada komponen ListView.

Pada method showSelection, Tambahkan prosedur untuk melakukan listing terhadap item-item yang terseleksi pada list. For simplicity, kita gunakan Toast saja

Saat dijalankan maka kurang lebih akan tampil seperti di bawah: