Android: ImageView on Cardview

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

1. Download bahan untuk iconnya disini, extract, masukkan ke folder res/drawable-hdpi
2. Buka item_recycle.xml, perhatikan tambahan codenya atau ganti saja semua isinya dengan ini:

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

3. Buka arrays.xml, tambahkan ini di bagian bawah sebelum code </resources> 

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

4. Buka ItemController.java, perhatikan tambahan codenya :

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();
    }

}

5. Buka MyRecyclerAdapter.java, perhatikan juga tambahannya:

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();
    }
}

6. Hasilnya: 
   
7. Selesai..