How to hide the Umano SlidingupPanel when clicking outside the panel

Question

AndroidSlidingUpPanel

Here, I am using slidingup panel library. You can see both the panel and listview in the following screen. What i am trying to do is to hide the panel if i click outside the panel(Dim Area). Instead it is clicking on the listview in the above layout. How can i achieve this?

Here is the XML,

 <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res/com.voucher.point.activity"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

<!-- sothree:dragView="@+id/dragView" -->

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="bottom"
    app:fadeColor="@color/transparent"
    sothree:panelHeight="40dip"
    sothree:paralaxOffset="200dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/white"
        android:orientation="vertical" >

        <ListView
            android:id="@+id/offersList"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scrollbars="none"
            android:visibility="gone" >
        </ListView>

    </LinearLayout>

    <include
        android:id="@+id/bottom_menu"
        android:layout_width="fill_parent"
        android:layout_height="270dip"
        layout="@layout/side_menu" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

Can i do like this?

Gelatinoid

Hi, I am getting same issue, Please share if you find any solution ? – Footer

Hi Rethinavel Pillai, I need this kind of implementation. Could you please share the core part of the code for this implementation? – Innocuous

Answer 1

With the version 3.3.0 and later, it's possible to do that in the following way

final SlidingUpPanelLayout slidingUpPanelLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
slidingUpPanelLayout.setFadeOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        slidingUpPanelLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
    }
});

source

Schlieren

Great! Works perfectly – Hadlock

but this listener bypasses swipe gestures!! – Corvus

Answer 2

I believe you have fixed your problem but for others who has same requirement I added another View on top of my map (in xml layout) and set it's touch click-ability.

So my xml file is like this:

<com.sothree.slidinguppanel.SlidingUpPanelLayout
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/booking_confirm_layout"
        android:gravity="bottom"
        app:umanoFadeColor="@color/black_75_percent"
        app:umanoOverlay="true"
        app:umanoPanelHeight="111dp"
        app:umanoShadowHeight="0dp">

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

            <com.google.android.gms.maps.MapView
                android:id="@+id/map_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="96dp" />

            <View
                android:id="@+id/mapCover"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent"/>
        </FrameLayout>

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

And in the code:

this.mMapCover = findViewById(R.id.mapCover);
        this.mMapCover.setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View v, MotionEvent event)
            {
                if (mSlidingPanel.getPanelState() != PanelState.COLLAPSED)
                {
                    mSlidingPanel.setPanelState(PanelState.COLLAPSED);
                    return true;
                }

                return false;
            }
        });

Humanitarian

Answer 3

//to hide when you touch overlay

    mLayout.setFadeOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
        }
    });

Panslavism

Answer 4

to hide it totaly

mLayout.setFadeOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        mLayout.setPanelState(SlidingUpPanelLayout.PanelState.HIDDEN);
    }
});

Cycling

Answer 5

you can add a onClickListener or onTouchListener to the outside panel and ontouch or oncick call slidingPanelLayout.expandPane(0)

findViewById(R.id.bg_panel).setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                slidingPanelLayout.expandPane(0);
                return false;
            }

Matriculate

Answer 6

The answered code didn't work for me. Unfortunately this event does not capture a click on part of my UI.

So for doing that, set an id for main content (first child of SlidingUpPanelLayout) and call this:

findViewById(R.id.main_content).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(slidingUpPanelLayout.getPanelState() != SlidingUpPanelLayout.PanelState.COLLAPSED){
                    slidingUpPanelLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
                }
            }
        });

Performance

Answer 7

Your slidingUp panel contain whole screen then how you detect the click on outside of screen. If you are targeting it to only for "HideMenu" and "ShowMenu" then it is possible to do.

Otherwise with Full Screen SlidingUp Panel you can able to hide it by click back android button or any click event on the panel it self.

Let me know if my answer not resolve your problem.

Enjoy Coding... :)

Curley