rayliverified / custombutton

Custom Button provides a beautiful and minimalistic button with outline and drawable support. This library is part of the Custom UI collection of beautiful, minimalistic, and customizable Android UI components.

Custom Button

A beautiful and minimalistic button with outline and drawable support.

This library is part of the Custom UI collection of beautiful, minimalistic, and customizable Android UI components.

Usage

Add this library to build.gradle.

repositories {
    maven { url 'https://jitpack.io' }
}
implementation 'com.github.searchy2:CustomButton:latest-version'

Use Custom Button in your layout with the following 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"/>

About

CustomButton was created as a replacement for Android's Material buttons. CustomButtons are flat, have better drawable support, and look consistent across Android versions. Here at Codelessly, we're building a Flutter website/app builder, development tools, and UI templates to increase productivity. If that sounds interesting, you'll want to subscribe to updates below 😎

CustomButton is licensed under Zero-Clause BSD and released as Emailware. If you like this project or it helped you, please subscribe to updates. Although it is not required, you might miss the goodies we share!

Examples

<stream.custombutton.CustomButton
    android:id="@+id/btn1"
    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="Default"
    android:textSize="18sp"
    android:singleLine="true"
    android:ellipsize="none"/>

<stream.custombutton.CustomButton
    android:id="@+id/btn2"
    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="Elegant"
    android:textSize="18sp"
    android:singleLine="true"
    android:ellipsize="none"
    app:btn_cornerRadius="20dp"
    app:btn_strokeWidth="1dp"
    app:btn_strokeColor="@color/white"
    app:btn_strokeSelectColor="@color/white_pressed"
    app:btn_buttonColor="@color/transparent"
    app:btn_textColor="@color/white"
    app:btn_textSelectColor="@color/white_pressed"/>

<stream.custombutton.CustomButton
    android:id="@+id/btn3"
    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="Normal"
    android:textSize="18sp"
    android:singleLine="true"
    android:ellipsize="none"
    app:btn_cornerRadius="20dp"
    app:btn_strokeWidth="1dp"
    app:btn_strokeColor="#008af9"
    app:btn_buttonColor="@color/transparent"
    app:btn_buttonSelectColor="#008af9"
    app:btn_textColor="#008af9"
    app:btn_textSelectColor="@color/white"/>

<stream.custombutton.CustomButton
    android:id="@+id/btn4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="2dp"
    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="Confirm"
    android:textSize="18sp"
    android:singleLine="true"
    android:ellipsize="none"
    app:btn_cornerRadius="20dp"
    app:btn_strokeWidth="1dp"
    app:btn_buttonColor="@color/green"
    app:btn_buttonSelectColor="@color/green_light"
    app:btn_strokeColor="@color/green"
    app:btn_strokeSelectColor="@color/green_light"
    app:btn_textColor="@color/white"/>

<stream.custombutton.CustomButton
    android:id="@+id/btn5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="2dp"
    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="Cancel"
    android:textSize="18sp"
    android:singleLine="true"
    android:ellipsize="none"
    app:btn_cornerRadius="20dp"
    app:btn_strokeWidth="1dp"
    app:btn_buttonColor="@color/red"
    app:btn_buttonSelectColor="@color/red_light"
    app:btn_strokeColor="@color/red"
    app:btn_strokeSelectColor="@color/red_light"
    app:btn_textColor="@color/white"/>

Customization

Custom Button can be customized via XML and programmatically. Custom Button extends AppCompatTextView so all TextView functionality is available in addition to the methods listed below.

XML Attributes

Attribute	Description
btn_buttonColor	default background color
btn_buttonSelectColor	selected background color
btn_strokeColor	default outline color
btn_strokeSelectColor	selected outline color
btn_textColor	default text color
btn_textSelectColor	selected text color
btn_strokeWidth	outline thickness (px)
btn_cornerRadius	rounded corners radius (px)

Programmatically

Method	Description
setPressStatus(boolean isPress)	set button appearance to selected/default state
setDrawableLeft(int imgResId)	set button left drawable
setDrawableLeft(int imgResId, int width, int height)	set button left drawable with custom width and height parameters imgResId - drawable ID width - drawable width in px height - drawable height in px
setDrawableRight(int imgResId)	set button right drawable
setDrawableRight(int imgResId, int width, int height)	set button right drawable with custom width and height parameters imgResId - drawable ID width - drawable width in px height - drawable height in px
setColor(int textnormal, int textselected, int buttonnormal, int buttonselected, int strokenormal, int strokeselected)	textnormal - text color textselected - text color when pressed buttonnormal - background color buttonselected - background color when pressed strokenormal - outline color strokeselected - outline color when pressed
colorBurn(int RGBValues)	Get the darkened version of each color. The value of RGB is made up of alpha (transparency), red (red), green (green), blue (blue). In Android, RGB is usually represented as a hexadecimal. For example: "#FFAABBCC", from the left to the right, every two letters represent alpha (transparency), red, green, blue. Each color has a value of 0 to 255. This method shifts the color values and darkens the color.

View the sample app for additional customization options.

Features Wishlist

These features would make this library even more awesome. Please contribute to this library by developing any of the features below.

---

Elevation Shadows

Currently, Custom Button does not support elevation or shadows. A current design trend is large drop shadows on buttons. The drop shadows are also colored which creates a really nice glowing look. It would be great if Custom Button supported glowing drop shadows or any drop shadows at all.

Gradient Background

Gradient backgrounds are very trendy and all designers are using them in UI mockups. Unfortunately, gradients are very difficult to do well on Android. Custom Button provides a good starting point to create buttons with gradient backgrounds.

---

Pull requests are most welcome!

If you've fixed a bug or have a feature you've added, just create a pull request. If you've found a bug, file an issue. If you have any questions or would like to discuss upcoming features, please get in touch. You can get in touch with me in the Contact section below.

★ Acknowledgements ★

♥ Developer ♥

Ray Li

♥ Designer ♥

Ray Li

♥ Sponsor ♥

Codelessly - Flutter Website and App Builder

★ Get in Touch ★

Apps Using This Library

Add your app here by making a pull request.

	Rocket Notes
	Crowdfunding Community
	Blank Icon

Search Terms

android button, outline button, button with outline, simple, elegant, iOS button, style, UI, beautiful, customizable button

License

BSD Zero Clause License

Copyright © 2020 Ray Li

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.