Belajar Android Studio – Material Design penggunaan RecyclerView dan CardViewAgus Haryanto

agus.superwriter@gmail.comhttp://agusharyanto.net

Belajar Android Studio kali ini masih membahas tentang material design. Kita akan mengeksplorasiuntuk pembuatan List dan Card. Komponen yang akan kita gunakan adalah RecyclerView untuk List yang konon katanya lebih sakti dari ListView. Dan spesialnya untuk item layout baris list nya kita menggunakan CardView. Untuk project yang akan kita buat adalah menampilkan Daftar Buah-buahan yang ada fotonya, nama dan rasanya. Untuk itu kita perlu mencari diienternet gambar buah-buahan, yang kita gunakan dalam project ini adalah apel, pepaya, stroberi, masing-masing simpan dengan nama apple.jpg, pepaya.jpg, strawberry.jpg

Mari Kita mulai pembuatannya. 1. Buka Android Studio, lalu Klik File ==>New Project isi Application name dengan “LearnMaterialDesign” dan Company Domain dengan “agusharyanto.net”

Pada jendela Add Activity to Mobile pilih EmptyActivity

2. Paste file buah-buahan yang sudah kita kumpulkan tadi ke directory res/drawable3. Kita akan menampilkan buah-buahan maka kita perlu membuat modelnya yaitu dengan membuatclass Fruit yang didalamnya ada name, taste dan photoid. Pada directory java di pakackage net.aguharyanto.learnmaterialdesignlistcard buat class baru dengan nama Fruit lalu ketikan kode berikutpackage net.agusharyanto.learnmaterialdesignlistcard;/** * Created by agus on 9/19/15. */public class Fruit { String name; String taste; int photoId; Fruit(String name, String taste, int photoId) { this.name = name; this.taste = taste; this.photoId = photoId; }}

4. Karena kita akan menggunakan RecyclerView dan CardView maka library untuk kedua komponen tersebut harus kita daftarkan di gradle. Klik Gradle Scripts lalu klik buil.gradle (module:app) tambahkan pada bagian dependencies kode berikut

compile 'com.android.support:cardview-v7:23.0.+'compile 'com.android.support:recyclerview-v7:23.0.+'

5. Masuk ke directory res/layout lalu edit activity_main.xml ketikan kode berikut

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_view" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent"/></RelativeLayout>

6. Masih pada directory res/layout buat layout baru dengan nama cardview lalu ketikan kode berikut<?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:padding="5dp" > <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/cv" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" > <ImageView android:layout_width="50dp" android:layout_height="50dp" android:id="@+id/fruit_photo" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginRight="16dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/fruit_name" android:layout_toRightOf="@+id/fruit_photo" android:layout_alignParentTop="true" android:textSize="30sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/fruit_taste" android:layout_toRightOf="@+id/fruit_photo" android:layout_below="@+id/fruit_name"

/> </RelativeLayout> </android.support.v7.widget.CardView></LinearLayout>

7. Sekarang kita buat class Adaoter untuk RecyclerView, untuk itu pada directory java di pakackage net.aguharyanto.learnmaterialdesignlistcard buat class baru dengan nama RVAdapter lalu ketikan kode berikut.

package net.agusharyanto.learnmaterialdesignlistcard;import android.support.v7.widget.CardView;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import java.util.List;/** * Created by agus on 9/19/15. */public class RVAdapter extends RecyclerView.Adapter<RVAdapter.FruitViewHolder>{ List<Fruit> fruits; RVAdapter(List<Fruit> fruits){ this.fruits = fruits; } @Override public FruitViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.cardview, viewGroup, false); FruitViewHolder fruitViewHolder = new FruitViewHolder(v); return fruitViewHolder; } @Override public void onBindViewHolder(FruitViewHolder fruitViewHolder, int i) { fruitViewHolder.fruitName.setText(fruits.get(i).name); fruitViewHolder.fruitTaste.setText(fruits.get(i).taste); fruitViewHolder.fruitPhoto.setImageResource(fruits.get(i).photoId); } @Override public int getItemCount() { return fruits.size(); } public Fruit getItem(int position) { return fruits.get(position); } @Override public void onAttachedToRecyclerView(RecyclerView recyclerView) { super.onAttachedToRecyclerView(recyclerView); } public static class FruitViewHolder extends RecyclerView.ViewHolder { CardView cv; TextView fruitName; TextView fruitTaste; ImageView fruitPhoto;

FruitViewHolder(View itemView) { super(itemView); cv = (CardView)itemView.findViewById(R.id.cv); fruitName = (TextView)itemView.findViewById(R.id.fruit_name); fruitTaste = (TextView)itemView.findViewById(R.id.fruit_taste); fruitPhoto = (ImageView)itemView.findViewById(R.id.fruit_photo); } }

8. Untuk menangkap nilai ketika user menyentuh salah satu baris pada RecyclerView, masih pada package yang sama, buat class baru dengan RecyclerItemClickListener kemudian ketikan code berikut

package net.agusharyanto.learnmaterialdesignlistcard;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.GestureDetector;import android.view.MotionEvent;import android.view.View;/** * Created by agus on 9/19/15. */public class RecyclerItemClickListener implements RecyclerView.OnItemTouchListener { private OnItemClickListener mListener; public interface OnItemClickListener { public void onItemClick(View view, int position); } GestureDetector mGestureDetector; public RecyclerItemClickListener(Context context, OnItemClickListener listener) { mListener = listener; mGestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() { @Override public boolean onSingleTapUp(MotionEvent e) { return true; } }); } @Override public boolean onInterceptTouchEvent(RecyclerView view, MotionEvent e) { View childView = view.findChildViewUnder(e.getX(), e.getY()); if (childView != null && mListener != null && mGestureDetector.onTouchEvent(e)) { mListener.onItemClick(childView, view.getChildPosition(childView)); return true; } return false; } @Override public void onTouchEvent(RecyclerView view, MotionEvent motionEvent) { } @Override public void onRequestDisallowInterceptTouchEvent(boolean b) { }}

9. Masih pada package yang sama edit MainActivity kemudian ketikan kode berikutpackage net.agusharyanto.learnmaterialdesignlistcard;import android.content.Context;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.Toast;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerView; private RVAdapter rvAdapter; private RecyclerView.LayoutManager mLayoutManager; private Context context = MainActivity.this; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initializeData(); mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view); // use this setting to improve performance if you know that changes // in content do not change the layout size of the RecyclerView mRecyclerView.setHasFixedSize(true); // use a linear layout manager mLayoutManager = new LinearLayoutManager(this); mRecyclerView.setLayoutManager(mLayoutManager); // specify an adapter (see also next example) rvAdapter = new RVAdapter(fruits); mRecyclerView.setAdapter(rvAdapter); mRecyclerView.addOnItemTouchListener( new RecyclerItemClickListener(context, new RecyclerItemClickListener.OnItemClickListener() { @Override public void onItemClick(View view, int position) { Fruit fruit = rvAdapter.getItem(position); Toast.makeText(context, "Name :"+ fruit.name,Toast.LENGTH_SHORT).show(); } }) ); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } private List<Fruit> fruits; // This method creates an ArrayList that has three Fruit objects private void initializeData(){ fruits = new ArrayList<>();

fruits.add(new Fruit("Apple", "The taste of Apple is sweet", R.drawable.apple)); fruits.add(new Fruit("Papaya", "The taste of Papaya is sweet", R.drawable.papaya)); fruits.add(new Fruit("Strawberry", "The taste of Strawberry is sour", R.drawable.strawberry)); } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); }}

10. Klik kanan directory values lalu pilih New → Values Resource File. Pada jendela New Resource File isi File Name dengan dengan “color” lalu klik OK secara otomatis akan membuat file color.xml. Edit color.xml lalu ketikan kode berikut

<?xml version="1.0" encoding="utf-8"?><resources> <color name="color_primary">#2196F3</color> <color name="color_primary_dark">#1976D2</color> <color name="accent_color">#536DFE</color></resources>

11. Pada directory values edit file styles.xml lalu ketikan kode berikut

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryDark">@color/color_primary_dark</item> <item name="colorAccent">@color/accent_color</item> </style></resources>

12. Sekarang mari kita run projectnya. Kalau semua berjalan lancar maka hasilnya akan seperti ini.

Tampilan awal Sentuh Apple, maka akan menampilkan Toast Apple

Wah tampilannya lebih keren dari ListView biasayah. Mantap juga nih Kombinasi RecyclerView dan CardView.

Referensi:http://www,androidhive.infohttp://developer.android.com