Like Us on Facebook

Android RecyclerView with Circular Image

 Android  Recycler Listview with Circular Image
Hi welcome back , in this tutorial I am going  to talk about RecyclerView in Android . Android RecyclerView  is more advanced version of ListView with improved performance and other benefits.  To know details of  Recyclerview  you  must  follow  the documentation . In this tutorial we are going to  see how to create Recyclerview with Circuler Image.
 
Prerequisites:
  • JDK 7.0 or Above
  • Android Studio 2.2

Steps to Follow:

Step 1: Create a New Android Studio project name Recyclerdemo.
Step 2: Select minimum API level 16  so that it can support maximum of Android Device available in the google play.
Step 3: Select  Blank  Activity and Give your layout xml name is activity_main and click finish.
Step 4:  Open build.gradle and add the following dependency and Build your project.
 
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
       
compile 'com.android.support:design:23.1.1'
       
compile 'de.hdodenhof:circleimageview:2.1.0'
   
})
 
Step 5. Add the following RecyclerView to activity_main.xml
 
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

Step 6.Create a Class ItemObject.java  and  add the following code.
public class ItemObject {
private String name;
private String desc;
private int photo;
public ItemObject(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;
}
}

Step 7: Create new xml file  and Add the following code.
<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">
<RelativeLayout
android:id ="@+id/layout1"
android:layout_width="match_parent"
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/children"
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:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/layout1"
android:layout_marginTop="20dp"
android:background="#aeb6bf" />
</RelativeLayout>

Step 8: Now create a class named MyAdapter.java and add the below code.  Here onCreateViewHolder() method  inflates listitem.xml.
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 tv1,tv2;
ImageView imageView;
public ViewHolder(View itemView) {
super(itemView);
tv1 = (TextView) itemView.findViewById(R.id.list_title);
tv2 = (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.itemlist, 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.tv1.setText(itemList.get(position).getName());
holder.tv2.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);
}
}

9. Now open MainActivity.java and do the below changes.
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<ItemObject> 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<ItemObject> getAllItemList() {

List<ItemObject> allItems = new ArrayList<ItemObject>();
allItems.add(new ItemObject("playlist1","5 oct", R.drawable.one));
allItems.add(new ItemObject("playlist2","6 oct", R.drawable.two));
allItems.add(new ItemObject("playlist3","7 oct",R.drawable.three));
allItems.add(new ItemObject("playlist4","9 oct", R.drawable.four));
allItems.add(new ItemObject("playlist5","10 oct", R.drawable.five));
allItems.add(new ItemObject("playlist6","11oct",R.drawable.six));
allItems.add(new ItemObject("playlist7","12 oct",R.drawable.seven));
allItems.add(new ItemObject("playlist8","13 oct",R.drawable.eight));
allItems.add(new ItemObject("playlist9","14 oct",R.drawable.nine));
allItems.add(new ItemObject("playlist10","15 oct", R.drawable.ten));
allItems.add(new ItemObject("playlist11","16 oct", R.drawable.eleven));
allItems.add(new ItemObject("playlist12","17 oct", R.drawable.twelve));
return allItems;
}
@Override
public void itemClick(View view, int position) {

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

compile and test the Application in real device. It will look like below.

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.

    Subscribe Latest Information

    Most Popular Posts