Creating a beautiful Button: Android

Creating a custom Button from scratch.

This article will be a quick one, to demonstrate how can you create a Button in Android effectively. We’ll do it in a concise way so that lots of xmls are not spread across App. Lets start without wasting time.

GitHub: https://github.com/owaistnt/andoridbuttonexample

End State

Choosing Colors

Checkout material.io for colors

Creating Gradients

We will create 2 gradients one for default and one for pressed state. Lets create one reverse of other.

button_gradient_1 for un-pressed/default button state

Copy in Android Studio

Reversing gradient

Creating a Selector

This is where your press and default state will be defined.

button_selector.xml

Declare a style for button

Declaring in styles in such a way that even if we drag a button from component palette it must be our button. Next step is to declare button in layout and check our progress.

style.xml

Try it!!

Possible result can be seen without running our application. We need some padding and button text to be white. Lets quickly update this in styles.

Put in activity_main.xml

Updating colors

Updated Style

Button in Action

That’s great progress. Our Button is supported to most of the phones with API KitKat and above(As it was the lowest API selected when created project).

What about Ripple?

Ripples are modern requirement and adds more sugary effect on button feed back. So next we will go ahead and wrap our button with ripple and when prompted with error we will create one more button_selector for API v21 and above.

Lets first create a ripple color.

Reducing Alpha for ripple

v21 button_selector.xml

Button End State.

We have finally reached to our end state of designing button. This is the most affordable way to create a button where one have total control over it. Do you think it is too much to create a button? Well it is worth investing. Once a button like this is created and declared in style any developer when creating a layout will not have to worry about styling a button. And the button dragged and dropped in layout will be a branded one.

I told you there will be less XMLs. So once you have a good hands on and you have created couple of buttons, you may club together some xmls to create one file and rest is past.

Clubbed XMLs : button_selector.xml

Design, so that you design something new next time