In this video, we will create a recycler view in android studio.
We will use Card view for our recycler view items and we will use glide to load images from the internet.
MainActivity.java
package org.meicode.recyclerview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = findViewById(R.id.recyclerView);
RecyclerViewAdapter adapter = new RecyclerViewAdapter(this);
recyclerView.setAdapter(adapter);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
ArrayList<Contact> contacts = new ArrayList<>();
contacts.add(new Contact("Bradly cooper", "156121651", "https://www.biography.com/.image/t_share/MTE1ODA0OTcxNTEyODU4MTI1/bradley-cooper-547062-1-402.jpg"));
contacts.add(new Contact("Saoirse Ronan", "5654646", "https://www.nova.ie/wp-content/uploads/2017/12/Ronan-1.png"));
adapter.setContacts(contacts);
}
}
RecyclerViewAdapter.java
package org.meicode.recyclerview;
import android.content.Context;
import android.support.annotation.NonNull;
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 com.bumptech.glide.Glide;
import java.util.ArrayList;
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private ArrayList<Contact> contacts = new ArrayList<>();
private Context context;
public RecyclerViewAdapter(Context context) {
this.context = context;
}
public RecyclerViewAdapter() {
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(viewGroup.getContext())
.inflate(R.layout.recycler_view_list_item, viewGroup, false);
ViewHolder holder = new ViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
viewHolder.name.setText(contacts.get(i).getName());
viewHolder.number.setText(contacts.get(i).getNumber());
Glide.with(context)
.asBitmap()
.load(contacts.get(i).getImageUrl())
.into(viewHolder.imageView);
}
@Override
public int getItemCount() {
return contacts.size();
}
public void setContacts(ArrayList<Contact> contacts) {
this.contacts = contacts;
notifyDataSetChanged();
}
public class ViewHolder extends RecyclerView.ViewHolder{
private ImageView imageView;
private TextView name, number;
public ViewHolder(@NonNull View itemView) {
super(itemView);
imageView = (ImageView) itemView.findViewById(R.id.image);
name = (TextView) itemView.findViewById(R.id.name);
number = (TextView) itemView.findViewById(R.id.number);
}
}
}
Contact.java
package org.meicode.recyclerview;
public class Contact {
private String name;
private String number;
private String imageUrl;
public Contact(String name, String number, String imageUrl) {
this.name = name;
this.number = number;
this.imageUrl = imageUrl;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getNumber() {
return number;
}
public void setNumber(String number) {
this.number = number;
}
public String getImageUrl() {
return imageUrl;
}
public void setImageUrl(String imageUrl) {
this.imageUrl = imageUrl;
}
}
recycler_view_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardElevation="10dp"
app:cardCornerRadius="10dp"
android:layout_margin="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="75dp"
android:shape="ring"
android:id="@+id/cardView"
android:padding="10dp">
<ImageView
android:id="@+id/image"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/ic_launcher_background" />
</android.support.v7.widget.CardView>
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_toRightOf="@+id/cardView"
android:text="name"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/name"
android:layout_margin="10dp"
android:layout_toRightOf="@+id/cardView"
android:text="number"
android:textSize="18sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
activity_main.xml
<?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"
android:padding="10dp">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recyclerView"/>
</RelativeLayout>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="org.meicode.recyclerview">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
