Introduction
Ninety percent of people use Android smartphones. 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.
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.
Step 3
Select Android minimum SDK. Afterward, you need to choose the minimum SDK. It will show an approximate percentage of people. Use SDK, followed by clicking Next.
Step 4
Choose the basic activity, followed by clicking Next.
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.
- <?xml version="1.0" encoding="utf-8"?>
- <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:id="@+id/main_content"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@android:color/white"
- android:fitsSystemWindows="true">
-
- <android.support.design.widget.AppBarLayout
- android:id="@+id/appbar"
- android:layout_width="match_parent"
- android:layout_height="@dimen/detail_backdrop_height"
- android:fitsSystemWindows="true"
- android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
-
- <android.support.design.widget.CollapsingToolbarLayout
- android:id="@+id/collapsing_toolbar"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:fitsSystemWindows="true"
- app:contentScrim="?attr/colorPrimary"
- app:expandedTitleMarginEnd="64dp"
- app:expandedTitleMarginStart="48dp"
- app:expandedTitleTextAppearance="@android:color/transparent"
- app:layout_scrollFlags="scroll|exitUntilCollapsed">
-
- <RelativeLayout
- android:layout_width="wrap_content"
- android:layout_height="wrap_content">
-
- <ImageView
- android:id="@+id/backdrop"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:fitsSystemWindows="true"
- android:scaleType="centerCrop"
- app:layout_collapseMode="parallax" />
-
- <LinearLayout
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerInParent="true"
- android:gravity="center_horizontal"
- android:orientation="vertical">
-
- <TextView
- android:id="@+id/love_music"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/backdrop_title"
- android:textColor="@android:color/white"
- android:textSize="@dimen/backdrop_title" />
-
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/backdrop_subtitle"
- android:textColor="@android:color/white"
- android:textSize="@dimen/backdrop_subtitle" />
-
- </LinearLayout>
- </RelativeLayout>
-
- <android.support.v7.widget.Toolbar
- android:id="@+id/toolbar"
- android:layout_width="match_parent"
- android:layout_height="?attr/actionBarSize"
- app:layout_collapseMode="pin"
- app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
-
- </android.support.design.widget.CollapsingToolbarLayout>
-
- </android.support.design.widget.AppBarLayout>
-
- <include layout="@layout/content_main" />
-
- </android.support.design.widget.CoordinatorLayout>
UI design of the code given above
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
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:card_view="http://schemas.android.com/apk/res-auto"
- android:layout_width="match_parent"
- android:layout_height="wrap_content">
-
- <android.support.v7.widget.CardView
- android:id="@+id/card_view"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_gravity="center"
- android:layout_margin="@dimen/card_margin"
- android:elevation="3dp"
- card_view:cardCornerRadius="@dimen/card_album_radius">
-
- <RelativeLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent">
-
- <ImageView
- android:id="@+id/thumbnail"
- android:layout_width="match_parent"
- android:layout_height="@dimen/album_cover_height"
- android:background="?attr/selectableItemBackgroundBorderless"
- android:clickable="true"
- android:scaleType="fitXY" />
-
- <TextView
- android:id="@+id/title"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/thumbnail"
- android:paddingLeft="@dimen/album_title_padding"
- android:paddingRight="@dimen/album_title_padding"
- android:paddingTop="@dimen/album_title_padding"
- android:textColor="@color/album_title"
- android:textSize="@dimen/album_title" />
-
- <TextView
- android:id="@+id/count"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/title"
- android:paddingBottom="@dimen/songs_count_padding_bottom"
- android:paddingLeft="@dimen/album_title_padding"
- android:paddingRight="@dimen/album_title_padding"
- android:textSize="@dimen/songs_count" />
-
- <ImageView
- android:id="@+id/overflow"
- android:layout_width="@dimen/ic_album_overflow_width"
- android:layout_height="@dimen/ic_album_overflow_height"
- android:layout_alignParentRight="true"
- android:layout_below="@id/thumbnail"
- android:layout_marginTop="@dimen/ic_album_overflow_margin_top"
- android:scaleType="centerCrop"
- android:src="@drawable/ic_dots" />
-
- </RelativeLayout>
-
- </android.support.v7.widget.CardView>
-
- </LinearLayout>
UI design of the code given above
Step 8
Into the MainActivity.java, copy and paste the code given below. Java programming is the backend language for 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.
- package com.delaroystudios.cardview;
-
- import android.content.res.Resources;
- import android.graphics.Rect;
- import android.os.Bundle;
- import android.support.design.widget.AppBarLayout;
- import android.support.design.widget.CollapsingToolbarLayout;
- import android.support.v7.app.AppCompatActivity;
- import android.support.v7.widget.DefaultItemAnimator;
- import android.support.v7.widget.GridLayoutManager;
- import android.support.v7.widget.RecyclerView;
- import android.support.v7.widget.Toolbar;
- import android.util.TypedValue;
- import android.view.View;
- import android.widget.ImageView;
-
- import com.bumptech.glide.Glide;
-
- import java.util.ArrayList;
- import java.util.List;
-
- public class MainActivity extends AppCompatActivity {
-
- private RecyclerView recyclerView;
- private AlbumsAdapter adapter;
- private List<Album> albumList;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
- setSupportActionBar(toolbar);
-
- initCollapsingToolbar();
-
- recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
-
- albumList = new ArrayList<>();
- adapter = new AlbumsAdapter(this, albumList);
-
- RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(this, 2);
- recyclerView.setLayoutManager(mLayoutManager);
- recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, dpToPx(10), true));
- recyclerView.setItemAnimator(new DefaultItemAnimator());
- recyclerView.setAdapter(adapter);
-
- prepareAlbums();
-
- try {
- Glide.with(this).load(R.drawable.cover).into((ImageView) findViewById(R.id.backdrop));
- } catch (Exception e) {
- e.printStackTrace();
- }
- }
-
-
-
-
-
- private void initCollapsingToolbar() {
- final CollapsingToolbarLayout collapsingToolbar =
- (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
- collapsingToolbar.setTitle(" ");
- AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
- appBarLayout.setExpanded(true);
-
-
- appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
- boolean isShow = false;
- int scrollRange = -1;
-
- @Override
- public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
- if (scrollRange == -1) {
- scrollRange = appBarLayout.getTotalScrollRange();
- }
- if (scrollRange + verticalOffset == 0) {
- collapsingToolbar.setTitle(getString(R.string.app_name));
- isShow = true;
- } else if (isShow) {
- collapsingToolbar.setTitle(" ");
- isShow = false;
- }
- }
- });
- }
-
-
-
-
- private void prepareAlbums() {
- int[] covers = new int[]{
- R.drawable.album1,
- R.drawable.album2,
- R.drawable.album3,
- R.drawable.album4,
- R.drawable.album5,
- R.drawable.album6,
- R.drawable.album7,
- R.drawable.album8,
- R.drawable.album9,
- R.drawable.album10,
- R.drawable.album11};
-
- Album a = new Album("Maroon5", 13, covers[0]);
- albumList.add(a);
-
- a = new Album("Sugar Ray", 8, covers[1]);
- albumList.add(a);
-
- a = new Album("Bon Jovi", 11, covers[2]);
- albumList.add(a);
-
- a = new Album("The Corrs", 12, covers[3]);
- albumList.add(a);
-
- a = new Album("The Cranberries", 14, covers[4]);
- albumList.add(a);
-
- a = new Album("Westlife", 1, covers[5]);
- albumList.add(a);
-
- a = new Album("Black Eyed Peas", 11, covers[6]);
- albumList.add(a);
-
- a = new Album("VivaLaVida", 14, covers[7]);
- albumList.add(a);
-
- a = new Album("The Cardigans", 11, covers[8]);
- albumList.add(a);
-
- a = new Album("Pussycat Dolls", 17, covers[9]);
- albumList.add(a);
-
- adapter.notifyDataSetChanged();
- }
-
-
-
-
- public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {
-
- private int spanCount;
- private int spacing;
- private boolean includeEdge;
-
- public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {
- this.spanCount = spanCount;
- this.spacing = spacing;
- this.includeEdge = includeEdge;
- }
-
- @Override
- public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
- int position = parent.getChildAdapterPosition(view);
- int column = position % spanCount;
-
- if (includeEdge) {
- outRect.left = spacing - column * spacing / spanCount;
- outRect.right = (column + 1) * spacing / spanCount;
-
- if (position < spanCount) {
- outRect.top = spacing;
- }
- outRect.bottom = spacing;
- } else {
- outRect.left = column * spacing / spanCount;
- outRect.right = spacing - (column + 1) * spacing / spanCount;
- if (position >= spanCount) {
- outRect.top = spacing;
- }
- }
- }
- }
-
-
- private int dpToPx(int dp) {
- Resources r = getResources();
- return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics()));
- }
- }
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 Android. Do not replace your package name.
AlbumsAdapter.java code
- package com.delaroystudios.cardview;
-
- import android.content.Context;
- import android.support.v7.widget.PopupMenu;
- import android.support.v7.widget.RecyclerView;
- import android.view.LayoutInflater;
- import android.view.MenuInflater;
- import android.view.MenuItem;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.ImageView;
- import android.widget.TextView;
- import android.widget.Toast;
-
- import com.bumptech.glide.Glide;
-
- import java.util.List;
-
- public class AlbumsAdapter extends RecyclerView.Adapter<AlbumsAdapter.MyViewHolder> {
-
- private Context mContext;
- private List<Album> albumList;
-
- public class MyViewHolder extends RecyclerView.ViewHolder {
- public TextView title, count;
- public ImageView thumbnail, overflow;
-
- public MyViewHolder(View view) {
- super(view);
- title = (TextView) view.findViewById(R.id.title);
- count = (TextView) view.findViewById(R.id.count);
- thumbnail = (ImageView) view.findViewById(R.id.thumbnail);
- overflow = (ImageView) view.findViewById(R.id.overflow);
- }
- }
-
-
- public AlbumsAdapter(Context mContext, List<Album> albumList) {
- this.mContext = mContext;
- this.albumList = albumList;
- }
-
- @Override
- public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
- View itemView = LayoutInflater.from(parent.getContext())
- .inflate(R.layout.album_card, parent, false);
-
- return new MyViewHolder(itemView);
- }
-
- @Override
- public void onBindViewHolder(final MyViewHolder holder, int position) {
- Album album = albumList.get(position);
- holder.title.setText(album.getName());
- holder.count.setText(album.getNumOfSongs() + " songs");
-
-
- Glide.with(mContext).load(album.getThumbnail()).into(holder.thumbnail);
-
- holder.overflow.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View view) {
- showPopupMenu(holder.overflow);
- }
- });
- }
-
-
-
-
- private void showPopupMenu(View view) {
-
- PopupMenu popup = new PopupMenu(mContext, view);
- MenuInflater inflater = popup.getMenuInflater();
- inflater.inflate(R.menu.menu_album, popup.getMenu());
- popup.setOnMenuItemClickListener(new MyMenuItemClickListener());
- popup.show();
- }
-
-
-
-
- class MyMenuItemClickListener implements PopupMenu.OnMenuItemClickListener {
-
- public MyMenuItemClickListener() {
- }
-
- @Override
- public boolean onMenuItemClick(MenuItem menuItem) {
- switch (menuItem.getItemId()) {
- case R.id.action_add_favourite:
- Toast.makeText(mContext, "Add to favourite", Toast.LENGTH_SHORT).show();
- return true;
- case R.id.action_play_next:
- Toast.makeText(mContext, "Play next", Toast.LENGTH_SHORT).show();
- return true;
- default:
- }
- return false;
- }
- }
-
- @Override
- public int getItemCount() {
- return albumList.size();
- }
- }
Step 10
Create Albums.java into the layout (app->java->your package name). In Albums.java, copy and paste the code given below.
- package com.delaroystudios.cardview;
-
- public class Album {
- private String name;
- private int numOfSongs;
- private int thumbnail;
-
- public Album() {
- }
-
- public Album(String name, int numOfSongs, int thumbnail) {
- this.name = name;
- this.numOfSongs = numOfSongs;
- this.thumbnail = thumbnail;
- }
-
- public String getName() {
- return name;
- }
-
- public void setName(String name) {
- this.name = name;
- }
-
- public int getNumOfSongs() {
- return numOfSongs;
- }
-
- public void setNumOfSongs(int numOfSongs) {
- this.numOfSongs = numOfSongs;
- }
-
- public int getThumbnail() {
- return thumbnail;
- }
-
- public void setThumbnail(int thumbnail) {
- this.thumbnail = thumbnail;
- }
- }
Step 11
This is our user interface of the Application. Click Make Project.
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.
If you have any doubts, just comment below.