Android

How To Create RecyclerView In An Android Using Android Studio

Introduction

Ninety percent of people use Android smart phones. RecyclerView provides an efficient user interface design. A maximum number of multimedia and commercial Applications are made up of RecyclerView. Thus, I will show you how to create RecyclerView in an Android, using an Android Studio. Android is a kernel based operating system. It allows the user to modify the GUI components and the source code.

Requirements

Steps to be followed are given below.

Carefully follow my steps to create RecyclerView in an Android, using an Android Studio and I have included the source code given below.

Step 1

Open an Android Studio. Start the new project.

android

Step 2

Put the Application name and the company domain. If you wish to use C++ to code the project, mark the Include C++ support, followed by clicking Next.

android

Step 3

Select Android minimum SDK. Afterwards, you need to chose the minimum SDK. It will show an approximate percentage of the people. Use SDK, followed by clicking Next.

android

Step 4

Choose the basic activity, followed by clicking Next.

android

Step 5

Put the activity name and the layout name. Android Studio basically takes Java class name as what you provide for the activity name. My activity name is the default name.

Step 6

Go to activity_main.xml, followed by clicking the text bottom. This XML file contains the designing the code for an Android app. In activity_main.xml, copy and paste the code given below.

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     android:id="@+id/main_content"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:background="@android:color/white"  
  8.     android:fitsSystemWindows="true">  
  9.   
  10.     <android.support.design.widget.AppBarLayout  
  11.         android:id="@+id/appbar"  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="@dimen/detail_backdrop_height"  
  14.         android:fitsSystemWindows="true"  
  15.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  
  16.   
  17.         <android.support.design.widget.CollapsingToolbarLayout  
  18.             android:id="@+id/collapsing_toolbar"  
  19.             android:layout_width="match_parent"  
  20.             android:layout_height="match_parent"  
  21.             android:fitsSystemWindows="true"  
  22.             app:contentScrim="?attr/colorPrimary"  
  23.             app:expandedTitleMarginEnd="64dp"  
  24.             app:expandedTitleMarginStart="48dp"  
  25.             app:expandedTitleTextAppearance="@android:color/transparent"  
  26.             app:layout_scrollFlags="scroll|exitUntilCollapsed">  
  27.   
  28.             <RelativeLayout  
  29.                 android:layout_width="wrap_content"  
  30.                 android:layout_height="wrap_content">  
  31.   
  32.                 <ImageView  
  33.                     android:id="@+id/backdrop"  
  34.                     android:layout_width="match_parent"  
  35.                     android:layout_height="match_parent"  
  36.                     android:fitsSystemWindows="true"  
  37.                     android:scaleType="centerCrop"  
  38.                     app:layout_collapseMode="parallax" />  
  39.   
  40.                 <LinearLayout  
  41.                     android:layout_width="wrap_content"  
  42.                     android:layout_height="wrap_content"  
  43.                     android:layout_centerInParent="true"  
  44.                     android:gravity="center_horizontal"  
  45.                     android:orientation="vertical">  
  46.   
  47.                     <TextView  
  48.                         android:id="@+id/love_music"  
  49.                         android:layout_width="wrap_content"  
  50.                         android:layout_height="wrap_content"  
  51.                         android:text="@string/backdrop_title"  
  52.                         android:textColor="@android:color/white"  
  53.                         android:textSize="@dimen/backdrop_title" />  
  54.   
  55.                     <TextView  
  56.                         android:layout_width="wrap_content"  
  57.                         android:layout_height="wrap_content"  
  58.                         android:text="@string/backdrop_subtitle"  
  59.                         android:textColor="@android:color/white"  
  60.                         android:textSize="@dimen/backdrop_subtitle" />  
  61.   
  62.                 </LinearLayout>  
  63.             </RelativeLayout>  
  64.   
  65.             <android.support.v7.widget.Toolbar  
  66.                 android:id="@+id/toolbar"  
  67.                 android:layout_width="match_parent"  
  68.                 android:layout_height="?attr/actionBarSize"  
  69.                 app:layout_collapseMode="pin"  
  70.                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />  
  71.   
  72.         </android.support.design.widget.CollapsingToolbarLayout>  
  73.   
  74.     </android.support.design.widget.AppBarLayout>  
  75.   
  76.     <include layout="@layout/content_main" />  
  77.   
  78. </android.support.design.widget.CoordinatorLayout>   

UI design of the code given above

android

Step 7 

Create album_card.xml into the layout (app->res->layout). This XML file contains the designing code for an Android app. In album_card.xml, copy and paste the code given below.

album_card.xml code

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:card_view="http://schemas.android.com/apk/res-auto"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content">  
  5.   
  6.     <android.support.v7.widget.CardView  
  7.         android:id="@+id/card_view"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:layout_gravity="center"  
  11.         android:layout_margin="@dimen/card_margin"  
  12.         android:elevation="3dp"  
  13.         card_view:cardCornerRadius="@dimen/card_album_radius">  
  14.   
  15.         <RelativeLayout  
  16.             android:layout_width="match_parent"  
  17.             android:layout_height="match_parent">  
  18.   
  19.             <ImageView  
  20.                 android:id="@+id/thumbnail"  
  21.                 android:layout_width="match_parent"  
  22.                 android:layout_height="@dimen/album_cover_height"  
  23.                 android:background="?attr/selectableItemBackgroundBorderless"  
  24.                 android:clickable="true"  
  25.                 android:scaleType="fitXY" />  
  26.   
  27.             <TextView  
  28.                 android:id="@+id/title"  
  29.                 android:layout_width="match_parent"  
  30.                 android:layout_height="wrap_content"  
  31.                 android:layout_below="@id/thumbnail"  
  32.                 android:paddingLeft="@dimen/album_title_padding"  
  33.                 android:paddingRight="@dimen/album_title_padding"  
  34.                 android:paddingTop="@dimen/album_title_padding"  
  35.                 android:textColor="@color/album_title"  
  36.                 android:textSize="@dimen/album_title" />  
  37.   
  38.             <TextView  
  39.                 android:id="@+id/count"  
  40.                 android:layout_width="match_parent"  
  41.                 android:layout_height="wrap_content"  
  42.                 android:layout_below="@id/title"  
  43.                 android:paddingBottom="@dimen/songs_count_padding_bottom"  
  44.                 android:paddingLeft="@dimen/album_title_padding"  
  45.                 android:paddingRight="@dimen/album_title_padding"  
  46.                 android:textSize="@dimen/songs_count" />  
  47.   
  48.             <ImageView  
  49.                 android:id="@+id/overflow"  
  50.                 android:layout_width="@dimen/ic_album_overflow_width"  
  51.                 android:layout_height="@dimen/ic_album_overflow_height"  
  52.                 android:layout_alignParentRight="true"  
  53.                 android:layout_below="@id/thumbnail"  
  54.                 android:layout_marginTop="@dimen/ic_album_overflow_margin_top"  
  55.                 android:scaleType="centerCrop"  
  56.                 android:src="@drawable/ic_dots" />  
  57.   
  58.         </RelativeLayout>  
  59.   
  60.     </android.support.v7.widget.CardView>  
  61.   
  62. </LinearLayout>   

UI design of the code given above

android

Step 8

Into the MainActivity.java, copy and paste the code given below. Java programming is the backend language for an Android. Do not replace your package name, else an app will not run. The code given below contains my package name. MainActivity.java code is given below.

  1. package com.delaroystudios.cardview;  
  2.   
  3. import android.content.res.Resources;  
  4. import android.graphics.Rect;  
  5. import android.os.Bundle;  
  6. import android.support.design.widget.AppBarLayout;  
  7. import android.support.design.widget.CollapsingToolbarLayout;  
  8. import android.support.v7.app.AppCompatActivity;  
  9. import android.support.v7.widget.DefaultItemAnimator;  
  10. import android.support.v7.widget.GridLayoutManager;  
  11. import android.support.v7.widget.RecyclerView;  
  12. import android.support.v7.widget.Toolbar;  
  13. import android.util.TypedValue;  
  14. import android.view.View;  
  15. import android.widget.ImageView;  
  16.   
  17. import com.bumptech.glide.Glide;  
  18.   
  19. import java.util.ArrayList;  
  20. import java.util.List;  
  21.   
  22. public class MainActivity extends AppCompatActivity {  
  23.   
  24.     private RecyclerView recyclerView;  
  25.     private AlbumsAdapter adapter;  
  26.     private List<Album> albumList;  
  27.   
  28.     @Override  
  29.     protected void onCreate(Bundle savedInstanceState) {  
  30.         super.onCreate(savedInstanceState);  
  31.         setContentView(R.layout.activity_main);  
  32.         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
  33.         setSupportActionBar(toolbar);  
  34.   
  35.         initCollapsingToolbar();  
  36.   
  37.         recyclerView = (RecyclerView) findViewById(R.id.recycler_view);  
  38.   
  39.         albumList = new ArrayList<>();  
  40.         adapter = new AlbumsAdapter(this, albumList);  
  41.   
  42.         RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(this, 2);  
  43.         recyclerView.setLayoutManager(mLayoutManager);  
  44.         recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, dpToPx(10), true));  
  45.         recyclerView.setItemAnimator(new DefaultItemAnimator());  
  46.         recyclerView.setAdapter(adapter);  
  47.   
  48.         prepareAlbums();  
  49.   
  50.         try {  
  51.             Glide.with(this).load(R.drawable.cover).into((ImageView) findViewById(R.id.backdrop));  
  52.         } catch (Exception e) {  
  53.             e.printStackTrace();  
  54.         }  
  55.     }  
  56.   
  57.     /** 
  58.      * Initializing collapsing toolbar 
  59.      * Will show and hide the toolbar title on scroll 
  60.      */  
  61.     private void initCollapsingToolbar() {  
  62.         final CollapsingToolbarLayout collapsingToolbar =  
  63.                 (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);  
  64.         collapsingToolbar.setTitle(" ");  
  65.         AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);  
  66.         appBarLayout.setExpanded(true);  
  67.   
  68.         // hiding & showing the title when toolbar expanded & collapsed  
  69.         appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {  
  70.             boolean isShow = false;  
  71.             int scrollRange = -1;  
  72.   
  73.             @Override  
  74.             public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {  
  75.                 if (scrollRange == -1) {  
  76.                     scrollRange = appBarLayout.getTotalScrollRange();  
  77.                 }  
  78.                 if (scrollRange + verticalOffset == 0) {  
  79.                     collapsingToolbar.setTitle(getString(R.string.app_name));  
  80.                     isShow = true;  
  81.                 } else if (isShow) {  
  82.                     collapsingToolbar.setTitle(" ");  
  83.                     isShow = false;  
  84.                 }  
  85.             }  
  86.         });  
  87.     }  
  88.   
  89.     /** 
  90.      * Adding few albums for testing 
  91.      */  
  92.     private void prepareAlbums() {  
  93.         int[] covers = new int[]{  
  94.                 R.drawable.album1,  
  95.                 R.drawable.album2,  
  96.                 R.drawable.album3,  
  97.                 R.drawable.album4,  
  98.                 R.drawable.album5,  
  99.                 R.drawable.album6,  
  100.                 R.drawable.album7,  
  101.                 R.drawable.album8,  
  102.                 R.drawable.album9,  
  103.                 R.drawable.album10,  
  104.                 R.drawable.album11};  
  105.   
  106.         Album a = new Album("Maroon5", 13, covers[0]);  
  107.         albumList.add(a);  
  108.   
  109.         a = new Album("Sugar Ray", 8, covers[1]);  
  110.         albumList.add(a);  
  111.   
  112.         a = new Album("Bon Jovi", 11, covers[2]);  
  113.         albumList.add(a);  
  114.   
  115.         a = new Album("The Corrs", 12, covers[3]);  
  116.         albumList.add(a);  
  117.   
  118.         a = new Album("The Cranberries", 14, covers[4]);  
  119.         albumList.add(a);  
  120.   
  121.         a = new Album("Westlife", 1, covers[5]);  
  122.         albumList.add(a);  
  123.   
  124.         a = new Album("Black Eyed Peas", 11, covers[6]);  
  125.         albumList.add(a);  
  126.   
  127.         a = new Album("VivaLaVida", 14, covers[7]);  
  128.         albumList.add(a);  
  129.   
  130.         a = new Album("The Cardigans", 11, covers[8]);  
  131.         albumList.add(a);  
  132.   
  133.         a = new Album("Pussycat Dolls", 17, covers[9]);  
  134.         albumList.add(a);  
  135.   
  136.         adapter.notifyDataSetChanged();  
  137.     }  
  138.   
  139.     /** 
  140.      * RecyclerView item decoration - give equal margin around grid item 
  141.      */  
  142.     public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {  
  143.   
  144.         private int spanCount;  
  145.         private int spacing;  
  146.         private boolean includeEdge;  
  147.   
  148.         public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {  
  149.             this.spanCount = spanCount;  
  150.             this.spacing = spacing;  
  151.             this.includeEdge = includeEdge;  
  152.         }  
  153.   
  154.         @Override  
  155.         public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {  
  156.             int position = parent.getChildAdapterPosition(view); // item position  
  157.             int column = position % spanCount; // item column  
  158.   
  159.             if (includeEdge) {  
  160.                 outRect.left = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)  
  161.                 outRect.right = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)  
  162.   
  163.                 if (position < spanCount) { // top edge  
  164.                     outRect.top = spacing;  
  165.                 }  
  166.                 outRect.bottom = spacing; // item bottom  
  167.             } else {  
  168.                 outRect.left = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)  
  169.                 outRect.right = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f /    spanCount) * spacing)  
  170.                 if (position >= spanCount) {  
  171.                     outRect.top = spacing; // item top  
  172.                 }  
  173.             }  
  174.         }  
  175.     }  
  176.   
  177.       
  178.     private int dpToPx(int dp) {  
  179.         Resources r = getResources();  
  180.         return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics()));  
  181.     }  
  182. }   

Step 9

Create AlbumsAdapter.java into the layout (app->java->your package name).Into the AlbumsAdapter.java copy and paste the code given below. Java programming is the backend language for an Android. Do not replace your package name. 

AlbumsAdapter.java code

  1. package com.delaroystudios.cardview;  
  2.   
  3. import android.content.Context;  
  4. import android.support.v7.widget.PopupMenu;  
  5. import android.support.v7.widget.RecyclerView;  
  6. import android.view.LayoutInflater;  
  7. import android.view.MenuInflater;  
  8. import android.view.MenuItem;  
  9. import android.view.View;  
  10. import android.view.ViewGroup;  
  11. import android.widget.ImageView;  
  12. import android.widget.TextView;  
  13. import android.widget.Toast;  
  14.   
  15. import com.bumptech.glide.Glide;  
  16.   
  17. import java.util.List;  
  18.   
  19. public class AlbumsAdapter extends RecyclerView.Adapter<AlbumsAdapter.MyViewHolder> {  
  20.   
  21.     private Context mContext;  
  22.     private List<Album> albumList;  
  23.   
  24.     public class MyViewHolder extends RecyclerView.ViewHolder {  
  25.         public TextView title, count;  
  26.         public ImageView thumbnail, overflow;  
  27.   
  28.         public MyViewHolder(View view) {  
  29.             super(view);  
  30.             title = (TextView) view.findViewById(R.id.title);  
  31.             count = (TextView) view.findViewById(R.id.count);  
  32.             thumbnail = (ImageView) view.findViewById(R.id.thumbnail);  
  33.             overflow = (ImageView) view.findViewById(R.id.overflow);  
  34.         }  
  35.     }  
  36.   
  37.   
  38.     public AlbumsAdapter(Context mContext, List<Album> albumList) {  
  39.         this.mContext = mContext;  
  40.         this.albumList = albumList;  
  41.     }  
  42.   
  43.     @Override  
  44.     public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
  45.         View itemView = LayoutInflater.from(parent.getContext())  
  46.                 .inflate(R.layout.album_card, parent, false);  
  47.   
  48.         return new MyViewHolder(itemView);  
  49.     }  
  50.   
  51.     @Override  
  52.     public void onBindViewHolder(final MyViewHolder holder, int position) {  
  53.         Album album = albumList.get(position);  
  54.         holder.title.setText(album.getName());  
  55.         holder.count.setText(album.getNumOfSongs() + " songs");  
  56.   
  57.         // loading album cover using Glide library  
  58.         Glide.with(mContext).load(album.getThumbnail()).into(holder.thumbnail);  
  59.   
  60.         holder.overflow.setOnClickListener(new View.OnClickListener() {  
  61.             @Override  
  62.             public void onClick(View view) {  
  63.                 showPopupMenu(holder.overflow);  
  64.             }  
  65.         });  
  66.     }  
  67.   
  68.     /** 
  69.      * Showing popup menu when tapping on 3 dots 
  70.      */  
  71.     private void showPopupMenu(View view) {  
  72.         // inflate menu  
  73.         PopupMenu popup = new PopupMenu(mContext, view);  
  74.         MenuInflater inflater = popup.getMenuInflater();  
  75.         inflater.inflate(R.menu.menu_album, popup.getMenu());  
  76.         popup.setOnMenuItemClickListener(new MyMenuItemClickListener());  
  77.         popup.show();  
  78.     }  
  79.   
  80.     /** 
  81.      * Click listener for popup menu items 
  82.      */  
  83.     class MyMenuItemClickListener implements PopupMenu.OnMenuItemClickListener {  
  84.   
  85.         public MyMenuItemClickListener() {  
  86.         }  
  87.   
  88.         @Override  
  89.         public boolean onMenuItemClick(MenuItem menuItem) {  
  90.             switch (menuItem.getItemId()) {  
  91.                 case R.id.action_add_favourite:  
  92.                     Toast.makeText(mContext, "Add to favourite", Toast.LENGTH_SHORT).show();  
  93.                     return true;  
  94.                 case R.id.action_play_next:  
  95.                     Toast.makeText(mContext, "Play next", Toast.LENGTH_SHORT).show();  
  96.                     return true;  
  97.                 default:  
  98.             }  
  99.             return false;  
  100.         }  
  101.     }  
  102.   
  103.     @Override  
  104.     public int getItemCount() {  
  105.         return albumList.size();  
  106.     }  
  107. }  
Step 10

Create Albums.java into the layout (app->java->your package name). In Albums.java, copy and paste the code given below.
  1. package com.delaroystudios.cardview;  
  2.   
  3. public class Album {  
  4.     private String name;  
  5.     private int numOfSongs;  
  6.     private int thumbnail;  
  7.   
  8.     public Album() {  
  9.     }  
  10.   
  11.     public Album(String name, int numOfSongs, int thumbnail) {  
  12.         this.name = name;  
  13.         this.numOfSongs = numOfSongs;  
  14.         this.thumbnail = thumbnail;  
  15.     }  
  16.   
  17.     public String getName() {  
  18.         return name;  
  19.     }  
  20.   
  21.     public void setName(String name) {  
  22.         this.name = name;  
  23.     }  
  24.   
  25.     public int getNumOfSongs() {  
  26.         return numOfSongs;  
  27.     }  
  28.   
  29.     public void setNumOfSongs(int numOfSongs) {  
  30.         this.numOfSongs = numOfSongs;  
  31.     }  
  32.   
  33.     public int getThumbnail() {  
  34.         return thumbnail;  
  35.     }  
  36.   
  37.     public void setThumbnail(int thumbnail) {  
  38.         this.thumbnail = thumbnail;  
  39.     }  
  40. }   

Step 11

This is our user interface of the Application. Click Make Project.

android

Step 12

Run the Application, followed by choosing the virtual machine. Click OK.

Deliverables

Here, we have successfully created RecyclerView in an Android, using an Android Studio Application and executed it.

android

android

If you have any doubts, just comment below.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs