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

--

--

--

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Android Tab Layout using Fragments and ViewPager | Android Studio | Java

How to Create Custom AppBar/ActionBar/ToolBar in Android Studio | Java

Why RecyclerView? What is the difference between ListView and RecyclerView in Android?

100 Days of Code — Day 24–28: Pokemon Type Matchup Android App

Swipe/Pull to refresh RecyclerView

Android Infinite Auto Image Slider using View Pager 2 | Android Studio | Java

Snapping Sheet In Flutter

Implement Dark Mode in Flutter using Riverpod

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Golap Gunjan Barman

Golap Gunjan Barman

Hi everyone, myself Golap an Android app developer with UI/UX designer.

More from Medium

Library for fetching location in Android

Android Study Cases

Coding Week 1: GSoC’ 22 with SCoRe Lab

Full-stack Engineering Intern at Homebase (YC ’21)— Part 0