Develop Reference

How to make a dynamic gradient effect in a dynamically generated view?

I have to make a gradient color effect in the view that generated dynamically according to the scenario and also the view would be of any shape (diagonal or square)
As shown in image, gradient effect could be in any shape.
Also, if I create custom view for every possible case and play with Visibility, then how I will manage these views to fit perfectly on every device screen size?
Just need a small help to start.
Thanks in advance.

I have solved the issue using this approach.
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new CustomView(this));
}
}
and now create a CustomView class
public class CustomView extends View {
Rect rect;
private Rect rectangle;
private Paint paint;
public CustomView(Context context) {
super(context);
int x = 50;
int y = 50;
int sideLength = 200;
int sideLength1 = 100;
rectangle = new Rect(x, y, sideLength, sideLength1);
paint = new Paint();
paint.setColor(Color.GRAY);
}
#Override
protected void onDraw(Canvas canvas) {
int width = this.getMeasuredWidth();
int height = this.getMeasuredHeight();
BitmapShader shader;
//shader = new BitmapShader(header, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//paint.setShader(shader);
Path path = new Path();
path.moveTo(40,40);
path.lineTo(5,height/2);
path.lineTo(width/2,height/4);
path.lineTo(width/2,0);
canvas.drawPath(path,paint);
}

Android dynamic Bubbles on the view

Can anyone how to make dynamic bubble on the Android layout which is clickable.
My designer thought for the screen is below [![I the image all the bubble are some set of task assigned to the user.The label of bubble changes according to the task ][1]][1]
According to my project requirement the color and radius will change as per the api response.
Can you please suggest any demo or example. I googled it but i cant find the answer for this. Please guide me to accomplish this .

As one answer is already posted, I also tried for you. Hope you get some help from here too :
public class BubbleBackgroundDemoActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
View view = new CustomView(this);
// RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(this.getWidth(),
// ViewGroup.LayoutParams.MATCH_PARENT);
// view.setLayoutParams(lp);
setContentView(view);
}
public class CustomView extends View {
private Paint paint;
int screenWidth, screenHeight;
public CustomView(Context context) {
super(context);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
screenWidth = displaymetrics.widthPixels;
screenHeight = displaymetrics.heightPixels;
// create the Paint and set its color
paint = new Paint();
paint.setColor(Color.GRAY);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLUE);
canvas.drawCircle(200, 200, 100, paint);
canvas.drawCircle(screenWidth-200, 200, 100, paint);
canvas.drawCircle(screenWidth/2, screenHeight/2, 300, paint);
canvas.drawCircle(screenWidth-200, screenHeight-200, 100, paint);
canvas.drawCircle(200, screenHeight-200, 100, paint);
}
}
}

This is how customize circle created you can refere various links to create circle on canvas dynamically
public class CustomView extends View {
private Paint paint;
public CustomView(Context context) {
super(context);
// create the Paint and set its color
paint = new Paint();
paint.setColor(Color.GRAY);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLUE);
canvas.drawCircle(200, 200, 100, paint);
}
}
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new CustomView(this));
}
}

Draw a shape over existing view

I have a view and I want to draw a shape on it (circle for example) after click.
I've tried to do this but there are two problems -
onDraw is never called.
Not sure the setLayoutParams(v.getLayoutParams) will give me the result I want.
#Override
public void onClick(View v) {
CircleView circle = new CircleView(GameXoActivity.this, v.getWidth(), v.getHeight());
circle.setLayoutParams(v.getLayoutParams());
circle.startDrawing();
}
CircleView:
public CircleView(Context context, int width, int height) {
super(context);
this.width = width;
this.height = height;
}
protected void startDrawing() {
this.postInvalidate();
}
#Override
protected void onDraw(Canvas canvas) {
Log.d("TAG", "onDraw");
// draw circle
}
}
}
UPDATE:
The shape is not an image and I want to draw it with animation (I didn't write the entire code).
Also, the shape is not always a circle, so using a drawable-state is not an option.
Because there is not just one view, but 9, I don't think the making 9 more on top of them would be right.

As I'm sure you'll need to customize this quite a bit, I've left things rather generic. The following example will animate a blue circle being drawn clockwise, starting from the east (0 degrees), on top of the View's content when the View is clicked.
public class CircleView extends View
{
private static final int MARGIN = 50;
Handler handler = new Handler();
Paint paint = new Paint();
RectF rect = new RectF();
boolean drawing = false;
float sweep = 0;
public CircleView(Context context)
{
this(context, null);
}
public CircleView(Context context, AttributeSet attrs)
{
super(context, attrs);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(15);
paint.setColor(Color.BLUE);
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.drawArc(rect, 0, sweep, false, paint);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
rect.set(MARGIN, MARGIN, w - MARGIN, h - MARGIN);
}
public void startAnimation()
{
drawing = true;
handler.post(runnable);
}
Runnable runnable = new Runnable()
{
#Override
public void run()
{
sweep += 10;
if (!(sweep > 360))
{
invalidate();
handler.postDelayed(this, 20);
}
else
{
drawing = false;
sweep = 0;
}
}
};
}
In this Activity example, I used an image that most developers would already have in their project, but it can obviously be changed to your custom image. Also, for the sake of simplicity and brevity, the CircleView is set as the entire content of the Activity, but it can easily be listed in an xml layout, as well.
public class MainActivity extends Activity
{
CircleView circle;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
circle = new CircleView(this);
circle.setBackgroundResource(R.drawable.ic_launcher);
circle.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View v)
{
circle.startAnimation();
}
}
);
setContentView(circle);
}
}

I suggest, create two imageView with same dimensions, set the image you want to display on image view and then make the second image invisible .
For example :
circleimage.setVisibility(View.INVISIBLE);//now its hidden(do it OnCreate)
and then show 2ndimage when 1stimage is clicked(do it in onclick of 1st image)
circleimage.setVisibility(View.VISIBLE);

If you want to mess with drawing of the object you should overridepublic void draw(Canvas canvas) and not protected void onDraw(Canvas canvas)
EDIT:Please read comments, this first statement of my answer is probably wrong
but I would use a FrameLayout or a RelativeLayout and put the images one on top of another.
Then you can play with the visibility of the overlaying image in order to hide/show it.
EDIT:
In case your circle is not an image and needs to be drawn, make your own circle class extending View and use it as a component in the FrameLayout or RelativeLayout as you would do if it were an image

How to move a SurfaceView with transparent background?

I have an activity class, which I want to show a small dynamic content with translucent background on top of a main content, that is something like a moving overlay. I use a SurfaceView descendant for this purpose. For the simplicity I'm trying to code a POC, so I draw an arc in the surface view and rotate it, and move slightly on timer events. The problem is that the code works ok, only if rotation is involved. When I add a shift by (x, y) to change the surface view position, it begins to draw with black opaque rectangle as background. The code is presented below:
public class AndroidActivity extends Activity
{
private RelativeLayout layout;
private OverlayView mOverlay;
private Handler mHandler = new Handler();
private Timer timer = new Timer();
private SurfaceHolder surfaceHolder;
private int degrees = 0;
private int x = 100;
private int y = 200;
#Override
protected void onCreate(Bundle b)
{
super.onCreate(b);
setContentView(R.layout.main_view); // inflate main view
layout = (RelativeLayout) findViewById(R.id.mainview); // get parent layout
mOverlay = new OverlayView(this); // create the surface view descendant
// prepare layout parameters for the surface view
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(50, 50);
params.leftMargin = x;
params.topMargin = y;
mOverlay.setLayoutParams(params); // apply parameters
// next 2 lines ensure transparent background mode
mOverlay.setZOrderOnTop(true);
mOverlay.getHolder().setFormat(PixelFormat.TRANSLUCENT);
// add the surface view into the parent layout
layout.addView(mOverlay);
// lets start dynamic motion
timer.schedule(new DebugTimerTask(), 500, 500);
}
private class OverlayView extends SurfaceView implements SurfaceHolder.Callback
{
private Paint mPaint = new Paint();
public OverlayView(Context context)
{
super(context);
surfaceHolder = getHolder();
surfaceHolder.addCallback(this);
}
protected void doDraw(Canvas canvas)
{
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setStrokeWidth(1);
// will draw semitransparent yellow arc
mPaint.setColor(Color.YELLOW);
mPaint.setAlpha(128);
RectF oval = new RectF(0, 0, +50, +50);
canvas.drawColor(0, android.graphics.PorterDuff.Mode.CLEAR);
canvas.drawArc(oval, degrees, 90, true, mPaint);
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height)
{
}
#Override
public void surfaceCreated(SurfaceHolder holder)
{
setZOrderOnTop(true);
holder.setFormat(PixelFormat.TRANSLUCENT);
}
#Override
public void surfaceDestroyed(SurfaceHolder holder)
{
}
}
private class DebugTimerTask extends TimerTask
{
public void run()
{
mHandler.post(new Runnable()
{
#Override
public void run()
{
degrees += 10; // rotate a bit
x += 1; // move a bit
y += 2;
Canvas canvas = null;
// if next lines are commented, code works almost perfectly:
// rotation of semitransparent arc over content beneath,
// but I need to move the overlay, so
// if they are not commented, the overlay's background becomes black
// variant A: doesn't work
//RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(50, 50);
//params.leftMargin = x;
//params.topMargin = y;
//mOverlay.setLayoutParams(params);
// variant B: doesn't work
//mOverlay.layout(x, y, x + 50, y + 50);
try
{
synchronized(surfaceHolder)
{
canvas = surfaceHolder.lockCanvas(null);
if(canvas != null)
{
mOverlay.doDraw(canvas);
}
}
}
finally
{
if(canvas != null)
{
surfaceHolder.unlockCanvasAndPost(canvas);
}
}
}
});
}
}
}
What is a proper way to move a surface view with transparent background?

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);