Develop Reference

Android display image in image view with rounded corner

i want to display an image with rounded corned, So i use this function
> public class RoundedImage extends Drawable {
private final Bitmap mBitmap;
private final Paint mPaint;
private final RectF mRectF;
private final int mBitmapWidth;
private final int mBitmapHeight;
public RoundedImage(Bitmap bitmap) {
mBitmap = bitmap;
mRectF = new RectF();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
final BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint.setShader(shader);
mBitmapWidth = mBitmap.getWidth();
mBitmapHeight = mBitmap.getHeight();
}
#Override
public void draw(Canvas canvas) {
canvas.drawRoundRect(mRectF, 10, 10, mPaint);
}
#Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mRectF.set(bounds);
}
#Override
public void setAlpha(int alpha) {
if (mPaint.getAlpha() != alpha) {
mPaint.setAlpha(alpha);
invalidateSelf();
}
}
#Override
public void setColorFilter(ColorFilter cf) {
mPaint.setColorFilter(cf);
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
#Override
public int getIntrinsicWidth() {
return mBitmapWidth;
}
#Override
public int getIntrinsicHeight() {
return mBitmapHeight;
}
public void setAntiAlias(boolean aa) {
mPaint.setAntiAlias(aa);
invalidateSelf();
}
#Override
public void setFilterBitmap(boolean filter) {
mPaint.setFilterBitmap(filter);
invalidateSelf();
}
#Override
public void setDither(boolean dither) {
mPaint.setDither(dither);
invalidateSelf();
}
public Bitmap getBitmap() {
return mBitmap;
}
}
the problem, when i make the scaled type of the image view fitXY, i can'see just a part of the image with the rounded corner.
but when i use an other scaled type i have poblems with the rounded corner.

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = pixels;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}

Android: Animate Custom Drawable programmatically

I have a Custom Class extending Drawable as seen below which is meant to draw an Arc. From my MainActivity controlling the Drawable, I am redrawing it based on some input values that I translate to the appropriate "angle" for the shape. E.g.
This is the initial state of the drawable:
This is the second state of the drawable:
Red arrow indicates the motion i am trying to achieve
I am trying to "animate" the change from state 1 to state 2 with a sweeping motion. Any ideas on how to do that? Should I redraw the shape a number of times gradually transitioning between state one and two?
My Drawable Code:
public class CircleLoadingBar extends Drawable implements Drawable.Callback{
private Paint paint;
private Canvas canvas;
private float angle;
private RectF outterCircle;
private float padding=30;
public void invalidateDrawable(Drawable drawable){
final Callback callback = getCallback();
if (callback != null) {
callback.invalidateDrawable(this);
}
}
public void scheduleDrawable(Drawable drawable, Runnable runnable, long l){
invalidateDrawable(drawable);
}
public void unscheduleDrawable(Drawable drawable,Runnable runnable){
//empty
}
public CircleLoadingBar(){
this(0);
}
public CircleLoadingBar( int angle){
this.angle=angle;
this.canvas=new Canvas();
paint=new Paint();
paint.setColor(Color.GREEN);
paint.setStrokeWidth(padding);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStyle(Paint.Style.STROKE);
outterCircle = new RectF();
}
public void setAngle(float angle){
this.angle=angle;
}
#Override
public void draw(Canvas canvas){
canvas.save();
Rect bounds = getBounds();
outterCircle.set(bounds.left+padding,bounds.top+padding,bounds.right-padding,bounds.bottom-padding);
int[] colors = {Color.RED, Color.GREEN, Color.RED};
float[] positions = {0,0.2f,1.3f};
SweepGradient gradient3 = new SweepGradient(innerCircle.centerX(), innerCircle.centerY(),colors,positions);
paint.setShader(gradient3);
canvas.drawArc(outterCircle,90,angle,true,paint);
}
#Override
public void setAlpha(int alpha) {
// Has no effect
}
#Override
public void setColorFilter(ColorFilter cf) {
// Has no effect
}
#Override
public int getOpacity() {
// Not Implemented
return 0;
}
}
My MainActivity Code:
public class MainActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate();
setContentView(R.layout.main);
textView= (TextView) findViewById(R.id.textview);
circleLoadingBar= new CircleLoadingBar(10);
textView.setBackgroundDrawable(circleLoadingBar);
}
public void stateUpdate(float angle) {
circleLoadingBar.setAngle(angle);
textView.invalidate();
}
}

After a lot of searching around, I found the answer.
Summary:
I needed my Custom Drawable class to implement Drawable.Callback and Runnable interfaces (see code below).
CustomDrawable.class
public class CustomDrawable extends Drawable implements Drawable.Callback, Runnable{
private Paint paint;
private Canvas canvas;
private int angle;
private RectF circle;
private float cx,cy;
private float mHeight,mWidth=100;
private float mRadius=20;
private Drawable.Callback cb;
private boolean running=false;
public void invalidateDrawable(Drawable drawable){
super.invalidateSelf(); //This was done for my specific example. I wouldn't use it otherwise
}
public void scheduleDrawable(Drawable drawable, Runnable runnable, long l){
invalidateDrawable(drawable);
}
public void unscheduleDrawable(Drawable drawable,Runnable runnable){
super.unscheduleSelf(runnable);
}
public CircleLoadingBar(){
this(0);
}
public CircleLoadingBar(int angle){
this.angle=angle;
paint=new Paint();
paint.setColor(Color.GREEN);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStyle(Paint.Style.STROKE);
circle= new RectF();
}
#Override
public void draw(Canvas canvas){
canvas.save();
Rect bounds = getBounds();
circle.set(bounds);
canvas.drawArc(circle, 90, angle, true, paint);
}
public void nextFrame(){
unscheduleSelf(this);
scheduleSelf(this, SystemClock.uptimeMillis() + 250);
}
public void stop(){
running=false;
unscheduleSelf(this);
}
public void start(){
if(!running){
running=true;
nextFrame();
}
}
public void run(){
angle++;
invalidate();
nextFrame();
}
#Override
public void setAlpha(int alpha) {
// Has no effect
}
#Override
public void setColorFilter(ColorFilter cf) {
// Has no effect
}
#Override
public int getOpacity() {
// Not Implemented
return 0;
}
}
Now that your Drawable implements both, you can just "run" it as a separate thread, initiated and controlled by your activity via start and stop functions.

How to change color of canvas in android dynamically for every 5 sec.?

I am creating an android application that consists of canvas to draw circles and canvas color will be changed for every 5 seconds.Here's the code what i did but it does not changed its color please tell me where i did the mistake
package com.developer.milandemoapp;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
public class Automode_Activity extends Activity {
Thread timer;
boolean Count=true;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
public class MyView extends View{
public MyView(Context context) {
super(context);
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
getWidth();
getHeight();
final int radius = 25;
System.currentTimeMillis();
final Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
canvas.drawPaint(paint);
paint.setColor(Color.parseColor("#D50000"));
final Paint paint1 = new Paint();
paint1.setStyle(Paint.Style.FILL);
canvas.drawPaint(paint1);
paint1.setColor(Color.parseColor("#33691E"));
//Count=0;
final Thread delay_thread= new Thread(new Runnable() {
#Override
public void run() {
while(true){
try{
Thread.sleep(5000);
change_colors();
}
catch(Exception e)
{
Log.e("Error:",e.getMessage());
}
}}
private void change_colors() {
runOnUiThread(new Runnable() {
#Override
public void run() {
if(Count)
{
paint1.setColor(Color.parseColor("#D50000"));
}
//paint1.setColor(Color.parseColor("#33691E"));
else
{
paint1.setColor(Color.parseColor("#33691E"));
}
Count=!Count;
canvas.drawCircle(300, 300, radius, paint1);
canvas.drawCircle(400, 300, radius, paint1);
canvas.drawCircle(500, 300, radius, paint1);
canvas.drawCircle(600, 300, radius, paint1);
canvas.drawCircle(700, 300, radius, paint1);
canvas.drawCircle(800, 300, radius, paint1);
canvas.drawCircle(900, 300, radius, paint1);
}
});
}
});
canvas.drawCircle(300, 300, radius, paint);
canvas.drawCircle(400, 300, radius, paint);
canvas.drawCircle(500, 300, radius, paint);
canvas.drawCircle(600, 300, radius, paint);
canvas.drawCircle(700, 300, radius, paint);
canvas.drawCircle(800, 300, radius, paint);
canvas.drawCircle(900, 300, radius, paint);
delay_thread.start();
}
}
}

Try this code. I have made some changes to your code using Handlers. this will give you an basic idea.
public class Automode_Activity extends Activity {
Thread timer;
boolean Count=true;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
public class MyView extends View{
Runnable runnable= new Runnable() {
public void run() {
this.invalidate();
}
};
Handler handler = new Handler();
public MyView(Context context) {
super(context);
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
getWidth();
getHeight();
final int radius = 25;
System.currentTimeMillis();
final Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
canvas.drawPaint(paint);
if(Count)
{
paint.setColor(Color.parseColor("#D50000"));
}
else
{
paint.setColor(Color.parseColor("#33691E"));
}
Count=!Count;
canvas.drawCircle(300, 300, radius, paint);
canvas.drawCircle(400, 300, radius, paint);
canvas.drawCircle(500, 300, radius, paint);
canvas.drawCircle(600, 300, radius, paint);
canvas.drawCircle(700, 300, radius, paint);
canvas.drawCircle(800, 300, radius, paint);
canvas.drawCircle(900, 300, radius, paint);
handler.postDelayed(runnable, 5000);
}
}
}

Well, all you got just messed-up:
Try to not initialize anything in onDraw() - this method is calls every time you redraw your view.
You've messed-up with colors here - you're drawing circles with paint but you're changing paint1 in your thread.
I don't understand why do you call all this getWidth() getHeight() and System.currentTimeMillis()
So, I've cleaned a little bit all of your code and optimized it. That's how it should work now:
public class MainActivity extends Activity {
private MyView view;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
view = new MyView(this);
setContentView(view);
}
#Override
protected void onStart() {
// Restart view thread
view.startChangingColors(5000);
super.onStart();
}
#Override
protected void onStop() {
// Stopping thread
view.stopRunnning();
super.onStop();
}
public class MyView extends View {
private Thread colorThread;
private final int color1 = Color.parseColor("#D50000");
private final int color2 = Color.parseColor("#33691E");
private Paint paint;
private Paint clearingPaint;
private final int radius = 25;
private boolean switcher = true;
public MyView(Context context) {
super(context);
// Init goes here
paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(color1);
clearingPaint = new Paint();
clearingPaint.setStyle(Paint.Style.FILL);
clearingPaint.setColor(Color.WHITE);
// Run thread
startChangingColors(5000);
}
public void stopRunnning() {
// Stopping previous thread
if (colorThread != null) {
colorThread.interrupt();
}
}
/**
* Starting a thread that changes colors every n miliseconds
*
* #param delay
*/
public void startChangingColors(final int delayMilis) {
// Hust a safety check
stopRunnning();
colorThread = new Thread(new Runnable() {
#Override
public void run() {
boolean interrupted = false;
while (!interrupted) {
try {
runOnUiThread(new Runnable() {
#Override
public void run() {
changeColors();
}
});
Thread.sleep(delayMilis);
} catch (Exception e) {
if (e instanceof InterruptedException) {
// We just woked up to close all this
interrupted = true;
} else {
Log.e("Error:", e.getMessage());
}
}
}
}
});
colorThread.start();
}
public void changeColors() {
if (switcher) {
paint.setColor(color1);
} else {
paint.setColor(color2);
}
switcher = !switcher;
// Redraw view
invalidate();
}
#Override
protected void onDraw(final Canvas canvas) {
// Clear the canvas
canvas.drawPaint(clearingPaint);
// Draw circles
canvas.drawCircle(300, 300, radius, paint);
canvas.drawCircle(400, 300, radius, paint);
canvas.drawCircle(500, 300, radius, paint);
canvas.drawCircle(600, 300, radius, paint);
canvas.drawCircle(700, 300, radius, paint);
canvas.drawCircle(800, 300, radius, paint);
canvas.drawCircle(900, 300, radius, paint);
}
}
}

// define boolean to change color after 5000 ms
boolean change = false;
// prepare runnable which will be called after 5000 ms
// through handler
Runnable mRunnable = new Runnable() {
public void run() {
change_color(change);
change = !change;
}
};
// create handler
Handler mHandler = new Handler();
mHandler.postDelayed(mRunnable, 5000);
// use receivedChange variable in change_colors()
// and change canvas color based on that
private void change_colors(boolean receivedChange) {
runOnUiThread(new Runnable() {
#Override
public void run() {
if(receivedChange == true) {
paint1.setColor(Color.parseColor("#D50000"));
} else {
paint1.setColor(Color.parseColor("#33691E"));
}
canvas.drawCircle(300, 300, radius, paint1);
canvas.drawCircle(400, 300, radius, paint1);
canvas.drawCircle(500, 300, radius, paint1);
canvas.drawCircle(600, 300, radius, paint1);
canvas.drawCircle(700, 300, radius, paint1);
canvas.drawCircle(800, 300, radius, paint1);
canvas.drawCircle(900, 300, radius, paint1);
}
});

android split the circle without taking the origin into consideration

I'm trying to split the circle into something of this sort:
http://i.stack.imgur.com/hNg3E.png
I want to color the major arc part of the circle with transparent color and minor arc of the circle with black color. Here is what I have tried, but unable to reach the final goal:
public class SplitCircleDrawable extends Drawable {
private final Bitmap mBitmap;
private final Paint mPaint;
private final Paint mBackGroundPaint,mTransparentPaint;
private final RectF mRectF;
private final int mBitmapWidth;
private final int mBitmapHeight;
private Context mCtx;
public SplitCircleDrawable(Bitmap bitmap, Context mContext) {
mCtx = mContext;
mBitmap=bitmap;
mRectF = new RectF();
mPaint = new Paint();
mBackGroundPaint = new Paint();
mTransparentPaint=new Paint();
mBackGroundPaint.setColor(0x97021829);
mTransparentPaint.setColor(Color.TRANSPARENT);
mBackGroundPaint.setDither(true);
mBackGroundPaint.setAntiAlias(true);
mPaint.setAntiAlias(true);
mPaint.setDither(true);
final BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint.setShader(shader);
// NOTE: we assume bitmap is properly scaled to current density
mBitmapWidth = mBitmap.getWidth();
mBitmapHeight = mBitmap.getHeight();
}
#Override
public void draw(Canvas canvas) {
canvas.drawOval(mRectF, mPaint);
canvas.drawArc(mRectF, 0, 180, false, mBackGroundPaint);
// canvas.drawArc(mRectF, 0, 45, true, mTransparentPaint);
// canvas.drawArc(mRectF, 45, 135, true, mBackGroundPaint);
// canvas.drawArc(mRectF, 135, 180, true, mTransparentPaint);
}
#Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mRectF.set(bounds);
}
#Override
public void setAlpha(int alpha) {
if (mPaint.getAlpha() != alpha) {
mPaint.setAlpha(alpha);
invalidateSelf();
}
}
#Override
public void setColorFilter(ColorFilter cf) {
mPaint.setColorFilter(cf);
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
#Override
public int getIntrinsicWidth() {
return mBitmapWidth;
}
#Override
public int getIntrinsicHeight() {
return mBitmapHeight;
}
public void setAntiAlias(boolean aa) {
mPaint.setAntiAlias(aa);
invalidateSelf();
}
#Override
public void setFilterBitmap(boolean filter) {
mPaint.setFilterBitmap(filter);
invalidateSelf();
}
#Override
public void setDither(boolean dither) {
mPaint.setDither(dither);
invalidateSelf();
}
}
Any help on this pls?

You might try to do it with canvas clipPath():
// First we draw draw backgroudn, it should be cropped with path too
canvas.drawOval(mRectF, paintBackground);
// Creating path that will cover small area on the circle,
// it might be triangle or rectancel or what ever.
// Currently it is triangle between top and left rect centers.
path.reset();
path.moveTo(0, 0);
path.lineTo(0, mRectF.width() / 2f);
path.lineTo(mRectF.height() / 2f, 0);
path.close();
// Clipping canvas to path and drawing small area
canvas.save();
canvas.clipPath(path);
canvas.drawOval(mRectF, paintArc);
canvas.restore();

Why is the position of the drawable also changing when applying ScaleAnimation in Android?

I am trying to apply a scale animation to a rectangle, using code not xml. I want to make the rectangle grow taller, pretty simple.
RectDrawableView - creates a RectShape ShapeDrawable
public class RectDrawableView extends View {
Paint paint;
public RectDrawableView(Context context) {
super(context);
paint = new Paint();
paint.setColor(Color.parseColor("#aacfcce4"));
paint.setStyle(Paint.Style.FILL);
}
protected void onDraw(Canvas canvas) {
int x = 35;
int y = 250;
int width = 50;
int height = 300;
ShapeDrawable shapeDrawable = new ShapeDrawable(new RectShape());
Rect rect = new Rect(x, y, x+width, y+height);
shapeDrawable.setBounds(rect);
shapeDrawable.getPaint().set(paint);
shapeDrawable.draw(canvas);
}
}
Activity: - Creates a new RectDrawableView and adds to layout. OnResume an animation is triggered, which should make the rectangle grow taller.
public class RectActivity extends Activity {
final String TAG = "RectActivity";
TextView rect1;
RectDrawableView rectView;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.basic);
LinearLayout linear = (LinearLayout) findViewById(R.id.basicLayout);
rectView = new RectDrawableView(this);
linear.addView(rectView);
}
#Override
public void onResume() {
super.onResume();
RunAnimations();
}
private void RunAnimations() {
Animation rectAnim1 = new ScaleAnimation(1, 1, 1, 1.3f, ScaleAnimation.RELATIVE_TO_SELF, 0,
ScaleAnimation.RELATIVE_TO_SELF, 1);
rectAnim1.setFillBefore(false);
rectAnim1.setFillAfter(true);
rectAnim1.setStartOffset(500);
rectAnim1.setDuration(500);
rectView.startAnimation(rectAnim1);
}
}
basic.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/basicLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
Result: The rect is growing taller, good, but the location of the rect is also changing, bad. The whole rectangle is being positioned higher up the screen.
When I use this exact same animation code, but apply it to a TextView instead of a ShapeDrawable, all is good.
I've trawled through all the related articles on SO, but I'm still struggling with this one. Any help would be appreciated, thanks.

Complete code, i had changed the height of the rectangle.
public class RectActivity extends Activity {
final String TAG = "RectActivity";
TextView rect1;
RectDrawableView rectView;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.basic);
LinearLayout linear = (LinearLayout) findViewById(R.id.rectangle);
rectView = new RectDrawableView(this);
linear.addView(rectView);
Button sbutton = (Button)findViewById(R.id.sbutton);
sbutton.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
RectActivity.this.RunAnimations();
}
});
Button tbutton = (Button)findViewById(R.id.tbutton);
tbutton.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
RectActivity.this.runTranslateAnimation();
}
});
}
#Override
public void onResume() {
super.onResume();
RunAnimations();
}
private void RunAnimations() {
Animation rectAnim1 = new ScaleAnimation(1, 1, 1, 1.3f,
ScaleAnimation.RELATIVE_TO_SELF, 0,
ScaleAnimation.ABSOLUTE, 250);
rectAnim1.setFillBefore(false);
rectAnim1.setFillAfter(true);
rectAnim1.setStartOffset(500);
rectAnim1.setDuration(500);
rectView.startAnimation(rectAnim1);
}
private void runTranslateAnimation() {
float x = rectView.getX();
float y = rectView.getY();
TranslateAnimation trans = new TranslateAnimation(0, 0, 0, (90));
trans.setFillAfter(true);
trans.setStartOffset(500);
trans.setDuration(500);
rectView.startAnimation(trans);
}
}
public class RectDrawableView extends View {
Paint paint;
Rect rect;
public RectDrawableView(Context context) {
super(context);
paint = new Paint();
paint.setColor(Color.parseColor("#aacfcce4"));
paint.setStyle(Paint.Style.FILL);
}
protected void onDraw(Canvas canvas) {
int x = 50;
int y = 150;
int width = 50;
int height = 100;
ShapeDrawable shapeDrawable = new ShapeDrawable(new RectShape());
rect = new Rect(x, y, x+width, y+height);
shapeDrawable.setBounds(rect);
shapeDrawable.getPaint().set(paint);
shapeDrawable.draw(canvas);
}
}

Try this code. Keep the pivotYType as ABSOLUTE with value 550 ( y + height )
Animation rectAnim1 = new ScaleAnimation(1, 1, 1, 1.3f,
ScaleAnimation.RELATIVE_TO_SELF, 0,
ScaleAnimation.ABSOLUTE, 550);