1) Add this dependencies in your gradle file
implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
Glide is an Image Loader Library for Android developed by bumptech and is a library that is recommended by Google. It has been used in many Google open source projects including Google I/O 2014 official application. It provides animated GIF support and handles image loading/caching.
2) create staggerd_layout.xml in res/layout folder
staggerd_layout.xml
<RelativeLayout 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"
android:layout_margin="5dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="4dp"
app:cardElevation="2dp"
android:layout_centerHorizontal="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
android:id="@+id/imageview_widget"
android:scaleType="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Canada"
android:id="@+id/name_widget"
android:layout_below="@+id/imageview_widget"
android:layout_marginTop="10dp"
android:textColor="#000"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
3)Create StaggeredRecyclerViewAdapter class
StaggeredRecyclerViewAdapter.java
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.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;
import java.util.ArrayList;
public class StaggeredRecyclerViewAdapter extends RecyclerView.Adapter<StaggeredRecyclerViewAdapter.ViewHolder> {
private ArrayList<String> Title = new ArrayList<>();
private ArrayList<String> ImageUrl = new ArrayList<>();
private Context mContext;
public StaggeredRecyclerViewAdapter(Context context, ArrayList<String> names, ArrayList<String> imageUrls) {
Title = names;
ImageUrl = imageUrls;
mContext = context;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.staggerd_layout, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, final int position) {
RequestOptions requestOptions = new RequestOptions()
.placeholder(R.drawable.ic_launcher_background);
Glide.with(mContext)
.load(ImageUrl.get(position))
.apply(requestOptions)
.into(holder.image);
holder.name.setText(Title.get(position));
holder.image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mContext, Title.get(position), Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount() {
return ImageUrl.size();
}
public class ViewHolder extends RecyclerView.ViewHolder{
ImageView image;
TextView name;
public ViewHolder(View itemView) {
super(itemView);
this.image = itemView.findViewById(R.id.imageview_widget);
this.name = itemView.findViewById(R.id.name_widget);
}
}
}
4)Add RecyclerView In Your activity_main.xml file
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:background="@android:color/darker_gray">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recyclerview"
android:orientation="vertical"/>
</RelativeLayout>
5) Now Is Time To Implement Bind Data In MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import android.os.Bundle;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private static final int NUM_COLUMNS = 2;
private ArrayList<String> ImageUrl = new ArrayList<>();
private ArrayList<String> Title = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initImageBitmap();
}
private void initImageBitmap() {
ImageUrl.add("http://www.transindiatravels.com/wp-content/uploads/the-taj-mahal-agra.jpg");
Title.add("Taj Mahal");
ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-varanasi.jpg");
Title.add("Varanasi");
ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-jaisalmer.jpg");
Title.add("Jaisalmer");
ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-gateway-india.jpg");
Title.add("Gateway of India");
ImageUrl.add("https://upload.wikimedia.org/wikipedia/commons/0/09/India_Gate_in_New_Delhi_03-2016.jpg");
Title.add("India Gate");
ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-amer-fort.jpg");
Title.add("Amer Fort, Jaipur");
ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-goa.jpg");
Title.add("The Beaches of Goa");
ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-ellora-caves.jpg");
Title.add("The Ellora Caves, Aurangabad");
ImageUrl.add("https://images.mapsofindia.com/my-india/qutub-minar-delhi.jpg");
Title.add("Kutub Minar");
ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-mysore-palace.jpg");
Title.add("Mysore Palace");
ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-mahabodhi-temple.jpg");
Title.add("Mahabodhi Temple, Bodhgaya");
initRecyclerView();
}
private void initRecyclerView() {
RecyclerView recyclerView = findViewById(R.id.recyclerview);
StaggeredRecyclerViewAdapter staggeredRecyclerViewAdapter =
new StaggeredRecyclerViewAdapter(this, Title, ImageUrl);
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(
NUM_COLUMNS,
LinearLayoutManager.VERTICAL);
/*
Official Link Of StaggeredGridLayoutManager
https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager
*/
recyclerView.setLayoutManager(staggeredGridLayoutManager);
recyclerView.setAdapter(staggeredRecyclerViewAdapter);
}
}
Subscribe Our YouTube Channel:
Mijas Siklodi
