Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Belajar Android Studio – Material Design penggunaan RecyclerView dan CardView
Agus Haryanto
agus.superwriter@gmail.com
htt...
2. Paste file buah-buahan yang sudah kita kumpulkan tadi ke directory res/drawable
3. Kita akan menampilkan buah-buahan ma...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
...
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
7. Sekarang kita buat class Adaoter untuk Recyc...
FruitViewHolder(View itemView) {
super(itemView);
cv = (CardView)itemView.findViewById(R.id.cv);
fruitName = (TextView)ite...
9. Masih pada package yang sama edit MainActivity kemudian ketikan kode berikut
package net.agusharyanto.learnmaterialdesi...
fruits.add(new Fruit("Apple", "The taste of Apple is sweet",
R.drawable.apple));
fruits.add(new Fruit("Papaya", "The taste...
Wah tampilannya lebih keren dari ListView biasayah. Mantap juga nih Kombinasi RecyclerView
dan CardView.
Referensi:
http:/...
Upcoming SlideShare
Loading in …5
×

Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View

8,967 views

Published on

Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View

Published in: Mobile
  • Login to see the comments

Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View

  1. 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. 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. 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. 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. 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. 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. 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. 8. Wah tampilannya lebih keren dari ListView biasayah. Mantap juga nih Kombinasi RecyclerView dan CardView. Referensi: http://www,androidhive.info http://developer.android.com

×