How to hide the Umano SlidingupPanel when clicking outside the panel

Question

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?

enter image description here

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?

Hi, I am getting same issue, Please share if you find any solution ? — Hasmukh, Jun 24 '15 at 07:03
Hi Rethinavel Pillai, I need this kind of implementation. Could you please share the core part of the code for this implementation? — Madhan, Mar 02 '17 at 11:58

score 15 · Accepted Answer · answered Sep 22 '16 at 18:11

15

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

answered Sep 22 '16 at 18:11

aytek

1,842
24
32

2

Great! Works perfectly – Leo DroidCoder Dec 20 '16 at 17:01
1

but this listener bypasses swipe gestures!! – navalkishoreb Apr 16 '18 at 11:17

score 10 · Answer 2 · answered Aug 24 '15 at 10:50

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;
            }
        });

score 3 · Answer 3 · answered Sep 12 '18 at 10:06

//to hide when you touch overlay

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

score 1 · Answer 4 · answered Jan 22 '20 at 20:51

1

to hide it totaly

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

answered Jan 22 '20 at 20:51

Mohamed AbdelraZek

2,503
4
25
36

score 0 · Answer 5 · answered Feb 19 '15 at 17:33

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;
            }

score 0 · Answer 6 · answered Nov 10 '20 at 18:25

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);
                }
            }
        });

score -1 · Answer 7 · answered Jan 27 '15 at 06:17

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... :)

How to hide the Umano SlidingupPanel when clicking outside the panel

7 Answers7