How to make gallery app using recyclerview

Introduction

In this article, we make admob app number 16. In this app we make gallery app using images. so our topic is how to make gallery app using recyclerview, Its very easy method follow my all steps.

Steps

1. Add Build.Gradules
2. Create layout name is item_list.xml. In this list out we will use card view. In card view we can use frame, image, text.
3. Create Adapter name as CustomAdapter.java. Here we can hold those data which is available in item_list.xml.
4. Create an activity name is FullView. Here we can show data in full. These data come from adapter using put extra.
5. In Main Activity we can call set layout manager as grid view layout. In grid view we can define 2 part of layout.
6. Paste images in Drawable folder.
7. Download Drawable Files Link
8. Add Some Colors.

Code

Build.Gradule Dependencies

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'

Res folder (Color.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="background" >#D3CCCC</color>
    <color name="white" > #fff</color>
</resources>

item_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    android:id="@+id/linear"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <android.support.v7.widget.CardView
        android:layout_width="180dp"
        android:layout_height="180dp"
       app:cardCornerRadius="8dp"


        android:layout_margin="8dp"

        >
        <FrameLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center_vertical"
            android:layout_centerInParent="true">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                   android:padding="4dp"
                    android:id="@+id/images"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                  />

                <TextView
                    android:id="@+id/imageNumber"
                    android:layout_width="match_parent"
                    android:gravity="center"
                    android:layout_height="wrap_content"
                    android:singleLine="true"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    android:text="Image 1"
                    android:background="@android:color/black"
                    android:textColor="@color/white"
                    android:layout_gravity="center"

                    />
            </LinearLayout>





        </FrameLayout>

    </android.support.v7.widget.CardView>


</LinearLayout>

CustomAdapter.java

import android.animation.TimeAnimator;
import android.content.Context;
import android.content.Intent;
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.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.CustomHolder>
{

     int []recvImages ;
     Context context;

    public CustomAdapter(Context context,int[] recvImages) {
        this.recvImages = recvImages;
        this.context=context;

    }

    @NonNull
    @Override
    public CustomHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

  View view=LayoutInflater.from ( viewGroup.getContext () ).inflate ( R.layout.item_list,viewGroup,false );

        return new CustomHolder ( view );
    }

    @Override
    public void onBindViewHolder(@NonNull final CustomHolder customHolder, int i)
    {
        final int imagId= recvImages[i];
      customHolder.imageView.setImageResource ( imagId );

      customHolder.textView.setText ( "Images: "+i );
  final int position=i;


          customHolder.linearLayout.setOnClickListener ( new View.OnClickListener () {
              @Override
              public void onClick(View v) {

                  Intent intent= new Intent ( context,FullView.class );
                  intent.putExtra ( "image",imagId );
                  intent.putExtra ( "position","Image: "+position );
                  context.startActivity ( intent );

              }
          } );

    }

    @Override
    public int getItemCount() {
        return recvImages.length;
    }

    public class CustomHolder extends RecyclerView.ViewHolder {

        LinearLayout linearLayout;
        ImageView imageView;
        TextView textView;

        public CustomHolder(@NonNull View itemView) {
            super ( itemView );

            imageView=(ImageView)itemView.findViewById ( R.id.images );
            textView=(TextView) itemView.findViewById ( R.id.imageNumber );
         linearLayout=(LinearLayout)itemView.findViewById ( R.id.linear );

        }
    }
}

activity_main.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"

    tools:context=".MainActivity">



    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:background="@drawable/bac"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>
</LinearLayout>

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;


public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;
    CustomAdapter customAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate ( savedInstanceState );
        setContentView ( R.layout.activity_main );


        recyclerView =(RecyclerView)findViewById ( R.id.recyclerview );

       int []images={R.drawable.h1,R.drawable.h2,R.drawable.h3,R.drawable.h4,R.drawable.h5,R.drawable.h6,R.drawable.h7,R.drawable.h8,R.drawable.h9,R.drawable.h1,R.drawable.h2,R.drawable.h3,R.drawable.h4,R.drawable.h5,R.drawable.h6,R.drawable.h7,R.drawable.h8,R.drawable.h9};
       RecyclerView.LayoutManager layoutManager;
        layoutManager=new GridLayoutManager ( this,2);
        recyclerView.setHasFixedSize ( true );
        recyclerView.setLayoutManager ( layoutManager);

        customAdapter=new CustomAdapter ( this,images );


        recyclerView.setAdapter ( customAdapter );


    }
}

activiy_full_view.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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".FullView">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:background="@android:color/black"
        android:text="Image Number"
        android:textSize="18dp"
        android:gravity="center"
        android:id="@+id/titles"

        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image"
        />
</LinearLayout>

FullView.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class FullView extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate ( savedInstanceState );
        setContentView ( R.layout.activity_full_view );

        ImageView imageView=(ImageView)findViewById ( R.id.image );

     imageView.setImageResource ( getIntent ().getIntExtra ( "image",00 ) );
        TextView textView= (TextView) findViewById ( R.id.titles );

        textView.setText ( getIntent ().getStringExtra ( "position" ) );


    }
}