How to hide the Umano SlidingupPanel when clicking outside the panel

[heaofei]

No description provided.

[sergiomarqmoura]

Any solution on this?

[ardmn]

@sergiomarquesmoura
@heaofei
AndroidSlidingUpPanel have not callback for this event. SlidingUpPanel not use additional layout or view for blocking content, when Panel is Expanded . SlidingUpPanel draw rect over content with CoveredFade Color.Then I need something like curtain view . curtain_view it is clickable, transparent view over 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"
    tools:context=".DemoActivity" >

    <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="68dp"
        sothree:umanoShadowHeight="4dp"
        sothree:umanoParallaxOffset="100dp"
        sothree:umanoDragView="@+id/dragView"
        sothree:umanoOverlay="true"
        sothree:umanoScrollableView="@+id/list">

        <!-- MAIN CONTENT -->
        <RalativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

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

                      ..... content ..........

                      </FrameLayout>

               <View
                android:id="@+id/curtain_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clickable="true"
                android:background="@android:color/transparent"/>

        </RalativeLayout>

        <!-- SLIDING LAYOUT -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"
            android:orientation="vertical"
            android:clickable="true"
            android:focusable="false"
            android:id="@+id/dragView">



         </LinearLayout>

    </com.sothree.slidinguppanel.SlidingUpPanelLayout>

</RelativeLayout>

Next you can catch SlidingUpPanelLayout.PanelSlideListener events and set visibility for curtain_view . Then you can set onClickListener for curtain_view . In this listener you can shut down SlidingUpPanel or do what you want :

slidingUpPanel.setPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i("SlidingUpPanel", "onPanelSlide, offset " + slideOffset);
                curtain_view.setVisibility(View.VISIBLE);
            }

            @Override
            public void onPanelExpanded(View panel) {
                Log.i("SlidingUpPanel", "onPanelExpanded");
                curtain_view.setVisibility(View.VISIBLE);
            }

            @Override
            public void onPanelCollapsed(View panel) {
                Log.i("SlidingUpPanel", "onPanelCollapsed");;
                curtain_view.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onPanelAnchored(View panel) {
                Log.i("SlidingUpPanel", "onPanelAnchored");
                curtain_view.setVisibility(View.VISIBLE);
            }

            @Override
            public void onPanelHidden(View panel) {
                Log.i("SlidingUpPanel", "onPanelHidden");
                curtain_view.setVisibility(View.INVISIBLE);
            }
        });

[sharathyadhav1]

set the panel height to zero and on click change it to 50dp

[silviahisham]

check issue #458

[cypressious]

There an easy workaround. For the main content view, i.e. the first view of the SlidingUpPanelLayout, subclass the desired class, e.g. a LinearLayout and add the following code:

public class SlidingAwareLinearLayout extends LinearLayout {
    public SlidingAwareLinearLayout(final Context context) {
        super(context);
    }

    public SlidingAwareLinearLayout(final Context context, final AttributeSet attrs) {
        super(context, attrs);
    }

    public SlidingAwareLinearLayout(
            final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public SlidingAwareLinearLayout(
            final Context context, final AttributeSet attrs, final int defStyleAttr,
            final int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public boolean onInterceptTouchEvent(final MotionEvent ev) {
        SlidingUpPanelLayout panel = (SlidingUpPanelLayout) getParent();
        if (ev.getAction() == MotionEvent.ACTION_DOWN 
                && panel.getPanelState() == SlidingUpPanelLayout.PanelState.ANCHORED) {
            panel.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
            return true;
        }

        return super.onInterceptTouchEvent(ev);
    }
}

[Divyendra]

I have added the following code change into the library and it is working

1)Added new method in 'SlidingPanelLayout' class

    //ll => LowerLimit; ul => UpperLimit.
    //mMainView is the first child which is parallaxed.
    private boolean isMainViewTarget(MotionEvent ev) {
        int[] mainViewCoords = new int[2];
        mMainView.getLocationOnScreen(mainViewCoords);
        int llX = mainViewCoords[0];
        int ulX = llX + mMainView.getMeasuredWidth();
        int llY = mainViewCoords[1];      //Check if adding mParallaxOffset/2 makes any perf improvements
        int ulY = llY + mMainView.getMeasuredHeight() ;
        int touchX = (int)ev.getRawX();
        int touchY = (int)ev.getRawY();
        if (touchX > llX && touchX < ulX && touchY > llY && touchY < ulY)
            return true;
        else
            return false;
    }

2. Added below code as first lines in onTouchEvent() in SlidingPanelLayout.

if (ev.getAction() == MotionEvent.ACTION_DOWN &&
                (getPanelState() == PanelState.EXPANDED || getPanelState() == PanelState.ANCHORED) &&
                isMainViewTarget(ev)) {
            setPanelState(PanelState.COLLAPSED);
        }

P.S: Tested only for BOTTOM gravity case

[ManuLG]

Maybe too late, but I achieve this using:

        RelativeLayout main_content = (RelativeLayout) findViewById(R.id.main_content);
        main_content.setClickable(true);

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

[pengnix]

Maybe too late, but I achieve this using:

        RelativeLayout main_content = (RelativeLayout) findViewById(R.id.main_content);
        main_content.setClickable(true);

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

thx!