How to Create a Custom RecyclerView in Android

How to Create a Custom RecyclerView in Android

Welcome folks I am back with another blog post. In this post we will be implementing Custom Recycler View in Android Application. Recycler Views are a very important concept in Android Applications. In almost all apps we some kinds of Recycler views. In this post we will be implementing a custom Recycler View. Let’s get started with this post.

 

 

In the above figure you can see the custom recycler view. For creating this we are using the library OmegaRecyclerView.

 

To get started with using the library include this line of code in project level build.gradle file of your new project. Copy exactly in the correct location mentioned below.

 

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

 

Secondly include the dependecy of the library and copy paste the following line.

 

dependencies {
    implementation 'com.github.Omega-R:OmegaRecyclerView:1.9.0@aar' // AndroidX
    // or
    // implementation 'com.github.Omega-R:OmegaRecyclerView:1.8.0@aar' // Android Support
}

 

STICKY HEADER RECYCLERVIEW IN ANDROID

 

The first example which we will be creating is the sticky header recyclerview. Just copy paste the xml code into your main_activity.xml file and boom you have created your recylcerview.

READ  Firebase Phone Authentication in Android - Full Tutorial

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" xmlns:tools="http://schemas.android.com/tools">

    <com.omega_r.libs.omegarecyclerview.OmegaRecyclerView
        android:id="@+id/recycler_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:itemSpace="16dp"
        app:dividerShow="middle"
        app:dividerHeight="1dp"
        app:divider="@color/colorAccent"
        app:dividerPaddingStart="32dp"
        tools:listitem="@layout/item_test"/>

</RelativeLayout>

 

Now the Java Code for the RecyclerView. Copy paste all the code. Two classes namely StickyHeaderAdapter and StickyHeaderActivity

 

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.omega_r.libs.omegarecyclerview.OmegaRecyclerView;
import com.omega_r.omegarecyclerview.R;

public class StickyHeaderAdapter extends OmegaRecyclerView.Adapter<StickyHeaderAdapter.ViewHolder>
        implements com.omega_r.libs.omegarecyclerview.sticky_header.StickyHeaderAdapter<StickyHeaderAdapter.HeaderHolder> {

    private LayoutInflater mInflater;

    public StickyHeaderAdapter(Context context) {
        mInflater = LayoutInflater.from(context);
    }

    @Override
    public StickyHeaderAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.item_test, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(StickyHeaderAdapter.ViewHolder holder, int position) {
        holder.item.setText("Item " + position);
    }

    @Override
    public int getItemCount() {
        return 54;
    }

    @Override
    public long getHeaderId(int position) {
        return (long) position / 6;
    }

    @Override
    public HeaderHolder onCreateHeaderViewHolder(ViewGroup parent) {
        View view = mInflater.inflate(R.layout.sticky_header_test, parent, false);
        return new HeaderHolder(view);
    }

    @Override
    public void onBindHeaderViewHolder(HeaderHolder viewHolder, int position) {
        viewHolder.header.setText("Header " + getHeaderId(position));
    }

    static class ViewHolder extends OmegaRecyclerView.ViewHolder {
        public TextView item;

        public ViewHolder(View itemView) {
            super(itemView);
            item = (TextView) itemView;
        }
    }

    static class HeaderHolder extends OmegaRecyclerView.ViewHolder {
        public TextView header;

        public HeaderHolder(View itemView) {
            super(itemView);
            header = (TextView) itemView;
        }
    }
}

 

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.omega_r.libs.omegarecyclerview.OmegaRecyclerView;
import com.omega_r.omegarecyclerview.R;

import omega.com.annotations.OmegaActivity;

@OmegaActivity
public class StickyHeaderActivity extends AppCompatActivity {

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

        OmegaRecyclerView omegaRecyclerView = findViewById(R.id.recycler_list);
        omegaRecyclerView.setAdapter(new StickyHeaderAdapter(this));
    }
}

 

READ  Custom Credit Card Design in Android- Coding Shiksha

 

SWIPE MENU RECYCLERVIEW IN ANDROID

 

The second example which we will be creating is the swipe menu recyclerview. Just copy paste the xml code into your main_activity.xml file and boom you have created your recylcerview.

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="8dp"
    tools:context="com.omega_r.omegarecyclerview.swipe_menu_example.SwipeMenuActivity">

    <com.omega_r.libs.omegarecyclerview.OmegaRecyclerView
        android:id="@+id/recycler_view_contacts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:divider="@color/white_two"
        app:dividerHeight="2dp"
        app:itemSpace="4dp"
        app:dividerShow="middle"/>

</RelativeLayout>

 

Now the Java Code for the RecyclerView. Copy paste all the code. Three classes namely Contacts , ContactsAdapter and SwipeMenuActivity.

 

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

public class Contacts {

    private String mName;
    private boolean mOnline;

    public Contacts(String name, boolean online) {
        mName = name;
        mOnline = online;
    }

    public String getName() {
        return mName;
    }

    public boolean isOnline() {
        return mOnline;
    }

    private static int lastContactId = 0;

    public static List<Contacts> createContactsList(int numContacts) {
        List<Contacts> contactsArrayList = new ArrayList<>();

        for (int i = 0; i < numContacts; i++) {
            contactsArrayList.add(new Contacts("Person " + ++lastContactId, i <= numContacts / 2));
        }

        return contactsArrayList;
    }

}

 

import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;

import com.omega_r.libs.omegarecyclerview.OmegaRecyclerView;
import com.omega_r.libs.omegarecyclerview.swipe_menu.SwipeViewHolder;
import com.omega_r.omegarecyclerview.R;

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

public class ContactsAdapter extends OmegaRecyclerView.Adapter<ContactsAdapter.ViewHolder> {

    private List<Contacts> mContactsList = new ArrayList<>();

    public ContactsAdapter(List<Contacts> contactsList) {
        mContactsList = contactsList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(parent);
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int position) {
        holder.updateView(mContactsList.get(position));
    }

    @Override
    public int getItemCount() {
        return mContactsList.size();
    }

    public class ViewHolder extends SwipeViewHolder implements View.OnClickListener {

        private TextView nameTextView;
        private Button messageButton;
        private TextView editTextView;
        private TextView deleteTextView;
        private ImageButton voiceMailButton;
        private ImageButton bubbleChartButton;

        public ViewHolder(ViewGroup parent) {
            super(parent, R.layout.item_swipe_content, R.layout.item_left_swipe_menu, R.layout.item_right_swipe_menu);

            nameTextView = findViewById(R.id.text_contact_name);
            messageButton = findViewById(R.id.button_message);
            editTextView = findViewById(R.id.text_edit);
            editTextView.setOnClickListener(this);
            deleteTextView = findViewById(R.id.text_delete);
            deleteTextView.setOnClickListener(this);
            voiceMailButton = findViewById(R.id.imagebutton_voicemail);
            voiceMailButton.setOnClickListener(this);
            bubbleChartButton = findViewById(R.id.imagebutton_bubble);
            bubbleChartButton.setOnClickListener(this);

            contentView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    smoothOpenBeginMenu();
                    return true;
                }
            });
        }

        void updateView(Contacts contact) {
            nameTextView.setText(contact.getName());
            messageButton.setVisibility(contact.isOnline() ? View.VISIBLE : View.GONE);
        }

        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.text_edit:
                    showToast("Edit");
                    break;
                case R.id.text_delete:
                    showToast("Delete");
                    break;
                case R.id.imagebutton_voicemail:
                    showToast("Voice mail");
                    break;
                case R.id.imagebutton_bubble:
                    showToast("Bubble");
                    break;
            }
        }

        private void showToast(String message) {
            Toast.makeText(itemView.getContext(), message, Toast.LENGTH_SHORT).show();
        }
    }
}

 

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

import com.omega_r.libs.omegarecyclerview.OmegaRecyclerView;
import com.omega_r.omegarecyclerview.R;

import java.util.List;

import omega.com.annotations.OmegaActivity;

@OmegaActivity
public class SwipeMenuActivity extends AppCompatActivity {

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

        OmegaRecyclerView omegaRecyclerView = findViewById(R.id.recycler_view_contacts);
        ContactsAdapter adapter = new ContactsAdapter(Contacts.createContactsList(20));
        omegaRecyclerView.setAdapter(adapter);
    }

}

 

READ  Android Parallax RecyclerView Background - Coding Shiksha

 

Congratulations we are done implementing Custom RecyclerView in Android Application. Thanks for reading the post and if you want to receive more tutorials like this please subscribe to the newsletter.

 

 

Leave a Reply

Close Menu