How to add Android RecyclerView with Circular Image

0 2,080

Android RecyclerView with Circular Image

In this tutorial, I will teach you how you can add RecyclerView with Circular Image in the android app using the android studio. RecyclerView is a more flexible level that listview in android .as we are already familiar how to use listview ,in this tut I will also explain writing an adapter class, adding list and finally how to add click listener.

  • The first step adds these dependencies in build.gradle
compile 'com.android.support:design:24.1.1'
compile 'de.hdodenhof:circleimageview:2.1.0'
  • Next step add a new java class and name it to MyAdapter.java and add all these codes to MyAdapter class.
package exceptionbound.come.androidrecyclerviewwithcircularimage;

import android.content.Context;
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;



public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private List<ItemObject> itemList;
    private Context context;
    private ItemClickListener clickListener;

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView, textView1;
        ImageView imageView;

        public ViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.list_title);
            textView1 = (TextView) itemView.findViewById(R.id.list_desc);
            imageView = (ImageView) itemView.findViewById(R.id.list_avatar);
        }
    }

    public MyAdapter(Context context, List<ItemObject> itemList) {

        this.itemList = itemList;
        this.context = context;
    }

    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.listitem, parent, false);
// set the view's size, margins, paddings and layout parameters
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(MyAdapter.ViewHolder holder, final int position) {
        holder.textView.setText(itemList.get(position).getName());
        holder.textView1.setText(itemList.get(position).getDesc());
        holder.imageView.setImageResource(itemList.get(position).getPhoto());
        holder.imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (clickListener != null) clickListener.itemClick(v, position);
            }
        });
        holder.imageView.setTag(holder);
    }

    public void setClickListener(ItemClickListener itemClickListener) {
        this.clickListener = itemClickListener;
    }

    @Override
    public int getItemCount() {
        return this.itemList.size();
    }

    public interface ItemClickListener {
        public void itemClick(View view, int position);
    }
}

Next step now create one more class Itemlistobject.java in this class we will set name description and image for circle view

package exceptionbound.come.androidrecyclerviewwithcircularimage;
public class Itemlistobject {
    private String name;
    private String desc;
    private int photo;
    public Itemlistobject(String name, String desc , int photo) {
        this.name = name;
        this.desc = desc;
        this.photo = photo;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getDesc() {
        return desc;
    }
    public void setDesc(String desc) {
        this.desc = desc;
    }

    public int getPhoto() {
        return photo;
    }
    public void setPhoto(int photo) {
        this.photo = photo;
    }
}
  • Now go res>layout> right click on it then select new resource file and enter the file name to listitem.xml and add below codes…
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:id ="@+id/layout1"
        android:layout_width="wrap_content"
        android:gravity="center"
        android:paddingTop="16dp"
        android:layout_height="wrap_content">
        <de.hdodenhof.circleimageview.CircleImageView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/list_avatar"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/icon"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="10dp"
            app:civ_border_width="2dp"
            app:civ_border_color="#FF000000"/>
        <TextView
            android:id="@+id/list_title"
            android:layout_alignParentTop="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_toRightOf="@+id/list_avatar"
            android:text="PlayList "
            android:textColor="#000000"
            android:textAppearance="?attr/textAppearanceListItem"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/list_desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/list_title"
            android:layout_marginLeft="16dp"
            android:layout_toRightOf="@+id/list_avatar"
            android:textColor="#000000"
            android:ellipsize="end"
            android:text="songlist"
            android:textAppearance="?attr/textAppearanceListItem"
            android:textSize="14sp" />
        <CheckBox
            android:text=""
            android:layout_marginRight="40dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true"
            android:id="@+id/checkBox"
            />
    </RelativeLayout>
    <View
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/layout1"
        android:layout_marginTop="20dp"
        android:background="#aeb6bf" />
</RelativeLayout>
  • Now the last step we will move to our MainActivity.java to add full functionality to our app
package exceptionbound.come.androidrecyclerviewwithcircularimage;

import android.content.Intent;
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.View;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements MyAdapter.ItemClickListener {
    private RecyclerView mRecyclerView;
    private MyAdapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        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);
        List<Itemlistobject> rowListItem = getAllItemList();
// use a linear layout manager
        mLayoutManager = new LinearLayoutManager(MainActivity.this);
        mRecyclerView.setLayoutManager(mLayoutManager);
// specify an adapter (see also next example)
        mAdapter =new MyAdapter(MainActivity.this,rowListItem);
        mRecyclerView.setAdapter(mAdapter);
        mAdapter.setClickListener(this);
    }
    private List<Itemlistobject> getAllItemList() {

        List<Itemlistobject> allItems = new ArrayList<Itemlistobject>();

        allItems.add(new Itemlistobject("twitter","25 Nov", R.drawable.twitter));
        allItems.add(new Itemlistobject("dropbox","26 Nov",R.drawable.dropbox));
        allItems.add(new Itemlistobject("facebook","27 Nov", R.drawable.facebook));
        allItems.add(new Itemlistobject("gmail","28 Nov", R.drawable.gmail));
        allItems.add(new Itemlistobject("googledrive","29 Nov",R.drawable.googledrive));
        allItems.add(new Itemlistobject("googleplus","30 Nov",R.drawable.googleplus));
        allItems.add(new Itemlistobject("linkedin","1 Dec",R.drawable.linkedin));
        allItems.add(new Itemlistobject("photoshop","2 Dec",R.drawable.photoshop));
        allItems.add(new Itemlistobject("skype","3 Dec", R.drawable.skype));

        return allItems;
    }
    @Override
    public void itemClick(View view, int position) {

        switch(view.getId()){
            case R.id.imageView:
                startActivity(new Intent(this, MainActivity.class));
                break;
        }
    }
}

Add these all code to activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="exceptionbound.come.androidrecyclerviewwithcircularimage.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbars="vertical" />
</RelativeLayout>

Download source codes

Also read: How to Add Fingerprint Authentication in Android using android studio

Comments

comments

Leave A Reply

Your email address will not be published.