Skip to main content

Progress bar with different color and text

Normally the horizontal progress bar  will display yellow color which most of you may not like.

Unlike other views, changing the background for progress bar will not work. It will only change background image, but not the bar which shows the progress.

There is one more property in xml, android:progressDrawable. You should change this. But the drawable must be a clip drawable. A clip drawable clips the diagram based on the value set.

So let us create a file called clip.xml


 <?xml version="1.0" encoding="utf-8"?>  
 <clip xmlns:android="http://schemas.android.com/apk/res/android"  
     android:drawable="@drawable/bg"  
     android:clipOrientation="horizontal"  
     android:gravity="left"  
     >  
 </clip>  

android:drawable, in this case bg is the .png or .xml picture to be used for clip drawable. It should be present in your res/drawable folder. Clip orientation horizontal and gravity left are default values.

Next we should use this in our progress bar
 ........  
  <ProgressBar  
       android:id="@+id/time"  
       style="?android:attr/progressBarStyleHorizontal"  
       android:layout_width="match_parent"  
       android:layout_height="30dp"  
       android:layout_alignParentTop="true"  
       android:progressDrawable="@drawable/clipdraw"  
       android:layout_toRightOf="@id/score"/>  
 ......  


That's all. Our customized progress bar is ready.

But do you notice the text which also gives the time left in number. How is that shown? How do we show a text in progress bar?

That can be achieved by creating a text view with same alignment properties as the progress bar. In my case the progress bar and textview both are to the right of score which is shown as 100.



 ........  
  <ProgressBar  
       android:layout_alignParentRight="true"  
       android:layout_toRightOf="@id/score"  

     other lines.....
 />  
 <TextView  
  android:layout_alignParentRight="true"  
       android:progressDrawable="@drawable/clipdraw"  
       android:layout_toRightOf="@id/score"  
    other lines.....
  />  
 ......  

Comments

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="http://schemas.android.com/apk/res/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="http://schemas.android.com/apk/res/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(R.id.btn); btn.setOnClickListener(new View.OnClickListener(){@OverridepublicvoidonClick(View v){ showPickerDialog();}});}privatevoidshowPickerDialog(){ DatePickerDialog dtPickerDlg =new DatePickerDialog(this,this, 2017,10,20); dtPickerDialog.show();}

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 …