How to make EditText and Button have this colored border?

Question

How can make EditText with this border and Button with this border. I could not find do this with drawable. I use ImageView with this. But I can not use ImageView for EditText. How can do this?

Answer 1

You can set the drawable as a background to your views. You can generate the drawable from this site, or you can use the basic drawable I created. You can modify the colors of the gradient and background color to best match your design.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <shape android:shape="rectangle" >
        <gradient
            android:centerColor="@android:color/black"
            android:endColor="@android:color/holo_blue_light"
            android:startColor="@android:color/holo_red_light"/>
        <corners android:radius="48dp"/>
    </shape>
</item>
<item
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp">
    <shape android:shape="rectangle" >
        <corners android:radius="48dp"/>
        <solid android:color="@android:color/black"/>
    </shape>
</item>

</layer-list>

<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text"
    android:background="@drawable/custom_background"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button Text"
    android:background="@drawable/custom_background"/>

Sample Output :

Answer 2

I will also try but text not showing my side code, Please check @Pawan Singh Harariya

class RahulStrokeGradient@JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0) : AppCompatImageButton(context, attrs, defStyleAttr) {
private var cornerRadius = 0f
private var borderWidth = 0f
private var startColor = 0
private var centerColor = 0
private var endColor = 0
private var text = "Textview"
private var textColor = 0
private val path = Path()
private val borderPaint = Paint().apply {
    style = Paint.Style.FILL
}
init {
    context.withStyledAttributes(attrs, R.styleable.RahulStrokeGradient) {
        borderWidth = getDimension(R.styleable.RahulStrokeGradient_borderWidth, 10f)
        cornerRadius = getDimension(R.styleable.RahulStrokeGradient_cornerRadius, 10f)
        startColor = getColor(R.styleable.RahulStrokeGradient_startColor, Color.WHITE)
        centerColor = getColor(R.styleable.RahulStrokeGradient_centerColor, Color.RED)
        endColor = getColor(R.styleable.RahulStrokeGradient_endColor, Color.BLACK)
        text = getString(R.styleable.RahulStrokeGradient_text).toString()
        textColor = getColor(R.styleable.RahulStrokeGradient_textColor,Color.GRAY)
    }
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    borderPaint.shader = LinearGradient(
        0f,
        0f,
        width.toFloat(),
        height.toFloat(),
        intArrayOf(startColor, centerColor, endColor),
        null,
        Shader.TileMode.CLAMP
    )
}
override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    path.rewind()
    path.addRoundRect(
        borderWidth,
        borderWidth,
        width.toFloat() - borderWidth,
        height.toFloat() - borderWidth,
        cornerRadius - borderWidth / 2,
        cornerRadius - borderWidth / 2,
        Path.Direction.CCW
    )
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        canvas.clipOutPath(path)
    }
    path.rewind()
    path.addRoundRect(
        0f,
        0f,
        width.toFloat(),
        height.toFloat(),
        cornerRadius,
        cornerRadius,
        Path.Direction.CCW
    )
    canvas.drawPath(path, borderPaint)
}
@SuppressLint("ResourceType")
@RequiresApi(Build.VERSION_CODES.TIRAMISU)
private fun setColor(typedArray: TypedArray, context: Context,
                     attrs: AttributeSet){
    val cf = typedArray.getInteger(R.styleable.RahulStrokeGradient_textColor, 0)
    var textViewColor = 0
    textViewColor = when(cf){
        1 -> R.color.colorTextGray
        else->R.string.textRegular
    }
    this.textColor = textColor
    this.text = text
    invalidate()
    requestLayout()
}
private fun setTextColor(textViewColor: Int) {
    this.setTextColor(textViewColor)
}}

resource file used - value directory

<resources>
<declare-styleable name="RahulStrokeGradient">
    <attr name="textColor" format="color"/>
    <attr name="text" format="string"/>
    <attr name="cornerRadius" format="dimension" />
    <attr name="borderWidth" format="dimension" />
    <attr name="startColor" format="color" />
    <attr name="centerColor" format="color" />
    <attr name="endColor" format="color" />
</declare-styleable>

XML side code

<com.appynitty.hotel.utils.RahulStrokeGradient
        android:layout_width="180dp"
        android:layout_height="40dp"
        app:text="@string/app_name"
        app:textColor="@color/black"
        android:src="@drawable/ic_person"
        android:scaleType="center"
        android:layout_gravity="center"
        app:borderWidth="2dp"
        app:cornerRadius="20dp"
        app:startColor="#09E812"
        app:endColor="#E91E63"/>