RECYCLER VIEW - PART 1

RECYCLER VIEW IN ANDROID - PART 1

• WHAT IS RECYCLER VIEW ??

 Recycler View is the advanced and flexible version of List View which holds all the data you want to view or display in your android application list as above image. Example of similar applications may be Playstore , WhatsApp , Other apps which you come across in your day to day life. 

• WHAT IS THE USE OF RECYCLER VIEW ?? 

We can use recycler view for gathering the data or retrieving the data , from the action that user performs or from the servers(or network events) and place onto the recycler view list.

• HOW TO IMPLEMENT IN ANDROID STUDIO ?? 

  Add the dependencies to "gradle.app" file. 

Just follow the following steps in order to add the dependencies : 

1. Click File -> Project Structure -> "+" icon -> Library Dependency.(check Image Below) 

2. Now you have to add following 3 dependencies :

3. Now we have to add recycler view to our resource file which is "activity_main.xml".

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/recycler_view"></android.support.v7.widget.RecyclerView> 

 Now we should create another resource file, which contains the design of how our recycler view should look.

4. In the left Project toolbar of android studio, select res -> (right click) layout -> new ->Layout resource file -> layout_design.xml(name) -> Ok.

Copy the below code onto the new layout_design.xml file.

<?xml version="1.0" encoding="utf-8"?><LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp">

        <ImageView
        android:id="@+id/app_logo"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher_round"/>

            <TextView android:id="@+id/app_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="APP NAME"
                android:layout_toEndOf="@+id/app_logo"
                android:textColor="@android:color/black"
                android:textStyle="bold"
                android:textSize="20sp"
                android:padding="4dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"/>

            <TextView android:id="@+id/app_dev"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="APP DEVELOPER"
                android:layout_toEndOf="@+id/app_logo"
                android:textColor="@android:color/black"
                android:layout_below="@+id/app_name"
                android:layout_marginStart="10dp"
                android:padding="4dp"
                android:layout_marginEnd="10dp"/>
        </RelativeLayout>
    </android.support.v7.widget.CardView></LinearLayout> 

Now, we have create our model class which contains the data we want to display in our list.

5. In the left Project toolbar of android studio, select java->(right click) com.(your domain)-> new ->java class->ListItems(name) -> Ok.

In this example we want data of app_name , app_developer and app_logo. So, we insert the getters for these 3 data as below.

public class ListItems {
    //textviews - string
    public String app_name;
    public String app_dev;

    //imageviews - int
    public int app_logo;

    public String getApp_name() {
        return app_name;
    }

    public String getApp_dev() {
        return app_dev;
    }

    public int getApp_logo() {
        return app_logo;
    }
} 

Now, we have create another class where we will add the data like image resources for app_logo and name of app’s and app developers for app_name and app_developer. 

6. In the left Project toolbar of android studio, select java ->(right click) com.(your domain)-> new ->java class->Data(name) -> Ok. 

To add the images , copy(1) any image in your PC , open android studio , then follow the following steps :

In the left Project toolbar of android studio, select res->(right click) drawable-> paste(2).

And that’s it you are good to go.

public class Data {
    public static ArrayList<ListItems> givedata() {
        ArrayList<ListItems> listItems = new ArrayList<>();

        String app_name[] = {"GMAIL", "FACEBOOK", "INBOX", "GOOGLE+", "WHATSAPP", "TWITTER"};

        String app_dev[] = {"Google LLC", "Facebook INC.", "Google LLC", "Google LLC", "Whatsapp.INC", "Twitter INC."};

        int app_logo[] = {R.drawable.gmail, R.drawable.facebook, R.drawable.inbox, R.drawable.google,
                R.drawable.whatsapp, R.drawable.twitter};

        for (int i = 0; i < app_name.length; i++) {
            ListItems listItems1 = new ListItems();
            listItems1.app_name = app_name[i];
            listItems1.app_dev = app_dev[i];
            listItems1.app_logo = app_logo[i];
            listItems.add(listItems1);
        }
        return listItems;
    }
}

In the next part,  we will learn how to set the adapter and display in your application.
Until then "HAPPY CODING".

 Find this tutorial Video here!!!!!