Task 1: Download the starter code

1.1 Buka dan Jalankan Proyek Material Me

1. Unduh dan buka zip file MaterialMe-Starter.
2. Buka aplikasi di Android Studio.
3. Bangun dan jalankan aplikasi

1.2 Jelajahi Aplikasi

Sebelum membuat modifikasi pada aplikasi, jelajahi strukturnya saat ini. Strukturnya berisi elemen berikut:

Sport.java

SportsAdapter.java

MainActivity.java

strings.xml

list_item.xml

Task 2: Add a CardView and images

Di file build.gradle tingkat aplikasi Anda, tambahkan baris berikut ke blok dependensi:

2.1 Tambahkan CardView

compile 'com.android.support:cardview-v7:24.1.1'

Di file list_item.xml, kurung LinearLayout root dengan CardView dengan atribut berikut:

Hail running

2.2 Unduh gambar

CardView tidak dimaksudkan untuk dipakai secara eksklusif dengan teks biasa: CardView paling baik untuk menampilkan campuran konten. Anda bisa membuat aplikasi informasi olahraga ini lebih menarik dengan menambahkan gambar spanduk ke setiap baris!

Menggunakan gambar sangat berat untuk aplikasi Anda: framework Android harus memuat seluruh gambar ke dalam memori dengan resolusi penuh, meskipun aplikasi hanya menampilkan gambar kecil.

Dalam bagian ini, Anda akan mempelajari cara menggunakan pustaka Glide untuk memuat gambar berukuran besar secara efisien tanpa menghabiskan sumber daya atau bahkan membuat aplikasi aplikasi Anda crash karena pengecualian ‘Out of Memory’.

1. Unduh file zip gambar spanduk.
2. Salin file ini ke direktori res > drawable di aplikasi Anda.

Definisikan larik yang berisi semua jalur ke drawable sebagai item di file string.xml Anda. Pastikan larik dalam urutan yang sama dengan larik judul olahraga:

2.3 Modifikasi objek Sport

1. ambahkan variabel anggota integer ke objek Sport yang akan berisi sumber daya yang dapat digambar:

   private final int imageResource;

   

2. Modifikasi konstruktor sehingga akan mengambil sebuah integer sebagai parameter dan menetapkannya ke variabel anggota:

   Sport(String title, String info, int imageResource) {
      this.title = title;
      this.info = info;
      this.imageResource = imageResource;
   }

   

3. Buat etgter untuk integer sumber daya:

   public int getImageResource() {
      return imageResource;
   }
   
   

2.4 Perbaiki metode initializeData()

Di MainActivity.java, metode initializeData() sekarang rusak, karena konstruktor untuk objek Sport meminta sumber daya gambar sebagai parameter ketiga.

Struktur data yang mudah adalah menggunakan TypedArray. TypedArray memungkinkan menyimpan larik sumber daya XML lainnya. Dengan menggunakan TypedArray, Anda akan bisa memperoleh sumber daya gambar, serta judul dan informasi olahraga dengan menggunakan pengindeksan di loop yang sama.

1. Dalam metode initializeData(), dapatkan TypedArray id sumber daya dengan memanggil getResources().obtainTypedArray(), dan meneruskan nama larik sumber daya yang dapat digambar, yang Anda definisikan di file strings.xml:

   TypedArray sportsImageResources =
       getResources().obtainTypedArray(R.array.sports_images);
   

   Anda bisa mengakses elemen pada indeks i di TypedArray dengan menggunakan metode “get” yang sesuai, bergantung pada tipe sumber daya di larik. Dalam kasus spesifik ini, ini berisi ID sumber daya, sehingga Anda bisa menggunakan metode getResourceId().

2. Perbaiki kode di loop yang membuat objek Sport, dengan menambahkan ID sumber daya yang dapat digambar yang sesuai sebagai parameter ketiga dengan memanggil getResourceId() di TypedArray:

   for(int i=0;i<sportsList.length;i++){
      mSportsData.add(new Sport(sportsList[i],sportsInfo[i],    
          sportsImageResources.getResourceId(i,0)));
   }
   

3. Bersihkan data di TypedArray setelah Anda membuat ArrayList data Sport:

   sportsImageResources.recycle();

   

2.5 Tambahkan ImageView ke item daftar

1. Ubah LinearLayout di dalam file list_item.xml menjadi RelativeLayout, dan hapus atribut orientasi.
2. Tambahkan ImageView dengan atribut berikut:
   

   Atribut	Nilai
   android:layout_width	“match_parent”
   android:layout_height	“wrap_content”
   android:id	“@+id/sportsImage”
   android:adjustViewBounds	“true”

   Atribut adjustViewBounds membuat ImageView menyesuaikan batasnya untuk mempertahankan rasio aspek gambar.

3. Tambahkan atribut berikut ke TextView yang ada:

   TextView id: title	Atribut	Nilai
   	android:layout_alignBottom	“@id/sportsImage”
   	android:theme	“@style/ThemeOverlay.AppCompat.Dark”
   TextView id: newsTitle	Atribut	Nilai
   	android:layout_below	“@id/sportsImage”
   	android:textColor	“?android:textColorSecondary”
   TextView id: subTitle	android:layout_below

   

   2.6 Muat gambar menggunakan Glide

   Setelah mengunduh gambar dan menyiapkan ImageView, langkah berikutnya adalah memodifikasi SportsAdapter untuk memuat gambar ke dalam ImageView di onBindViewHolder(). Jika Anda mengambil pendekatan ini, Anda akan menemukan bahwa aplikasi Anda crash karena kesalahan “Out of Memory”. Framework Android harus terus-menerus memuat gambar ke dalam memori dengan resolusi penuh, apa pun ukuran layar ImageView.

   Ada sejumlah cara untuk mengurangi konsumsi memori saat memuat gambar, tetapi salah satu pendekatan yang paling mudah adalah menggunakan Image Loading Library seperti Glide, yang akan Anda lakukan di langkah ini. Glide menggunakan pemrosesan latar belakang, serta beberapa pemrosesan kompleks lain, untuk mengurangi kebutuhan memori pemuatan gambar. Ini juga menyertakan beberapa fitur yang berguna, seperti menampilkan gambar placeholder saat gambar yang diinginkan sedang dimuat.

   Catatan: Anda bisa mengetahui selengkapnya tentang mengurangi konsumsi memori di aplikasi Anda di panduan Menampilkan Bitmap.
   1. Tambahkan dependensi berikut untuk Glide, di file build.gradle tingkat aplikasi Anda:

      compile 'com.github.bumptech.glide:glide:3.5.2'
      

   2. Tambahkan variabel di kelas SportsAdapter, kelas ViewHolder untuk ImageView, dan lakukan inisialisasi di konstruktor ViewHolder:

      mSportsImage = (ImageView) itemView.findViewById(R.id.sportsImage);
      

   3. Tambahkan baris kode berikut ke onBindViewHolder() untuk mendapatkan sumber daya gambar dari objek Sport dan muat ke dalam ImageView menggunakan Glide:

      Glide.with(mContext).load(currentSport.getImageResource()).into(holder.mSportsImage);
      

      Begitulah cara memuat gambar dengan Glide. Glide juga memiliki beberapa fitur tambahan yang memungkinkan Anda mengubah ukuran, mentransformasi, dan memuat gambar dengan berbagai cara. Kunjungi laman GitHub Glide untuk mengetahui selengkapnya.

Hasil running

Task 3: Make your CardView swipeable, movable, and clickable

3.1 Implementasikan gesek untuk menutup

Android SDK menyertakan sebuah kelas bernama ItemTouchHelper yang digunakan untuk mendefinisikan apa yang terjadi ke item daftar RecyclerView saat pengguna melakukan berbagai tindakan sentuh, seperti menggesek atau menyeret dan melepas. Beberapa kasus penggunaan umum telah diimplementasikan dalam serangkaian metode dalam ItemTouchHelper.SimpleCallback.

ItemTouchHelper.SimpleCallback memungkinkan Anda mendefinisikan arah mana yang didukung untuk menggesek dan memindahkan item daftar dan mengimplementasikan perilaku penggesekan dan pemindahan.

Lakukan yang berikut:

1. Buat objek ItemTouchHelper baru, di metode onCreate() MainActivity.java. Untuk argumennya, buat instance baru ItemTouchHelper.SimpleCallback dan tekan Enter untuk membuat Android Studio mengisi metode yang diperlukan: onMove() dan onSwiped().

2. Konstruktor SimpleCallback akan diberi garis bawah merah karena Anda belum menyediakan parameter yang diperlukan: arah yang Anda rencanakan untuk mendukung pemindahan dan penggesekan item daftar. Karena kita hanya mengimplementasikan gesek untuk menutup sekarang, Anda harus meneruskan 0 untuk arah pemindahan yang didukung dan ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT untuk arah penggesekan yang didukung:

3.2 Implementasikan seret dan lepas

Anda juga bisa mengimplementasikan fungsionalitas seret dan lepas menggunakan SimpleCallback yang sama. Argumen SimpleCallback pertama menentukan arah mana yang didukung oleh ItemTouchHelper untuk memindahkan objek. Lakukan yang berikutHasil running :

sebelum :

sesudah :

3.3 Implementasikan tampilan detail

Buat New Activity dengan nama DetailActivity