Search code examples
androidandroid-recyclerviewpaytm

Horizontal RecyclerView Like Paytm


I have to implement a custom horizontal RecyclerView having a header (title) at top and a section (See All) right side at the end of the RecyclerView.

I created a RecyclerView with a header and footer but I want to have a right sided section (See All) of which onclick event I wish to fire some event.

In Paytm App, it is implemented

I wish to get results as follows

enter image description here


Solution

  • This will Gives You Idea

    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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="5dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="5dp">
    
    <android.support.v7.widget.RecyclerView
        android:id="@+id/verticalScrollRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
    </android.support.v7.widget.RecyclerView></RelativeLayout>
    

    vertical_scroll_single_entry.xml

    <?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="100dp"
    android:weightSum="1"
    android:gravity="center_vertical">
    
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
    
    </android.support.v7.widget.RecyclerView>
    
    <Button
        android:id="@+id/selectAllButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="See All >>"
        android:textAllCaps="false"/></LinearLayout>
    

    Custom Adapter class For Vertical Scroller

    public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.CustomViewHolder> {
    
    
    private Context context;
    private ArrayList arrayList;
    private LayoutInflater layoutInflater;
    
    public CustomAdapter(Context context, ArrayList arrayList) {
        this.context = context;
        this.layoutInflater = LayoutInflater.from(context);
        this.arrayList = arrayList;
    }
    
    @Override
    public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = layoutInflater.inflate(R.layout.vertical_scroll_single_entry, parent, false);
        return new CustomViewHolder(view);
    }
    
    @Override
    public void onBindViewHolder(CustomViewHolder holder, int position) {
        //initialise values to views inside holder at runtime
        holder.recyclerView.setAdapter(new CustomAdapterTwo(context, arrayList));
        holder.recyclerView.setLayoutManager(new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false));
        holder.recyclerView.setHasFixedSize(true);
    }
    
    @Override
    public int getItemCount() {
        return arrayList.size();
    }
    
    class CustomViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    
        RecyclerView recyclerView;
        Button selectAllButton;
    
        public CustomViewHolder(View itemView) {
            super(itemView);
    
            recyclerView = (RecyclerView) itemView.findViewById(R.id.recyclerView);
    
            selectAllButton = (Button) itemView.findViewById(R.id.selectAllButton);
            selectAllButton.setOnClickListener(this);
    
        }
    
        @Override
        public void onClick(View v) {
            Toast.makeText(context, "Select All At : " + String.valueOf(getLayoutPosition()), Toast.LENGTH_SHORT).show();
        }
    }}
    

    horizontal adapter single entry file recycler_view_single_item.xml

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="match_parent" android:gravity="center_horizontal">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Price"/>
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Remove this button \n and put image view"
        android:textAllCaps="false"/></LinearLayout>
    

    Horizontal recycler view adapter class

    public class CustomAdapterTwo extends RecyclerView.Adapter<CustomAdapterTwo.CustomViewHolder> {
    private Context context;
    private ArrayList arrayList;
    private LayoutInflater layoutInflater;
    
    public CustomAdapterTwo(Context context, ArrayList arrayList) {
        this.context = context;
        this.arrayList = arrayList;
        this.layoutInflater = LayoutInflater.from(context);
    }
    
    @Override
    public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = layoutInflater.inflate(R.layout.recycler_view_single_item, parent, false);
    
        return new CustomViewHolder(view);
    }
    
    @Override
    public void onBindViewHolder(CustomViewHolder holder, int position) {
    
    
    
    }
    
    @Override
    public int getItemCount() {
        return arrayList.size();
    }
    
    class CustomViewHolder extends RecyclerView.ViewHolder {
    
        public CustomViewHolder(View itemView) {
            super(itemView);
        }
    }}
    

    Your main activity class

    public class MainActivity extends AppCompatActivity {
    private RecyclerView verticalScrollRecyclerView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        initialiseView();
    
    }
    
    private void initialiseView() {
    
        verticalScrollRecyclerView = (RecyclerView) findViewById(R.id.verticalScrollRecyclerView);
    
        ArrayList<String> stringArrayList = new ArrayList<>();
    
        stringArrayList.add("One");
        stringArrayList.add("Two");
        stringArrayList.add("Three");
        stringArrayList.add("Four");
        stringArrayList.add("Five");
        stringArrayList.add("Six");
        stringArrayList.add("Seven");
        stringArrayList.add("Eight");
        stringArrayList.add("Nine");
        stringArrayList.add("Ten");
    
    
    
        //setting adapter and layout manager to recyclerView
        verticalScrollRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        verticalScrollRecyclerView.setAdapter(new CustomAdapter(this, stringArrayList));
        verticalScrollRecyclerView.setHasFixedSize(true);
    
    }}
    

    Looks Like

    enter image description here