Fairly new to ui for android, searched a lot but was not able to find a solution for my problem.
Goal:
I want to show random shapes with random colors on the screen.
My approach so far was to create buttons and set the shapes(xml) as background. That works fine but I have trouble changing the color of the shape. Also, it seems a little off to create buttons only to show shapes.
What would be the best approach to create a shape (e.g square,triangle etc.), give it a random color from colors.xml and finally display it?
You create your own custom View and use the onDraw(Canvas canvas) method to draw circles, rectangles, triangles to the canvas object by calling the following Canvas classes methods:
drawCircle(float cx, float cy, float radius, Paint paint)
drawOval(float left, float top, float right, float bottom, Paint paint)
drawRect(float left, float top, float right, float bottom, Paint paint)
And to change the colors you can use the Paint class by setting different colors to it, just like below:
paint.setColor(Color.RED);
Here is a very simple custom View class that I made that draws shapes with different color:
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by Arlind on 09-Dec-15.
*/
public class ArlindCustomView extends View
{
private Paint paint = new Paint();
public ArlindCustomView(Context context) {
super(context);
}
public ArlindCustomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public ArlindCustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public void onDraw(Canvas canvas)
{
paint.setAntiAlias(true);
paint.setColor(Color.RED);
canvas.drawCircle(300,100,50,paint);
paint.setColor(Color.BLUE);
canvas.drawCircle(80,90,70,paint);
paint.setColor(Color.BLUE);
canvas.drawRect(200, 200, 250, 250, paint);
paint.setColor(Color.YELLOW);
canvas.drawRect(300, 300, 350, 350, paint);
}
}
You can add this class to your xml or programmatically.
Related
I have a custom view, which draws a concave shape (visualized with red rectangle on screenshot). This custom view is a part of my recycler view element layout, which also contains a plain view with background color (right part).
This is an extract of my custom view (without rotation, but same drawing methods):
public class InvertedCircleView extends View {
private Paint mPaint;
private float mCanvasCenterX;
private float mCenterCircleWidth, mCenterCircleHeight;
public InvertedCircleView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
[...]
mPaint.setStyle(Paint.Style.FILL);
canvas.drawPaint(mPaint);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
mCenterCircleWidth = canvas.getWidth();
mCenterCircleHeight = canvas.getHeight();
mCanvasCenterX = canvas.getWidth() / 2;
canvas.drawOval(mCanvasCenterX - (mCenterCircleWidth / 2),
-mCenterCircleHeight,
mCanvasCenterX + (mCenterCircleWidth / 2),
mCenterCircleHeight,
mPaint);
}
}
When the recyclerview shows up the first time, everything looks fine. But when i scroll down (or up), the custom view part is not visible on all the new elements.
What i have tested so far:
setItemViewCacheSize -> this helps, but when i scroll up again, it shows the same bad result
notifyDataSetChanged -> this directly results in the "wrong" visualization for all elements
What may be the reason for this behaviour?
Found my mistake:
I used "mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));" in the onDraw-function. But i forgot to reset Xfermode in the end.
I added the line " mPaint.setXfermode(null);" and everything works as expected :)
I'm drawing a blank here!
I have a textview with a diamond shaped background. The text needs to be contained within the diamond.
Like this.
How do I do this? Is there a way to define the bounds of the text inside a textview?
Edit
Put the below code in a java class like DiamondTextView:
public class DiamondTextView extends TextView{
public DiamondTextView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
}
Paint mBorderPaint = new Paint();
#Override
protected void onDraw(Canvas canvas) {
mPath.moveTo(mWidth/2 , 0);
mPath.lineTo(mWidth , mHeight/2);
mPath.lineTo(mWidth /2 , mHeight);
mPath.lineTo(0 , mHeight/2);
mPath.lineTo( mWidth/2 ,0);
//setup the paint for fill
mBorderPaint.setAlpha(255);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStyle(Paint.Style.FILL);
borderPaint.setStrokeWidth(mBorderWidth);
//draw it
canvas.drawPath(mPath ,mBorderPaint);
//setup the paint for stroke
mBorderPaint.setAlpha(51);
mBorderPaint.setStyle(Paint.Style.STROKE);
//draw it again
canvas.drawPath(mPath ,mBorderPaint);
super.onDraw(canvas);
}
}
and call it as where you want to use this textView :
<com.erginus.ABC.Commons.DiamondTextView...../>
For more infomation look here:http://developer.android.com/reference/android/graphics/drawable/shapes/PathShape.html
You can use the following library too: https://github.com/siyamed/android-shape-imageview
What I am trying to achieve is to make an arc shaped seekbar. I know there are plenty of libraries I could use to achieve this, but I am just trying my hands on custom made views.
I have encountered couple of problems:
I have a class which extends SeekBar, and I have implemented onDraw and onMeasure methods as well, but I am not able to view that in layout editor in eclipse, here is the code for the custom view class:
package com.custom.android.views;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.PathMeasure;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.SeekBar;
import android.widget.Toast;
public class CustomSeekBar extends SeekBar {
public CustomSeekBar(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public CustomSeekBar(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public CustomSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
super.draw(canvas);
}
#Override
protected synchronized void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
Here is my layout xml :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<com.custom.android.views.CustomSeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar"/>
</RelativeLayout>
If I use canvas class to draw an arc or any shape, would that be a good starting point?
What exactly is wrong with the eclipse adt and how could I use the onDraw method to give shape to that seekbar?
Drawing a ProgressBar with any shape, is pretty easy. With the SeekBar you have some complexity, since you have to achieve 3 diferent things:
Draw the line
Draw the draggable thumb, if you want.
Handle the user interaction
You have to think of it as an arc that is draw inside a rectangle. So point 3 could be easy: just let the user move the finger in a horizontal line, or exactly over the arc, but considering only the x coordinate of the touch event. What does this mean, in short? ok, good news: you dont have to do anything, since thats the normal behavior of the base SeekBar.
For the second point, you can choose an image for the handler, and write it in the corresponding position with a little maths. Or you can forget the handler for know, and just draw the seek bar as a line representing the full track, and another line over it representing the progress. When you have this working, if you want you can add the handler.
And for the first point, this is the main one, but its not hard to achieve. You can use this code:
UPDATE: I made some improvements in the code
public class ArcSeekBar extends SeekBar {
public ArcSeekBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ArcSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
private Paint mBasePaint;
private Paint mProgressPaint;
private RectF mOval = new RectF(5, 5, 550, 550);
private int defaultmax = 180;
private int startAngle=180;
private int strokeWidth=10;
private int trackColor=0xFF000000;
private int progressColor=0xFFFF0000;
public void setOval(RectF mOval) {
this.mOval = mOval;
}
public void setStartAngle(int startAngle) {
this.startAngle = startAngle;
}
public void setStrokeWidth(int strokeWidth) {
this.strokeWidth = strokeWidth;
}
public void setTrackColor(int trackColor) {
this.trackColor = trackColor;
}
public void setProgressColor(int progressColor) {
this.progressColor = progressColor;
}
public ArcSeekBar(Context context) {
super(context);
mBasePaint = new Paint();
mBasePaint.setAntiAlias(true);
mBasePaint.setColor(trackColor);
mBasePaint.setStrokeWidth(strokeWidth);
mBasePaint.setStyle(Paint.Style.STROKE);
mProgressPaint = new Paint();
mProgressPaint.setAntiAlias(true);
mProgressPaint.setColor(progressColor);
mProgressPaint.setStrokeWidth(strokeWidth);
mProgressPaint.setStyle(Paint.Style.STROKE);
setMax(defaultmax);// degrees
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawArc(mOval, startAngle, getMax(), false, mBasePaint);
canvas.drawArc(mOval, startAngle, getProgress(), false, mProgressPaint);
invalidate();
//Log.i("ARC", getProgress()+"/"+getMax());
}
}
Of course, you can and you should make everything configurable, be means of the contructor, or with some setters for the start and end angles, dimensions of the containing rectangle, stroke widths, colors, etc.
Also, note that the arc is drawn from 0 to getProgress, being this number an angle relative to the x axis, growing clocwise, so, if it go from 0 to 90 degrees, it will be something like:
Of course you can change this: canvas.drawArc get any number as an angle, and it is NOT treated as module 360, but you can do the maths and have it starting and ending in any point you want.
In my example the beggining is in the 9 of a clock, and it takes 180 degrees, to the 3 in the clock.
UPDATE
I uploaded a running example to github
I'd like to animate the drawing of a path, i.e. to have it progressively appear on the screen. I am using the canvas and my best guess so far is to use an ObjectAnimator to take care of the animation. However, I cannot figure out how to actually draw the corresponding segment of the path in the onDraw() method. Is there a method that would allow to do this? Would I need to involve path effects for that?
Edit: Using a DashPathEffect and setting its "on" and "off" intervals in the animation to cover the part of the path we want to draw for that step seems to work here, but it requires allocating a new DashPathEffect for every step of the animation. I will leave the question open in case there is a better way.
Answering my own question, as I figured out a satisfying way to do that.
The trick is to use an ObjectAnimator to progressively change the current length of the stroke, and a DashPathEffect to control the length of the current stroke. The DashPathEffect will have its dashes parameter initially set to the following:
float[] dashes = { 0.0f, Float.MAX_VALUE };
First float is the length of the visible stroke, second length of non-visible part. Second length is chosen to be extremely high. Initial settings thus correspond to a totally invisible stroke.
Then everytime the object animator updates the stroke length value, a new DashPathEffect is created with the new visible part and set to the Painter object, and the view is invalidated:
dashes[0] = newValue;
mPaint.setPathEffect(new DashPathEffect(dashes, 0));
invalidate();
Finally, the onDraw() method uses this painter to draw the path, which will only comprise the portion we want:
canvas.drawPath(path, mPaint);
The only drawback I see is that we must create a new DashPathEffect at every animation step (as they cannot be reused), but globally this is satisfying - the animation is nice and smooth.
package com.nexoslav.dashlineanimatedcanvasdemo;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;
import androidx.annotation.Nullable;
public class CustomView extends View {
float[] dashes = {30, 20};
Paint mPaint;
private Path mPath;
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.BLACK);
mPaint.setStrokeWidth(10f);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setPathEffect(new DashPathEffect(dashes, 0));
mPath = new Path();
mPath.moveTo(200, 200);
mPath.lineTo(300, 100);
mPath.lineTo(400, 400);
mPath.lineTo(1000, 200);
mPath.lineTo(1000, 1000);
mPath.lineTo(200, 400);
ValueAnimator animation = ValueAnimator.ofInt(0, 100);
animation.setInterpolator(new LinearInterpolator());
animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
Log.d("bla", "bla: " + valueAnimator.getAnimatedValue());
mPaint.setPathEffect(new DashPathEffect(dashes, (Integer) valueAnimator.getAnimatedValue()));
invalidate();
}
});
animation.setDuration(1000);
animation.setRepeatMode(ValueAnimator.RESTART);
animation.setRepeatCount(ValueAnimator.INFINITE);
animation.start();
}
public CustomView(Context context) {
super(context);
init();
}
public CustomView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public CustomView(Context context, #Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
}
As far as I know, the only way is to start with an empty path and have a runnable that appends points to the path at defined intervals, until it is completed.
I am new to android. Now I generated two ImageView in my Android XML file. I want to use canvas to draw two circles in each view. But the problem is, how can I deal with the coordinates? How can I know the coordinates? And how can I center them? Thanks!
ImageViews are for displaying image files, normally. If you want to draw your view yourself, you create your own View and override the onDraw method. Here is a class that draws a big red circle inside itself:
public class CircleView extends View {
public CircleView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CircleView(Context context) {
super(context);
}
#Override
protected void onDraw(Canvas canvas) {
Paint red = new Paint();
red.setColor(0xffff0000);
int height = getHeight();
int width = getWidth();
int radius = width < height ? width/2 : height/2;
canvas.drawCircle(width/2, height/2, radius, red);
}
}
You cannnot draw cirlces in an ImageView. You can only draw a circle in a bitmap and apply that bitmap to an ImageView.
Or you can create custom views and draw directly on their canvas.
In both cases you need to find the size of these views after they are created. Then you will know the coordinates as the 0,0 starts in the top left corner.