Develop Reference

ConstraintLayout stealing taps from setOnClickListener

I have created an activity that will be used as a screen to display a custom-designed modal. The entire background of this activity will be a 30% black overlay view that should be tappable to dismiss the activity.
Here's a screen of the simple layout:
In onCreate, I added a setOnClickListener to the overlay:
overlayView.setOnClickListener {
println("tapped")
}
The overlay is receiving taps, which is desired, however the white 'modal' view is also receiving taps, which is not desired.
As you can see from the component tree in the above screenshot, I'm using a view (overlayView), and then above it, using a ConstraintLayout with a nested textView. I would think that since the white modal is above the overlayView, it would not be receiving taps from overlayView.
How can I structure / organize my component tree so that I can detect taps from just the overlayView, and not the white modal?

In general, touch events will go "through" views until they find one that actually handles the event. In this case, even though you're tapping on the modal view, the click event will go to the background overlay because the modal view doesn't do anything to intercept the event.
You can solve this by adding a do-nothing click listener to the modal view:
modalView.setOnClickListener { }
This causes the modal view to receive any click events on it and handle them, stopping them from going "through" to the background overlay view.

EditText in RecyclerView view is detached when keyboard opened

I am attempting to create a long form with a variable number of EditText elements inside a RecyclerView. The layout consists of a FrameLayout, a RecyclerView for the form sections, then a nested RecyclerView inside of a CardView to hold all of the form elements for that section (see animation below).
Normally when an element is focused the keyboard will appear, the window is resized, and the view is scrolled so the element appears above the keyboard. The issue I am having is when an element is selected at the bottom of the screen and top of a section the window is resized and the RecyclerView detaches the section's view, causing the EditText to not exist when it tries to focus. This manifests itself as the keyboard popping open momentarily then closing as focus is returned to the FrameLayout.
I am using android:windowSoftInputMode="adjustResize" in my activity and do not want to use adjustPan because it does not provide the best user experience.
I've tried adding a click listener to the EditText then scrolling the RecyclerView up so that the view won't get destroyed when the window resizes but this feels hacky and it is hard to detect precisely how far up the RecyclerView should be scrolled. You also get some weird jumps. In order to do this you have to turn off the focusability of the EditText which isn't ideal either because it breaks navigation and accessibility.
Trying to do something like recyclerView.getRecycledViewPool().setMaxRecycledViews(0, SECTION_COUNT); doesn't work either because it doesn't prevent the views from being detached.
How do I keep the view from being detached when the window is resized for the keyboard so the EditText receives focus?

I solve this with by
android.os.Handler().postDelayed({recycle.smoothScrollToPosition(0)},100)

Don't allow touch events on items below view

I have a ListView with video items. When user clicks the image of the Video it goes to a new screen and starts playing the video. If user clicks a button next to the video image then I display a BottomSheet from google design library. Because I want to apply a shadow when bottomSheet is expanded I have a View with a transparent dark overlay just above the ListView, which initially has visibility set to Gone and I change it to Visible when I expand BottomSheet.
The problem is that despite the shadow layer items below it can still get click events which is a behavior I want to prevent. Is there a solution for this ? Maybe an attribute for that view so when its visible won't let touch events happen ?

Hey if you want to disable the touch intercept capability of view by you self. If it is a button or Views like Linearlayout, RelativeLayout just use view.setClickable(false) once you hide the view. Otherwise views intecept touch events even ,if they are not visible(Given that none other views are intercepting touch event for that portion of screen).

Android - Click Toolbar that is overlayed by a view

Here's my current situation: I can't click on the toolbar because there is a view that is overlapping it intercepting the touch responses. I'll expand: I'm making a music app. In the music app, there is a list of songs that is beneath the toolbar. However, once you click on a song, a panel opens up and slides up over the toolbar and continues into a transparent status bar. Pictures of this will be attached.
Now, obviously because this view is overlapping the toolbar I cannot actually use the toolbar for any touch events. But I need to. I cannot move the view below the toolbar because then my sliding up panel is limited to beneath the toolbar instead of overlapping it. If there is anyway to get around this, please let me know. I'd very much appreciate it.
So, in my current situation, I thought maybe I'd be able to touch the portion of the view that covers the toolbar and send that data to the view that contains the toolbar so I can detect touches on the toolbar. However, I cannot figure out how to do this, or even if it is possible.
My question is: How can I detect touches in the view beneath another view?
Here are the pictures:
Here is the list of songs:
And here is when the song panel is opened(I'm using an image of a tiger for any song that doesn't have art at the moment):
Thanks!

wtf?
You want that your user can touch on the toolbar which is not visible at the moment because its overlapped by another view? What kind of user would expect such a user experience?
I mean:
How does the user even know that he can click on a not visible element ^^
If the user magically knows somehow that he can click, how does he know where exactly he has to click. For example, he could also click on one of the toolbar menu items, but if he clicks a few pixel more left, then he would click on toolbar item 1 instead of toolbar item 2.
However, you have three possibilities:
You can make the overlapping view not clickable by overlappingView.setClickable(false);.
You could add a transparent view with an OnClickListener that has the same width and height as the toolbar over the overlapping view. In the OnClickListener you could simply invoke the desired method like onOptionsItemSelected() (fake the required parameters) or use an EventBus for communication.
Similar to the 2. option add a transparent view, but instead of setting a OnClickListener set a OnTouchListener by extending from View) and forward the MotionEvent to the Toolbar by calling toolbar.onTouchEvent(motionEvent);

If you really want to detect touch events of a view beneath another view you could set onTouchEvent of the foreground view to false. However, I advise you to rethink the layout in order to put the Toolbar on top so the users can see it otherwise they don't know what they are clicking on.

Adding a button bar at the bottom of ListView upon checkbox select (as in Gmail app)?

I have a ListView with custom adapter. In each row there is a checkbox and couple of textviews. I want user to give option to delete the check marked items, so as soon as soon clicks on one of the checkbox, I want a button bar to slide in from the bottom and stay at the bottom regardless of listview scroll. This is something like the email app behavior of Motorola Cliq and to some extent gmail app itself.
I have tried adding a relativelayout (containing buttons) below the listview, which has visibility set to gone initially, but as soon as user checks a button, the visibility changes to "visible". I have added a slide-in animation to it too. It is working but problem is that it is overlapping the last element of the listview which user can not checkmark if the button bar has already become visible. So I tried to set the bottom margin of the listview equal to the height of the button bar when I'm changing the button bar visibility, which solves the problem of overlap, but now the checkbox behavior has gone weird. Clicking on one checkmark tries to checkmark another checkmark in the list for some weird reason. I noticed that this happens because as soon as I change the listview margin, list redraws itself, and during this new call to getView() method of adapter, things mess up.
I wanted to ask if anyone has done something like this. What is the best method to add such button bar below list while keeping the slide-in animation intact. Also, What is the footer-view of listview and can that solve my problem?