Home » Android » android – How to hide the Umano SlidingupPanel when clicking outside the panel

android – How to hide the Umano SlidingupPanel when clicking outside the panel

Posted by: admin June 15, 2020 Leave a comment

Questions:

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?

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?

How to&Answers:

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

Answer:

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

Answer:

//to hide when you touch overlay

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

Answer:

to hide it totaly

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

Answer:

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

Answer:

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… 🙂