Develop Reference

click gesture detection on part of edittext android

I am working on a text editor for a programming language, it has two parts, the line number box (2) and the code box (1) like in the figure below
..................
. . .
. . .
. 2. 1 .
. . .
. . .
. . .
..................
If the user clicks in the line number box (2), I need to execute some code, here I just show a toast with the message 'Click' but ignoure the default behavior of edit text.
If the user clicks inside box 1, just delegate the default edittext behavior by calling super.onTouchEvent(event).
Here's what I did, but I don't know how to get it to work properly, i need to play with the return value of onTouchEvent:
public class MyEditText extends AppCompatEditText {
private Rect drawingBound;
private Rect leftRect; // area 2
private Paint rectPaint;
private static final int PADDING = 100;
private boolean down = false;
public MyEditText(#NonNull Context context) {
super(context);
init(context);
}
public MyEditText(#NonNull Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
public MyEditText(#NonNull Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
setPadding(PADDING, 0, 0, 0);
drawingBound = new Rect();
leftRect = new Rect();
rectPaint = new Paint();
rectPaint.setColor(Color.GREEN);
rectPaint.setStyle(Paint.Style.STROKE);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
getDrawingRect(drawingBound);
leftRect.set(drawingBound);
leftRect.right = drawingBound.left+ PADDING;
canvas.drawRect(leftRect, rectPaint);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getActionMasked();
if (action == MotionEvent.ACTION_DOWN) {
down = true;
return false;
}
else if (action == MotionEvent.ACTION_UP) {
if (down) {
down = false;
int x = (int) event.getX();
int y = (int) event.getY();
if (leftRect.contains(x, y)) {
Toast.makeText(getContext(), "Click", Toast.LENGTH_SHORT).show();
return true;
}
}
return super.onTouchEvent(event);
} else {
return super.onTouchEvent(event);
}
}
}

How to handle onclick events on the compound drawables of a TextInputEditText?

How can one detect click events on compound drawables of a TextInputEditText?

Use the following overriden version of TextInputEditText, and call setOnDrawableClickedListener.
You may fare better if you set your drawable at the end of the edit text than at the start, because the current version of TextInputLayout produces fairly ugly results when the drawable is at the start.
Sample layout is given further down. (Note the use of android:drawablePadding="10dp" particularly).
Code is for androidx, but you can backport to AppCompat trivially.
package com.twoplay.netplayer.controls;
import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import com.google.android.material.textfield.TextInputEditText;
public class TextInputEditTextEx extends TextInputEditText {
private OnDrawableClickedListener onDrawableClickedListener;
public TextInputEditTextEx(Context context) {
super(context);
init();
}
public TextInputEditTextEx(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TextInputEditTextEx(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
setOnTouchListener(new OnTouchListener() {
private Rect hitBounds = new Rect();
#Override
public boolean onTouch(View v, MotionEvent event) {
float x = event.getX();
float y = event.getY();
int hitDrawable = -1;
if (x < getCompoundPaddingLeft())
{
hitDrawable = 0;
hitBounds.set(0,0,getCompoundPaddingLeft(),getHeight());
}
if (x > getWidth()-getCompoundPaddingRight())
{
hitDrawable = 2;
hitBounds.set(getCompoundPaddingRight(),0,getWidth(),getHeight());
}
if (hitDrawable != -1)
{
int action = event.getAction();
if (action == MotionEvent.ACTION_UP)
{
onDrawableClicked(hitDrawable,hitBounds);
}
return true;
}
return false;
}
});
}
private void onDrawableClicked(int i, Rect bounds) {
if (onDrawableClickedListener != null)
{
onDrawableClickedListener.onDrawableClicked(this,i,bounds);
}
}
public interface OnDrawableClickedListener {
void onDrawableClicked(View v, int drawable, Rect bounds);
}
public void setOnDrawableClickedListener(OnDrawableClickedListener listener)
{
this.onDrawableClickedListener = listener;
}
}
Sample layout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/playlist_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/playlist_name" >
<com.twoplay.netplayer.controls.TextInputEditTextEx
android:id="#+id/playlist_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords"
android:drawableEnd="#drawable/ic_more_horiz_black_24dp"
android:drawablePadding="10dp" />
</com.google.android.material.textfield.TextInputLayout>

horizontal recyclerview inside vertical recycerview adapter

enter code here i am using recyclerview but i need to implement one more
recyclerview inside the adapter layout of the recyclerview. Can
anyone tell me how can i set the json data to the recyclerview
which is inside the cardview of verticsal recycler. Dont tell me
about how to set the horizontal recyclerview i know it very well.
the problem with me is that i am confused that how to set data to
recyclerview which is inside cardview of vertical recyclerview

You can pass a List> to the vertical RecyclerView's adapter and then in the onBindViewHolder, pass the inner list at some index i to the constructor of horizontal RecyclerView's adapter.

For the outer vertical RecyclerView, use this extended class:
public class BetterRecyclerView extends RecyclerView{
private static final int INVALID_POINTER = -1;
private int mScrollPointerId = INVALID_POINTER;
private int mInitialTouchX, mInitialTouchY;
private int mTouchSlop;
public BetterRecyclerView(Context context) {
this(context, null);
}
public BetterRecyclerView(Context context, #Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public BetterRecyclerView(Context context, #Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
final ViewConfiguration vc = ViewConfiguration.get(getContext());
mTouchSlop = vc.getScaledTouchSlop();
}
#Override
public void setScrollingTouchSlop(int slopConstant) {
super.setScrollingTouchSlop(slopConstant);
final ViewConfiguration vc = ViewConfiguration.get(getContext());
switch (slopConstant) {
case TOUCH_SLOP_DEFAULT:
mTouchSlop = vc.getScaledTouchSlop();
break;
case TOUCH_SLOP_PAGING:
mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(vc);
break;
default:
break;
}
}
#Override
public boolean onInterceptTouchEvent(MotionEvent e) {
final int action = MotionEventCompat.getActionMasked(e);
final int actionIndex = MotionEventCompat.getActionIndex(e);
switch (action) {
case MotionEvent.ACTION_DOWN:
mScrollPointerId = MotionEventCompat.getPointerId(e, 0);
mInitialTouchX = (int) (e.getX() + 0.5f);
mInitialTouchY = (int) (e.getY() + 0.5f);
return super.onInterceptTouchEvent(e);
case MotionEventCompat.ACTION_POINTER_DOWN:
mScrollPointerId = MotionEventCompat.getPointerId(e, actionIndex);
mInitialTouchX = (int) (MotionEventCompat.getX(e, actionIndex) + 0.5f);
mInitialTouchY = (int) (MotionEventCompat.getY(e, actionIndex) + 0.5f);
return super.onInterceptTouchEvent(e);
case MotionEvent.ACTION_MOVE: {
final int index = MotionEventCompat.findPointerIndex(e, mScrollPointerId);
if (index < 0) {
return false;
}
final int x = (int) (MotionEventCompat.getX(e, index) + 0.5f);
final int y = (int) (MotionEventCompat.getY(e, index) + 0.5f);
if (getScrollState() != SCROLL_STATE_DRAGGING) {
final int dx = x - mInitialTouchX;
final int dy = y - mInitialTouchY;
final boolean canScrollHorizontally = getLayoutManager().canScrollHorizontally();
final boolean canScrollVertically = getLayoutManager().canScrollVertically();
boolean startScroll = false;
if (canScrollHorizontally && Math.abs(dx) > mTouchSlop && (Math.abs(dx) >= Math.abs(dy) || canScrollVertically)) {
startScroll = true;
}
if (canScrollVertically && Math.abs(dy) > mTouchSlop && (Math.abs(dy) >= Math.abs(dx) || canScrollHorizontally)) {
startScroll = true;
}
return startScroll && super.onInterceptTouchEvent(e);
}
return super.onInterceptTouchEvent(e);
}
default:
return super.onInterceptTouchEvent(e);
}
}
}
For the inner horizontal RecyclerView, use this extended class:
public class FeedRootRecyclerView extends BetterRecyclerView{
public FeedRootRecyclerView(Context context) {
this(context, null);
}
public FeedRootRecyclerView(Context context, #Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public FeedRootRecyclerView(Context context, #Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void requestDisallowInterceptTouchEvent(boolean disallowIntercept) {
/* do nothing */
}
}
You can find proper explanation as to what these classes do over here : http://nerds.headout.com/fix-horizontal-scrolling-in-your-android-app/

Making a component like the RatingBar

I need to display an array of dots (ImageView) that behave like the RatingBar, here's an example:
This is pretty much an RatingBar rotated, but I've a problem, this application is pixel-perfect and therefore I need to add some margin between the dots. This cannot be done with an RatingBar. With all this issues that I'm facing trying to use the RatingBar I gave up and I decided to make my own component, so far this is the component:
public class DotContainerView extends LinearLayout {
#InjectView(R.id.view_dot_container)
LinearLayout vDotContainer;
private OnRatingBarChangeListener mListener;
public DotContainerView(Context context) {
super(context);
initialize();
}
public DotContainerView(Context context, AttributeSet attrs) {
super(context, attrs);
initialize();
}
public DotContainerView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialize();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public DotContainerView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
initialize();
}
private void initialize() {
View root = LayoutInflater.from(getContext()).inflate(R.layout.view_dot_container, this);
ButterKnife.inject(this, root);
setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.onTouchEvent(event);
return false;
}
});
}
public void setRating(int rating) {
for (int index = 0; index < rating; index++) {
vDotContainer.getChildAt(index).setSelected(false);
}
for (int index = rating; index < 10; index++) {
vDotContainer.getChildAt(index).setSelected(true);
}
}
public void setOnRatingBarChangeListener(DotContainerView.OnRatingBarChangeListener listener) {
mListener = listener;
}
//region OnTouch
#OnTouch(R.id.fragment_brightness_control_dot_1)
public boolean onDot1Touched() {
setRating(1);
mListener.onRatingChanged(this, 1, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_2)
public boolean onDot2Touched() {
setRating(2);
mListener.onRatingChanged(this, 2, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_3)
public boolean onDot3Touched() {
setRating(3);
mListener.onRatingChanged(this, 3, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_4)
public boolean onDot4Touched() {
setRating(4);
mListener.onRatingChanged(this, 4, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_5)
public boolean onDot5Touched() {
setRating(5);
mListener.onRatingChanged(this, 5, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_6)
public boolean onDot6Touched() {
setRating(6);
mListener.onRatingChanged(this, 6, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_7)
public boolean onDot7Touched() {
setRating(7);
mListener.onRatingChanged(this, 7, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_8)
public boolean onDot8Touched() {
setRating(8);
mListener.onRatingChanged(this, 8, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_9)
public boolean onDot9Touched() {
setRating(9);
mListener.onRatingChanged(this, 9, true);
return true;
}
#OnTouch(R.id.fragment_brightness_control_dot_10)
public boolean onDot10Touched() {
setRating(10);
mListener.onRatingChanged(this, 10, true);
return true;
}
//endregion
public interface OnRatingBarChangeListener {
public void onRatingChanged(DotContainerView ratingBar, float value, boolean fromUser);
}
}
This code works fine, if I tap in a dot all the previous dots'll get selected. The only issue with this is that if I drag my finger across the dots, they don't react as in a RatingBar, only if I tap in each dot. Any idea of how solve this?. And please avoid telling me "Use the RatingBar".

I ended up doing something like this:
import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
import butterknife.ButterKnife;
import butterknife.InjectView;
/**
* #author astinx
* #since 0.2
* <p>
* Simple widget that shows an array of dots which can be tapped like a {#link android.widget.RatingBar}
*/
public class DotContainerView extends LinearLayout implements View.OnTouchListener {
#InjectView(R.id.view_dot_container)
LinearLayout vDotContainer;
private OnRatingBarChangeListener mListener;
public DotContainerView(Context context) {
super(context);
initialize();
}
public DotContainerView(Context context, AttributeSet attrs) {
super(context, attrs);
initialize();
}
public DotContainerView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialize();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public DotContainerView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
initialize();
}
private void initialize() {
View root = LayoutInflater.from(getContext()).inflate(R.layout.view_dot_container, this);
ButterKnife.inject(this, root);
vDotContainer.setOnTouchListener(this);
}
public void setRating(int rating) {
//If the rating = 5
for (int index = 0; index < rating; index++) {
//This sets the children 10, 9, 8, 5...
vDotContainer.getChildAt(Math.abs(index - 10) - 1).setSelected(true);
}
for (int index = rating; index < 10; index++) {
//Ant this sets the children 6, 7, 8, 9, 10
vDotContainer.getChildAt(Math.abs(index - 10) - 1).setSelected(false);
}
}
public void setOnRatingBarChangeListener(DotContainerView.OnRatingBarChangeListener listener) {
mListener = listener;
}
#Override
public boolean onTouch(View v, MotionEvent event) {
float rawX = event.getX();
float rawY = event.getY();
setRating(rawX, rawY);
return true;
}
#Override
public boolean onInterceptHoverEvent(MotionEvent event) {
float rawX = event.getX();
float rawY = event.getY();
setRating(rawX, rawY);
return super.onInterceptHoverEvent(event);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
float rawX = event.getX();
float rawY = event.getY();
setRating(rawX, rawY);
return false;
}
protected void setRating(float rawX, float rawY) {
Log.d("DotContainer", "x=" + rawX + ";y=" + rawY);
int dotIndexByCoords = 10 - findDotIndexByCoords(rawX, rawY);
setRating(dotIndexByCoords);
mListener.onRatingChanged(this, dotIndexByCoords, true);
}
private View findViewByIndex(int childIndex) {
return vDotContainer.getChildAt(childIndex);
}
/**
* Iterates all over the {#link LinearLayout} searching for the closest child to x,y
* #param x The x axis
* #param y The y axis
* #return The index of the child, -1 if isn't found.
*/
private int findDotIndexByCoords(float x, float y) {
for (int childIndex = 0; childIndex < vDotContainer.getChildCount(); childIndex++) {
float y1 = vDotContainer.getChildAt(childIndex).getY();
float y2 = vDotContainer.getChildAt(childIndex + 1).getY();
if (y1 <= y && y <= y2) {
Log.d("DotContainer", "Child no "+ childIndex);
return childIndex;
}
}
return -1;
}
public interface OnRatingBarChangeListener {
public void onRatingChanged(DotContainerView ratingBar, float value, boolean fromUser);
}
}
I know that're things that can be improved, but for those who want to do something quick withouth yelling and cursing at the RatingBar this is something quick, that gets the job done. Basically is just a LinearLayout that contains an array of ImageView each one has a drawable selector that changes the drawable whether is pressed or not. This class overrides the methodn onInterceptTouchEvent and returns false so it's continiously called, inside this method we check which dot was clicked.

Selection overlay when dragging over views

I'm trying to build a view that works like the calendar agenda view (a vertical list of hours that user can select by dragging) but I'm stuck at the part where user begins to start pressing on the screen and dragging his finger over the hour rows to select them. How can I make am overlay representing the selection over the views that represents the hours and expand/shrink it as user drags the selection?
My current interface is composed of a vertical oriented LinearLayout that contains empty TextViews as placeholders that represents the hours of the day.
This is how my screen looks like:
Each green column is the LinearLayout with the TextViews representing the slots. I want to allow the user to start pressing on one of the slots and dragging down to make the selection and while the dragging is in progress to have an overlay that shrinks/expands to reflect the selection.

I've managed to solve it by extending the LinearLayout and hooking into the drawing mechanism like this:
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v4.view.MotionEventCompat;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
public class AvailabilityCalendarColumnLayout extends LinearLayout{
private Drawable overlay;
public AvailabilityCalendarColumnLayout(Context context) {
super(context);
setWillNotDraw(false);
}
public AvailabilityCalendarColumnLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
setWillNotDraw(false);
}
public AvailabilityCalendarColumnLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setWillNotDraw(false);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if(overlay != null) {
overlay.draw(canvas);
}
}
public boolean startSelectionOverlay(View startingView) {
if(startingView == null) {
return false;
}
overlay = getResources().getDrawable(R.drawable.overlay);
float[] l = new float[2];
l[0] = startingView.getX();
l[1] = startingView.getY();
int w = startingView.getWidth();
int h = startingView.getHeight();
overlay.setBounds((int) l[0], (int) l[1], (int) l[0] + w, (int) l[1] + h);
invalidate();
return true;
}
private void extendSelectionOverlay(View endView) {
if(endView == null) {
return;
}
float[] l = new float[2];
l[0] = endView.getX();
l[1] = endView.getY();
int w = endView.getWidth();
int h = endView.getHeight();
Rect r = overlay.getBounds();
r.bottom = (int)l[1] + h;
overlay.setBounds(r);
invalidate();
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return true;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
final int action = MotionEventCompat.getActionMasked(ev);
float[] pos = new float[2];
pos[0] = ev.getX();
pos[1] = ev.getY();
if(action == MotionEvent.ACTION_DOWN && overlay == null) {
View view = getChildViewUnderPosition(pos);
if(view != null) {
startSelectionOverlay(view);
}
}
if(action == MotionEvent.ACTION_MOVE && overlay != null) {
View view = getChildViewUnderPosition(pos);
extendSelectionOverlay(view);
}
if(action == MotionEvent.ACTION_UP && overlay != null) {
endSelectionOverlay();
invalidate();
}
return true;
}
private View getChildViewUnderPosition(float[] pos) {
int num = getChildCount();
View v;
for(int x = 0; x < num; x++) {
v = getChildAt(x);
if(v.getX() <= pos[0] && (v.getX() + v.getWidth()) >= pos[0] && v.getY() <= pos[1] && (v.getY() + v.getHeight()) >= pos[1] && !v.isSelected()) {
return v;
}
}
return null;
}
private void endSelectionOverlay() {
overlay = null;
invalidate();
}
}