Build Play Music-like interface

Question

I'm trying to build and interface that would mimic the recent Google Play Music interface which as a reminder looks like this on a phone

I've already got the DrawerLayout and the Tabs right, but I have no idea how to build the amazing bottom fragment that displays the currently playing song. It mixes two features:

• If you swipe this fragment to the left, it will be replaced by the next song. i think it can be done fairly quickly using a ViewPager and a new Fragmentfor each song, but is it an efficient way to do it?
• If you swipe it up, it will open kind of a drawer containing the player itself (see the above second and third screenshots). How can I get something similar inside my application? I can't find any mention of this inside the docs so I guess it's not really official.

Answer 1

• Use AndroidSlidingUpPanel library. It is pretty easy to use.
• Add a FragmentPager inside this panel for the "Swipe left for the next song" feature. It also can be the "handle" for sliding up panel.
• Add the player layout inside the sliding up panel layout

Answer 2

Here is extention to Minas answer How to make that slidingup panel to stay in all the fragments

Two approaches for this are (assuming you're using SlidingUpPanelLayout by sothree)

• With bottom navigation view Easy way to do it is creating a bottom navigation view and keeping it in MainActivity and attaching the sliding up panel layout to the bottom navigation view ( layout_above = bottomnavbar_id ) since bottom navigation stays throughout the app so sliding up panel will also have to stay with it example:

       <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
  
       tools:context=".MainActivity"
  
       >
  
       <com.sothree.slidinguppanel.SlidingUpPanelLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:id="@+id/slidingup"
           android:gravity="bottom"
           android:layout_above="@+id/bottom_navigation_bar"<!--Here-->
           >
  
           <RelativeLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:id="@+id/fragview"
               >
  
           </RelativeLayout>
  
  
           <RelativeLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
  
               >
  
  
           </RelativeLayout>
  
  
  
       </com.sothree.slidinguppanel.SlidingUpPanelLayout>
  
  
  
       <com.ismaeldivita.chipnavigation.ChipNavigationBar
           android:id="@+id/bottom_navigation_bar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_alignParentBottom="true"
           android:background="@drawable/round_corner"
           app:cnb_menuResource="@menu/bottom_navigation_bar"
           app:cnb_unselectedColor="@color/white"
           app:cnb_radius="40dp"
           app:cnb_iconSize="34dp"
           android:elevation="8dp"
           />
  

• Without bottom navigation view Create a frame layout inside MainActivity give attributes width and height as match_parent and create slidinguppanelayout and give attributes gravity="bottom" make the frame layout stay above that slidinguppanellayout , use that frame_layout to show content your want to show from fragments

that's all