custom shape drawables in android

Tut#3 Android Drawables: Design Custom Button

Download the Source Code Here

What do we discuss in this article?

Your application needs to create custom backgrounds with gradients and rounded corners and you don’t want to waste time and resources scaling images for different scenarios

A]Using Shape Drawables

Create shape drawables.  Using XML resource for backgrounds and gradients makes sense because they are inherently scalable, and they will fit themselves to the bounds of the view when set as a background. Create a file under res/drawable folder with a .xml extension. Create a <shape> tag inside that file which can define a rectangle, oval, line or ring. Here are the other properties that you can define within the <shape> tag

  • Corner Radius: Set the same radius for all 4 corners or different radius value to each corner
  • Gradient: Specify the type of gradient [linear/radial/sweep]  and starting, center [if required] and ending color and gradient orientation [any multiple of 45 degrees]
  • Solid Color: instead of a gradient to fill the entire shape (either define a solid color or gradient)
  • Stroke: Border around the shape, its width and color
  • Size and Padding
android creating custom shape drawables

The Plain EditText and Button

B]Creating a Shape Drawable for our Button

Inside, res folder, create a folder called drawable if it doesn’t exist. Add a new XML file as shown in the image below

android shape drawable xml

A Shape Drawable File inside res->drawable

Let’s create 4 corners for the button s custom background with a different radius for 2 of them. Our aim is to create a design that has 2 rounded corners and 2 non-rounded corners

Lets use a plain color for now defined as orange (#f39c12) specified at FlatUiColors. The code now looks like this

Now let’s apply this as background on our button and see how it looks. Here is the code for activity_main.xml. Notice how we have used the android:background attribute on the ‘OK’ button to apply a custom background

android custom background shape drawable

The gray background for the cancel button looks pretty ugly. Let’s set the android:background=”@null” for the Cancel button to indicate we dont want a background and also change the text color of the Cancel button to orange and text color of OK button to white for a complete effect

Pretty cool eh? Imagine how many possibilities exist customizing stuff like this using XML. Now let us change the plain background color to a gradient by removing the <solid> and adding a <gradient> inside our custom button

android custom button background shape drawable

android custom button background

We like flat design and stick to it as much as possible, yet for the purpose of demonstration, this is how you use a gradient

We add a gradient with 3 colors, the start and the end color are #e67e22 known as carrot on FlatUiColors while the center color is orange again defined at the same source. We use an angle of 90 degrees to indicate that the colors should apply in a vertical fashion. In case, you arent sure about angles, here is a nice reference on StackOverflow

You can also specify extra padding with the custom background XML file with the following addition to code

 

 

custom button shape drawable padding

custom button shape drawable padding

Well, doesn’t look that good, lets remove the padding, gradient and be done with our button. At the same time, lets make our EditText look better with a custom stroke to indicate its boundary. We’ll need a separate xml file inside the same res->drawable for the EditText’s custom background. We ll add a color #95a5a6 as the stroke for the edit text and define the stroke width as 2, we ll add equal padding of 8 dp to all four sides along with rounded corners on all 4 sides to give a nice effect. Let’s see how the code looks like

 

custom edit text shape drawable

custom edit text shape drawable

And VOILA!!!we have a fantastic looking button set and EditText. We also need to see how we can change the background of the Button or EditText on click and focus events respectively which we’ll take a look at in the next post. In the meantime, happy learning!