Implementation of Sliding Up Panel using AndroidSlidingUpPanel in Android Tutorial

Udemy Generic 728x90

Objective

In this tutorial, we will learn how to implement a sliding panel using AndroidSlidingUpPanel library in Android Application through a simple example.

 

 

 

Sliding Up Panel is a multi pane layout user interface. Using this layout, user can switch between multiple layouts by either sliding up or sliding down the subsequent view. In the following tutorial,  we will create a sliding panel with a list view and a secondary layout using AndroidSlidingUpPanel library in Android application through simple example. Initially, sliding panel will show list as its main layout and a small portion of secondary layout as its child. Now, user can slide up the secondary view and bring it to the foreground of screen. To close this layout, user can slide down the secondary layout to bring the list view on foreground.

 

Step 2

Create New Project

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.

 

Step 3

Add Library as Dependency

To make Sliding up panel, we need to add the AndroidSlidingUpPanel library as dependency. So, Open build.gradle(app module) file and add the library as dependency.

dependencies {
  ....
    compile 'com.sothree.slidinguppanel:library:3.2.1'
  ....
}

 

Step 4

Create Sliding Panel Layout

First we need to embed the layout of sliding panel in activity’s layout. So, embed a sliding panel using com.sothree.slidinguppanel.SlidingUpPanelLayout tag of library. Next, divide the sliding panel in two different sections.

  • Main Layout: It usually contains top most view
  • Secondary layout: This is the secondary view that will gets displayed when user slides up the child view.

In this example, we will use ListView to show a list of items as main layout and TextView to display text in the secondary layout. Use the following code in the activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="app.androidslidingpannel.MainActivity">

    <com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="68dp"
        sothree:umanoShadowHeight="4dp"
        sothree:umanoParallaxOffset="100dp"
        sothree:umanoDragView="@+id/dragView"
        sothree:umanoOverlay="true"
        sothree:umanoScrollableView="@+id/main">

        <!-- MAIN CONTENT -->
        <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">
        </ListView>

        <!-- SLIDING LAYOUT -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"
            android:orientation="vertical"
            android:clickable="true"
            android:focusable="false"
            android:id="@+id/dragView">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="68dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/footer"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textSize="20sp"
                    android:text="Slider Layout"
                    android:gravity="center_vertical"
                    android:paddingLeft="10dp"/>

            </LinearLayout>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/list_main"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="?attr/actionBarSize"
                    android:gravity="center"
                    android:text="Main Content"
                    android:clickable="true"
                    android:focusable="false"
                    android:focusableInTouchMode="true"
                    android:textSize="16sp" />
            </FrameLayout>

        </LinearLayout>
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>

</RelativeLayout>

 

sliding

Step 5

Initialize TextView and SlidingUpPanelLayout

To use the feature of SlidingUpPanelLayout, we need to initialize it in the MainActivity.java file.

public class MainActivity extends AppCompatActivity {
    private SlidingUpPanelLayout mLayout;
    TextView textView ;
    ListView listview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();    // call init method
    }

    /**
     * Initialization of the textview and SlidingUpPanelLayout
     */
    public void init(){

        mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        textView = (TextView) findViewById(R.id.list_main);
        listview = (ListView) findViewById(R.id.list);
    }
}

 

Step 6

Creating Array List

To populate the data in the ListView, we need to create an array list. So, create a array_list() method and add a list of items to be shown in the list view.

/**
 * Created an array list
 * @return array list
 */
public List<String> array_list(){
    array_list = Arrays.asList(
            "This",
            "Is",
            "An",
            "Example",
            "ListView",
            "That",
            "You",
            "Can",
            "Scroll",
            ".",
            "It",
            "Shows",
            "How",
            "Any",
            "Scrollable",
            "View",
            "Can",
            "Be",
            "Included",
            "As",
            "A",
            "Child",
            "Of",
            "SlidingUpPanelLayout"
    );
    return array_list;
}

 

Step 7

Set ListView Adapter

To populate the data in the ListView, we need to set list view adapter which will fetch items from the array list and populate them in ListView. So, create a method setListview() and within this method create an Adapter object and pass context of activity, layout of listview and list of items. Call the setAdapter() method with Adapter object parameter to populate the data in the ListView.

Within this method, add a callback method setOnItemClickListener(), that will respond when user clicks on an item from the list. Within this callback method, we will add the functionality to slide the  secondary layout.

/**
 *  Set array adapter to display a list of items.
 *  Called a callback setOnItemClickListener method,
 *  It calls when user click on the list of item.
 */
 public void setListview(){

    listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            mLayout.setPanelState(SlidingUpPanelLayout.PanelState.EXPANDED);
            textView.setText(array_list.get(position));
            Toast.makeText(MainActivity.this, "onItemClick" , Toast.LENGTH_SHORT).show();
        }
    });

    /**
     * This is array adapter, it takes context of the activity as a first parameter,
     * layout of the listview as a second parameter and array as a third parameter.
     */
    ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(
            this,
            android.R.layout.simple_list_item_1,
            array_list());

    listview.setAdapter(arrayAdapter);
}

 

Step 8

Call Slide Panel Listener method

We need to set listener on panel to listen on SlidingUpPanelLayout events such as collapse, expand, hide, etc. To do so, we need to implement setPanelSlideListener() method on panel layout. PanelSlideListener has following three main callback functions :

  • onPanelSlide: During the transition of expand and collapse onPanelSlide function will be called.
  • onPanelExpanded: This method will be called when secondary layout is dragged up by user.
  • onPanelCollapsed: This method will be called when secondary layout is dragged down by user.
/**
 * Call setPanelSlidelistener method to listen open and close of slide panel
 **/
 public void panelListener(){

     mLayout.setPanelSlideListener(new
           SlidingUpPanelLayout.PanelSlideListener() {

         // During the transition of expand and collapse onPanelSlide function will be called.
         @Override
         public void onPanelSlide(View panel, float slideOffset) {

             Log.e(TAG, "onPanelSlide, offset " + slideOffset);
         }

         // Called when secondary layout is dragged up by user
         @Override
         public void onPanelExpanded(View panel) {

             Log.e(TAG, "onPanelExpanded");
         }

         // Called when secondary layout is dragged down by user
         @Override
         public void onPanelCollapsed(View panel) {

             Log.e(TAG, "onPanelCollapsed");
         }

         @Override
         public void onPanelAnchored(View panel) {

             Log.e(TAG, "onPanelAnchored");
         }

         @Override
         public void onPanelHidden(View panel) {

             Log.e(TAG, "onPanelHidden");
         }
     });
}

slinding panel
 

Step 9

Final Code

Here is the final code:

public class MainActivity extends AppCompatActivity {

    private SlidingUpPanelLayout mLayout;
    private static final String TAG = "MainAcitvity";
    List<String> array_list;
    TextView textView ;
    ListView listview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();          // call init method
        setListview();   // call setListview method
        panelListener(); // Call paneListener method

    }

    /**
     * Initialization of the textview and SlidingUpPanelLayout
     **/
    public void init(){

        mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        textView = (TextView) findViewById(R.id.list_main);
        listview = (ListView) findViewById(R.id.list);
    }

  /**
   *  Set array adapter to display a list of items.
   *  Called a callback setOnItemClickListener method.
   *  It call when user clicks on the list of item
   **/
    public void setListview(){

        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                mLayout.setPanelState(SlidingUpPanelLayout.PanelState.EXPANDED);
                textView.setText(array_list.get(position));
                Toast.makeText(MainActivity.this, "onItemClick" , Toast.LENGTH_SHORT).show();
            }
        });

      /**
       * This is array adapter, it takes context of the activity as a first parameter,
       * layout of the listview as a second parameter and array as a third parameter.
       **/
        ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(
                this,
                android.R.layout.simple_list_item_1,
                array_list());

        listview.setAdapter(arrayAdapter);
    }

    /**
     * Call setPanelSlidelistener method to listen open and close of slide panel
     **/
    public void panelListener(){

        mLayout.setPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {

            // During the transition of expand and collapse onPanelSlide function will be called.
            @Override
            public void onPanelSlide(View panel, float slideOffset) {

                Log.e(TAG, "onPanelSlide, offset " + slideOffset);
            }

            // Called when secondary layout is dragged up by user
            @Override
            public void onPanelExpanded(View panel) {

                Log.e(TAG, "onPanelExpanded");
            }

            // Called when secondary layout is dragged down by user
            @Override
            public void onPanelCollapsed(View panel) {

                Log.e(TAG, "onPanelCollapsed");
            }

            @Override
            public void onPanelAnchored(View panel) {

                Log.e(TAG, "onPanelAnchored");
            }

            @Override
            public void onPanelHidden(View panel) {

                Log.e(TAG, "onPanelHidden");
            }
        });
    }

  /**
   * Created an array list
   * @return array list
   **/
    public List<String> array_list(){
        array_list = Arrays.asList(
                "This",
                "Is",
                "An",
                "Example",
                "ListView",
                "That",
                "You",
                "Can",
                "Scroll",
                ".",
                "It",
                "Shows",
                "How",
                "Any",
                "Scrollable",
                "View",
                "Can",
                "Be",
                "Included",
                "As",
                "A",
                "Child",
                "Of",
                "SlidingUpPanelLayout"
        );
        return array_list;
    }

    /**
     * Collapsed layout, when user press back button
     **/
    @Override
    public void onBackPressed() {

        if (mLayout != null &&
                (mLayout.getPanelState() == SlidingUpPanelLayout.PanelState.EXPANDED
                 || mLayout.getPanelState() ==
                 SlidingUpPanelLayout.PanelState.ANCHORED)) {

            mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);

        } else {

            super.onBackPressed();
        }
    }
}

 

Udemy Generic 728x90

Spread the word. Share this post!

  • kumar kundan

    outdated tutorial ….. remove this post or update this post plzz