RecyclerView is like a ListView but with more advanced and powerful features, it helps to display a large amount of data in your app. In Android RecyclerView with CardView, we can create normal lists as well as grids and style list item easily. It provides a feature to implement the list in the form of horizontal, vertical and Expandable. Layout Manager is the mainly used component of a RecyclerView, it helps in measuring and positioning item views.
In this post, we learn multiple things to create RecyclerView like how to use CardView, how to create an adapter class, about modal class, etc. We learn this all things with the help of an example of a list of blog posts.
Components (we will use it for the appearance and functionality)
1) RecyclerView: We will use this component to display a large amount of data in a list, this is the basic and important component of this app. It provides a feature to implement the list in the form of horizontal, vertical and Expandable.
2) CardView: This component helps in creating a good looking UI, we use it in this app to design RecyclerView item. With the help of this component, we can work on shadow, elevation, corner radius, etc.
Demo
Create A New Project
Before Implementing the following code first create a new project in Android Studio, go to File => then go to New => then select New Project option. In Add an activity option select default activity(Blank Activity) and proceed.
Structure Of Code
Code
Code for build.gradle (Module: app )
apply plugin: 'com.android.application'
android {
compileSdkVersion 26
defaultConfig {
applicationId "com.example.asus.recyclerv"
minSdkVersion 21
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'
}
Code for MainActivity.java file.
[java]
package com.example.asus.recyclerv;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import com.example.asus.recyclerv.adapter.RvAdapter;
import com.example.asus.recyclerv.model.Rvdata;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
RecyclerView rvTechSolPoint;
private final Integer rank_value[] = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 36, 37, 38, 39, 40};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayList<Rvdata> rvdata = getData();
rvTechSolPoint = findViewById(R.id.rv_techsolpoint);
rvTechSolPoint.setHasFixedSize(true);
LinearLayoutManager layoutManager = new
LinearLayoutManager(getApplicationContext(),LinearLayoutManager.VERTICAL,false);
rvTechSolPoint.setLayoutManager(layoutManager);
RvAdapter rvAdapter = new RvAdapter(getApplicationContext(),rvdata);
rvTechSolPoint.setAdapter(rvAdapter);
}
private ArrayList<Rvdata> getData() {
ArrayList<Rvdata> item_ids = new ArrayList<>();
for (int i= 0;i<rank_value.length;i++)
{
Rvdata rvdata = new Rvdata();
rvdata.setId(rank_value[i]);
item_ids.add(rvdata);
}
return item_ids;
}
}
[/java]
Code for activity_main.xml file.
[xml]
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout 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”
android:background=”#eee”
tools:context=”com.example.asus.recyclerv.MainActivity”>
<android.support.v7.widget.RecyclerView
android:id=”@+id/rv_techsolpoint”
android:layout_width=”match_parent”
android:layout_height=”match_parent” />
</LinearLayout> [/xml]
Code for RvAdapter.java file.
[java] package com.example.asus.recyclerv.adapter; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.example.asus.recyclerv.R; import com.example.asus.recyclerv.model.Rvdata; import java.util.ArrayList; /** * Created by techsolpoint.com on 3/18/2018. */ public class RvAdapter extends RecyclerView.Adapter<RvAdapter.RvViewHolder>{ Context context; ArrayList<Rvdata> rvdata; public RvAdapter(Context context,ArrayList<Rvdata> rvdata){ this.context = context; this.rvdata = rvdata; } View view; @Override public RvAdapter.RvViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { LayoutInflater inflater = LayoutInflater.from(parent.getContext()); view = inflater.from(parent.getContext()).inflate(R.layout.rv_item,parent,false); RvViewHolder rvViewHolder = new RvViewHolder(view); return rvViewHolder; } @Override public void onBindViewHolder(RvAdapter.RvViewHolder holder, int position) { } @Override public int getItemCount() { return rvdata.size(); } public class RvViewHolder extends RecyclerView.ViewHolder { public RvViewHolder(View itemView) { super(itemView); } } } [/java]
Code for rv_item.xml file.
[xml]
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:orientation=”vertical”
android:padding=”5dp”
android:layout_height=”190dp”>
<android.support.v7.widget.CardView
app:cardCornerRadius=”10dp”
android:layout_margin=”5dp”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<LinearLayout
android:layout_width=”match_parent”
android:orientation=”vertical”
android:background=”#ffffff”
android:layout_height=”match_parent”>
<RelativeLayout
android:layout_width=”match_parent”
android:background=”#000000″
android:layout_height=”100dp”>
<ImageView
android:alpha=”0.5″
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:scaleType=”centerCrop”
android:src=”@drawable/seo1″/>
<TextView
android:id=”@+id/article_name”
android:layout_width=”match_parent”
android:layout_height=”30dp”
android:layout_marginTop=”10dp”
android:text=”My First Article on RecyclerView”
android:textColor=”#ffffff”
android:textSize=”18sp”
android:textStyle=”bold”
android:gravity=”center”/>
<TextView
android:background=”@drawable/bg_button”
android:layout_centerInParent=”true”
android:layout_below=”@+id/article_name”
android:layout_width=”100dp”
android:layout_height=”30dp”
android:text=”Read”
android:textSize=”18sp”
android:textStyle=”bold”
android:textColor=”#1ff8e9″
android:gravity=”center”/>
</RelativeLayout>
<TextView
android:layout_marginStart=”5dp”
android:layout_marginEnd=”5dp”
android:layout_marginTop=”5dp”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:textColor=”#000″
android:textSize=”15sp”
android:text=”This is My Blog This is My Blog This is My Blog This is My Blog This is My Blog This is My Blog This is My Blog…”/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
[/xml]
Code for Rvdata.java file.
[java]
package com.example.asus.recyclerv.model;
/**
* Created by techsolpoint.com on 3/18/2018.
*/
public class Rvdata {
public int id;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
}
[/java]
Article for you to read next:
Screenshot:
I am new in android. Like you see some more post related to this.
thanks this code works 🙂
Can you make it more descriptive like why we use certain commands. Why you create certain variable and all.