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
Before going to create, let’s see what you are going to create here
Part 1: install the sliding up panel
Gradle setup
dependencies {
…
implementation ‘com.sothree.slidinguppanel:library:3.4.0’
}
Part 2: add sliding up panel
Now add sliding up panel in the home fragment. Here we divide our sliding up panel into two parts: Upper Relative Layout and Lower Relative Layout. First, cut the previous home layout and paste it into the upper relative layout.
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
Now for the lower relative layout create our sliding window inside the layout folder.
<?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
In the sliding window 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
Now, for the expand and collapse window we have to change its position programmatically. First define all the elements in the home fragment then change the position of the elements accordingly.
//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
HomeFragment.java
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
