according to https://developer.android.com/training/tv/start/navigation
You should set up the navigation order as a loop, so that the last
control directs focus back to the first one.
I have tried to implement such behavior for RecyclerView items:
fun RecyclerView.loopFocusVertically() {
viewTreeObserver.addOnGlobalLayoutListener {
val children = getAllChildren()
val firstFocusableItem = children.firstOrNull { it.isFocusable }
val lastFocusableItem = children.lastOrNull { it.isFocusable }
firstFocusableItem?.let { it.nextFocusUpId = lastFocusableItem?.id ?: it.id }
lastFocusableItem?.let { it.nextFocusDownId = firstFocusableItem?.id ?: it.id }
}
}
So on layout change i made first view have nextFocusUpId reference to last view, and the last view nextFocusDownId reference to first view. But it only works in case all views are actually layouted on screen, which obviously is not true in general case. RecyclerView actually recycles views, so last and first view may not exist at the same time on screen
How to implement focus loop for rv in leanback mode?
I have tried to use androidx.leanback.widget.VerticalGridView from leanback library, but it also doesn't have required behavior.
By default on pressing up from first focusable item of rv focus jumps to some other focusable view outside of rv, which is not so appropriate
By default on pressing up from first focusable item of rv focus jumps to some other focusable view outside of rv, which is not so appropriate
First, as for the UX, it's really problematic if you have views above your list so pressing up will really be an issue if to scroll to the last item as you want or to go to the above view.
With that said I'd suggest you give the loop option only from bottom in this case if you have a view above the list that should also get focus.
In general, I suggest you check VerticalGridView/HorizontalGridView for adding rows and lists in a lean-back app.
In the example I adjusted it to use a RecyclerView for your question.
For doing so you'll have to catch the button event, check if its the last item and if so, request focus to the first item.
#Override
public boolean dispatchKeyEvent(KeyEvent event) {
if (event.getAction() == KeyEvent.ACTION_UP) {
if (event.getKeyCode() == KeyEvent.KEYCODE_DPAD_DOWN) {
if (onDownClick(event)) {
return true;
}
}
}
return super.dispatchKeyEvent(ev);
}
public boolean onDownClick(KeyEvent event) {
int currentIndex = 0;
if (mAdapter != null) {
currentIndex = mAdapter.indexOf(mCurrentItem);
}
if (currentIndex == mAdapter.size() - 1) {
mListRecycler.scrollToPosition(0);
if (mListRecycler.findViewHolderForAdapterPosition(0) != null) {
mListRecycler.findViewHolderForAdapterPosition(0).itemView.requestFocus();
}
return true;
}
return false;
}
I have successfully created a list (LinearLayout) that contains multiple dynamic elements/rows. It is filled with content received by webservice.
One of the elements per row is a HorizontalScrollView that contains a variable amount of EditText fields.
That means that all edittexts from all rows (including a header) can scroll with that horizontalScrollView.
A Scrollmanager will make sure that all horizontalScrollviews move simultaneously. So it is basically a scrollable column within a list.
The problem that i am experiencing is as follows.
When i select a EditText view it will show the keyboard, which is what i want it to do. But the scrollManager is triggered so it will scroll all horizontalscrollviews to the end. Instead of keeping the focussed edittext in screen, it will move out sight.
My ScrollManager OnScrollChanged
#Override
public void onScrollChanged(View sender, int l, int t, int oldl, int oldt) {
// avoid notifications while scroll bars are being synchronized
if (isSyncing)
return;
isSyncing = true;
// remember scroll type
if (l != oldl)
scrollType = SCROLL_HORIZONTAL;
else if (t != oldt)
scrollType = SCROLL_VERTICAL;
else {
// not sure why this should happen
isSyncing = false;
return;
}
// update clients
for (ScrollNotifier client : clients) {
View view = (View) client;
if (view == sender)
continue; // don't update sender
// scroll relevant views only
// TODO Add support for horizontal ListViews - currently weird things happen when ListView is being scrolled horizontally
if ((scrollType == SCROLL_HORIZONTAL && view instanceof HorizontalScrollView)
|| (scrollType == SCROLL_VERTICAL && view instanceof ScrollView)
|| (scrollType == SCROLL_VERTICAL && view instanceof ListView)) {
view.scrollTo(l, t);
}
}
isSyncing = false;
}
I the end i want the keyboard to appear and the scrollview to be able to scroll, but i want to prevent the horizontal scroll event when the keyboard appears.
I haven't tested this yet, but you should be able to stop propogation of the touch event to the HorizontalScrollView by setting an OnTouchListener to your EditText and overriding the OnTouch method like this:
#Override
public boolean onTouch(View v, MotionEvent event)
{
Log.i("OnTouch", "Fired On Touch in " + v.getId());
// Do this on the down event too so it's not getting fired before up event
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
// Disallow ScrollView to intercept touch events.
v.getParent().requestDisallowInterceptTouchEvent(true);
}
//only do this on the up event so you're not doing it for down too
if(event.getAction() == MotionEvent.ACTION_UP)
{
// Disallow ScrollView to intercept touch events.
v.getParent().requestDisallowInterceptTouchEvent(true);
}
//Keep going with the touch event to show the keyboard
v.onTouchEvent(event);
return true;
}
Hello right now I'm developing a custom view where there'll be 2 listview that the header can be stacked each other like this picture :
||
||
\/
I already succeed to create this view, by overriding overscrolled and intercept all touch and playing with the margin of the header contents. but the problem now is because I intercept all touch now I can't tap the content of the listview, I know the flow of the touch is from ACTION_DOWN -> ACTION_MOVE -> ACTION_UP, and then when I dispatch the event to the child the tap is working but the scroll isn't working at all.
So for now the flow for my view is like this onInterceptTouchEvent -> onTouch -> gestureListener (or with overscroll)
this is some part of my code
#Override
public boolean onInterceptTouchEvent(MotionEvent ev)
{
onTouchEvent(ev);
return true;
}
#Override
public boolean onTouch(View v, MotionEvent event) {
topListViewHeight = lvFirstListView.getTotalHeight() - rlFirstHeader.getHeight();
if(isBottomScrollable) {
listGestureDetector.onTouchEvent(event);
lvSecondListView.dispatchTouchEvent(event);
} else {
gestureDetector.onTouchEvent(event);
}
return true;
}
Is there anybody here have an idea about this? Any suggestion is very appreciated and if you need more question about this question please ask me.
Thanks before
I have some views that I make visible upon a button press. I want them to disappear if I click outside of those views.
How would this be done on Android?
Also, I realize that the "back button" can also assist Android users with this - I might use that as a secondary way to close the views - but some of the tablets aren't even using a 'physical' back button anymore, it has been very de-emphasized.
An easy/stupid way:
Create a dummy empty view (let's say ImageView with no source), make it fill parent
If it is clicked, then do what you want to do.
You need to have the root tag in your XML file to be a RelativeLayout. It will contain two element: your dummy view (set its position to align the Parent Top). The other one is your original view containing the views and the button (this view might be a LinearLayout or whatever you make it. don't forget to set its position to align the Parent Top)
Hope this will help you, Good Luck !
Find the view rectangle, and then detect whether the click event is outside the view.
#Override
public boolean dispatchTouchEvent(MotionEvent ev) {
Rect viewRect = new Rect();
mTooltip.getGlobalVisibleRect(viewRect);
if (!viewRect.contains((int) ev.getRawX(), (int) ev.getRawY())) {
setVisibility(View.GONE);
}
return true;
}
If you want to use the touch event other place, try
return super.dispatchTouchEvent(ev);
This is an old question but I thought I'd give an answer that isn't based on onTouch events. As was suggested by RedLeader it's also possible to achieve this using focus events. I had a case where I needed to show and hide a bunch of buttons arranged in a custom popup, ie the buttons were all placed in the same ViewGroup. Some things you need to do to make this work:
The view group that you wish to hide needs to have View.setFocusableInTouchMode(true) set. This can also be set in XML using android:focusableintouchmode.
Your view root, i.e. the root of your entire layout, probably some kind of Linear or Relative Layout, also needs to be able to be focusable as per #1 above
When the view group is shown you call View.requestFocus() to give it focus.
Your view group need to either override View.onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) or implement your own OnFocusChangeListener and use View.setOnFocusChangeListener()
When the user taps outside your view focus is transferred to either the view root (since you set it as focusable in #2) or to another view that inherently is focusable (EditText or similar)
When you detect focus loss using one of the methods in #4 you know that focus has be transferred to something outside your view group and you can hide it.
I guess this solution doesn't work in all scenarios, but it worked in my specific case and it sounds as if it could work for the OP as well.
I've been looking for a way to close my view when touching outside and none of these methods fit my needs really well. I did find a solution and will just post it here in case anyone is interested.
I have a base activity which pretty much all my activities extend. In it I have:
#Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (myViewIsVisible()){
closeMyView();
return true;
}
return super.dispatchTouchEvent(ev);
}
So if my view is visible it will just close, and if not it will behave like a normal touch event. Not sure if it's the best way to do it, but it seems to work for me.
base on Kai Wang answer : i suggest first check visibility of Your view , base on my scenario when user clicked on fab myView become visible and then when user click outside myView disappears
#Override
public boolean dispatchTouchEvent(MotionEvent ev) {
Rect viewRect = new Rect();
myView.getGlobalVisibleRect(viewRect);
if (myView.getVisibility() == View.VISIBLE && !viewRect.contains((int) ev.getRawX(), (int) ev.getRawY())) {
goneAnim(myView);
return true;
}
return super.dispatchTouchEvent(ev);
}
I needed the specific ability to not only remove a view when clicking outside it, but also allow the click to pass through to the activity normally. For example, I have a separate layout, notification_bar.xml, that I need to dynamically inflate and add to whatever the current activity is when needed.
If I create an overlay view the size of the screen to receive any clicks outside of the notification_bar view and remove both these views on a click, the parent view (the main view of the activity) has still not received any clicks, which means, when the notification_bar is visible, it takes two clicks to click a button (one to dismiss the notification_bar view, and one to click the button).
To solve this, you can just create your own DismissViewGroup that extends ViewGroup and overrides the following method:
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
ViewParent parent = getParent();
if(parent != null && parent instanceof ViewGroup) {
((ViewGroup) parent).removeView(this);
}
return super.onInterceptTouchEvent(ev);
}
And then your dynamically added view will look a little like:
<com.example.DismissViewGroup android:id="#+id/touch_interceptor_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" ...
<LinearLayout android:id="#+id/notification_bar_view" ...
This will allow you to interact with the view, and the moment you click outside the view, you both dismiss the view and interact normally with the activity.
Implement onTouchListener(). Check that the coordinates of the touch are outside of the coordinates of your view.
There is probably some kind of way to do it with onFocus(), etc. - But I don't know it.
Step 1: Make a wrapper view by Fragmelayout which will cover your main layout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This is your main layout-->
</RelativeLayout>
<View
android:id="#+id/v_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This is the wrapper layout-->
</View>
</FrameLayout>
Step 2: Now add logic in your java code like that -
View viewOverlay = findViewById(R.id.v_overlay);
View childView = findViewByID(R.id.childView);
Button button = findViewByID(R.id.button);
viewOverlay.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
childView.setVisibility(View.GONE);
view.setVisibility(View.GONE);
}
});
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
childView.setVisibility(View.VISIBLE);
// Make the wrapper view visible now after making the child view visible for handling the
// main visibility task.
viewOverlay.setVisibility(View.VISIBLE);
}
});
To hide the view when click performs outside the view:
override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
if (isMenuVisible) {
if (!isWithinViewBounds(ev.rawX.toInt(), ev.rawY.toInt())) {
hideYourView()
return true
}
}
return super.dispatchTouchEvent(ev)
}
create a method to get the bounds(height & width) of your view, so when you click outside of your view it will hide the view and when click on the view will not hide:
private fun isWithinViewBounds(xPoint: Int, yPoint: Int): Boolean {
val l = IntArray(2)
llYourView.getLocationOnScreen(l)
val x = l[0]
val y = l[1]
val w: Int = llYourView.width
val h: Int = llYourView.height
return !(xPoint < x || xPoint > x + w || yPoint < y || yPoint > y + h)
}
I've created custom ViewGroup to display info box anchored to another view (popup balloon).
Child view is actual info box, BalloonView is fullscreen for absolute positioning of child, and intercepting touch.
public BalloonView(View anchor, View child) {
super(anchor.getContext());
//calculate popup position relative to anchor and do stuff
init(...);
//receive child via constructor, or inflate/create default one
this.child = child;
//this.child = inflate(...);
//this.child = new SomeView(anchor.getContext());
addView(child);
//this way I don't need to create intermediate ViewGroup to hold my View
//but it is fullscreen (good for dialogs and absolute positioning)
//if you need relative positioning, see #iturki answer above
((ViewGroup) anchor.getRootView()).addView(this);
}
private void dismiss() {
((ViewGroup) getParent()).removeView(this);
}
Handle clicks inside child:
child.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//write your code here to handle clicks inside
}
});
To dismiss my View by click outside WITHOUT delegating touch to underlying View:
BalloonView.this.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
dismiss();
}
});
To dismiss my View by click outside WITH delegating touch to underlying View:
#Override
public boolean onTouchEvent(MotionEvent event) {
dismiss();
return false; //allows underlying View to handle touch
}
To dismiss on Back button pressed:
//do this in constructor to be able to intercept key
setFocusableInTouchMode(true);
requestFocus();
#Override
public boolean onKeyPreIme(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
dismiss();
return true;
}
return super.onKeyPreIme(keyCode, event);
}
I want to share my solution which I think it could be useful if :
you are able to add a custom ViewGroup as root layout
also the view which you want to disappear can be a custom one.
First, we create a custom ViewGroup to intercept touch events:
class OutsideTouchDispatcherLayout #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
private val rect = Rect()
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
if (ev.action == MotionEvent.ACTION_DOWN) {
val x = ev.x.roundToInt()
val y = ev.y.roundToInt()
traverse { view ->
if (view is OutsideTouchInterceptor) {
view.getGlobalVisibleRect(rect)
val isOutside = rect.contains(x, y).not()
if (isOutside) {
view.interceptOutsideTouch(ev)
}
}
}
}
return false
}
interface OutsideTouchInterceptor {
fun interceptOutsideTouch(ev: MotionEvent)
}
}
fun ViewGroup.traverse(process: (View) -> Unit) {
for (i in 0 until childCount) {
val child = getChildAt(i)
process(child)
if (child is ViewGroup) {
child.traverse(process)
}
}
}
As you see, OutsideTouchDispatcherLayout intercepts touch events and informs each descendent view which implenets OutsideTouchInterceptor that some touch event occured outside of that view.
Here is how the descendent view could handle this event. Notice that it must implement OutsideTouchInterceptor interface:
class OutsideTouchInterceptorView #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr),
OutsideTouchDispatcherLayout.OutsideTouchInterceptor {
override fun interceptOutsideTouch(ev: MotionEvent) {
visibility = GONE
}
}
Then you have outside touch detection easily just by a child-parent relation:
<?xml version="1.0" encoding="utf-8"?>
<com.example.touchinterceptor.OutsideTouchDispatcherLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.touchinterceptor.OutsideTouchInterceptorView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#eee"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.example.touchinterceptor.OutsideTouchDispatcherLayout>
Here's a simple approach to get your work done:
Step 1: Create an ID for the outside container of your element for which you want to generate a click outside event.
In my case, it is a Linear Layout for which I've given id as 'outsideContainer'
Step 2: Set an onTouchListener for that outside container which will simply act as a click outside event for your inner elements!
outsideContainer.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// perform your intended action for click outside here
Toast.makeText(YourActivity.this, "Clicked outside!", Toast.LENGTH_SHORT).show();
return false;
}
}
);
Wrapper layout that notifies us when a click occurred outside a given view:
class OutsideClickConstraintLayout(context: Context, attrs: AttributeSet?) :
ConstraintLayout(context, attrs) {
private var viewOutsideClickListenerMap = mutableMapOf<View, () -> Unit>()
fun setOnOutsideClickListenerForView(view: View, listener: () -> Unit) {
viewOutsideClickListenerMap[view] = listener
}
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
viewOutsideClickListenerMap.forEach { (view, function) ->
if (isMotionEventOutsideView(view, ev)) function.invoke()
}
return super.onInterceptTouchEvent(ev)
}
private fun isMotionEventOutsideView(view: View, motionEvent: MotionEvent): Boolean {
val viewRectangle = Rect()
view.getGlobalVisibleRect(viewRectangle)
return !viewRectangle.contains(motionEvent.rawX.toInt(), motionEvent.rawY.toInt())
}
}
Usage:
....
outsideClickContainerView.setOnOutsideClickListenerForView(someView) {
// handle click outside someView
}
....
thank #ituki for idea
FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80000000"
android:clickable="true">
<LinearLayout
android:clickable="true" // not trigger
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#FFF"
android:orientation="vertical"
android:padding="20dp">
...............
</LinearLayout>
</FrameLayout>
and java code
mContainer = (View) view.findViewById(R.id.search_container);
mContainer.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
Log.d("aaaaa", "outsite");
return true;
}
return false;
}
});
it's work when touch outside LinearLayout
From a simplistic overview I have a custom View that contains some bitmaps the user can drag around and resize.
The way I do this is fairly standard as in I override onTouchEvent in my CustomView and check if the user is touching within an image, etc.
My problem comes when I want to place this CustomView in a ScrollView. This works, but the ScrollView and the CustomView seem to compete for MotionEvents, i.e. when I try to drag an image it either moves sluggishly or the view scrolls.
I'm thinking I may have to extend a ScrollView so I can override onInterceptTouchEvent and let it know if the user is within the bounds of an image not to try and scroll. But then because the ScrollView is higher up in the hierarchy how would I get access to the CustomView's current state?
Is there a better way?
Normally Android uses a long press to begin a drag in cases like these since it helps disambiguate when the user intends to drag an item vs. scroll the item's container. But if you have an unambiguous signal when the user begins dragging an item, try getParent().requestDisallowInterceptTouchEvent(true) from the custom view when you know the user is beginning a drag. (Docs for this method here.) This will prevent the ScrollView from intercepting touch events until the end of the current gesture.
None of the solutions found worked "out of the box" for me, probably because my custom view extends View, not ViewGroup, and thus I can't implement onInterceptTouchEvent.
Also calling getParent().requestDisallowInterceptTouchEvent(true) was throwing NPE, or doing nothing at all.
Finally this is how I solved the problem:
Inside your custom onTouchEvent call requestDisallow... when your view will take care of the event. For example:
#Override
public boolean onTouchEvent(MotionEvent event) {
Point pt = new Point( (int)event.getX(), (int)event.getY() );
if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (/*this is an interesting event my View will handle*/) {
// here is the fix! now without NPE
if (getParent() != null) {
getParent().requestDisallowInterceptTouchEvent(true);
}
clicked_on_image = true;
}
} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
if (clicked_on_image) {
//do stuff, drag the image or whatever
}
} else if (event.getAction() == MotionEvent.ACTION_UP) {
clicked_on_image = false;
}
return true;
}
Now my custom view works fine, handling some events and letting scrollView catch the ones we don't care about. Found the solution here: http://android-devblog.blogspot.com.es/2011/01/scrolling-inside-scrollview.html
Hope it helps.
There is an Android event called MotionEvent.ACTION_CANCEL (value = 3). All I do is override my custom control's onTouchEvent method and capture this value. If I detect this condition then I respond accordingly.
Here is some code:
#Override
public boolean onTouchEvent(MotionEvent event) {
if(isTouchable) {
int maskedAction = event.getActionMasked();
if (maskedAction == MotionEvent.ACTION_DOWN) {
this.setTextColor(resources.getColor(R.color.octane_orange));
initialClick = event.getX();
} else if (maskedAction == MotionEvent.ACTION_UP) {
this.setTextColor(defaultTextColor);
endingClick = event.getX();
checkIfSwipeOrClick(initialClick, endingClick, range);
} else if(maskedAction == MotionEvent.ACTION_CANCEL)
this.setTextColor(defaultTextColor);
}
return true;
}