Making Album List 2 – Using RecyclerView & CardView on Android

In this tutorial, we will learn how to use RecyclerView and CardView on android. Our scenario is the same as previous tutorial. We have an album list of some artists and we can change any album name or delete an list item. We will use RecyclerView as list element and each item of the RecyclerView will be a CardView.

Definition of RecyclerView and CardView from developer.android.com

The RecyclerView widget is a more advanced and flexible version of ListView. This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views. Use the RecyclerViewwidget when you have data collections whose elements change at runtime based on user action or network events.

CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look across the platform. CardView widgets can have shadows and rounded corners.

  • Lets begin. Open your Android Studio. Start a new project. Project name is up to you, I named it as AlbumList2. If you forget how to open new project in android studio, follow this.

 

  • As always, first of all, define all resources used by application.
    Open your res/values/strings.xml file and add below string item.

    Open your res/values/colors.xml file and add below color items.

 

  • Lets design the screen. Our activity contains just a RecyclerView. But RecyclerView is not found in default view elements. It comes from support library. First of all, we should add RecyclerView and CardView dependencies. Open your build.gradle of app module and add below two dependencies.

    Screen Shot 2015-12-21 at 17.43.17

 

  • Open your res/layout/activity_main.xml file and and put a RecyclerView in it.

     
  • We should design recyclerview item layout also. An item looks like below.
    recyclerview_item

 

  • Create a new layout resource file. Right click on res/layout folder and go New->Layout resource file. Name it as album_card.xml.
    Screen Shot 2015-12-19 at 21.06.50
     Screen Shot 2015-12-21 at 18.08.49

 

  • Open res/layout/album_card.xml and design your CardView like below.

 

  • We need an album cover images. I pick 4 different artists for this scenario. So download below images and place it under res/drawable folder.
    beyonce_album_cover enrique_album_cover pitbull_album_cover shakira_album_coverScreen Shot 2015-12-21 at 18.25.41

 

  • We are ok with design. Lets go java side.
  • Every recyclerview item shows datas like album name, artist name and album cover image. These datas should be hold in a model list. Model lists are like an ArrayLists in java and they just hold raw datas. Right click on your package and create new class like below. Name it as Album.java
    Screen Shot 2015-12-19 at 21.27.15
    Screen Shot 2015-12-19 at 21.27.29

  • An album object holds two strings and an integer. Strings are album name and artist name. Integer is drawable id of album cover image. Open your Album class and write below.

     
  • Next, create a model list and fill it up. Open your MainActivity.java and write below.

     
  • Model list is ready. Next, we have to configure our RecyclerView. I assume that you are familiar with Adapter concept but I will explain again. Every view element which lists something need an adapter in android. Adapters arrange items appearance and their order.
    from developer.android.com

    Adapter that pulls content from a source such as an array or database query and converts each item result into a view that’s placed into the list.

  • Lets create an adapter. Right click on your package and create a java class again. Name it as RecyclerViewAdapter
    Screen Shot 2015-12-19 at 21.27.15
    Screen Shot 2015-12-21 at 18.39.38

 

  • Open RecyclerViewAdapter and write below.

 

  • In RecyclerViewAdapter, implemeting some optimization techniques is mandatory. For example using ViewHolder is optional for implementing ListView but if you use RecyclerView you have to do that. If you are not familiar with convertView and ViewHolder concept , I recommend you read Optimization of ListView of previous tutorial.

 

  • Back to MainActivity. Lets create an adapter object and give it to our recyclerview.

     
  • Thats all, you can run your application and try it. Next tutorial is about using ItemClickListener on RecyclerView because an ItemClickListener for RecyclerView doesn’t exist. You need to create custom listener.
download_source_icon Download Source Code
If you don’t know how to open an existing Android Studio Project, follow this tutorial.

Bir Cevap Yazın