Develop Reference

how to click listener on custom view

In one of my apps I have created a circular view with multiple colors,In which I want to set click listener on each color arch
Below is the image and code for drawing that view
Custom view class code
public class CircularStatusView extends View {
private static final float DEFAULT_PORTION_WIDTH = 10;
private static final int DEFAULT_PORTION_SPACING = 5;
private static final int DEFAULT_COLOR = Color.parseColor("#D81B60");
private static final float DEFAULT_PORTIONS_COUNT = 1;
private static final float START_DEGREE =-90;
private float radius;
private float portionWidth = DEFAULT_PORTION_WIDTH;
private int portionSpacing = DEFAULT_PORTION_SPACING;
private int portionColor = DEFAULT_COLOR;
private float portionsCount = DEFAULT_PORTIONS_COUNT;
private RectF mBorderRect = new RectF();
private Paint paint;
private SparseIntArray portionToUpdateMap = new SparseIntArray();
private Context context;
public CircularStatusView(Context context) {
super(context);
init(context, null, -1);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircularStatusView, defStyle, 0);
if (a != null) {
portionColor = a.getColor(R.styleable.CircularStatusView_portion_color, DEFAULT_COLOR);
portionWidth = a.getDimensionPixelSize(R.styleable.CircularStatusView_portion_width, (int) DEFAULT_PORTION_WIDTH);
portionSpacing = a.getDimensionPixelSize(R.styleable.CircularStatusView_portion_spacing, DEFAULT_PORTION_SPACING);
portionsCount = a.getInteger(R.styleable.CircularStatusView_portions_count, (int) DEFAULT_PORTIONS_COUNT);
a.recycle();
}
paint = getPaint();
}
public CircularStatusView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init(context, attrs, -1);
}
public CircularStatusView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBorderRect.set(calculateBounds());
radius = Math.min((mBorderRect.height() - portionWidth) / 2.0f, (mBorderRect.width() - portionWidth) / 2.0f);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float radius = this.radius;
float center_x = mBorderRect.centerX();
float center_y = mBorderRect.centerY();
final RectF oval = getOval(radius, center_x, center_y);
float degree = 360 / portionsCount;
float percent = 100 / portionsCount;
for (int i = 0; i < portionsCount; i++) {
paint.setColor(getPaintColorForIndex(i));
float startAngle = START_DEGREE + (degree * i);
canvas.drawArc(oval, (getSpacing() / 2) + startAngle, getProgressAngle(percent) - getSpacing(), false, paint);
}
}
private int getPaintColorForIndex(int i) {
if (portionToUpdateMap.indexOfKey(i) >= 0) { //if key is exists
return portionToUpdateMap.get(i);
} else {
return portionColor;
}
}
#NonNull
private RectF getOval(float radius, float center_x, float center_y) {
final RectF oval = new RectF();
oval.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
return oval;
}
#NonNull
private Paint getPaint() {
Paint paint = new Paint();
paint.setColor(portionColor);
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
paint.setStrokeWidth(portionWidth);
paint.setStrokeCap(Paint.Cap.BUTT);
return paint;
}
private int getSpacing() {
return portionsCount == 1 ? 0 : portionSpacing;
}
private RectF calculateBounds() {
int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
int sideLength = Math.min(availableWidth, availableHeight);
float left = getPaddingLeft() + (availableWidth - sideLength) / 2f;
float top = getPaddingTop() + (availableHeight - sideLength) / 2f;
return new RectF(left, top, left + sideLength, top + sideLength);
}
private float getProgressAngle(float percent) {
return percent / (float) 100 * 360;
}
public void setPortionsCount(int portionsCount) {
this.portionsCount = (float) portionsCount;
}
public void setPortionSpacing(int spacing) {
portionSpacing = spacing;
}
public void setPortionWidth(float portionWidth) {
this.portionWidth = portionWidth;
}
public void setCustomPaint(Paint paint) {
this.paint = paint;
}
public void setPortionsColor(int color) {
this.portionColor = color;
portionToUpdateMap.clear();
invalidate();
}
public void setPortionColorForIndex(int index, int color) {
if (index > portionsCount - 1) {
throw new IllegalArgumentException("Index is Bigger than the count!");
} else {
Log.d("3llomi", "adding index to map " + index);
portionToUpdateMap.put(index, color);
invalidate();
}
}
}
and in my activity class
CircularStatusView circularStatusView = findViewById(R.id.circular_status_view);
circularStatusView.setPortionsCount(6);
for (int i=0; i<AppConstants.outerCircleColors.length; i++){
circularStatusView.setPortionColorForIndex(i,Color.parseColor(AppConstants.outerCircleColors[i]));
How I can set click listener on each color arch in this view? Can someone help me out in this?

You can get the pixel from the CircularStatusView, By using OnTouchListener:
CircularStatusView view = ((CircularStatusView)v);
Bitmap bitmap = ((BitmapDrawable)view.getDrawable()).getBitmap();
int pixel = bitmap.getPixel(x,y);
You can just compare the pixel to a different color. Like...
if(pixel == Color.RED){
//It's Red Color
}

You can create an interface listener for onTouch events. Check the onTouch co-ordinates. Depending on their position you can send back the touched part index to the interface listener.
Dummy code:
public class CircularStatusView extends View {
private StatusViewTouchListener listener;
...
..
.
public void setOnClickListener(StatusViewTouchListener listener) {
this.listener = listener;
}
public interface StatusViewTouchListener {
public void onStatusViewTouch(int index);
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
int indexOfTouchedColor;
// Check the touch points and determine in which color part it exists.
listener.onStatusViewTouch(indexOfTouchedColor);
return true;
}
}
Implement the listener where where you are using the view and set it to the View.
public class yourActivity extends Activity implements StatusViewTouchListener {
...
..
.
CircularStatusView circularStatusView = findViewById(R.id.circular_status_view);
circularStatusView.setPortionsCount(6);
for (int i=0; i<AppConstants.outerCircleColors.length; i++){
circularStatusView.setPortionColorForIndex(i,Color.parseColor(AppConstants.outerCircleColors[i]));
circularStatusView.setOnClickListener(this);
...
..
#Override
public void onStatusViewTouch(int index) {
// Perform your action based on the index of the color
}
}

How to know about bitmap getPixel(x,y) from given color code

I know that we can get color from bitmap.getPixel(x,y) method but I do not have x,y and I want to get x,y from given color code.
When onDraw Method will call at the first time I want to draw the line on vertical picker with default color but that time I do not have x,y so not able to call getPixel(x,y) because user-interaction does not happen.
public class VerticalSlideColorPicker extends View {
private String TAG = VerticalSlideColorPicker.class.getName();
private Paint paint;
private Paint strokePaint;
private Path path;
private Bitmap bitmap;
private int viewWidth;
private int viewHeight;
private int centerX;
private float colorPickerRadius;
private OnColorChangeListener onColorChangeListener;
private RectF colorPickerBody;
private float selectorYPos;
private int borderColor;
private float borderWidth;
private int[] colors;
private boolean cacheBitmap = true;
private Context mContext;
public VerticalSlideColorPicker(Context context) {
super(context);
mContext = context;
init();
}
public VerticalSlideColorPicker(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.VerticalSlideColorPicker,
0, 0);
try {
borderColor = a.getColor(R.styleable.VerticalSlideColorPicker_borderColor, Color.WHITE);
borderWidth = a.getDimension(R.styleable.VerticalSlideColorPicker_borderWidth, 10f);
int colorsResourceId = a.getResourceId(R.styleable.VerticalSlideColorPicker_colors, R.array.default_colors);
colors = a.getResources().getIntArray(colorsResourceId);
}
finally {
a.recycle();
}
init();
}
public VerticalSlideColorPicker(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public VerticalSlideColorPicker(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
setWillNotDraw(false);
paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
path = new Path();
strokePaint = new Paint();
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setColor(borderColor);
strokePaint.setAntiAlias(true);
strokePaint.setStrokeWidth(borderWidth);
setDrawingCacheEnabled(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.addRect(colorPickerBody, Path.Direction.CW);
path.addRect(colorPickerBody, Path.Direction.CW);
canvas.drawPath(path, strokePaint);
canvas.drawPath(path, paint);
if (cacheBitmap) {
bitmap = getDrawingCache();
cacheBitmap = false;
setColor(ContextCompat.getColor(getContext(), R.color.tag_layout_border_audioyes_darkblue));
//invalidate();
}
else {
canvas.drawLine(colorPickerBody.left, selectorYPos, colorPickerBody.right, selectorYPos, strokePaint);
}
}
/**
* Set the color this view should show.
*
* #param color The color that should be selected. #argb
*/
public void setColor(int color) {
/*int[] pixels = new int[bitmap.getHeight()*bitmap.getWidth()];
bitmap.getPixels(pixels, 0, bitmap.getWidth(), 0, 0, bitmap.getWidth(), bitmap.getHeight());
for (int i=0; i<bitmap.getWidth()*5; i++)
pixels[i] = ContextCompat.getColor(getContext(), R.color.blue_picker);
bitmap.setPixels(pixels, 0, bitmap.getWidth(), 0, 0, bitmap.getWidth(), bitmap.getHeight());*/
/* int alpha = Color.alpha(color);
int red = Color.red(color);
int blue = Color.blue(color);
int green = Color.green(color);
float[] hsv = new float[3];
Color.RGBToHSV(red, green, blue, hsv);*/
/* selectorYPos = 584;
int selectedColor = bitmap.getPixel(viewWidth / 2, (int) selectorYPos);*/
/* this.alpha = alpha;
hue = hsv[0];
sat = hsv[1];
val = hsv[2];*/
if (onColorChangeListener != null) {
onColorChangeListener.onColorChange(color);
}
invalidate();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float yPos = Math.min(event.getY(), colorPickerBody.bottom);
android.util.Log.e(TAG, "Float :" + yPos);
yPos = Math.max(colorPickerBody.top, yPos);
android.util.Log.e(TAG, "Normal :" + yPos);
selectorYPos = yPos;
int selectedColor = bitmap.getPixel(viewWidth / 2, (int) selectorYPos);
android.util.Log.e(TAG, "Color :" + selectedColor);
if (onColorChangeListener != null) {
onColorChangeListener.onColorChange(selectedColor);
}
invalidate();
return true;
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
viewWidth = w;
viewHeight = h;
centerX = viewWidth / 2;
colorPickerRadius = (viewWidth / 2) - borderWidth;
colorPickerBody = new RectF(centerX - colorPickerRadius, borderWidth + colorPickerRadius, centerX + colorPickerRadius, viewHeight - (borderWidth + colorPickerRadius));
LinearGradient gradient = new LinearGradient(colorPickerBody.left, colorPickerBody.top,
colorPickerBody.right,
colorPickerBody.bottom, colors, null, Shader.TileMode.CLAMP);
paint.setShader(gradient);
resetToDefault();
}
public void setBorderColor(int borderColor) {
this.borderColor = borderColor;
invalidate();
}
public void setBorderWidth(float borderWidth) {
this.borderWidth = borderWidth;
invalidate();
}
public void setColors(int[] colors) {
this.colors = colors;
cacheBitmap = true;
invalidate();
}
public void resetToDefault() {
selectorYPos = borderWidth + colorPickerRadius;
if (onColorChangeListener != null) {
onColorChangeListener.onColorChange(Color.TRANSPARENT);
}
invalidate();
}
public void setOnColorChangeListener(OnColorChangeListener onColorChangeListener) {
this.onColorChangeListener = onColorChangeListener;
}
}

A brute force solution could be the following:
private List<Point> getPixelswithColor(Bitmap bitmap, int colorId) {
List<Point> pixels = new ArrayList();
for (int x = 0; x < bitmap.getWidth(); x++) {
for (int y = 0; y < bitmap.getHeight(); y++) {
if (bitmap.getPixel(x, y) == colorId) {
pixels.add(new Point(x, y));
}
}
}
return pixels;
}

Android : draw arc without resetting the previous drawn circle

I am trying to draw a circle which will represent time and after each complete circle, I want to change the color to indicate to the user that the next time unit has started and draw over the previous circle color rather than reset as shown in the example below.
I am trying to draw a circle using Draw Arc method in the following way
canvas.drawArc(mRect, 270, sweepAngle, false, fgPaint);
The sweep angle is controlled by an Object Animator :
outerCircleAnimator = ObjectAnimator.ofFloat(timeView, TimeView.SET_SWEEPWANGLE, 0, 360);
With the following code, I am able to achieve the following
The following is my View class :
public class TimeView extends View {
final protected Paint bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
final protected Paint fgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
final protected Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private RectF mRect = new RectF();
private float sweepAngle;
private float radiusInDPI = 100;
private float radiusInPixels;
private float strokeWidthInDPI = 4;
private float stokeWidthInPixels;
private float dpi;
private int heightByTwo;
private int widthByTwo;
public TimeView(Context context) {
super(context);
init();
}
public TimeView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TimeView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#Override
public void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
heightByTwo = h / 2;
widthByTwo = w / 2;
mRect = new RectF(w / 2 - radiusInPixels, h / 2 - radiusInPixels, w / 2 + radiusInPixels, h / 2 + radiusInPixels);
}
private void init() {
DisplayMetrics metrics = getResources().getDisplayMetrics();
dpi = metrics.density;
radiusInPixels = dpi * radiusInDPI;
stokeWidthInPixels = dpi * strokeWidthInDPI;
bgPaint.setStrokeWidth(stokeWidthInPixels);
bgPaint.setStyle(Paint.Style.STROKE);
bgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorAccent));
fgPaint.setStrokeWidth(stokeWidthInPixels);
fgPaint.setStyle(Paint.Style.STROKE);
fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));
textPaint.setTextSize(24 * 3);
textPaint.setStyle(Paint.Style.STROKE);
textPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// canvas.drawCircle(widthByTwo, heightByTwo, radiusInPixels, bgPaint);
canvas.drawArc(mRect, 270, sweepAngle, false, fgPaint);
}
public static final Property<TimeView, Float> SET_SWEEPWANGLE =
new Property<TimeView, Float>(Float.class, "outerCircleRadiusProgress") {
#Override
public Float get(TimeView object) {
return object.getSweepAngle();
}
#Override
public void set(TimeView object, Float value) {
object.setSweepAngle(value);
}
};
public float getSweepAngle() {
return sweepAngle;
}
public void setSweepAngle(float sweepAngle) {
Log.v("Testing", "Sweep angle is " + sweepAngle + " " + (sweepAngle + 270));
this.sweepAngle = sweepAngle;
postInvalidate();
}
public void setColor(boolean change) {
if (change) {
fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.mint_green));
} else {
fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));
}
}
}

onDraw is used to draw on the empty canvas. It is always starting from the beginning. You'll need to save the last fgPaint and:
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (lastFgPaint != null) {
canvas.drawArc(mRect, sweepAngle, 360, false, lastFgPaint);
}
canvas.drawArc(mRect, 270, sweepAngle, false, fgPaint);
}

Android: ScrollView's child custom view not getting proper height

I'm writing a custom view, which is having a ScrollView as a parent, because, the custom view height exceeds the screen's height. The problem that I'm facing is that I cannot scroll the layout.
The fragment which is added in the activity's UI:
public class FragmentHour extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstance) {
HourView view = new HourView(getActivity());
ScrollView sv = new ScrollView(getActivity());
sv.setFillViewport(true);
sv.addView(view);
return sv;
}
}
The custom view:
public class HourView extends View {
// Default rectangle for one row, used to know the sizes
private Rect mDefRect;
// Paint to draw the lines
private Paint mPaint;
public HourView(Context context) {
super(context);
init();
}
public HourView(Context context, AttributeSet set) {
super(context, set);
init();
}
public HourView(Context context, AttributeSet set, int defStyle) {
super(context, set, defStyle);
init();
}
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.GRAY);
mPaint.setStrokeWidth(UIUtils.dpToPx(getContext(), 0.5f));
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// Create a default rectangle, for one row
// We need to recreate the rectangle multiple times, because getWidth() == 0
int height = UIUitls.dpToPx(getContext(), 50); // dpi to px
mDefRect = new Rect(0, 0, getWidth(), height);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
int verticalOffset = 0;
for (int i = 0; i < 24; i++) {
int cellHeight = mDefRect.height();
verticalOffset += cellHeight;
canvas.drawLine(0, verticalOffset, getWidth(), verticalOffset, mPaint);
}
}
}
The code above will result:
As I said, the problem is that I cannot scroll the view, probably because the child view's height, it's the size of it's parent.
I have tried to override the onMeasure method:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (mDefRect != null) {
int measuredWidth = MeasureSpec.getSize(widthMeasureSpec);
int newHeight = mDefRect.height() * 24;
setMeasuredDimension(measuredWidth, newHeight);
// super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(newHeight, MeasureSpec.EXACTLY));
}
else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
I have tried to register for layout-change, then change the Layout parameters:
private void init() {
// ...
post(new Runnable() {
#Override
public void run() {
getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#SuppressLint("NewApi")
#SuppressWarnings("deprecation")
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
getLayoutParams().height = mDefRect.height() * 24;
// postInvalidate();
}
});
}
});
}

add view to linearlayout on a circle drawn in canvas

I have drawn a circle using canvas draw method. Now I want to add a view on circumference of circle. I can get coordinate of circle but totally lost how to add view to that coordinate.
Code is as below -
public class CircleView2 extends LinearLayout {
private int centerX, centerY;
private float fixedRadius = 30;
private Paint paint;
private Logger logger;
private Context context;
TextView textView;
public CircleView2(Context context) {
super(context);
setWillNotDraw(false);
doInit(context);
}
public CircleView2(Context context, AttributeSet attrs) {
super(context, attrs);
setWillNotDraw(false);
doInit(context);
}
private void doInit(Context context) {
this.context = context;
logger = new Logger(context);
fixedRadius = 30;
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);
paint.setColor(Color.rgb(227, 73, 90));
textView = new TextView(context);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
centerX = w / 2;
centerY = h / 2;
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawCircle(centerX, centerY, fixedRadius + 160, paint);
double x = centerX + (fixedRadius + 160) * Math.cos(Math.toDegrees(45.0));
double y = centerY + (fixedRadius + 160) * Math.sin(Math.toDegrees(45.0));
logger.debug(x + "");
logger.debug(y + "");
textView.setTextColor(Color.BLACK);
textView.setText("AAA");
textView.draw(canvas);
super.onDraw(canvas);
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
}
}
This draws circle just fine. But can't add textview. textview.draw(canvas) should add that to view, right ? How to add textview to view and that to at calculated coordinates ?
What I'm doing wrong here?