Keeping a view at the bottom with the SlidingUpPanel library

Question

I am using the SlidingUpPanel library in one of my Media Player apps.

In the slide panel, I have the media controls and I would like to display the track's artwork on top. The problem I am having is that I would like the media controls to always stay at the bottom of the screen (even while the user is dragging the panel, which means I have to use the onPanelSlide () method). Maybe like a parallax effect (not sure if that is the right name). This is what I have for now:

Collapsed / Expanded / Dragging:

As you can see, while I drag the panel, the controls stick to the top. I would like it to stick to the bottom of the screen and have the artwork show right above it.

I was thinking of CoordinatorLayout, but I have no clue how that works!

My Code:

activity.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.sothree.slidinguppanel.SlidingUpPanelLayout
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="92dp"
        sothree:umanoShadowHeight="4dp">

        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <include layout="@layout/details_slide_bar" />
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>

</RelativeLayout>

details_slide_bar.xml

<LinearLayout
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_gravity="bottom"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/ivArtworkBar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:visibility="gone"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="92dp"
        android:orientation="horizontal"
        android:id="@+id/lDetailsBar">

        /!-- Content of the detalBar !-->
    </RelativeLayout>
</LinearLayout>

For now, I am only checking the state of the panel and adjusting the artwork's visibility accordingly.

The Main Activity (MyListActivity.java)

There must be another way!

Answer 1

First , in onCreate of your activity

mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);

Then set the panel state collapsed .

 mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
 mLayout.setEnableDragViewTouchEvents(false);
 mLayout.setDragView(null);
 mLayout.setEnabled(false);
 mLayout.setClickable(false);

Also if your sliding panel is not visible , then

mLayout.setPanelHeight(your panel height);

Here your panel height value must be integer . or even you can do it dynamically like mLayout.setPanelHeight(your_drag_layout.getHeight());

Answer 2

I got it! Brain hadn't been working for the last few days I guess lol. It was just simple Maths!

private SlidingUpPanelLayout slidingLayout;

@Ovverride
public void onCreate(Bundle bundle) {
    slidingLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);

}

@Override
public void onPanelSlide(View panel, float slideOffset) {
    if (lDetails != null) {
        if (!varsInitialized) {
            relativeParams = (RelativeLayout.LayoutParams) lDetails.getLayoutParams();
            varsInitialized = true;
        }
        int adjustedMargin = slidingLayout.getHeight() - slidingLayout.getPanelHeight() - panel.getTop();
        relativeParams.setMargins(0, adjustedMargin, 0, 0);  // left, top, right, bottom
        lDetails.setLayoutParams(relativeParams);
    }
}

Answer 3

Umm thats very implementation specific. perhaps you can do this

        mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        mLayout.setDragView(findViewById(R.id.userInfoRoot));
        mLayout.setPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i(TAG, "onPanelSlide, offset " + slideOffset);
            }

            @Override
            public void onPanelExpanded(View panel) {
                Log.i(TAG, "onPanelExpanded");
                mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
            }

            @Override
            public void onPanelCollapsed(View panel) {
                Log.i(TAG, "onPanelCollapsed");

            }

            @Override
            public void onPanelAnchored(View panel) {
                Log.i(TAG, "onPanelAnchored");
            }

            @Override
            public void onPanelHidden(View panel) {
                Log.i(TAG, "onPanelHidden");
            }
        });

Answer 4

try to wrap your listview and details_slide_bar inside RelativeLayout and change the LayoutParams inside onPanelExpanded and onPaanelCollapsed. Below is example from some of my project using that library.

activity_main.xml

<android.support.v4.widget.DrawerLayout
        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:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.nerdability.android.ArticleListActivity">


    <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="?attr/actionBarSize"
            sothree:umanoShadowHeight="4dp"
            sothree:umanoDragView="@+id/dragView">
        <!-- MAIN CONTENT -->
        <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:layout_marginLeft="0dp"
                android:divider="?android:attr/dividerHorizontal"
                android:orientation="horizontal"
                android:showDividers="middle">
            <LinearLayout
                    android:id="@+id/toolbarContainer"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:minHeight="?attr/actionBarSize">
                <include layout="@layout/toolbar"/>
            </LinearLayout>
            <LinearLayout
                    android:layout_below="@id/toolbarContainer"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="0dp"
                    android:layout_marginStart="0dp"
                    android:divider="?android:attr/dividerHorizontal"
                    android:baselineAligned="false"
                    android:orientation="horizontal"
                    android:showDividers="middle"
                    tools:context=".ArticleListActivity" >
                <FrameLayout
                        android:id="@+id/article_list"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"/>


            </LinearLayout>

        </RelativeLayout>

        <!-- SLIDING LAYOUT -->
        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:clickable="false"
                android:focusable="true"
                android:id="@+id/dragView">
                <ImageView
                    android:id="@+id/img"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="25dp"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"/>

            <LinearLayout
                    android:id="@+id/toolbar_view"
                    android:layout_alignParentTop="true"
                    android:layout_width="match_parent"
                    android:background="@color/holo_blue_light"
                    android:layout_height="?attr/actionBarSize"
                    android:orientation="horizontal">
                <TextView
                        android:layout_width="wrap_content"
                        android:ellipsize="end"
                        android:layout_gravity="center_vertical"
                        android:layout_height="wrap_content"
                        android:textSize="25sp"
                        android:textColor="@color/white"
                        android:paddingLeft="20dp"
                        android:text="@string/app_name"/>
            </LinearLayout>
            <include
                    android:id="@+id/player_view"
                    android:layout_alignParentTop="true"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    layout="@layout/player" />
        </RelativeLayout>

    </com.sothree.slidinguppanel.SlidingUpPanelLayout>
</android.support.v4.widget.DrawerLayout>

MainActivity.Java

mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        mLayout.setPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
            View playerView = (View) findViewById(R.id.player_view);
            View toolbarView = (View) findViewById(R.id.toolbar_view);

            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i(TAG, "onPanelSlide, offset " + slideOffset);
            }

            @Override
            public void onPanelExpanded(View panel) {
                Log.i(TAG, "onPanelExpanded");
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) playerView.getLayoutParams();
                lp.removeRule(RelativeLayout.ALIGN_PARENT_TOP);
                lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
                playerView.setLayoutParams(lp);
                playerView.bringToFront();

            }

            @Override
            public void onPanelCollapsed(View panel) {
                Log.i(TAG, "onPanelCollapsed");
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) playerView.getLayoutParams();
                lp.removeRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
                lp.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);

                playerView.setLayoutParams(lp);
                playerView.bringToFront();
            }

            @Override
            public void onPanelAnchored(View panel) {
                    Log.i(TAG, "onPanelAnchored");
                }
            @Override
            public void onPanelHidden(View panel) {
                    Log.i(TAG, "onPanelHidden");
                }
        });