RecyclerView In Android With Custom Adapter

RecyclerView Screen

In this tutorial we are going to create an application which shows list of books along with its price , rating and reviews count. We are going to use recycler view for creating the list. So lets get started with the tutorial. Hope you would like this tutorial.

Step 1: Create Project

First we need to create a new project. So launch your android studio and create a new project with whatever name you like. I have named it RecycleViewDemo you can name anything you like.

Create new project.
Configure your project.

Step 2: Add dependencies in your project.

Once the project is created you need to add the dependency for using recyclerview in your project. Add this dependency in your gradel (Module: app)

implementation ‘com.android.support:recyclerview-v7:28.0.0’

Add dependency

Step 3: Create Layouts

After adding the dependency we can start designing the layouts of our app. First we will create the main layout of the app inside the 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: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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycleList"
        >
    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

Once we have created the main layout we need to create the row for our recycler view. For that we will create my_list_row.xml file. So create a new layout resource file inside the layout folder and name it as my_list_row .

my_list_row.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="2"
            android:orientation="horizontal"
            android:id="@+id/mainLinear"
            >
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.6"
                >
                <ImageView
                    android:id="@+id/ivBook"
                    android:layout_width="match_parent"
                    android:layout_height="125dp"
                    android:layout_marginLeft="6dp"
                    android:layout_marginRight="6dp"
                    android:src="@drawable/book1" />
            </RelativeLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1.4"
                android:layout_marginTop="14dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:orientation="vertical"
                >
                <TextView
                    android:id="@+id/tvBookName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxLines="1"
                    android:text="Android Development"
                    android:textColor="@color/black"
                    android:textSize="18dp" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="The Busy Coder's Guid"
                    android:id="@+id/tvBookSubtitle"
                    android:textSize="12sp"
                    />
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:weightSum="2"
                    android:orientation="horizontal">
                    <RatingBar
                        android:id="@+id/bookRateBar"
                        style="?android:attr/ratingBarStyleSmall"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:rating="3" />
                    <TextView
                        android:id="@+id/tvPrice"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="end"
                        android:text="₹ 2000"
                        android:textAlignment="textEnd"
                        android:textColor="@color/black"
                        android:textSize="16sp" />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:weightSum="2"
                    android:orientation="horizontal"
                    >
                    <RelativeLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        >
                        <TextView
                            android:id="@+id/tvReviews"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true"
                            android:layout_marginLeft="3dp"
                            android:layout_marginStart="3dp"
                            android:text="200 reviews"
                            android:textSize="12sp" />
                    </RelativeLayout>
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/lightgrey"
            android:layout_below="@+id/mainLinear"
            />
    </RelativeLayout>
</RelativeLayout>

colors.xml

Add this code to your colors.xml file inside the values folder.

<?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="black">#000000</color>
    <color name="grey">#808080</color>
    <color name="lightgrey">#D3D3D3</color>
    <color name="white">#ffffff</color>
    <color name="orange">#f7ae01</color>
    <color name="btnColor">#338afe</color>
    <color name="yellow">#faf3a2</color>
    <color name="starColor">#FDB901</color>
    <color name="blur">#80FFFFFF</color>
    <color name="bg">#666666</color>
</resources>
My list row screen

With this we have completed with the designing of the layouts for our application. Now lets start with the main coding of the application.

Step 4: Creating the model class

Now lets create the model class . So model class is a class which store data like book name, book price etc. It is a class which stores our data and business logic. In model class there are mainly three methods.

  • Constructor: Which acts as a bridge between the model class and adapter class.
  • Getter Method : It is used for accessing the value of any property. Example: getBookName() for getting a particular book name.
  • Setter Methods: It is used for setting value of any property.

So lets create a model class named MyListModel inside the same package where our MainActivity is present. Below is the code for our model class.

package in.androidtuts.recycleviewdemo;

public class MyListModel {
    private String bookName,bookSubTitle;
    private int imagePath,bookPrice,bookReviews;
    private float bookRating;
    public MyListModel(String bookName, String bookSubTitle, int imagePath, int bookPrice, int bookReviews, float bookRating) {
        this.bookName = bookName;
        this.bookSubTitle = bookSubTitle;
        this.imagePath = imagePath;
        this.bookPrice = bookPrice;
        this.bookReviews = bookReviews;
        this.bookRating = bookRating;
    }
    public String getBookName() {
        return bookName;
    }
    public void setBookName(String bookName) {
        this.bookName = bookName;
    }
    public String getBookSubTitle() {
        return bookSubTitle;
    }
    public void setBookSubTitle(String bookSubTitle) {
        this.bookSubTitle = bookSubTitle;
    }
    public int getImagePath() {
        return imagePath;
    }
    public void setImagePath(int imagePath) {
        this.imagePath = imagePath;
    }
    public int getBookPrice() {
        return bookPrice;
    }
    public void setBookPrice(int bookPrice) {
        this.bookPrice = bookPrice;
    }
    public int getBookReviews() {
        return bookReviews;
    }
    public void setBookReviews(int bookReviews) {
        this.bookReviews = bookReviews;
    }
    public float getBookRating() {
        return bookRating;
    }
    public void setBookRating(float bookRating) {
        this.bookRating = bookRating;
    }
}

Step 5: Creating the adapter class

An adapter is responsible for retrieving data from the data set and for generating view objects based on that data. The generated View objects are then used to populate any adapter view that is bound to the adapter. In our example we will use recycle view adapter to populate data in our view. Below are the main methods of our adapter class.

  1. MyListViewHolder() : In this method we define our view which are present in my_list_row layout and get those view by their id’s.
  2. Create a constructor of the class : Constructor is the mediator between Adapter and Activity.
  3. onCreateViewHolder()  : This method create view for our application by inflating the layout.
  4. onBindViewHolder() : This method bind data with the layout items.
  5. getItemCount() : This method indicates how many items (or rows) are in the data set that will be presented in the Adapter View.

Now let’s create the adapter class named MyListAdapter inside the same package where our MainActivity is present. Below is the code for our adapter class.

package in.androidtuts.recycleviewdemo;
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.RatingBar;
import android.widget.TextView;
import java.util.List;
public class MyListAdapter extends RecyclerView.Adapter<MyListAdapter.MyListViewHolder> {
    List<MyListModel> myListModels;
    @NonNull
    @Override
    public MyListViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.my_list_row,viewGroup,false);
        return new MyListViewHolder(itemView);
    }
    @Override
    public void onBindViewHolder(@NonNull MyListViewHolder holder, int position) {
        MyListModel myListModel = myListModels.get(position);
        holder.tvBookName.setText(myListModel.getBookName());
        holder.tvBookSubtitle.setText(myListModel.getBookSubTitle());
        holder.tvPrice.setText("₹ "+String.valueOf(myListModel.getBookPrice()));
        holder.tvReviews.setText(String.valueOf(myListModel.getBookReviews())+" Reviews");
        holder.bookRateBar.setRating(myListModel.getBookRating());
        holder.ivBook.setImageResource(myListModel.getImagePath());
    }
    @Override
    public int getItemCount() {
        return myListModels.size();
    }
    public  class MyListViewHolder extends RecyclerView.ViewHolder
    {
        TextView tvBookName,tvBookSubtitle,tvPrice,tvReviews;
        RatingBar bookRateBar;
        ImageView ivBook;
        public MyListViewHolder(@NonNull View itemView) {
            super(itemView);
            tvBookName = itemView.findViewById(R.id.tvBookName);
            tvBookSubtitle = itemView.findViewById(R.id.tvBookSubtitle);
            tvPrice = itemView.findViewById(R.id.tvPrice);
            tvReviews = itemView.findViewById(R.id.tvReviews);
            bookRateBar = itemView.findViewById(R.id.bookRateBar);
            ivBook = itemView.findViewById(R.id.ivBook);
        }
    }
    public MyListAdapter(List<MyListModel> myListModels) {
        this.myListModels = myListModels;
    }
}

Step 6: Working with MainActivity and creating the data set.

This is the final step for creating the recycler view in this step we will work on the main activity class and create dummy data set for our recycler view. So lets start working on it. Below is the code for main activity which contains the data set.

package in.androidtuts.recycleviewdemo;

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

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    RecyclerView recycleList;
    MyListAdapter myListAdapter;
    List<MyListModel> myListModels = new ArrayList<>();

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

        recycleList = findViewById(R.id.recycleList);
        myListAdapter = new MyListAdapter(myListModels);
        recycleList.setHasFixedSize(true);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
        recycleList.setLayoutManager(layoutManager);
        recycleList.setAdapter(myListAdapter);

        loadDataSet();

    }

    public void loadDataSet()
    {
        MyListModel data = new MyListModel("Android Development","The Busy Coder's Guide",R.drawable.book1,1500,300,4);
        myListModels.add(data);

        data = new MyListModel("Android App Dev","for dummies",R.drawable.book2,1000,300,3);
        myListModels.add(data);

        data = new MyListModel("Android Studio 3.0","Development Essential",R.drawable.book3,2500,700,4);
        myListModels.add(data);

        data = new MyListModel("Beginning Android","Mark L. Murphy",R.drawable.book4,3000,800,5);
        myListModels.add(data);

        data = new MyListModel("Android Programming","Pushing the limits",R.drawable.book5,500,100,1);
        myListModels.add(data);

        data = new MyListModel("Android App Dev","O'REILLY",R.drawable.book6,800,300,2);
        myListModels.add(data);

        data = new MyListModel("Processing for Android","Andres Coluberi",R.drawable.book7,1500,400,3);
        myListModels.add(data);

        data = new MyListModel("Learn Android Studio 3","with Kotlin",R.drawable.book8,1700,1300,6);
        myListModels.add(data);

        data = new MyListModel("Hello Android","Ed Burnette",R.drawable.book9,1800,250,4);
        myListModels.add(data);

        data = new MyListModel("Pro Android Apps","Performance Optimization",R.drawable.book10,3500,100,3);
        myListModels.add(data);

        myListAdapter.notifyDataSetChanged();
    }
}

You can build your app and run on emulator now. Congratulations you have successfully created the recycler view which displays list of the books. Thanks for going through the entire tutorial. Let me know if there are any doubts in the comment section below i would be glad to solve them. See you in the next tutorial till then Sayonara!

0 thoughts on “RecyclerView In Android With Custom Adapter”

  1. Не обращая внимания на то, что контора букмекерская 1xbet зеркало рабочее на сегодня прямо содержит реальную лицензию и зарегистрирована на Кюрасао, Нидерландских Антильских островах, в Российской федерации ее интернет-сайт постоянно подвергается блокированию. Только пользователей фирмы это не должно беспокоить, так как управление компании выполнило соответствующие шаги в правильном направлении, гарантировав всем своим клиентам реальность прохода на ресурс в любое время, даже при обстоятельстве блокировки официального сайта 1xbet. Основания блокирования проекта В Рф утвержден законопроект, который ограничивает или воспрещает деятельность БК, какие не выполняют последующие требования: Реальная регистрация на территории РФ, получение лицензии и уплата налогообложения в бюджет. Вход в состав СРО. Так как БК уже имеет международную лицензию, ее субъекты сочли условия государства завышенными, за это подверглась блокировке. В последнее время работы 1xbet на территории России по решению судебного органа было заблокировано больше 500 доменных имен. Только это не препятствует компании продолжать деятельность, а ее клиентам использовать все разделы проекта, делать ставки и получать выигрыш. Как войти на заблокированный ресурс Чтобы обойти блокировку, работники фирмы предлагают всем своим игрокам вход к зеркалам 1xbet. Войти на действующую версию вебсайта можно с помощью гиперссылки 1xbet зеркало. Это простой и комфортный способ использования букмекерской конторой. Во время использования рабочего зеркала хранятся все индивидуальные сведения, включая счета и учетка, вдобавок рабочее зеркало точно повторяет главный ресурс. Он в такой же мере высококачественно предохранен и полностью не опасен для осуществления ставок, ввода и вывода денежных средств. Рабочее зеркало блокированного главного веб-сайта – наиболее комфортный способ продолжения проведения игровых ставок без мизерного риска и затруднений.

  2. Несмотря на то, что БК 1xbet имеет реальную лицензию и оформлена на Кюрасао, Нидерландских Антильских островах, в Российской федерации ее интернет-сайт постоянно подвергается блокировке. Однако клиентов конторы это не может беспокоить, так как управление компании предприняло надлежащие шаги в верном направлении, гарантировав своим клиентам возможность прохода на интернет-сайт в любое время, пусть даже при обстоятельстве блокирования главного сайта 1xbet. Основания блокирования проекта В Российской федерации принят законопроект, который ограничивает или воспрещает деятельность букмекерских компаний, которые не исполняют следующие требования: Официальная процедура регистрации на территории РФ, приобретение лицензии и оплата налогообложения в бюджет. Вход в состав СРО. Потому, что БК уже имеет международную лицензию, ее субъекты посчитали притязания государства завышенными, за что подверглась блокированию. В последнее время функционирования 1xbet на территории России по заключению судебного органа было заблокировано более 500 доменных имен. Однако все это не мешает компании возобновлять деятельность, а ее клиентам пользоваться абсолютно всеми областями сайта, делать ставки и выигрывать деньги. Каким образом войти на заблокированный интернет-сайт Чтобы обойти блокировку, работники компании предоставляют всем своим пользователям доступ к рабочим зеркалам 1xbet. Войти на действующую сборку вебсайта можно при помощи гиперссылки 1 xbet. Это удобный и несложный способ использования БК. При применении рабочего зеркала хранятся абсолютно все индивидуальные сведения, включая счета и аккаунт, к тому же зеркало точно копирует официальный портал. Он столь же качественно защищен и целиком безопасен для выполнения ставок, внесения и получения средств. Рабочее зеркало блокированного главного вебсайта – один из самых комфортных способов продолжения организации ставок без малейшего риска и затруднений.

Leave a Reply

Your email address will not be published. Required fields are marked *