INTRODUCTION
Setelah memahami Recyclerview/Cardview dan Toolbar di posting kemarin, selanjutnya kita akan memasukan gambar ke Cardview.Tutor ini lanjutan dari Cardview with Toolbar, jadi ikuti dulu tutorialnya dari awal di postingan sebelumnya.Untuk memasukan gambar ke item cardview perlu menambah beberapa code ke xml dan adapter.
ok, langsung saja..
EXAMPLE CARDVIEW WITH IMAGE
- Download bahan untuk iconnya disini, extract, masukkan ke folder res/drawable-hdpi
- Buka item_recycle.xml, perhatikan tambahan codenya atau ganti saja semua isinya dengan ini:
- Buka arrays.xml, tambahkan ini di bagian bawah sebelum code
</resources> - Buka ItemController.java, perhatikan tambahan codenya :
- Buka MyRecyclerAdapter.java, perhatikan juga tambahannya:
- Hasilnya:
- Selesai..
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/cardlist_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="@dimen/cardview_default_elevation"
android:foreground="?android:attr/selectableItemBackground"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<ImageView
android:id="@+id/icon_item"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="4dp"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:gravity="center_vertical"
android:layout_height="?attr/listPreferredItemHeight"
android:orientation="vertical"
android:layout_toEndOf="@id/icon_item">
<TextView
android:id="@+id/listitem_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android version name"
android:textColor="@color/primary_text_default_material_light"
android:textSize="@dimen/abc_text_size_subhead_material" />
<TextView
android:id="@+id/listitem_subname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:paddingTop="3dp"
android:textColor="@color/secondary_text_default_material_light"
android:textSize="@dimen/abc_text_size_caption_material" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView> <string-array name="list_icon">
<item>a</item>
<item>b</item>
<item>c</item>
<item>d</item>
<item>e</item>
<item>f</item>
<item>g</item>
<item>h</item>
<item>i</item>
<item>j</item>
<item>k</item>
<item>l</item>
<item>m</item>
</string-array>import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
/**
* Created by AbangAzmi on 11/14/2015.
*/
public class ItemController extends RecyclerView.ViewHolder implements View.OnClickListener {
//Variable
CardView cardItemLayout;
ImageView icon; // Picture
TextView title;
TextView subTitle;
public ItemController(View itemView) {
super(itemView);
//Set id
cardItemLayout = (CardView) itemView.findViewById(R.id.cardlist_item);
//Tambahan untuk id Picture
icon = (ImageView)itemView.findViewById(R.id.icon_item);
//id Text
title = (TextView) itemView.findViewById(R.id.listitem_name);
subTitle = (TextView) itemView.findViewById(R.id.listitem_subname);
//onClick
itemView.setOnClickListener(this);
}
@Override
public void onClick(View v) {
//tampilkan toas ketika click
Toast.makeText(v.getContext(),
String.format("Position %d", getAdapterPosition()),
Toast.LENGTH_SHORT).show();
}
}
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
/**
* Created by AbangAzmi on 11/14/2015.
*/
public class MyRecyclerAdapter extends RecyclerView.Adapter<ItemController> {
Context context;
List<String> versionModels;
//Array tambahan untuk picture
public static List<String> ic = new ArrayList<String>();
//Text
public static List<String> titleOs = new ArrayList<String>();
public static List<String> osSubList = new ArrayList<String>();
//Set List Items
public void setCardList(Context context) {
//Ambil nama picture dari array list_icon
String[] icon = context.getResources().getStringArray(R.array.list_icon);
//text
String[] listArray = context.getResources().getStringArray(R.array.os_version);
String[] subTitleArray = context.getResources().getStringArray(R.array.os_sub_version);
for (int i = 0; i < listArray.length; ++i) {
ic.add(icon[i]);
titleOs.add(listArray[i]);
osSubList.add(subTitleArray[i]);
}
}
public MyRecyclerAdapter(Context context) {
this.context = context;
setCardList(context);
}
public MyRecyclerAdapter(List<String> versionModels) {
this.versionModels = versionModels;
}
@Override
public ItemController onCreateViewHolder(ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_recycle, viewGroup, false);
ItemController viewHolder = new ItemController(view);
return viewHolder;
}
@Override
public void onBindViewHolder(ItemController versionViewHolder, int i) {
//Cari Picture di drawable sesuai nama dari array
//lalu menyusunnya sesuai urutan dari atas ke bawah
int listIcon = context.getResources().getIdentifier(String.valueOf(ic.get(i)),
"drawable", context.getPackageName());
versionViewHolder.icon.setImageResource(listIcon);
versionViewHolder.title.setText(titleOs.get(i));
versionViewHolder.subTitle.setText(osSubList.get(i));
}
@Override
public int getItemCount() {
return titleOs == null ? 0 : titleOs.size();
}
}
Semoga bermanfaat...
