Custom RecyclerView with ImageVew Example in Android
Hello Friends, Today we will teach you how to create Custom RecyclerView with ImageView in Android.
Follow the Steps.
Step 1. :- Open build.gradle (Module:app) and add RecyclerView's Dependency
For API Level 28 use :-
implementation 'com.android.support:recyclerview-v7:28.0.0'
For API Level 29 (AndroidX) use :-
implementation 'androidx.recyclerview:recyclerview:1.1.0-alpha01'
Step 2. :- Now Open your xml layout file and add RecyclerView Element.
activity_main.xml :-
Note :- We are using androidx because we have currently use API Level 29
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/recycler_view"/>
</RelativeLayout>
Note :- We are using androidx because we have currently use API Level 29
Step 3. :- Now we need to create a xml layout file for our RecyclerView as a row_layout.xml
row_layout.xml :-
row_layout.xml :-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@android:color/white">
<ImageView
android:id="@+id/image_view"
android:layout_width="80dp"
android:layout_height="80dp"
android:padding="6dp"
android:src="@drawable/ic_launcher_background" />
<TextView
android:id="@+id/name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_toRightOf="@+id/image_view"
android:text="Name"
android:textColor="@android:color/black"
android:textSize="16sp" />
<TextView
android:id="@+id/version_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/name_text_view"
android:layout_marginLeft="5dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@+id/image_view"
android:text="1.0"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/year_text_view"
android:layout_toLeftOf="@+id/year_text_view"
android:text="Release Year : " />
<TextView
android:id="@+id/year_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:text="2003" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/year_text_view"
android:layout_alignBaseline="@+id/version_text_view"
android:layout_toLeftOf="@+id/api_level_text_view"
android:text="API Level : " />
<TextView
android:id="@+id/api_level_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/year_text_view"
android:layout_alignBaseline="@+id/version_text_view"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:text="1" />
</RelativeLayout>
Step 4. :- Now We need to Create a java class, MyAdapter.
MyAdapter.java :-
package com.akshayarora.myapplication;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
Context context;
String[] name, version, apiLevel;
int[] year, img;
View view;
public MyAdapter(Context context, String[] name, String[] version, String[] apiLevel, int[] year, int[] img) {
this.context = context;
this.name = name;
this.version = version;
this.apiLevel = apiLevel;
this.year = year;
this.img = img;
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_layout, parent, false);
MyViewHolder viewHolder = new MyViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {
holder.txtName.setText(name[position]);
holder.txtVersion.setText(version[position]);
holder.txtApi.setText(apiLevel[position]);
String ue = String.valueOf(year[position]);
holder.txtYear.setText(ue);
holder.imageView.setImageResource(img[position]);
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(context, "Android Name : " + name[position] + "\nAndroid Version : " + version[position] + "\nAPI Level : " + apiLevel[position] + "\nRelease Year : " + year[position], Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount() {
return name.length;
}
public class MyViewHolder extends RecyclerView.ViewHolder {
public TextView txtName, txtVersion, txtYear, txtApi;
public ImageView imageView;
public MyViewHolder(View itemView) {
super(itemView);
txtName = (TextView) itemView.findViewById(R.id.name_text_view);
txtVersion = (TextView) itemView.findViewById(R.id.version_text_view);
txtYear = (TextView) itemView.findViewById(R.id.year_text_view);
txtApi = (TextView) itemView.findViewById(R.id.api_level_text_view);
imageView = (ImageView) itemView.findViewById(R.id.image_view);
}
}
}
Step 5. :- Now open your MainActivity.java file and make some changes in Java file.
MainActivity.java :-
package com.akshayarora.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.graphics.Color;
import android.hardware.Camera;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ExpandableListView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private MyAdapter myAdapter;
String[] strName = new String[]{"CupCake", "Donut", "Eclair", "Froyo", "GingerBread", "HoneyComb",
"Ice Cream Sandwich", "Jelly Bean", "Kitkat", "Lollipop", "Marshmallow", "Nougat", "Oreo",
"Pie", "Android 10"};
String[] strVersion = new String[]{"1.5", "1.6", "2.0 - 2.1", "2.2 - 2.2.3", "2.3 - 2.3.7",
"3.0 - 3.2.6", "4.0 - 4.0.4", "4.1 - 4.3.1", "4.4 - 4.4.4", "5.0 - 5.1.1", "6.0 - 6.0.1",
"7.0 - 7.1.2", "8.0 - 8.1", "9.0", "10.0"};
String[] strApiLevel = new String[]{"3", "4", "5 - 7", "8", "9 - 10", "11 - 13", "14 - 15",
"16 - 18", "19 - 20", "21 - 22", "23", "24 - 25", "26 - 27", "28", "29"};
int[] strYear = {2009, 2009, 2009, 2010, 2010, 2011, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019};
int[] logo = {R.drawable.cupcake, R.drawable.donut, R.drawable.eclair, R.drawable.froyo,
R.drawable.gingerbread, R.drawable.honeycomb, R.drawable.icecreamsandwich,
R.drawable.jellybean, R.drawable.kitkat, R.drawable.lollipop, R.drawable.marshmallow,
R.drawable.nougat, R.drawable.oreo, R.drawable.pic, R.drawable.q};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
myAdapter = new MyAdapter(this, strName, strVersion, strApiLevel, strYear, logo);
recyclerView.setAdapter(myAdapter);
}
}
Now run the project and see the output.
Output :-
Enjoy !
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.