Tutorial Android : Horizontal Listview Dengan Image

Selamet pagi sodarah sejawat dan setanah air, apa kabar kalian disana :v Hhahah macem pembawa acara anjirr.. Hhahhaha Okehh, Pagi ini gue mau coba share tutorial & masih tentang seputar android apps, kali aja ente butuh part part semacem ini "Horizontal Listview With Image" dalem pembuatan apps android ente, boleh aja langsung copas dari blog ini kalo ente udah ngerti penggunaan'nya & semoga kedepannya bakalan ane update terus ini blog buat tutorial android'nya, Okehh lanjut yaa mulai dari satu :D

1. Pertama bikin project android'nya dulu di android studio,  dan kayanya gak ada yang special dari AndroidManifest.xml, langsung bikin file image_horizontal_listview.xml, dan copy pastekan code dibawah ini : 

<?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:orientation="vertical">

    <ImageView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textColor="@color/black"
        android:gravity="center"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:padding="15dp" />

</LinearLayout>

Penjelasan code di atas yaitu buat layout si (listview + image).

2. Nah dan yang ini file main_activity.xml, layout name com.project.bye.HorizontalListView biasa sih dan isinya itu code buat initiator lah gue nyebut'nya buat manggil code no. 1 :

        
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:paddingTop="56dp"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:background="@color/white">

     <com.project.bye.HorizontalListView
            android:id="@+id/hlvCustomList"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_alignParentTop="true"
            android:layout_toEndOf="@+id/add_image" />


    </LinearLayout>

Penjelasan code di atas cuma initiator buat nampilin data yang berisi image yang berada di dalam file image_horizontal_listview.xml, dan nanti data + image akan diolah didalam file MainActivity.java.

3. Nah dan yang ini file MainActivity.java disini :

package com.project.bye;

/**
 * Created by webster on 11/7/16.
 */
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;

import com.project.bye.HorizontalImageListviewAdapter;
import com.project.bye.HorizontalListView;

import java.util.ArrayList;


public class MainActivity extends Fragment {
    HorizontalListView hlvCustom;
    private ArrayList value_list = new ArrayList<>();

    View view;
    @Nullable
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.main_activity,null);

        value_list.add(BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.my_face));
        value_list.add(BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.end_2));
        value_list.add(BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.end_3));

        hlvCustom = (HorizontalListView) view.findViewById(R.id.hlvCustomList);
        hlvCustom.setAdapter(new HorizontalImageListviewAdapter(getContext(), value_list));

        return view;
    }
    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.menu_all, menu);
    }
}

Nah ada potongan code kecil buat convert Drawable To Bitmap :

BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.my_face)

4. Ini file HorizontalListView.java,  dan ini file library yang dipakai buat (listview + image)  :

5.  And last ini buat HorizontalImageListviewAdapter.java dan ini file buat mengisi data ke dalem listview (sesuai dengan nama'nya yaitu Adapter untuk mengisi data kedalam image_horizontal_listview.xml).

package com.project.bye.adapter;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.project.bye.R;

import java.util.ArrayList;

public class HorizontalImageListviewAdapter extends BaseAdapter {
    Context context;
    LayoutInflater inflater;
    ArrayList value_list;
    int count = 0;

    public HorizontalImageListviewAdapter(Context context, ArrayList value_list) {
        this.context = context;
        this.value_list = value_list;
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return value_list.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Holder holder;
        View view = convertView;
        if (view == null) {
            view = inflater.inflate(R.layout.image_horizontal_listview, null);
            holder = new Holder();
            holder.tvSSID = (ImageView) view.findViewById(R.id.textView1);
            view.setTag(holder);
        } else {
            holder = (Holder) view.getTag();
        }
        //holder.tvSSID.setImageResource(value_list[position]);

        Drawable image_drawable = new BitmapDrawable(context.getResources(), value_list.get(position));
        Bitmap mbitmap = ((BitmapDrawable) image_drawable).getBitmap();
        Bitmap imageRounded = Bitmap.createBitmap(mbitmap.getWidth(), mbitmap.getHeight(), mbitmap.getConfig());
        Canvas canvas = new Canvas(imageRounded);
        Paint mpaint = new Paint();
        mpaint.setAntiAlias(true);
        mpaint.setShader(new BitmapShader(mbitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        canvas.drawRoundRect((new RectF(0, 0, mbitmap.getWidth(), mbitmap.getHeight())), 100, 100, mpaint);// Round Image Corner 100 100 100 100
        holder.tvSSID.setImageBitmap(imageRounded);

        return view;
    }
    class Holder {
        ImageView tvSSID;
    }
}

Dan berakhir lah sudah experiment mengenai HorizontalListView + Image, semoga mudah dipahamin & berguna buat yang butuh potongan" code :D Happy coding vrohh... Klo ada yang kurang jelas bisa ditanyaken ;)