I have a problem with my very simple custom view. Its intention is only to draw simple vertical dashed line. I would like to change the color of the line according to the pressed state of its parent container. I have this code:
public class DottedLine extends View {
float density ;
float size;
Paint paint;
public DottedLine(Context context) {
this(context, null, 0);
}
public DottedLine(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public DottedLine(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
DisplayMetrics metrics = getContext().getResources().getDisplayMetrics();
density = metrics.density;
size = 2 * density; //2dp
paint = new Paint();
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(size);
paint.setColor(getResources().getColor(R.color.main_kosapp));
paint.setPathEffect(new DashPathEffect(new float[] {size, size}, 0));
}
#Override
protected void onDraw(Canvas canvas) {
float diff = canvas.getHeight()%size;
Path path = new Path();
path.moveTo(canvas.getWidth()/2, diff/2);
path.lineTo(canvas.getWidth() / 2,canvas.getHeight()-diff/2);
if(this.isPressed() || this.isFocused()) {
paint.setColor(getResources().getColor(R.color.light_gray));
} else {
paint.setColor(getResources().getColor(R.color.main_kosapp));
}
canvas.drawPath(path, paint);
}
}
The problem is, that the onDraw method gets not called after I press the view. I tried to set duplicateParentState to true, but it did not help at all. FYI in my layout this view has two direct siblings - textviews - which both have its text color defined with selectors and it works for those textviews.
What is wrong with my view implementation? What do I need to add to the class to make selectors working?
you should invalidate your view for the pressed state by overriding the dispatchSetPressed
#Override
protected void dispatchSetPressed(boolean pressed) {
super.dispatchSetPressed(pressed);
invalidate();
}
at least that worked for me without using the motion events
Related
Im using the following code to animate the view when it is drawn...
public class MyView extends View {
int iCurStep = 0;// current animation step
class Points {
float x, y;
Points(float _x, float _y) {
x = _x;
y = _y;
}
}
Points[] drawPaths = {new Points(-75, 0), new Points(20, 60), new Points(60, 20)};
public MyView(Context context) {
super(context);
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.GREEN);
paint.setStrokeWidth(2);
paint.setStyle(Paint.Style.STROKE);
Path path = new Path();
PathMeasure pm = new PathMeasure(path, false);
if (iCurStep <= 20) {
pm.getPosTan(fSegmentLen * iCurStep, afP, null);
path.moveTo(drawPaths[0].x, drawPaths[0].y);
for (int i = 1; i < drawPaths.length; i++) {
path.lineTo(drawPaths[i].y, drawPaths[i].y);
}
canvas.drawPath(path, paint);
iCurStep++;
} else {
iCurStep = 0;
}
}
}
What Im expecting is that, it has to be a growing view...I mean the view has to grow as it is being drawn...But Im not able to produce to do so...How can I be able to sort this out?
Use a ObjectAnimator.
Create your view as normal, but then create an ObjectAnimator (docs: https://developer.android.com/reference/android/animation/ObjectAnimator.html). You'll do something like this in your fragment or activity (you can make it in XML as well). Essentially you create an ObjectAnimator for an object with a property string. The property string must have a camelCase setter. So if you wanted to call view.setScaleX() as the property you were going to modify, you'd need to set the property string to 'scaleX'. Here's a simple example.
View growMe = new View(args);
float startSize = 1.0f;
float endSize = 2.0f;
ObjectAnimator grower = ObjectAnimator.ofFloat(growMe, "scaleX", startSize, endSize);
int durationMs = 1000;
grower.setDuration (durationMs)
grower.start();
The one other thing you'll need to do is add an AnimationListener to your View that actually adjusts the size to be the correct as the end of the animation as (I believe--I might be wrong on this part), the view will re-size after the animation ends.
I hope that helps!
I have this custom view class which i found to make a rotate animation for the imageView i have in my project:
public class RotatedTitle extends ImageView
{
private float angleRotation;
public RotatedTitle(Context context)
{
super(context);
}
public RotatedTitle(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public RotatedTitle(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
}
public void setAngleRotation(float angleRotation)
{
this.angleRotation = angleRotation;
postInvalidate();
}
#Override
protected void onDraw(Canvas canvas)
{
Rect clipBounds = canvas.getClipBounds();
canvas.save();
canvas.rotate(angleRotation, clipBounds.exactCenterX(), clipBounds.exactCenterY());
super.onDraw(canvas);
canvas.restore();
postInvalidate();
}
}
Then am calling it like this in my main project:
RotatedTitle to = (RotatedTitle) findViewById(R.id.rotate);
to.setAngleRotation(10);
nothing is happening at all !! I do get the image to be drawn on the screen but no animation is happening. I tried to change invalidate() to postInvalidate() but nothing worked. Where is exactly to problem ? why I cant get any rotation animation!
Thank you
But you can use just RotateAnimation() class provided by SDK
ImageView image = (ImageView) findViewById(R.id.imageView);
Animation anim = new RotateAnimation(0.0f, 10.0f, pivotX, pivotY);
an.setDuration(5000);
an.setFillAfter(true);
image.setAnimation(anim);
If you're trying to rotate a view, use the RotateAnimation class. It was designed for this use. See the docs: http://developer.android.com/reference/android/view/animation/RotateAnimation.html
I have a very simple customized EditText like this:
public class MyEditText extends EditText {
private Paint mPaint;
public MyEditText(Context context) {
super(context);
init();
}
public MyEditText(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
setSingleLine();
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(6);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int y = canvas.getHeight() * 6 / 7;
canvas.drawLine(0, y, canvas.getWidth(), y, mPaint);
}
}
As I set single line mode on, when text is short everything is fine, it would look like this:
But once the text gets longer (more than width of the EditText), the red line is shifted to the left like this:
As you'll probably notice I used 0 and canvas.getWidth() to connect both sides of the view, but the line gets shifted, so doesn't it mean the whole canvas gets shifted as well?
If so it's such a strange behavior that I didn't expect from a View descendant. Can someone shed me some light on this strange behavior?
Thanks
Change your onDraw() method like below...
#Override
protected void onDraw(Canvas canvas) {
Rect r = new Rect();
int baseline = getLineBounds(0, r);
int y = canvas.getHeight() * 6 / 7;
canvas.drawLine(r.left, y, r.right, y, mPaint);
super.onDraw(canvas);
}
I'm trying to draw text in a custom view that has an image as a background. Three things are being drawn.
The bitmap behind the circle
The red circle and
Text over it.
At the moment the circle and bitmap draw perfectly but the text doesn't display.
Code for custom view.
public class NotificationButtonView extends Button
{
private int mNumberOfNotifications = 0;
private Paint mNotificationPaint = new Paint();
private Paint mTextPaint = new Paint();
public NotificationButtonView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public NotificationButtonView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public NotificationButtonView(Context context) {
super(context);
}
public void setNotificationNumber(int number)
{
this.mNumberOfNotifications = number;
this.invalidate();
}
public void addNotification()
{
this.mNumberOfNotifications++;
this.invalidate();
}
#Override
protected void onAttachedToWindow()
{
super.onAttachedToWindow();
mNotificationPaint.setColor(Color.rgb(255,69,0));
mNotificationPaint.setAlpha(220);
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.BLACK);
mTextPaint.setStyle(Style.FILL);
mTextPaint.setTextSize(this.getWidth() / 3);
mTextPaint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
mTextPaint.setTextAlign(Align.CENTER);
mTextPaint.setLinearText(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int diameter = this.getWidth() / 3;
/*
canvas.drawCircle(
this.getWidth() - diameter,
this.getHeight() - diameter,
diameter,
this.mNotificationPaint
);
*/
//Get the text bounds.
Rect foundBounds = new Rect();
mTextPaint.getTextBounds("1", 0, "1".length(), foundBounds);
foundBounds.offset(0, diameter);
canvas.drawText(
//String.valueOf(mNumberOfNotifications),
"1",
0,
foundBounds.bottom,
this.mTextPaint
);
//For testing the location of the text bounds.
canvas.drawRect(foundBounds, mNotificationPaint);
}
}
You are getting this.getWidth() 0 in onAttachedToWindow() as a result the text size is set to 0.
But you are getting this.getWidth() value in onDraw so in onDraw add this line
mTextPaint.setTextSize(this.getWidth() / 3);
I am trying to achieve the effect of creating a view with a custom shape(almost rectangular).
Here is what i tried to do:
public class CustomHeaderview extends View {
public CustomHeaderview(Context context) {
super(context);
}
public CustomHeaderview(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomHeaderview(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
Paint paint = new Paint();
#Override
public void draw(Canvas canvas) {
paint.setColor(Color.GRAY);
paint.setStyle(Style.FILL);
Path wallpath = new Path();
wallpath.reset(); // only needed when reusing this path for a new build
wallpath.moveTo(100, 100); // used for first point
wallpath.lineTo(100, 200);
wallpath.lineTo(200, 200);
wallpath.lineTo(150, 100);
wallpath.lineTo(100, 100);// there is a setLastPoint action but i found it not to work as expected
canvas.drawPath(wallpath, paint);
super.draw(canvas);
}
}
and the XML:
<CustomHeaderview
android:layout_width="152dp"
android:layout_height="152dp" />
EDIT
Thanks Dmitry, it works perfectly now!
You providing fancy coordinates for you rectangle:
x1: 100
y1: 100
x2: 100
y2: 120
So, you're getting rectangle with 0 width, thats why it is invisible.