Home   Courses   Blog   About

13 designs for buttons every Android beginner should know

 During all the years of mobile development, we had quite a few requests for button designs. So we wanted to create a short list of examples you can start from. Most of these design techniques will work for many other types of components as well.

We will show you how to change colors, even how to make gradient colors. How to make a custom shape and how to add an image to a button and how to make a border for a button. 

 

Normal button

Let’s start with a normal button. To add a button, that has an Android style all you need to do is to drag and drop a button from the Palette to your layout. For most versions that would mean a grey button with all corners at 2dp roundness.


Colors

Having different colors of buttons makes your application shine. Most of the time designers choose different colors for a confirmation button (for e.g. blue or green) and a cancel button (mostly red). We will show you how to set a background, how to choose a custom color (and how to add it to resources) and how to make a gradient color.

Use tint to change color

We would use tint to change the color of a button when we do not want to change the shape of the background.

First, you need to add a normal button. Then you need to change the backgrountTint attribute for that button. We used @android:color/holo_blue_dark for our color. But you can select a color from android resources.

 

Change the color of a text

To change the color of text, use another attribute textColor. As you can see we set a white color (@android:color/white) for text on our blueish button.

 

Set color as a background

If you set the color as a background attribute, you will make the shape of your button rectangular as well and a little bigger, because a standard button has a little bit of padding by default (see the button on the right). Sometimes you do not have to have roundness of corners, and this is just a perfect and simple way of changing the color. For the button above we have used the value @android:color/holo_blue_dark for the background and @android:color/white for the textColor.

 

Custom color

Sometimes you want to use a custom color. For this example we will use color #123abc. The simple way is to enter a value for attribute background. Since the color is so dark we will also set value @android:color/white to attribute textColor.

There is a better way to set a color, and this is to add a new resource value for a color. 
First, you open Resources window

Then you switch to color resource.

After that, you go ahead and add a new color value.

At the end, you enter the name and value for our color #123abc (we choose the name OurBlue)

Now you have a resource for the color and you can use it all over your project by using value @color/OurBlue (or R.color.OurBlue in code). Values are stored in colors.xml

And the values look something like this:

 

Color gradient

Making gradient colors is fun. Because they look just like magic when one color changes to another. Add a normal button to the layout. In order to play with the gradient, we will need a new drawable resource file. So add one, we have named mine gradient_normal.xml.

Now that we have a drawable file we need to change its content. Write the code below into your new drawable.

You can see that the gradient has three colors, startColor, centerColor, endColor. If you want to make more colorful examples just change those three colors. We also made our corners round using corners tag and 2dp value for the radius attribute.

For a button to have our gradient we need to set our drawable for a background attribute, so the value should be @drawable/gradient_normal (You can enter a value or use Resources window and select it)

 

Custom shapes

Designers will always give you challenges in the form of making custom shapes for your components. We will show you some tricks for that as well. First, we will show you the most common, corner roundness as they choose different sizes of corners for buttons. Next, we make a circle button just for fun.

Rounded corners

As for the color gradient, you will have to add a new drawable for rounded corners, name it rounded_corners.xml. Inside the xml write the code

First, we need a selector and an item inside. The main tag for us is shape. We will choose rectangle for our value. The solid tag is for the background (select color/darker_gray for the value of color). Corners tag is the one we wanted. Put 10dp as a value. Note that you can mix the values for each corner. And you will get a different shape.

Now you can use your drawable for the background attribute of your button.

 

Circle button

First, we need a new drawable. Name it circle.xml.

We need selector, item, and shape. For the shape, we will use oval. To make the button in the shape of a circle, you need to make a button that has the same size for the width and height. We set the size with size tag (but this size will be overridden with size on layout). We also set the color with solid to OurBlue.

Now you can use your drawable for the background attribute of your button. Since we used OurBlue color, make textColor white as well.

 

Images

Lots of designs will use images for buttons. We will show you how to add an image to a button at the start of the text and the end of the text.

To add an image on the left side (or more precise before the start of the text; start/end will automatically turn around for countries that write from right to left) you need to set a value to attribute drawableStart. Choose one from the android resources with Resources window. We use the value @android:drawable/ic_delete

To add an image to the right side (after the end of the text) use attribute drawableEnd. We use the value @android:drawable/btn_star

 

 

Borders

To create borders, you need a drawable as well. Name it border.xml. Inside that xml put the code:

The structure is the same selector, item, shape. For the shape we choose rectangle, you can select oval and see what happens. To make the border, you need the stroke tag. You can select a color and width of the border with the stroke tag.

To use it just use the border drawable for the background attribute.

 

The dashed border that changes on click

Add a new drawable and name it border_dashed.xml.

There is one significant change to our code, and this is that we have two items. With the two items tags, we choose how the button will look in the normal state and how the button will look in the pressed state. You can change the values to make more of an effect, but we chose to resize the dash gap and size. To make dashes we use stroke, dashGap (size of space between lines) and dashWidth (size of a line).

 

The most custom one

For this button, we have the gradient color that rotates when we press it. This combines all the knowledge we have gained, and it will give you new ways to play with your button. Try changing colors, try changing the rotation...

Add drawable gradient.xml and add the code:

 

 

Conclusions

These are the techniques that will help you create a lot of scenarios, let us know if you want some more examples. And have fun coding with CodeBrainer.