Programmatically create a button with a gradient stroke?

Question

I am working on a creating a button with no fill, but a gradient stroke. For reference, here is the end result I am after:

I would like to know how to create such a button with a gradient stroke and no fill programmatically. I looked over GradientDrawable class and the setStroke() method in it. None seem to allow this. Is there any way to programmatically perform this or is it not possible at all?

yes it is possible...have you tried with drawable ? and what do you mean by `gradient stroke and no fill programmatically` — Iamat8, May 16 '18 at 06:15
@Vivek did you check this https://stackoverflow.com/questions/15563761/programmatically-add-gradient-with-solid-color-and-stroke — AskNilesh, May 16 '18 at 06:16
https://stackoverflow.com/questions/2145131/trying-to-draw-a-button-how-to-set-a-stroke-color-and-how-to-align-a-gradient — AskNilesh, May 16 '18 at 06:17
@NileshRathod Thanks for responding! I checked and both examples use a single color as stroke. What I want is a gradient as the stroke color. — Vivek Sasidharan, May 16 '18 at 06:19
@Mohit Thanks for responding. I haven't tried Drawable. Can you show an example? If you look closely in the picture I added. The stroke is a gradient (i.e. gradient stroke). Also, the button itself is transparent (i.e. No fill). — Vivek Sasidharan, May 16 '18 at 06:23
have you checked this [link](https://stackoverflow.com/questions/27692701/multi-color-stroke-image-with-xml) — Md Jubayer, May 16 '18 at 06:38
@jubayer Thanks! But that is done with XML. I want to achieve it programmatically! — Vivek Sasidharan, May 16 '18 at 06:43
@KlingKlang I was making a custom button in which I can always set the corner radius to half the variable height in order to scale properly, maintain different states etc. Can you explain why it is a time waster? — Vivek Sasidharan, May 16 '18 at 06:50
@Vivek programmatically? then simply create a custom `Drawable` class and override its `draw(Canvas)` method (and possibly `isStateful`, `setState` or `setLevel`) — pskink, May 16 '18 at 06:53
Because you waste time in calculations, rather than letting Android use its own optimized code for that. Having a drawable to manage is more easily handled by the system. — Phantômaxx, May 16 '18 at 06:53
and no, DO NOT even try to do that in XML - its a waste of your time — pskink, May 16 '18 at 06:55
@pskink Can you show an example of the gradient stroke part with `Drawable`? — Vivek Sasidharan, May 16 '18 at 06:55
@Mohit I am checking it. Thanks, Mohit I was also playing with `Drawable` when you posted your answer. Will update soon! — Vivek Sasidharan, May 16 '18 at 09:16

Iamat8 · Accepted Answer · 2018-05-16T09:11:11.150

I have tried something for you.. Use mRect.set to set path and mPath.addRoundRectadd rectangle.Use setShader for strock purpose link

Drawable class:

public class CustomDrawable extends Drawable {
Paint mPaint;
int startColor, endColor, mBorderWidth, mBorderRadius;
RectF mRect;
Path mPath;

public CustomDrawable(int startColor, int endColor, int borderWidth, int borderRadius) {
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Paint.Style.FILL);

    mPath = new Path();
    mPath.setFillType(Path.FillType.EVEN_ODD);

    mRect = new RectF();
    this.startColor = startColor;
    this.endColor = endColor;

    mBorderWidth = borderWidth;
    mBorderRadius = borderRadius;
}

@Override
protected void onBoundsChange(Rect bounds) {
    super.onBoundsChange(bounds);
    mPath.reset();

    // out rect
    mRect.set(bounds.left + mBorderWidth, bounds.top + mBorderWidth, bounds.right - mBorderWidth, bounds.bottom - mBorderWidth);
    mPath.addRoundRect(mRect, mBorderRadius, mBorderRadius, Path.Direction.CW);

    // inner rect
    mRect.set(bounds.left + 20, bounds.top + 20, bounds.right - 20, bounds.bottom - 20);
    mPath.addRoundRect(mRect, mBorderRadius, mBorderRadius, Path.Direction.CW);
}

@Override
public void draw(@NonNull Canvas canvas) {
    // kind of strock 
    mPaint.setShader(new LinearGradient(0, 0, 0, 100, startColor, endColor, Shader.TileMode.MIRROR));
    canvas.drawPath(mPath, mPaint);
}
@Override
public void setAlpha(int alpha) { mPaint.setAlpha(alpha);}
@Override
public void setColorFilter(@Nullable ColorFilter colorFilter) {mPaint.setColorFilter(colorFilter);}
@Override
public int getOpacity() {return PixelFormat.TRANSLUCENT;}
}

Main :

Button but = ((Button)findViewById(R.id.but));
but.setBackground(new CustomDrawable(Color.parseColor("#FD659B"),
       Color.parseColor("#F76E63"),
       but.getPaddingLeft(), 100));

layout :

<Button
    android:id="@+id/but"
    android:layout_width="300dp"
    android:layout_height="80dp"
    android:background="@android:color/transparent"
    android:layout_centerInParent="true"
    android:text="Signin"/>

no need for `CustomButton` - just use `View#setBackground` method — pskink, May 16 '18 at 08:44
@pskink thank buddy for your suggestion.. I have updated answer — Iamat8, May 16 '18 at 09:09

score 1 · Answer 2 · answered Nov 05 '19 at 10:41

Here is a further step from what @lamat8 contributed:

import android.graphics.*
import android.graphics.Paint.ANTI_ALIAS_FLAG
import android.graphics.Path.FillType
import android.graphics.drawable.Drawable
import androidx.annotation.NonNull
import java.lang.RuntimeException


class GradientDrawable(
    private var strokeStartColor: Int,
    private var strokeEndColor: Int,
    private var fillStartColor: Int,
    private var fillEndColor: Int,
    private var strokeWidth: Float,
    private var radius: Float,
    private var strokeGradientDirection: Direction,
    private var fillGradientDirection: Direction
) : Drawable() {

    enum class Direction {
        LEFT_RIGHT,
        TOP_BOTTOM,
        RIGHT_LEFT,
        BOTTOM_TOP,
        TL_BR,
        TR_BL,
        BR_TL,
        BL_TR
    }

    private val strokePaint: Paint = Paint(ANTI_ALIAS_FLAG)
    private val fillPaint: Paint = Paint(ANTI_ALIAS_FLAG)
    private val strokeOuterRect = RectF()
    private val fillRect = RectF()
    private val path = Path()

    init {
        strokePaint.style = Paint.Style.FILL
        path.fillType = FillType.EVEN_ODD
    }

    override fun onBoundsChange(bounds: Rect) {
        super.onBoundsChange(bounds)

        path.reset()

        strokeOuterRect.set(bounds)
        fillRect.set(
            bounds.left + strokeWidth,
            bounds.top + strokeWidth,
            bounds.right - strokeWidth,
            bounds.bottom - strokeWidth
        )

        path.addRoundRect(
            strokeOuterRect,
            radius,
            radius,
            Path.Direction.CW
        )

        path.addRoundRect(
            fillRect,
            radius,
            radius,
            Path.Direction.CW
        )
    }

    override fun draw(@NonNull canvas: Canvas) {
        var x0: Float
        var y0: Float
        var x1: Float
        var y1: Float

        // drawing the stroke

        when (strokeGradientDirection) {
            Direction.LEFT_RIGHT -> {
                x0 = strokeOuterRect.left
                y0 = strokeOuterRect.centerY()
                x1 = strokeOuterRect.right
                y1 = strokeOuterRect.centerY()
            }
            Direction.TOP_BOTTOM -> {
                x0 = strokeOuterRect.centerX()
                y0 = strokeOuterRect.top
                x1 = strokeOuterRect.centerX()
                y1 = strokeOuterRect.bottom
            }
            Direction.RIGHT_LEFT -> {
                x0 = strokeOuterRect.right
                y0 = strokeOuterRect.centerY()
                x1 = strokeOuterRect.left
                y1 = strokeOuterRect.centerY()
            }
            Direction.BOTTOM_TOP -> {
                x0 = strokeOuterRect.centerX()
                y0 = strokeOuterRect.bottom
                x1 = strokeOuterRect.centerX()
                y1 = strokeOuterRect.top
            }
            Direction.TL_BR -> {
                x0 = strokeOuterRect.left
                y0 = strokeOuterRect.top
                x1 = strokeOuterRect.right
                y1 = strokeOuterRect.bottom
            }
            Direction.TR_BL -> {
                x0 = strokeOuterRect.right
                y0 = strokeOuterRect.top
                x1 = strokeOuterRect.left
                y1 = strokeOuterRect.bottom
            }
            Direction.BR_TL -> {
                x0 = strokeOuterRect.right
                y0 = strokeOuterRect.bottom
                x1 = strokeOuterRect.left
                y1 = strokeOuterRect.top
            }
            Direction.BL_TR -> {
                x0 = strokeOuterRect.left
                y0 = strokeOuterRect.bottom
                x1 = strokeOuterRect.right
                y1 = strokeOuterRect.top
            }
        }

        strokePaint.shader = LinearGradient(
            x0,
            y0,
            x1,
            y1,
            strokeStartColor,
            strokeEndColor,
            Shader.TileMode.MIRROR
        )

        canvas.drawPath(path, strokePaint)

        // filling the shape

        when (fillGradientDirection) {
            Direction.LEFT_RIGHT -> {
                x0 = fillRect.left
                y0 = fillRect.centerY()
                x1 = fillRect.right
                y1 = fillRect.centerY()
            }
            Direction.TOP_BOTTOM -> {
                x0 = fillRect.centerX()
                y0 = fillRect.top
                x1 = fillRect.centerX()
                y1 = fillRect.bottom
            }
            Direction.RIGHT_LEFT -> {
                x0 = fillRect.right
                y0 = fillRect.centerY()
                x1 = fillRect.left
                y1 = fillRect.centerY()
            }
            Direction.BOTTOM_TOP -> {
                x0 = fillRect.centerX()
                y0 = fillRect.bottom
                x1 = fillRect.centerX()
                y1 = fillRect.top
            }
            Direction.TL_BR -> {
                x0 = fillRect.left
                y0 = fillRect.top
                x1 = fillRect.right
                y1 = fillRect.bottom
            }
            Direction.TR_BL -> {
                x0 = fillRect.right
                y0 = fillRect.top
                x1 = fillRect.left
                y1 = fillRect.bottom
            }
            Direction.BR_TL -> {
                x0 = fillRect.right
                y0 = fillRect.bottom
                x1 = fillRect.left
                y1 = fillRect.top
            }
            Direction.BL_TR -> {
                x0 = fillRect.left
                y0 = fillRect.bottom
                x1 = fillRect.right
                y1 = fillRect.top
            }
        }

        fillPaint.shader = LinearGradient(
            x0,
            y0,
            x1,
            y1,
            fillStartColor,
            fillEndColor,
            Shader.TileMode.MIRROR
        )

        canvas.drawRoundRect(
            fillRect,
            radius,
            radius,
            fillPaint
        )
    }

    override fun setAlpha(alpha: Int) {
        strokePaint.alpha = alpha
        fillPaint.alpha = alpha

        invalidateSelf()
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        throw RuntimeException("Color filter cannot be set to this Drawable")
    }

    override fun getOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }

    fun setStrokeColors(startColor: Int, endColor: Int) {
        this.strokeStartColor = startColor
        this.strokeEndColor = endColor

        invalidateSelf()
    }

    fun setFillColors(startColor: Int, endColor: Int) {
        this.fillStartColor = startColor
        this.fillEndColor = endColor

        invalidateSelf()
    }

    fun setRadius(radius: Float) {
        this.radius = radius

        invalidateSelf()
    }

    fun setStrokeWidth(width: Float) {
        this.strokeWidth = width

        invalidateSelf()
    }
}

That class adds the following features:

direction to the stroke gradient;
fill gradient, and;
direction to the fill gradient;

score -1 · Answer 3 · answered May 16 '18 at 07:08

I don't think we can set gradient for Stroke but we can hack for the same using layer list.

you can create below drawable xml with the gradient you wanted

<item>
    <shape android:shape="rectangle">
        <!-- gradient for the stroke is set below -->
        <gradient
            android:angle="180"
            android:startColor="#555994"
            android:endColor="#b5b6d2"
            android:type="linear" />
        <corners android:radius="4dp"></corners>
    </shape>

</item>
<!-- stroke width has to be adjusted by setting left, right , top and bottom -->
<item android:left="4dp" android:right="4dp"
    android:top="4dp" android:bottom="4dp">
    <shape
        android:shape="rectangle">
        <solid android:color="@android:color/white"/>
    </shape>
</item>

you can set the above drawable in layout/programmatically

button.setBackgroundResource(R.drawable.button_background);

This isn't programmatic and it doesn't provide a transparent background either — Vivek Sasidharan, May 16 '18 at 07:12

Programmatically create a button with a gradient stroke?

3 Answers3