Skip to main content

Drawables in android - Part I

Have you ever gushed over beautiful , very beautiful UI of your android apps? Sorry, most of the times these are iphone apps. That does not mean you can try to create beautiful UIs in android app.

You can create a gradient background to your button of layout using xml easily. But today let us consider how it is done using code.

int colors2[] = new int[]{Color.CYAN, Color.WHITE,Color.CYAN};

GradientDrawable grDr =new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors2);




This is how the button would look.

The code is almost self explanatory. The constructor of GradientDrawable takes the orientation of gradient and array of colors as parameter. Orientation can be top to bottom, bottom to top, left to right etc, or TL_BR or TR_BL (top left to bottom right - diagonal and top right to bottom left). Unlike xml, the colors can be more than 3. Stroke is the line surrounding the gradient with first parameter as thickness of the line.

If you are more creative, you need to restrict yourself with java colors, you can even use html color codes.



colors[] = new int[]{Color.parseColor("#451d42"),Color.parseColor("#efa5bc") ,


The parseColor function will convert html color code to java int color. Its string parameter is the code in the form #RRGGBB. If you provide improper code, it throws invalid argument exception at runtime.

Instead of linear gradient, you can have radial gradient or sweep gradient. The shape of gradient can be rectangle, line, oval or ring.

To use radial or radial gradient, you have to mention center of gradient and the radius. The center 1,1 is taken as lower right corner, 0,0 as upper left corner of your widget. Look at this radial gradient

 And the code for this radial gradient shown in the begining of post is

 int colors[]= new int[]{Color.parseColor("#cff2f5"), Color.parseColor("#23c5ca"),Color.parseColor("#21b1b9")};
 GradientDrawable grDr = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors);

By setting gradient type to sweeping, (and you need not set radius or center), you can create even more colorful gradients as shown below

int colors2[] = new int[]{Color.BLUE,Color.YELLOW,Color.RED,Color.GREEN,Color.MAGENTA,Color.WHITE};
 GradientDrawable grDr = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors);  

In the next post, we will see how to use layer drawable. 


Popular posts from this blog

Simple ListView Adapter and list item select

When you are using a listview in your applications many a times you will write your own adapter to display item. But if your list is very simple showing a list of strings, you can use inbuilt adapters like ArrayAdapter, SimpleCursorAdapter etc.

ArrayAdapterLet us look at an example

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ListView android:layout_height="wrap_content" android:id="@+id/listView1" android:layout_width="match_parent" android:layout_margin="20dp"> </ListView> </LinearLayout>

And add these lines to the onCreate method of the activity.

super.onCreate(savedInstanceState); …

Drawables in Android - Layer drawable

Let us see how to use layer drawable. You can have two or more bitmaps on different layers to create such a drawable

Using xml:

You should use layer-list in your xml file to create layerdrawable. Here is layer.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android=""> <item> <bitmap android:src="@drawable/whiteicon" android:gravity="top|left"/> </item> <item> <bitmap android:src="@drawable/blueicon" android:gravity="top|left"/> </item> <item> <bitmap android:src="@drawable/redicon" android:gravity="top|left"/> </item> </layer-list>
We are using three different bitmaps whiteicon.png, redicon.png and blueicon.png which are present in /res/drawable/mdpi folder. All these are of different sizes and aligned to top left. This drawab…

DatePickers in Android

DatePicker is a view which lets the user select a date showing a calendar or 3 spinners for dd, mm and yy.

Let us see how to use this.
Easy Method: To use a DatePicker you can use DatePickerDialog. This can be created and shown programmatically too.

publicvoidonCreate(Bundle b){/*********/ Button btn =(Button)findViewById(; btn.setOnClickListener(new View.OnClickListener(){@OverridepublicvoidonClick(View v){ showPickerDialog();}});}privatevoidshowPickerDialog(){ DatePickerDialog dtPickerDlg =new DatePickerDialog(this,this, 2017,10,20);;}

In our xml file, let us have a button and in the onclick listener of the button, let us display the date picker dialog - we call showPickerDialog.

In showPickerDialog,  we are using a random date to initialize.

The first  parameter is the context. Second parameter is the class which implements the interface OnDateSetListener. Next three parameters are year, month (Jan is 0) and …