Aftab Hussain Aftab Hussain - 6 months ago 45
Android Question

Keeping a view at the bottom with the SlidingUpPanel library

I am using the

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:

enter image description here
enter image description here enter image description here

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

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

boolean varsInitialized = false;
int initialPanelTop = 0;
int controlsHeight = 0;

@Override
public void onPanelSlide(View panel, float slideOffset) {
    RelativeLayout lDetails = (RelativeLayout) findViewById(R.id.lDetailsBar);

    if (lDetails != null) {
        if (!varsInitialized) {
            initialPanelTop = panel.getTop();
            varsInitialized = true;
            controlsHeight = lDetails.getHeight();
        }
        Log.d("onPanelSlide", "adjusting");
        RelativeLayout.LayoutParams relativeParams =     (RelativeLayout.LayoutParams) lDetails.getLayoutParams();
        int adjustedTop = initialPanelTop - panel.getTop() - controlsHeight;
        relativeParams.setMargins(0, adjustedTop, 0, 0);  // left, top, right, bottom
        lDetails.setLayoutParams(relativeParams);
    }
}
Comments