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.....
  />  
 ......

Labels:

Comments

Post a Comment

Popular posts from this blog

Copy to clipboard

In my upcoming app, I have codes which I display. These are some times lengthy, and I want the app to be able to copy this to clipboard. Once it is in clipboard, users can paste it anywhere. So how do you copy some text from your app to clipboard. You need to use clipboard manager. Clipboard Manager This class sets and gets data for the clipboard using Clipdata objects.  You can get the object of this class using system service.  - using statement context.getSystemService(Context.CLIPBOARD_SERVICE) Example I have a dummy project with a button, onclick of which copies content to clipboard. Here is my activity file package com . hegdeapps . testapp ; import android.content.ClipData ; import android.content.ClipboardManager ; import android.support.v7.app.AppCompatActivity ; import android.os.Bundle ; import android.view.View ; import android.widget.Button ; import android.widget.TextView ; public class MainActivity extends ...
Post a Comment
Read more

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. Thi...
1 comment
Read more

Using a list fragment with cursor adapter

All these days, I avoided using fragments. But then I realized for my this particular applications fragments are ideal. I have a master - detail list in my app. Let us say you want to have two fragments - one is a fragment which contains a list of elements and second one expands one element of the list. Both of them share the same cursor from the activity. Let us start with list fragment. Do not try creating list fragment using a wizard. It unnecearrily adds too many methods and classes. Let us start writing our own fragment like this class MyListFragment extends ListFragment { } Next using code menu override option, override the following method onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) This method should be used for inflating the layout file for the fragment.  I have a framelayout in parent activity of this fragment with the id as container. So I will specify that for inflating. The framelayout will be the paren...
Post a Comment
Read more