I am using a MotionLayout with a scene-xml:
<Transition
motion:constraintSetStart="#+id/start"
motion:constraintSetEnd="#+id/end"
>
<OnSwipe
motion:touchAnchorId="#+id/v_top_sheet"
motion:touchRegionId="#+id/v_top_sheet_touch_region"
motion:touchAnchorSide="bottom"
motion:dragDirection="dragDown" />
</Transition>
The 2 ConstraintSets are referencing only 2 View IDs: v_notifications_container and v_top_sheet.
In my Activity I want to set a normal ClickListener to one of the other Views in this MotionLayout:
iv_notification_status.setOnClickListener { Timber.d("Hello") }
This line is executed, but the ClickListener is never triggered. I searched other posts, but most of them deal with setting a ClickListener on the same View that is the motion:touchAnchorId. This is not the case here. The ClickListener is set to a View that is not once mentioned in the MotionLayout setup. If I remove the app:layoutDescription attribute, the click works.
I also tried to use setOnTouchListener, but it is also never called.
How can I set a click listener within a MotionLayout?
With the help of this great medium article I figured out that MotionLayout is intercepting click events even though the motion scene only contains an OnSwipe transition.
So I wrote a customized MotionLayout to only handle ACTION_MOVE and pass all other touch events down the View tree. Works like a charm:
/**
* MotionLayout will intercept all touch events and take control over them.
* That means that View on top of MotionLayout (i.e. children of MotionLayout) will not
* receive touch events.
*
* If the motion scene uses only a onSwipe transition, all click events are intercepted nevertheless.
* This is why we override onInterceptTouchEvent in this class and only let swipe actions be handled
* by MotionLayout. All other actions are passed down the View tree so that possible ClickListener can
* receive the touch/click events.
*/
class ClickableMotionLayout: MotionLayout {
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
if (event?.action == MotionEvent.ACTION_MOVE) {
return super.onInterceptTouchEvent(event)
}
return false
}
}
#muetzenflo's response is the most efficient solution I've seen so far for this problem.
However, only checking the Event.Action for MotionEvent.ACTION_MOVE causes the MotionLayout to respond poorly. It is better to differentiate between movement and a single click by the use of ViewConfiguration.TapTimeout as the example below demonstrates.
public class MotionSubLayout extends MotionLayout {
private long mStartTime = 0;
public MotionSubLayout(#NonNull Context context) {
super(context);
}
public MotionSubLayout(#NonNull Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
}
public MotionSubLayout(#NonNull Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
if ( event.getAction() == MotionEvent.ACTION_DOWN ) {
mStartTime = event.getEventTime();
} else if ( event.getAction() == MotionEvent.ACTION_UP ) {
if ( event.getEventTime() - mStartTime <= ViewConfiguration.getTapTimeout() ) {
return false;
}
}
return super.onInterceptTouchEvent(event);
}
}
small modification of #TimonNetherlands code that works on the pixel4 aswell
class ClickableMotionLayout: MotionLayout {
private var mStartTime: Long = 0
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
if ( event?.action == MotionEvent.ACTION_DOWN ) {
mStartTime = event.eventTime;
}
if ((event?.eventTime?.minus(mStartTime)!! >= ViewConfiguration.getTapTimeout()) && event.action == MotionEvent.ACTION_MOVE) {
return super.onInterceptTouchEvent(event)
}
return false;
}
}
#Finn Marquardt's solution is efficient, but making a check only on ViewConfiguration.getTapTimeout() is not 100% reliable in my opinion and for me, sometimes the click event won't trigger because the duration of the tap is greater than getTapTimeout() (which is only 100ms). Also Long press is not handled.
Here is my solution, using GestureDetector:
class ClickableMotionLayout : MotionLayout {
private var isLongPressing = false
private var compatGestureDetector : GestureDetectorCompat? = null
var gestureListener : GestureDetector.SimpleOnGestureListener? = null
init {
setupGestureListener()
setOnTouchListener { v, event ->
if(isLongPressing && event.action == MotionEvent.ACTION_UP){
isPressed = false
isLongPressing = false
v.performClick()
} else {
isPressed = false
isLongPressing = false
compatGestureDetector?.onTouchEvent(event) ?: false
}
}
}
Where setupGestureListener() is implemented like this:
fun setupGestureListener(){
gestureListener = object : GestureDetector.SimpleOnGestureListener(){
override fun onLongPress(e: MotionEvent?) {
isPressed = progress == 0f
isLongPressing = progress == 0f
}
override fun onSingleTapUp(e: MotionEvent?): Boolean {
isPressed = true
performClick()
return true
}
}
compatGestureDetector = GestureDetectorCompat(context, gestureListener)
}
The GestureDetector handles the touch event only if it's a tap or if it's a long press (and it will manually trigger the "pressed" state). Once the user lifts the finger and the touch event is actually a long press, then a click event is triggered. In any other cases, MotionLayout will handle the event.
I'm afraid none of the other answers worked for me, I don't know it's because of an update in the libarary, but I don't get an ACTION_MOVE event on the region set in onSwipe.
Instead, this is what worked for me in the end:
import android.content.Context
import android.util.AttributeSet
import android.view.MotionEvent
import androidx.constraintlayout.motion.widget.MotionLayout
import androidx.core.view.children
/**
* This MotionLayout allows handling of clicks that clash with onSwipe areas.
*/
class ClickableMotionLayout #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr) {
override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
// Take all child views that are clickable,
// then see if any of those have just been clicked, and intercept the touch.
// Otherwise, let the MotionLayout handle the touch event.
if (children.filter { it.isClickable }.any {
it.x < event.x && it.x + it.width > event.x &&
it.y < event.y && it.y + it.height > event.y
}) {
return false
}
return super.onInterceptTouchEvent(event)
}
}
Basically, when we get a touch event, we iterate over all children of the MotionLayout and see if any of them (that are clickable) were the target of the event. If so, we intercept the touch event, and otherwise we let the MotionLayout do its thing.
This allows the user to click on clickable views that clashes with the onSwipe area, while also allowing swiping even if the swipe starts on the clickable view.
To setup onClick action on the view, use:
android:onClick="handleAction"
inside the MotionLayout file, and define "handleAction" in your class.
Related
I've created a custom view that should be a button, but i can't quite get it to work.
So my custom view is extended from View, and I need to to make a fragment navigation when clicked
I've tried to use the override fun performClick() and in it do a rootView.findNavController().navigate(R.id.action_menu_to_settings) but it crashes. I also tried use the .setOnClickLister() { // navigation } but it also doesn't work.
Can anyone tell me how set a clickListener on a custom view for a navigation? Thx
If you are creating a custom view, the best way to handle the click operations is like this:
class MyView #JvmOverloads constructor (
context: Context,
attrs: AttributeSet? = null,
defStyleRes: Int = 0,
defStyleAttr: Int = 0
) : View(context, attrs, defStyleRes, defStyleAttr) {
var touchType = -1 // No user touch yet.
var onClickListener: () -> Unit = {
Log.d(TAG, "on click not yet implemented")
}
override fun onDraw(canvas: Canvas?) {
/* your code here */
}
override fun onTouchEvent(e: MotionEvent?): Boolean {
val value = super.onTouchEvent(e)
when(e?.action) {
MotionEvent.ACTION_DOWN -> {
/* Determine where the user has touched on the screen. */
touchType = 1 // for eg.
return true
}
MotionEvent.ACTION_UP -> {
/* Now that user has lifted his finger. . . */
when (touchType) {
1 -> onClickListener()
}
}
}
return value
}
}
And in your client class (Activity/Fragment), with the instance of the specific custom view that you instantiated, apply the following:
myView.onClickListener = {
findNavController().navigate(R.id.action_menu_to_settings)
}
I am attempting to create a custom, vertical SeekBar that will be used to scroll text within a ScrollView. Here is that SeekBar:
class CustomSeekBar : SeekBar {
constructor(context: Context) : super(context) {}
constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(h, w, oldh, oldw)
}
#Synchronized
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(heightMeasureSpec, widthMeasureSpec)
setMeasuredDimension(measuredHeight, measuredWidth)
}
override fun onDraw(c: Canvas) {
c.rotate(90f)
c.translate(0f, -width.toFloat())
super.onDraw(c)
}
override fun onTouchEvent(event: MotionEvent): Boolean {
super.onTouchEvent(event)
if (!isEnabled) {
return false
}
when (event.action) {
MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE, MotionEvent.ACTION_UP -> {
val i = (max - (max * event.y / height)).toInt()
progress = 100 - i
onSizeChanged(width, height, 0, 0)
}
MotionEvent.ACTION_CANCEL -> {
}
}
return true
}
}
Here is my code that attempts to attach the ScrollView to the SeekBar in the onStart of my Fragment:
override fun onStart() {
super.onStart()
val helpScrollView = view!!.findViewById<ScrollView>(R.id.helpScrollView)
val helpSeekBar = view!!.findViewById<CustomSeekBar>(R.id.helpSeekBar)
helpScrollView.viewTreeObserver.addOnGlobalLayoutListener {
val scroll: Int = getScrollRange(helpScrollView)
helpSeekBar.max = scroll
}
val seekBarListener = object : SeekBar.OnSeekBarChangeListener {
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
val min = 0
if(progress < min) {
seekBar?.progress = min;}
helpScrollView.scrollTo(0, progress)
}
override fun onStartTrackingTouch(seekBar: SeekBar?) {
}
override fun onStopTrackingTouch(seekBar: SeekBar?) {
}
}
helpSeekBar.setOnSeekBarChangeListener(seekBarListener)
}
private fun getScrollRange(scrollView: ScrollView): Int {
var scrollRange = 0
if (scrollView.childCount > 0) {
val child = scrollView.getChildAt(0)
scrollRange =
Math.max(0, child.height - (scrollView.height - scrollView.paddingBottom - scrollView.paddingTop))
}
return scrollRange
}
The SeekBar on seems to only react to touches on its lower half, and the thumbs shadow still scrolls horizontally off the screen. The ScrollView moves slightly, but only in one direction at the beginning of the scroll. What am I doing wrong?
Check updated answer at the bottom for a solution
Who are we to judge what you need to do, client is almost always right!
Anyway, if you still wanted to do this, (it may or may not work) here's what I think the architecture should try to look like:
The SeekBar is stupid, shouldn't know ANYTHING about what it is doing. You give it a min (0?) and a MAX (n). You subscribe to its listener and receive the "progress" updates. (ha, that's the easy part)
ScrollView containing the text, is also very unintelligent beyond its basics, it can be told to scroll to a position (this will involve some work I guess, but I'm sure it's not difficult).
Calculating the MAX value is going to be what determines how hard step 2 will be. If you use each "step" in your scrolling content as a "Line of text", then this is fine, but you'd need to account for layout changes and re-measures that may change the size of the text. Shouldn't be "crazy" but, keep it in mind or you will receive your first bug report as soon as a user rotates the phone :)
If the text is dynamic (can change real-time) your function for step 3 should be as efficient as possible, you want those numbers "asap".
Responding to progress changes from the seekbar and having your scrollable content scroll is going to be either super easy (you found a way to do it very easily) or complicated if you cannot make the ScrollView behave as you want.
Alternative Approach
If your text is really long, I bet you're going to have better performance if you split your text in lines and use a recyclerview to display it, which would then make scrolling "slightly easier" as you could move your recyclerview to a position (line!).
UPDATE
Ok, so out of curiosity, I tried this. I launched AS, created a new project with an "Empty Activity" and added a ScrollView with a TextView inside, and a SeekBar at the bottom (horizontal).
Here's the Gist with all the relevant bits:
https://gist.github.com/Gryzor/5a68e4d247f4db1e0d1d77c40576af33
At its core the solution works out of the box:
scrollView.scrollTo(0, progress) where progress is returned to you by the framework callback in the seekBar's onProgressChanged().
Now the key is to set the correct "Max" to the seekbar.
This is obtained by dodging a private method in the ScrollView with this:
(credit where is due, I got this idea from here)
private fun getScrollRange(scrollView: ScrollView): Int {
var scrollRange = 0
if (scrollView.childCount > 0) {
val child = scrollView.getChildAt(0)
scrollRange =
Math.max(0, child.height - (scrollView.height - scrollView.paddingBottom - scrollView.paddingTop))
}
return scrollRange
}
This works fine, assuming you wait for the seekBar to measure/layout (hence why I had to do this in the treeObserver).
In my activity, I have a editText field. When the user taps on it, the editText gains the focus and the keyboard appears. Now, when the user presses the hardware back button on the phone, the keyboard disappears but the cursor remains in the Edittext, i. e., it still has the focus. Is it possible to make the EditText lose focus when back button is pressed? I tried using the following code but it didn't work:
#Override
public void onBackPressed() {
vibrator.vibrate(Constants.DEFAULT_VIBRATE_TIME);
myEditText.clearFocus();
super.onBackPressed();
}
Just extend EditText:
public class EditTextV2 extends EditText
{
public EditTextV2( Context context )
{
super( context );
}
public EditTextV2( Context context, AttributeSet attribute_set )
{
super( context, attribute_set );
}
public EditTextV2( Context context, AttributeSet attribute_set, int def_style_attribute )
{
super( context, attribute_set, def_style_attribute );
}
#Override
public boolean onKeyPreIme( int key_code, KeyEvent event )
{
if ( key_code == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_UP )
this.clearFocus();
return super.onKeyPreIme( key_code, event );
}
}
And in the xml just use <yourPackage.EditTextV2> instead of <EditText>.
Note: You may need to add/remove constructors to this class depending on the min API you're supporting. I suggest just adding them all and removing the ones whose super() calls get underlined in red.
For anyone using Kotlin and Material Design, you can use this:
class ClearFocusEditText: TextInputEditText {
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
override fun onKeyPreIme(keyCode: Int, event: KeyEvent?): Boolean {
if(keyCode == KeyEvent.KEYCODE_BACK) {
clearFocus()
}
return super.onKeyPreIme(keyCode, event)
}
}
You can make another of your Views focusable, for example an ImageView. Be sure to make it focusable in touch mode, using setFocusableInTouchMode(true) and on onResume() make that View to requestFocus().
Also you can create a dummy View with 0 dimensions and perform same steps described above.
I hope this helps.
Add view like the following higher than your EditText:
<LinearLayout
android:layout_width="0px"
android:layout_height="0px"
android:focusable="true"
android:focusableInTouchMode="true" />
Also to hide keyboard add this in onBackPressed():
((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(myEditText.getWindowToken(), 0);
I am providing kotlin equivalent code to Kacy answer with some edit
class CustomSearch #JvmOverloads constructor(context: Context, attrs: AttributeSet? =
null, defStyle: Int = 0):AppCompatEditText(context, attrs, defStyle) {
override fun onKeyPreIme(keyCode: Int, event: KeyEvent?): Boolean {
if (keyCode == KeyEvent.KEYCODE_BACK){
val imm:InputMethodManager = context.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
imm.hideSoftInputFromWindow(this.windowToken, 0)
this.clearFocus()
//this.findFocus()
}
return true
}
Note: I am returning true and this is solving my problem i.e removing focus from edit text and hiding soft input
This may be a possible solution:
EditText et;
et.setOnKeyListener(new View.OnKeyListener() {
#Override
public boolean onKey(View view, int i, KeyEvent keyEvent) {
if(i == KeyEvent.KEYCODE_BACK) {
et.clearFocus();
return true;
}
else return false;
}
});
Is there anyway to know when a progressbar has reached it maximum. Like a Listener then could plug into the ProgressBar and lets us know that the progress bar is at the maximum level ?
Kind Regards
There isn't a direct way to do this. A workaround could be to make a custom implementation of the ProgressBar and override the setProgress method:
public MyProgressBar extends ProgressBar
{
#Override
public void setProgress(int progress)
{
super.setProgress(progress);
if(progress == this.getMax())
{
//Do stuff when progress is max
}
}
}
I think the cleanest way would be just adding this to your code:
if (progressBar.getProgress() == progressBar.getMax()) {
// do stuff you need
}
If you need onProgressChanged like SeekBar - create custom progress (Kotlin):
class MyProgressBar : ProgressBar {
private var listener: OnMyProgressBarChangeListener? = null
fun setOnMyProgressBarChangeListener(l: OnMyProgressBarChangeListener) {
listener = l
}
constructor(context: Context?) : super(context)
constructor(context: Context?, attrs: AttributeSet?) : super(
context,
attrs
)
constructor(
context: Context?,
attrs: AttributeSet?,
defStyleAttr: Int
) : super(context, attrs, defStyleAttr)
override fun setProgress(progress: Int) {
super.setProgress(progress)
listener?.onProgressChanged(this)
}
interface OnMyProgressBarChangeListener {
fun onProgressChanged(myProgressBar: MyProgressBar?)
}
}
And for example in your fragment:
progress_bar?.setOnMyProgressBarChangeListener(object :
MyProgressBar.OnMyProgressBarChangeListener {
override fun onProgressChanged(myProgressBar: MyProgressBar?) {
val p = progress_bar.progress
// do stuff like this
if (p != 100) {
percentCallback?.changePercent(p.toString()) // show animation custom view with grow percents
} else {
shieldView.setFinishAndDrawCheckMark() // draw check mark
}
}
})
I think overall you should never have to do this. Is there just one valid case where you need to listen to a progressbar progress? I mean, usually it's the other way around: you set the progressbar progress based on something, not the other way around, so you need to track the progress of that something instead of listening to a view (which may or may not exist by the way).
With the Android SeekBar, you can normally drag the thumb to the left or to the right and the yellow progress color is to the left of the thumb. I want the exact opposite, essentially flipping the yellow progress color to the right of the thumb and flipping the entire SeekBar on the y-axis.
Can anyone point me in the right direction? Thanks!
After fiddling around with some code this is what I got and it seems to work pretty well. Hopefully it will help someone else in the future.
public class ReversedSeekBar extends SeekBar {
public ReversedSeekBar(Context context) {
super(context);
}
public ReversedSeekBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ReversedSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onDraw(Canvas canvas) {
float px = this.getWidth() / 2.0f;
float py = this.getHeight() / 2.0f;
canvas.scale(-1, 1, px, py);
super.onDraw(canvas);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
event.setLocation(this.getWidth() - event.getX(), event.getY());
return super.onTouchEvent(event);
}
}
This was thrown together with the help of these two questions:
How can you display upside down text with a textview in Android?
How can I get a working vertical SeekBar in Android?
Have you tried seekbar.setRotation( 180 )? It flips the seekbar 180 degrees and is upside down, meaning left side is max, right side is 0 with the color on the right of the thumb. No need to create a custom seekbar this way.
You should look into making a custom progress bar. Considering what you want to do, you already have the images you need in the Android SDK. I'd extract them and edit them accordingly. Here's a tutorial to help get you started.
Have you tried setting this in xml
android:rotationY="180"
This should fix a few issues with #mhenry answer
class ReverseSeekBar : SeekBar {
constructor(context: Context) : super(context) {
init()
}
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
init()
}
constructor(context: Context, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle) {
init()
}
var first = true
override fun onTouchEvent(event: MotionEvent): Boolean {
event.setLocation(this.width - event.x, event.y)
return super.onTouchEvent(event)
}
override fun getProgress(): Int {
return max - super.getProgress() + min
}
override fun setProgress(progress: Int) {
super.setProgress(max - progress + min)
}
override fun onDraw(canvas: Canvas?) {
if (first) {
first = false
val old = progress
progress = min + max - progress
super.onDraw(canvas)
progress = old
} else
super.onDraw(canvas)
}
private fun init() {
rotation = 180f
}
}