Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View

1. Belajar Android Studio – Material Design penggunaan RecyclerView dan CardView
Agus Haryanto
agus.superwriter@gmail.com
http://agusharyanto.net
Belajar Android Studio kali ini masih membahas tentang material design. Kita akan mengeksplorasi
untuk 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. 2. Paste file buah-buahan yang sudah kita kumpulkan tadi ke directory res/drawable
3. Kita akan menampilkan buah-buahan maka kita perlu membuat modelnya yaitu dengan membuat
class 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 berikut
package 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

3. <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"

4. />
</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;

5. 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) {
}
}

6. 9. Masih pada package yang sama edit MainActivity kemudian ketikan kode berikut
package 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<>();

7. 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

8. Wah tampilannya lebih keren dari ListView biasayah. Mantap juga nih Kombinasi RecyclerView
dan CardView.
Referensi:
http://www,androidhive.info
http://developer.android.com