Skip to main content
This guide will walk you through creating your first CustomButton with a beautiful outline design. By the end, you’ll have a working button with custom colors, rounded corners, and state transitions.
Make sure you’ve completed the installation steps before starting this tutorial.

​
Create a basic button

1

Add CustomButton to your layout

Open your activity or fragment layout XML file and add a CustomButton:
activity_main.xml
<stream.custombutton.CustomButton
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Custom Button"
    android:textSize="18sp"
    android:singleLine="true"
    android:ellipsize="none" />
This creates a basic button with default styling.
2

Add custom styling

Now let’s make it look amazing with rounded corners, an outline, and custom colors:
activity_main.xml
<stream.custombutton.CustomButton
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Custom Button"
    android:textSize="18sp"
    android:singleLine="true"
    android:ellipsize="none"
    app:btn_cornerRadius="20dp"
    app:btn_strokeWidth="1dp"
    app:btn_strokeColor="#008af9"
    app:btn_buttonColor="#00FFFFFF"
    app:btn_buttonSelectColor="#008af9"
    app:btn_textColor="#008af9"
    app:btn_textSelectColor="#FFFFFF" />
This creates an outlined button that fills with blue when pressed.
3

Add padding and margins

For better visual appearance, add padding and margins:
activity_main.xml
<stream.custombutton.CustomButton
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="6dp"
    android:paddingBottom="6dp"
    android:paddingLeft="12dp"
    android:paddingRight="12dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_gravity="center_horizontal"
    android:gravity="center"
    android:text="Custom Button"
    android:textSize="18sp"
    android:singleLine="true"
    android:ellipsize="none"
    app:btn_cornerRadius="20dp"
    app:btn_strokeWidth="1dp"
    app:btn_strokeColor="#008af9"
    app:btn_buttonColor="#00FFFFFF"
    app:btn_buttonSelectColor="#008af9"
    app:btn_textColor="#008af9"
    app:btn_textSelectColor="#FFFFFF" />
4

Run your app

Build and run your app. You should see a beautiful outlined button that changes color when you tap it!

​
Understanding the attributes

Here’s what each custom attribute does:
AttributeDescriptionExample Value
btn_cornerRadiusRounded corners radius20dp
btn_strokeWidthOutline thickness1dp
btn_strokeColorDefault outline color#008af9
btn_buttonColorDefault background color#00FFFFFF (transparent)
btn_buttonSelectColorBackground color when pressed#008af9
btn_textColorDefault text color#008af9
btn_textSelectColorText color when pressed#FFFFFF
All color values support alpha channels. Use #00FFFFFF for fully transparent white or #FFFFFFFF for fully opaque white.

​
Common button styles

Here are some pre-made button styles you can use: 
<stream.custombutton.CustomButton
    android:id="@+id/btn_elegant"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="6dp"
    android:paddingBottom="6dp"
    android:paddingLeft="12dp"
    android:paddingRight="12dp"
    android:text="Elegant"
    android:textSize="18sp"
    app:btn_cornerRadius="20dp"
    app:btn_strokeWidth="1dp"
    app:btn_strokeColor="@color/white"
    app:btn_buttonColor="@android:color/transparent"
    app:btn_textColor="@color/white" />

​
Handle button clicks

CustomButton works like any other Android view. Set click listeners in your Activity or Fragment: 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val button = findViewById<CustomButton>(R.id.btn)
        button.setOnClickListener {
            // Handle button click
            Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show()
        }
    }
}

​
Next steps

Congratulations! You’ve created your first CustomButton. Here’s what to explore next:

XML attributes

Explore all available XML customization options

Programmatic customization

Learn how to customize buttons in your Java/Kotlin code

Adding drawables

Add icons and images to your buttons

Advanced examples

See more complex button implementations

Build docs developers (and LLMs) love

Get started for freeTalk to us