How to Create Custom Button in Android Using Xml Styles

How to create custom button in Android using XML Styles

Have you ever tried to create the background shape for any buttons?

Check this out below:

Below is the separated image from your image of a button.

Now, put that in your ImageButton for android:src "source" like so:

android:src="@drawable/twitter"

Now, just create shape of the ImageButton to have a black shader background.

android:background="@drawable/button_shape"

and the button_shape is the xml file in drawable resource:

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="1dp" 
        android:color="#505050"/>
    <corners 
        android:radius="7dp" />

    <padding 
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp"/>

    <solid android:color="#505050"/>

</shape>

Just try to implement it with this. You might need to change the color value as per your requirement.

Let me know if it doesn't work.

Create a custom button and make it the default style

Make sure that your Activity is using the AppTheme theme.
Add android:theme="@style/AppTheme" in section activity android:name=".MainActivity int manifest.

How to create custom button with xml style

Use layer-list for this.Try the below code

<Button
        android:id="@+id/button_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_background"
        android:text="Cancel"
        android:padding="15dp"
        android:textStyle="bold"
         />

button_background.xml

    <?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:endColor="#FFFFFF"
        android:startColor="#A9A9A9"
        android:type="linear" />


            <stroke
                android:width="2dp"
                android:color="#5E2612" />


            <corners
                android:bottomLeftRadius="10dp"
                android:bottomRightRadius="10dp"
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="90"
                android:endColor="#A9A9A9"
                android:startColor="#FFFFFF"
                android:type="linear" />

            <corners
                android:bottomLeftRadius="10dp"
                android:bottomRightRadius="10dp"
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />


        </shape>
    </item>

</layer-list>

It should work

I am trying to design a custom button in android studio, but it isn't getting applied?

Add this line to your button's xml code :

app:backgroundTint="@null"

Custom button with gradient outline and icon with transparent background

I recommend creating a custom view for this. Creating a custom view would be highly beneficial to you as have mentioned you have many buttons. With a custom view, you can reuse your button with varying height, width, border width, colors, and corner radius.

Read more custom views here. You could also go through a series of codelabs starting this one.

attrs.xml (values/attrs.xml):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Custom attributes for the button -->
    <declare-styleable name="StyledButton">
        <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>
</resources>

StyledButton.kt:

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.LinearGradient
import android.graphics.Paint
import android.graphics.Path
import android.graphics.Shader
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatImageButton
import androidx.core.content.withStyledAttributes

class StyledButton @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 val path = Path()
    private val borderPaint = Paint().apply {
        style = Paint.Style.FILL
    }

    init {
        //Get the values you set in xml
        context.withStyledAttributes(attrs, R.styleable.StyledButton) {
            borderWidth = getDimension(R.styleable.StyledButton_borderWidth, 10f)
            cornerRadius = getDimension(R.styleable.StyledButton_cornerRadius, 10f)
            startColor = getColor(R.styleable.StyledButton_startColor, Color.WHITE)
            centerColor = getColor(R.styleable.StyledButton_centerColor, Color.RED)
            endColor = getColor(R.styleable.StyledButton_endColor, Color.BLACK)
        }
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)

        // Create and set your gradient here so that the gradient size is always correct
        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)

        //Remove inner section (that you require to be transparent) from canvas
        path.rewind()
        path.addRoundRect(
            borderWidth,
            borderWidth,
            width.toFloat() - borderWidth,
            height.toFloat() - borderWidth,
            cornerRadius - borderWidth / 2, 
            cornerRadius - borderWidth / 2,
            Path.Direction.CCW
        )
        canvas.clipOutPath(path)

        //Draw gradient on the outer section
        path.rewind()
        path.addRoundRect(
            0f,
            0f,
            width.toFloat(),
            height.toFloat(),
            cornerRadius,
            cornerRadius,
            Path.Direction.CCW
        )
        canvas.drawPath(path, borderPaint)
    }
}

Usage:

<com.example.andriod.myapplication.StyledButton
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:src="@drawable/ic_android"
    android:scaleType="center"
    android:layout_gravity="center"
    app:borderWidth="2dp"
    app:cornerRadius="20dp"
    app:startColor="@color/colorPrimaryDark"
    app:centerColor="@android:color/holo_red_dark"
    app:endColor="@color/colorPrimary"/>

Result

---

Related Topics