Databases
StackOverflow2013
Postsdbo
POHow to draw a circle with radial gradient in a canvas?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to draw a circle with radial gradient in a canvas?
    primarykey
    data
    text
    <p>I created a circle button that can change his color when I call a function. What I want is to create another one, that creates the same circle button but with a radial gradient that starts in the middle with the color selected and that goes to transparent when you go out of the circle.</p> <p>I created a similar code using the one posted at <a href="https://stackoverflow.com/questions/8600805/how-to-set-gradient-style-to-paint-object">How to set gradient style to paint object?</a> but don't worked.</p> <p>The code that I tried is to this porpuse is:</p> <pre><code>mPaint.setShader(new RadialGradient(0, 0, height/3, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.MIRROR)); </code></pre> <p>The following class is the one that I created for a Circle Button.</p> <pre><code>public class ColorGradientCircleButton extends View{ private Paint mPaint; private Paint mBitmapPaint; private Bitmap mBitmap; private Canvas mCanvas; private int width, height; public ColorGradientCircleButton(Context context) { super(context); init(); } public ColorGradientCircleButton(Context context, AttributeSet attrs) { super(context, attrs); init(); } public ColorGradientCircleButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { mPaint = new Paint(); mPaint.setColor(Color.BLACK); mPaint.setStrokeWidth(1); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); mBitmapPaint = new Paint(Paint.DITHER_FLAG); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); width = w; height = h; mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBitmap); mCanvas.drawCircle(w/2, h/2, h/3, mPaint); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint); } public void changeColor(int color){ mPaint.setColor(color); mCanvas.drawCircle(width/2, height/2, height/3, mPaint); invalidate(); } } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USGabriel Esteban
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to draw a circle with radial gradient in a canvas?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHey Grabriel. This code looks technically very promising. I am positive we can correct it. Firstly, why are you creating a bitmap in `onSizeChanged`? When creating a custom view with `andorid.graphics`, there should only be a need to draw straight onto the canvas of that view. What you do in that method is incredibly expensive and not necessary. You should draw the circle using the canvas given `onDraw`. If this isn't enough to solve your problem, I'll post something more in detail.
      singulars
      1. POHow to draw a circle with radial gradient in a canvas?
      1. USTom
    2. COHi Tom, I created the bitmap because I think that with that I can control the width and height of the view. So, I modified the View to add your improvements, deleting the bitmap but something don't work well. Her is my code https://gist.github.com/galaxyfeeder/7026090
      singulars
      1. POHow to draw a circle with radial gradient in a canvas?
      1. USGabriel Esteban
    3. COHi again, I get it, I was requesting the width and height in the constructor, but the onDraw is executed first, so what I do is to request the height and width of the view in the 'onDraw', here is my actual code that works well: https://gist.github.com/galaxyfeeder/7026165
      singulars
      1. POHow to draw a circle with radial gradient in a canvas?
      1. USGabriel Esteban
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload