Android Fundamentals 05.2 : Cards and Colors

Inas

Published in

Android Studio

6 min readMar 9, 2019

Alat dan aplikasi yang diperlukan:

PC/Desktop dengan Sistem Operasi Windows
Java Development Kit (JDK) versi 11
Android Studio versi 3.3

Tugas 1 : Download Starter Code

1.1 Buka dan Jalankan Proyek MaterialMe

Download proyek MaterialMe-Starter lalu jalankan melalui Android Studio.

Tugas 2 : Menambahkan CardView dan Images

2.1 Menambahkan CardView

Buka file build.gradle (Module:app) , tambahkan kode berikut pada bagian depedencies.

implementation 'com.android.support:cardview-v7:26.1.0'

2. Buka file list_item.xml dan lakukan koding berikut.

3. Jalankan aplikasi.

2.2 Mendownload Gambar

Download file banner images zip.
Buat folder baru bernama drawable pada direktori app > src > main > res. Copy-paste gambar dari folder banner images yang didownload sebelumnya ke folder drawable.

3. Definisikan array pada file strings.xml dengan kode seperti berikut.

2.3 Memodifikasi Obyek Sport

Pada file Sport.java, tambahkan kode seperti berikut.

2.4 Membenahi Method initializedata()

Pada bagian initializeData() file MainActivity.java, tambahkan kode berikut.

2.5 Menambahkan ImageView ke Daftar Item

Ubah LinearLayout dalam file list_item.xml menjadi RelativeLayout. Hapus atribut android:orientation.

2. Tambahkan ImageView pada RelativeLayout dengan atribut seperti berikut.

3. Tambahkan atribut seperti berikut pada TextView dengan id title.

4. Tambahkan atribut berikut pada TextView dengan id newsTitle.

5. Tambahkan atribut berikut pada TextView dengan id subTitle.

2.6 Memuat Gambar Menggunakan Glide

Buka file build.gradle (Module: app) , tambahkan depedency Glide pada bagian depedencies.

implementation 'com.github.bumptech.glide:glide:3.7.0'

2. Buka file SportsAdapter.java dan tambahkan kode dalam variabel ViewHolder untuk ImageView.

3. Jalankan aplikasi.

Tugas 3 : Membuat Swipeable, Moveable, dan Clickable CardView

3.1 Mengimplementasikan Swipe untuk Menghapus

Buka file MainActivity.java dan tambahkan kode berikut setelah method initializeData() pada onCreate() .

ItemTouchHelper helper = new ItemTouchHelper(new 
                             ItemTouchHelper.SimpleCallback() {
    @Override
    public boolean onMove(RecyclerView recyclerView, 
                    RecyclerView.ViewHolder viewHolder, 
                    RecyclerView.ViewHolder target) {
                return false;
            }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, 
                                               int direction) {

    }
});

2. Selanjutnya, implementasikan kode berikut.

ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper
                .SimpleCallback(0, ItemTouchHelper.LEFT |
                ItemTouchHelper.RIGHT) {

3. Kemudian, tambahkan kode berikut.

mSportsData.remove(viewHolder.getAdapterPosition());

4. Tambahkan kode berikut untuk mengubah posisi indeks ketika indeks satu dihapus.

mAdapter.notifyItemRemoved(viewHolder.getAdapterPosition());

5. Untuk memanggil RecyclerView kembali, tambahkan kode berikut.

helper.attachToRecyclerView(mRecyclerView);

6. Jalankan aplikasi. Maka, kini setiap indeks dapat dihapus dengan cara diswipe ke kanan atau ke kiri.

3.2 Mengimplementasikan Drag and Drop

Ubah argumen SimpleCallBack agar bisa ke seua arah dengan memasukkan kode berikut.

ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper
.SimpleCallback(ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT | 
ItemTouchHelper.DOWN | ItemTouchHelper.UP, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT) {

2. Pada method onMove() , tambahkan kode berikut.

int from = viewHolder.getAdapterPosition();
int to = target.getAdapterPosition();

3. Swap item pada dataset dengan memanggil Collections.swap() .

Collections.swap(mSportsData, from, to);

4. Ubah statement return menjadi true; .

mAdapter.notifyItemMoved(from, to);
return true;

5. Jalankan aplikasi. Kini, setiap item bisa didrag-and-drop ke atas maupun ke bawah.

3.3 Mengimplementasikan Layout DetailActivity

Buat file Activity baru bernama DetailActivity dengan memilih pada menu bar File > New > Activity > Empty Activity.

2. Pada file activity_detail.xml, berikan kode seperti berikut.

3.4 Mengimplementasikan Detail View dan Click Listener

Pada file SportsAdapter, tambahkan kode implementasi seperti berikut.

class ViewHolder extends RecyclerView.ViewHolder 
                              implements View.OnClickListener{
    // Rest of ViewHolder code.
    // 
    @Override
    public void onClick(View view) {

    }
}

2. Tambahkan OnClickListener pada ViewHolder.

ViewHolder(View itemView) {
    super(itemView);

    //Initialize the views
    mTitleText = itemView.findViewById(R.id.title);
    mInfoText = itemView.findViewById(R.id.subTitle);
    mSportsImage = itemView.findViewById(R.id.sportsImage);

    // Set the OnClickListener to the entire view.
    itemView.setOnClickListener(this);
}

3. Pada method onClick() , tambahkan kode berikut.

Sport currentSport = mSportsData.get(getAdapterPosition());

4. Kemudian, tambahkan kode berikut.

Intent detailIntent = new Intent(mContext, DetailActivity.class);
detailIntent.putExtra("title", currentSport.getTitle());
detailIntent.putExtra("image_resource", 
                             currentSport.getImageResource());
mContext.startActivity(detailIntent);

5. Buka file DetailActivity.java dan tambahkan kode berikut.

TextView sportsTitle = findViewById(R.id.titleDetail);
ImageView sportsImage = findViewById(R.id.sportsImageDetail);sportsTitle.setText(getIntent().getStringExtra("title"));Glide.with(this).load(getIntent().getIntExtra("image_resource",0))
.into(sportsImage);

6. Jalankan aplikasi. Berikut ini adalah tampilan ketika salah satu item diklik.

Tugas 4 : Menambahkan FAB dan Memilih Color Palette untuk Design Material

4.1 Menambahkan FAB

Buka file build.gradle (Module: app) dan tambahkan kode berikut.

implementation 'com.android.support:design:27.1.0'

2. Tambahkan FAB dengan klik kanan pada folder res > New > Vector Asset. Pilih ikon refresh. Kemudian, klik Next.

3. Buka file activity_main.xml dan tambahkan elemen FloatingActionButton beserta atributnya.

4. Buka file MainActivity.java dan tambahkan method resetSports() dengan statement untuk memanggil initializeData() untuk mereset data.