How to create Multi RecyclerView using CardView in Android | Radio Streaming app UI | JAVA | Part 2

In this tutorial, we’re going to create multi recycler view with card view in android using multi snap recycler view and card view library.

If you are not go through part 1 of the Radio Streaming app UI then click here.

If you are don’t know what recycler view and card view are then go you can go through my previous tutorials on recycler view and card view. Click Here.

Overview

Before going to create, let’s see what you are going to create here

Part 1: install multi snap recycler view and card view

Gradle setup

dependencies {

……..
implementation ‘com.github.takusemba:multisnaprecyclerview:2.0.3’
implementation ‘androidx.cardview:cardview:1.0.0’

}

Part 2: create home UI

Go to the home fragment layout and add the recyclerview.

<?xml version=”1.0" encoding=”utf-8"?>
<FrameLayout 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”
android:padding=”10dp”
android:background=”@color/colorPrimary”
xmlns:app=”http://schemas.android.com/apk/res-auto"
tools:context=”.HomeFragment”>

<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/popular”
android:text=”@string/popular”
android:textSize=”20sp”
android:textColor=”@color/text1"
android:fontFamily=”@font/poppins_medium”
android:layout_marginTop=”20dp”
android:layout_marginStart=”20dp” />

<com.takusemba.multisnaprecyclerview.MultiSnapRecyclerView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/first_recyclerView”
android:layout_marginTop=”15dp”
android:layout_below=”@+id/popular”
app:msrv_gravity=”start”
android:layout_gravity=”center_vertical”
app:msrv_interval=”2"/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/madeforyou”
android:text=”@string/made_for_you”
android:layout_below=”@id/first_recyclerView”
android:textSize=”20sp”
android:textColor=”@color/text1"
android:fontFamily=”@font/poppins_medium”
android:layout_marginTop=”30dp”
android:layout_marginStart=”20dp” />

<com.takusemba.multisnaprecyclerview.MultiSnapRecyclerView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/second_recyclerView”
android:layout_marginTop=”15dp”
android:layout_below=”@id/madeforyou”
app:msrv_gravity=”start”
android:layout_gravity=”center_vertical”
app:msrv_interval=”2"/>

</RelativeLayout>

</FrameLayout>

Part 3: create the item for the recycler view

Go to the layout folder and create a new drawable file for the item layout

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.cardview.widget.CardView xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
xmlns:app=”http://schemas.android.com/apk/res-auto"
android:layout_marginStart=”8dp”
android:layout_marginEnd=”8dp”
android:orientation=”horizontal”
app:cardUseCompatPadding=”true”
android:background=”@color/white”
app:cardCornerRadius=”10dp”>

<LinearLayout
android:orientation=”vertical”
android:layout_width=”140dp”
android:layout_height=”150dp”
android:background=”@color/card1"
android:padding=”8dp”
android:foreground=”?selectableItemBackground”>

<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>

<TextView
android:id=”@+id/fmFrequency”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:fontFamily=”@font/poppins_semibold”
android:text=”94.3"
android:textColor=”@color/white”
android:textSize=”20sp”
android:layout_centerVertical=”true”/>
<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/ic_baseline_favorite_24"
android:layout_gravity=”center_vertical”
android:layout_alignParentEnd=”true”
android:layout_centerVertical=”true”/>
</RelativeLayout>

<TextView
android:id=”@+id/fmTitle”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:fontFamily=”@font/poppins_medium”
android:text=”Radio One”
android:textColor=”@color/white”
android:textSize=”15sp” />

</LinearLayout>
<ImageView
android:layout_width=”140dp”
android:layout_height=”wrap_content”
android:src=”@drawable/card_back”
android:scaleType=”fitXY”/>

</androidx.cardview.widget.CardView>

Part 4: create the horizontal adapter

Now create a horizontal adapter in the java package

package com.codewithgolap.radioapp.adapters;

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

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.codewithgolap.radioapp.R;

public class HorizontalAdapter extends RecyclerView.Adapter<HorizontalAdapter.ViewHolder> {

//create array for texts
int[] fmTitles;
int[] fmFrequencies;

//create constructor

public HorizontalAdapter(int[] fmTitles, int[] fmFrequencies) {
this.fmTitles = fmTitles;
this.fmFrequencies = fmFrequencies;
}

@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_horizontal, parent, false);

return new HorizontalAdapter.ViewHolder(view);
}

@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
int fmTitle = fmTitles[position];
int fmFreq = fmFrequencies[position];

holder.fmTitle.setText(fmTitle);
holder.fmFrequency.setText(fmFreq);
}

@Override
public int getItemCount() {
return fmTitles.length;
}

public class ViewHolder extends RecyclerView.ViewHolder {
private TextView fmTitle, fmFrequency;

public ViewHolder(@NonNull View itemView) {
super(itemView);

this.fmTitle = (TextView) itemView.findViewById(R.id.fmTitle);
this.fmFrequency = (TextView) itemView.findViewById(R.id.fmFrequency);
}
}
}

Part 5: now add some items

Go to the home fragment java file and add some items in the recycler view

package com.codewithgolap.radioapp;

import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.codewithgolap.radioapp.adapters.HorizontalAdapter;
import com.takusemba.multisnaprecyclerview.MultiSnapRecyclerView;

public class HomeFragment extends Fragment {

int[] fmTitielFirst = {R.string.firstFm};
int[] fmFreqFirst={R.string.firstFmF};

int[] fmTitielSecond = {R.string.sixFm,R.string.SecondFm,R.string.ThirdFm,R.string.FourFm};
int[] fmFreqSecond={R.string.sixFmF,R.string.SecondFmF,R.string.ThirdFmF,R.string.FourFmF};

public HomeFragment() {
// Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_home, container, false);

HorizontalAdapter firstAdapter = new HorizontalAdapter(fmTitielFirst, fmFreqFirst);
MultiSnapRecyclerView firstRecyclerView = view.findViewById(R.id.first_recyclerView);
LinearLayoutManager firstLayoutManager = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
firstRecyclerView.setLayoutManager(firstLayoutManager);
firstRecyclerView.setAdapter(firstAdapter);

HorizontalAdapter secondAdapter = new HorizontalAdapter(fmTitielSecond, fmFreqSecond);
MultiSnapRecyclerView secondRecyclerView = view.findViewById(R.id.second_recyclerView);
LinearLayoutManager secondLayoutManager = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
secondRecyclerView.setLayoutManager(secondLayoutManager);
secondRecyclerView.setAdapter(secondAdapter);

return view;
}
}

For any query or full source code mail me at barmangolap15@gmail.com

or visit www.gbandroidblogs.com