How to create Sliding Up Panel in Android | Radio Streaming app UI | JAVA | Part 3

In this tutorial, we’re going to create and customize the sliding up panel in android using the sliding up library. If you are not going through part 1 and part 2 of the Radio Streaming app UI then click here. PART 1 & PART 2.

Overview

Part 1: install the sliding up panel

Gradle setup

dependencies {

implementation ‘com.sothree.slidinguppanel:library:3.4.0’
}

Part 2: add sliding up panel

And in lower relative layout add the sliding window.

<?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:background=”@color/colorPrimary”
xmlns:app=”http://schemas.android.com/apk/res-auto"
tools:context=”.HomeFragment”>

<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/sliding_layout”
android:layout_marginBottom=”62dp”
android:gravity=”bottom”
app:umanoPanelHeight=”68dp”
app:umanoShadowHeight=”4dp”
android:background=”@color/colorPrimaryDark”>

<RelativeLayout …………… </RelativeLayout> // upper relative layout

<include layout=”@layout/sliding_window_layout”/> // lower relative layout

</com.sothree.slidinguppanel.SlidingUpPanelLayout>

</FrameLayout>

Part 3: create the sliding window

<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/lowerRelativeLayout”
android:background=”@color/colorPrimaryDark”>

</RelativeLayout>

Part 4: make UI for radio player

<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/lowerRelativeLayout”
android:background=”@color/colorPrimaryDark”>

<View
android:layout_width=”match_parent”
android:layout_height=”1dp”
android:id=”@+id/divider”
android:background=”@color/white”/>

<ImageView
android:id=”@+id/blurText”
android:layout_width=”match_parent”
android:layout_height=”300dp”
android:layout_centerHorizontal=”true”
android:gravity=”center_vertical|center_horizontal”
android:fontFamily=”@font/poppins_semibold”
android:textColor=”@color/white”
android:layout_marginStart=”50dp”
android:layout_marginEnd=”50dp”
android:layout_marginTop=”60dp”
android:background=”@drawable/cadr_back”
android:visibility=”invisible”/>

<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:id=”@+id/blurfavourite”
android:layout_below=”@id/blurText”
android:layout_marginTop=”-80dp”
android:src=”@drawable/ic_baseline_favorite”
android:visibility=”invisible”/>

<TextView
android:id=”@+id/blurFreq”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@id/blurText”
android:text=”Radio One”
android:textColor=”@color/white”
android:fontFamily=”@font/poppins_medium”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”-50dp”
android:visibility=”invisible”/>

<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”98.3"
android:textColor=”@color/white”
android:textSize=”20sp”
android:fontFamily=”@font/poppins_semibold”
android:layout_marginTop=”10dp”
android:layout_marginStart=”10dp”
android:id=”@+id/smallFmTitle”
/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/smallFmFreq”
android:text=”Radio One”
android:layout_marginStart=”10dp”
android:layout_below=”@id/smallFmTitle”
android:textColor=”@color/text1"/>
<ImageView
android:layout_width=”30dp”
android:layout_height=”30dp”
android:id=”@+id/closeWindow”
android:layout_marginStart=”10dp”
android:layout_marginTop=”10dp”
android:src=”@drawable/ic_baseline_close_24"
android:visibility=”invisible”/>

<ImageView
android:id=”@+id/playPause”
android:layout_width=”40dp”
android:layout_height=”40dp”
android:src=”@drawable/ic_baseline_play_arrow_24"
android:layout_toEndOf=”@id/smallFmTitle”
android:layout_marginStart=”250dp”
android:layout_marginTop=”10dp”/>
</RelativeLayout>

Part 5: change its position

//add sliding up panel listener
slidingUpPanelLayout.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
@Override
public void onPanelSlide(View panel, float slideOffset) {

}

@Override
public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {
//check new state is collapsed or expand
if (newState.toString().equals(“EXPANDED”)){
//show close button and disable touch
slidingUpPanelLayout.setTouchEnabled(false);
divider.setVisibility(View.
INVISIBLE);

MainActivity.chipNavigationBar.setVisibility(View.INVISIBLE);

RelativeLayout.LayoutParams relativeLayoutPlayPauseButton = new RelativeLayout.LayoutParams(100,100);
relativeLayoutPlayPauseButton.addRule(RelativeLayout.
CENTER_HORIZONTAL);
relativeLayoutPlayPauseButton.topMargin = 850;
playPauseButton.setLayoutParams(relativeLayoutPlayPauseButton);

RelativeLayout.LayoutParams relativeLayoutFmFreq = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
relativeLayoutFmFreq.addRule(RelativeLayout.
CENTER_HORIZONTAL);
relativeLayoutFmFreq.topMargin = 700;
smallFmFreq.setTextSize(16);
smallFmFreq.setLayoutParams(relativeLayoutFmFreq);

RelativeLayout.LayoutParams relativeLayoutFmTitle = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
relativeLayoutFmTitle.addRule(RelativeLayout.
CENTER_HORIZONTAL);
relativeLayoutFmTitle.topMargin = 300;
smallFmTitile.setTextSize(70);

smallFmTitile.setLayoutParams(relativeLayoutFmTitle);

closeButton.setVisibility(View.VISIBLE);
blurFmTitle.setVisibility(View.
VISIBLE);
blurFav.setVisibility(View.
VISIBLE);
}
else {
slidingUpPanelLayout.setTouchEnabled(true);
divider.setVisibility(View.
VISIBLE);
MainActivity.
chipNavigationBar.setVisibility(View.VISIBLE);

RelativeLayout.LayoutParams relativeLayoutPlayPauseButton = new RelativeLayout.LayoutParams(70,70);
relativeLayoutPlayPauseButton.addRule(RelativeLayout.
RIGHT_OF, smallFmTitile.getId());
relativeLayoutPlayPauseButton.leftMargin = 520;
relativeLayoutPlayPauseButton.topMargin = 30;
playPauseButton.setLayoutParams(relativeLayoutPlayPauseButton);

RelativeLayout.LayoutParams relativeLayoutFmFreq = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
relativeLayoutFmFreq.leftMargin = 10;
relativeLayoutFmFreq.addRule(RelativeLayout.
BELOW, smallFmTitile.getId());
smallFmFreq.setLayoutParams(relativeLayoutFmFreq);
smallFmFreq.setTextSize(14);

RelativeLayout.LayoutParams relativeLayoutFmTitle = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
relativeLayoutFmTitle.topMargin = 10;
relativeLayoutFmTitle.leftMargin = 10;
smallFmTitile.setLayoutParams(relativeLayoutFmTitle);
smallFmTitile.setTextSize(20);

closeButton.setVisibility(View.INVISIBLE);
}
}
});

return view;
}

Source Code

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.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.codewithgolap.radioapp.adapters.HorizontalAdapter;
import com.sothree.slidinguppanel.SlidingUpPanelLayout;
import com.takusemba.multisnaprecyclerview.MultiSnapRecyclerView;

public class HomeFragment extends Fragment {

TextView smallFmTitile, smallFmFreq;
ImageView playPauseButton, closeButton, blurFmTitle, blurFav;
View divider;

SlidingUpPanelLayout slidingUpPanelLayout;

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);

smallFmTitile = view.findViewById(R.id.smallFmTitle);
smallFmFreq = view.findViewById(R.id.
smallFmFreq);
playPauseButton = view.findViewById(R.id.
playPause);
closeButton = view.findViewById(R.id.
closeWindow);
divider = view.findViewById(R.id.
divider);
blurFmTitle = view.findViewById(R.id.
blurText);
blurFav = view.findViewById(R.id.
blurfavourite);

slidingUpPanelLayout = view.findViewById(R.id.sliding_layout);

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);

closeButton.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
// we have to collapse the sliding window and make it invisible
slidingUpPanelLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
closeButton.setVisibility(View.
INVISIBLE);
}
});

//add sliding up panel listener
slidingUpPanelLayout.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
@Override
public void onPanelSlide(View panel, float slideOffset) {

}

@Override
public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {
//check new state is collapsed or expand
if (newState.toString().equals(“EXPANDED”)){
//show close button and disable touch
slidingUpPanelLayout.setTouchEnabled(false);
divider.setVisibility(View.
INVISIBLE);

MainActivity.chipNavigationBar.setVisibility(View.INVISIBLE);

RelativeLayout.LayoutParams relativeLayoutPlayPauseButton = new RelativeLayout.LayoutParams(100,100);
relativeLayoutPlayPauseButton.addRule(RelativeLayout.
CENTER_HORIZONTAL);
relativeLayoutPlayPauseButton.topMargin = 850;
playPauseButton.setLayoutParams(relativeLayoutPlayPauseButton);

RelativeLayout.LayoutParams relativeLayoutFmFreq = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
relativeLayoutFmFreq.addRule(RelativeLayout.
CENTER_HORIZONTAL);
relativeLayoutFmFreq.topMargin = 700;
smallFmFreq.setTextSize(16);
smallFmFreq.setLayoutParams(relativeLayoutFmFreq);

RelativeLayout.LayoutParams relativeLayoutFmTitle = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
relativeLayoutFmTitle.addRule(RelativeLayout.
CENTER_HORIZONTAL);
relativeLayoutFmTitle.topMargin = 300;
smallFmTitile.setTextSize(70);

smallFmTitile.setLayoutParams(relativeLayoutFmTitle);

closeButton.setVisibility(View.VISIBLE);
blurFmTitle.setVisibility(View.
VISIBLE);
blurFav.setVisibility(View.
VISIBLE);
}
else {
slidingUpPanelLayout.setTouchEnabled(true);
divider.setVisibility(View.
VISIBLE);
MainActivity.
chipNavigationBar.setVisibility(View.VISIBLE);

RelativeLayout.LayoutParams relativeLayoutPlayPauseButton = new RelativeLayout.LayoutParams(70,70);
relativeLayoutPlayPauseButton.addRule(RelativeLayout.
RIGHT_OF, smallFmTitile.getId());
relativeLayoutPlayPauseButton.leftMargin = 520;
relativeLayoutPlayPauseButton.topMargin = 30;
playPauseButton.setLayoutParams(relativeLayoutPlayPauseButton);

RelativeLayout.LayoutParams relativeLayoutFmFreq = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
relativeLayoutFmFreq.leftMargin = 10;
relativeLayoutFmFreq.addRule(RelativeLayout.
BELOW, smallFmTitile.getId());
smallFmFreq.setLayoutParams(relativeLayoutFmFreq);
smallFmFreq.setTextSize(14);

RelativeLayout.LayoutParams relativeLayoutFmTitle = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
relativeLayoutFmTitle.topMargin = 10;
relativeLayoutFmTitle.leftMargin = 10;
smallFmTitile.setLayoutParams(relativeLayoutFmTitle);
smallFmTitile.setTextSize(20);

closeButton.setVisibility(View.INVISIBLE);
}
}
});

return view;
}
}

GitHub https://github.com/barmangolap15/Radio-Streaming-App-UI-in-Android

WebSite www.gbandroidblogs.com

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