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

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?

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

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

//to hide when you touch overlay
mLayout.setFadeOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
}
});

to hide it totaly
mLayout.setFadeOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mLayout.setPanelState(SlidingUpPanelLayout.PanelState.HIDDEN);
}
});

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

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

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

Related

How to hide the recyclerview on the outside touch event?

I have a view and I want to show it when I click on button/layout and hide it when I touch somewhere else. How can I do it?
I wrote some code in dispatchTouchEvent(Motion Event) and it's working. But, I think there must be another way to do it.
You can fill the outside of your RecyclerView with another clickable view and implement setOnTouchListener method for that view. Here's an example:
Let's say we have got RecyclerView at the top of our RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scrollbars="vertical" />
<!--View below is just to fill the remaining space. We will use this view to catch outside touch-->
<View
android:id="#+id/outside_detector"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/recyclerView"
android:clickable="true"
android:focusable="true"/>
</RelativeLayout>
And we want to hide and show our recyclerview when we click outside of RecyclerView:
((View) findViewById(R.id.outside_detector)).setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
if(arg1.getAction() == MotionEvent.ACTION_DOWN){
if(recyclerView.getVisibility() == View.VISIBLE){
recyclerView.setVisibility(View.INVISIBLE);
}else{
recyclerView.setVisibility(View.VISIBLE);
}
}
return true;
}
});
If you want to show recyclerview on button click, then just write recyclerView.setVisibility(View.VISIBLE) method inside button ClickListener!
Hope this helps!

Expanding/Collapsing CardView with click or swipe gesture (Android)?

I'm looking for a solution to this that will allow me to expand a cardview to see more information and then easily collapse it. Google Keep has examples of cards like this. Anyone know how they do this? Would I create 2 versions of my cardview (one collapsed and one expanded) and then use an Animator class coupled with gesture methods to transition between the two views? I'm using a Recyclerview to hold my cardviews.
I found this if it is at all relevant: http://developer.android.com/training/animation/layout.html
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
//here put the view which is always visible
<LinearLayout
android:layout_width="match_parent"
android:visibilty="gone"
android:id="#+id/expandableLayout"
android:layout_height="wrap_content">
//here put which will collapse and expand
</LinearLayout>
</android.support.v7.widget.CardView>
take a boolean isexpanded in you arraylist object class
if (listobj.isexpanded)
{
holder.expandableLayout.setVisibility(View.VISIBLE);
}
else {
holder.expandableLayout.setVisibility(View.GONE);
}
holder.cardView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (listobj.isexpanded)
{
holder.expandableLayout.setVisibility(View.GONE);
listobj.isexpanded=false;
notifyItemChanged(position);
}
else {
holder.expandableLayout.setVisibility(View.VISIBLE);
listobj.isexpanded=true;
notifyItemChanged(position);
}
}
});
try someting like this

Create a panel that slides up and out of the screen in Android

i need some guidance. I need to make a custom view that touched and drag up the screen slides out of the screen. I have tried this cool library: here but this is dependend to exactly 2 layouts. The one that is slided out and the one that remains after that. What i have now is buggy and ugly.
public class DemoActivity extends Activity {
private SlidingUpPanelLayout mLayout;
private RelativeLayout layout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_demo);
layout = (RelativeLayout) findViewById(R.id.panel);
final int defaulttop = layout.getTop();
final int defaultbottom = layout.getBottom();
RelativeLayout dragView = (RelativeLayout) findViewById(R.id.dragView);
mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
mLayout.setDragView(dragView);
mLayout.setPanelSlideListener(new PanelSlideListener() {
#Override
public void onPanelSlide(View panel, float slideOffset) {
}
#Override
public void onPanelExpanded(View panel) {
System.out.println("panel expanded");
}
#Override
public void onPanelCollapsed(View panel) {
System.out.println("panel collapsed");
}
#Override
public void onPanelAnchored(View panel) {
System.out.println("anchored");
}
#Override
public void onPanelHidden(View panel) {
System.out.println("panel is hidden now");
}
});
}
#Override
public void onBackPressed() {
if (mLayout != null && mLayout.isPanelExpanded()) {
mLayout.collapsePanel();
} else {
super.onBackPressed();
}
}
}
The layout:
<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:background="#android:color/transparent"
android:gravity="bottom"
sothree:dragView="#+id/dragView"
sothree:panelHeight="60dp"
sothree:paralaxOffset="60dp"
sothree:shadowHeight="0dp" >
<RelativeLayout
android:id="#+id/panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/unt"
android:orientation="vertical" >
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="Sleep" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/dragView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:clickable="true"
android:focusable="false" >
</RelativeLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</RelativeLayout>
it slides up but leaves a white background in the back. If i touch the screen then it slides. So, i need a new path. Did anyone confrunted with something similar? I need a hint, not code. Thanks.
I have used the library you mentioned here and it worked out fine for me. You might have not set the drag view/layout
Do use mSlidingPanelLayout.setDragView(YourLayout) to set the layout that can be dragged
I have done something like this previously but with a button.
I did it using Animation class when moving it by OnTouchListener. While you have to be careful while using it and control the X and Y values of the layout.

Android - how to detect touch listener if view has click listener

I have basic layout with linear layout, ScrollView and ImageView.
ScrollView has registered onTouchListener and imageview onClicklistener.
If I tap on ImageView and I am pulling out of ImageView, I do not see log with "onclick".
If I tap out of imageView (on scrollView) and I am pulling somewhere, I see log with "on touch".
How can I catch onTouch event on my imageView, when I am pulling out of it?
Here is the code:
ImageView testButton = (ImageView) myView.findViewById(R.id.imageView1);
testButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Log.d(tag, "onclick");
}
});
ScrollView scrollView = (ScrollView) myView.findViewById(R.id.scrollView1);
scrollView.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
Log.d(tag, "ontouch");
return false;
}
});
And here is xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/com_facebook_blue"
android:scrollbarAlwaysDrawVerticalTrack="false" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/com_facebook_profile_picture_blank_square" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Set an OnTouchListener to the ImageView as well. When you pull away the touch from view's touchable region it will fire a Touch event. OnClick wont be fired when the ontouch is cancelled(MotionEvent.ACTION_CANCEL).You should not consume the onTouch() therefore return false in onTouch()
Set this to your scroll view:
ScrollView mainScroll=(ScrollView) findViewById(R.id.your_scroll_view)
mainScroll.setDescendantFocusability(ViewGroup.FOCUS_AFTER_DESCENDANTS);
mainScroll.setFocusable(true); //If you need this
mainScroll.setFocusableInTouchMode(true); //If you need this
Then your imageView onclick listener will be triggered. This code could also substantially affect other parts of your functionality. So please check the view once you implement this and revert if there are any screen jumps which occur.

Android when screen dims add a layer above everything to consume the onclick

In my app I want when the screen dims to add a layer above everything so when the users taps on screen the dimness will be gone and then he can use the app. If I dont do this when the screen is dimmed and the user taps on screen he will activate something in the app.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- The main content view -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/radio_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</FrameLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/disc"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:gravity="center"
android:visibility="gone"
android:orientation="vertical" />
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffffff"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="10dp" />
this is my layout. When the screen dims i make the disc visible and when the user touches something on screen I make it View.gone. The problem is that the click on the disc is also activating something on my content frame fragment.
Is there a way to make it now happen? I want the click to activate only the disc onclickhandler not anything else. Or is there any other way to do this?
So I figured out how to do this. The trick is to have an onclickListener on the view itself. I was just making it disappear while I had to also get the click.
private final Runnable disconnectCallback = new Runnable() {
#Override
public void run() {
runOnUiThread(new Thread(new Runnable() {
#Override
public void run() {
disconnect.setVisibility(View.VISIBLE);
}
}));
}
};
private static final Handler disconnectHandler = new Handler() {
#Override
public void handleMessage(Message msg) {
}
};
public void resetDisconnectTimer() {
disconnectHandler.removeCallbacks(disconnectCallback);
disconnectHandler.postDelayed(disconnectCallback, 3000);
}
public void stopDisconnectTimer() {
disconnectHandler.removeCallbacks(disconnectCallback);
}
#Override
public void onUserInteraction() {
resetDisconnectTimer();
}
#Override
public void onResume() {
super.onResume();
resetDisconnectTimer();
}
and in onCreate i have this
disconnect = findViewById(R.id.disc);
disconnect.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
disconnect.setVisibility(View.GONE);
}
});
in my previous attempt i was making the disconnect "gone" inside the handler. Now i have an onclick listener on this.

Categories

Resources