Monday, September 3, 2012

Display Percentage on ProgressBar

This page records how to implement displaying percentage number on progress bar in Android. The result is like this:


Once the "Start" button is clicked, the progress bar set will appear, then if "Go" button is clicked progress will increase 10%. Once the progress reaches the max value, the set will disappear again.

The key point is using RelativeLayout to put TextView "onto" the ProgressBar.

For the horizontal progress bar:
     <ProgressBar  
       android:id="@+id/pb_horizontal"  
       style="@android:style/Widget.ProgressBar.Horizontal"  
       android:layout_width="fill_parent"  
       android:layout_height="wrap_content"  
       android:layout_alignParentTop="true"  
       android:max="100" />  
   
     <TextView  
       android:id="@+id/tv_progress_horizontal"  
       android:layout_width="fill_parent"  
       android:layout_height="wrap_content"  
       android:layout_alignBottom="@id/pb_horizontal"  
       android:background="@android:color/transparent"  
       android:gravity="center" />  
The text view is aligned onto the bottom of horizontal progress bar that achieved this effect.


For the circle progress bar:
 <RelativeLayout  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_alignParentLeft="true"  
       android:layout_below="@id/pb_horizontal"  
       android:layout_marginLeft="10dp"  
       android:layout_marginTop="10dp" >  
   
       <ProgressBar  
         style="@android:style/Widget.ProgressBar.Large"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_centerInParent="true"  
         android:background="@android:color/background_dark" />  
   
       <TextView  
         android:id="@+id/tv_progress_circle"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_centerInParent="true"  
         android:background="@android:color/transparent"  
         android:gravity="center"  
         android:textColor="@android:color/white" />  
     </RelativeLayout>  
The circle progress bar and its text view are put into a new relative layout, and set both of the widgets to the center of their parent relative layout (the new relative layout mentioned before).


The complete code for the layout is shown below.
1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools"  
3:    android:layout_width="fill_parent"  
4:    android:layout_height="wrap_content" >  
5:    
6:    <TextView  
7:      android:id="@+id/tv_progress_bar_label"  
8:      android:layout_width="fill_parent"  
9:      android:layout_height="wrap_content"  
10:      android:layout_alignParentTop="true"  
11:      android:background="@android:color/darker_gray"  
12:      android:text="Progress Bar Test" />  
13:    
14:    <Button  
15:      android:id="@+id/btn_start"  
16:      android:layout_width="wrap_content"  
17:      android:layout_height="wrap_content"  
18:      android:layout_alignParentLeft="true"  
19:      android:layout_below="@id/tv_progress_bar_label"  
20:      android:layout_marginTop="10dp"  
21:      android:text="Start"  
22:      android:textSize="25dp" />  
23:    
24:    <Button  
25:      android:id="@+id/btn_next_activity"  
26:      android:layout_width="wrap_content"  
27:      android:layout_height="wrap_content"  
28:      android:layout_alignParentRight="true"  
29:      android:layout_below="@id/tv_progress_bar_label"  
30:      android:layout_marginTop="10dp"  
31:      android:text="Next Activity"  
32:      android:textSize="25dp" />  
33:    
34:    <RelativeLayout  
35:      android:id="@+id/rl_progress_bar_set"  
36:      android:layout_width="fill_parent"  
37:      android:layout_height="wrap_content"  
38:      android:layout_below="@id/btn_start"  
39:      android:layout_marginTop="10dp"  
40:      android:visibility="gone" >  
41:    
42:      <ProgressBar  
43:        android:id="@+id/pb_horizontal"  
44:        style="@android:style/Widget.ProgressBar.Horizontal"  
45:        android:layout_width="fill_parent"  
46:        android:layout_height="wrap_content"  
47:        android:layout_alignParentTop="true"  
48:        android:max="100" />  
49:    
50:      <TextView  
51:        android:id="@+id/tv_progress_horizontal"  
52:        android:layout_width="fill_parent"  
53:        android:layout_height="wrap_content"  
54:        android:layout_alignBottom="@id/pb_horizontal"  
55:        android:background="@android:color/transparent"  
56:        android:gravity="center" />  
57:    
58:      <RelativeLayout  
59:        android:layout_width="wrap_content"  
60:        android:layout_height="wrap_content"  
61:        android:layout_alignParentLeft="true"  
62:        android:layout_below="@id/pb_horizontal"  
63:        android:layout_marginLeft="10dp"  
64:        android:layout_marginTop="10dp" >  
65:    
66:        <ProgressBar  
67:          style="@android:style/Widget.ProgressBar.Large"  
68:          android:layout_width="wrap_content"  
69:          android:layout_height="wrap_content"  
70:          android:layout_centerInParent="true"  
71:          android:background="@android:color/background_dark" />  
72:    
73:        <TextView  
74:          android:id="@+id/tv_progress_circle"  
75:          android:layout_width="wrap_content"  
76:          android:layout_height="wrap_content"  
77:          android:layout_centerInParent="true"  
78:          android:background="@android:color/transparent"  
79:          android:gravity="center"  
80:          android:textColor="@android:color/white" />  
81:      </RelativeLayout>  
82:    
83:      <Button  
84:        android:id="@+id/btn_go"  
85:        android:layout_width="wrap_content"  
86:        android:layout_height="wrap_content"  
87:        android:layout_alignParentRight="true"  
88:        android:layout_below="@id/pb_horizontal"  
89:        android:layout_marginTop="10dp"  
90:        android:text="Go"  
91:        android:textSize="25dp" />  
92:    </RelativeLayout>  
93:    
94:  </RelativeLayout>  


The complete code for the activity is shown below.
1:   package com.su.viewstest3;  
2:    
3:   import android.os.Bundle;  
4:   import android.app.Activity;  
5:   //import android.content.Intent;  
6:   import android.view.Menu;  
7:   import android.view.View;  
8:   import android.view.View.OnClickListener;  
9:   import android.widget.Button;  
10:  import android.widget.ProgressBar;  
11:  import android.widget.RelativeLayout;  
12:  import android.widget.TextView;  
13:  import android.widget.Toast;  
14:    
15:  public class MainActivity extends Activity {  
16:    
17:      /* widgets */  
18:      private Button         btnStart             = null;  
19:      private Button         btnNextActivity      = null;  
20:      private RelativeLayout rlProgressBarSet     = null;  
21:      private ProgressBar    pbHorizontal         = null;  
22:      private TextView       tvProgressHorizontal = null;  
23:      private TextView       tvProgressCircle     = null;  
24:      private Button         btnGo                = null;  
25:    
26:      /* current progress on progress bars */  
27:      private int progress = 0;  
28:    
29:      @Override  
30:      public void onCreate(Bundle savedInstanceState) {  
31:          super.onCreate(savedInstanceState);  
32:          setContentView(R.layout.activity_main);  
33:    
34:          btnStart             = (Button)findViewById(R.id.btn_start);  
35:          btnNextActivity      = (Button)findViewById(R.id.btn_next_activity);  
36:          rlProgressBarSet     = (RelativeLayout)findViewById(R.id.rl_progress_bar_set);  
37:          pbHorizontal         = (ProgressBar)findViewById(R.id.pb_horizontal);  
38:          tvProgressHorizontal = (TextView)findViewById(R.id.tv_progress_horizontal);  
39:          tvProgressCircle     = (TextView)findViewById(R.id.tv_progress_circle);  
40:          btnGo                = (Button)findViewById(R.id.btn_go);  
41:    
42:          /* add listeners */  
43:          btnStart.setOnClickListener(new ButtonsListener());  
44:          btnGo.setOnClickListener(new ButtonsListener());  
45:          btnNextActivity.setOnClickListener(new ButtonsListener());  
46:      }  
47:    
48:      @Override  
49:      public boolean onCreateOptionsMenu(Menu menu) {  
50:          getMenuInflater().inflate(R.menu.activity_main, menu);  
51:          return true;  
52:      }  
53:    
54:      private class ButtonsListener implements OnClickListener {  
55:          public void onClick(View v) {  
56:              switch (v.getId()) {  
57:              case R.id.btn_start:  
58:                  rlProgressBarSet.setVisibility(View.VISIBLE);  
59:                  progress = 0;  
60:                  postProgress(progress);  
61:                  break;  
62:    
63:              case R.id.btn_go:  
64:                  if(progress < pbHorizontal.getMax()) {  
65:                      progress = progress + 10;    // update progress  
66:                      postProgress(progress);  
67:    
68:                  } else {  
69:                      rlProgressBarSet.setVisibility(View.GONE);  
70:                      progress = 0;  
71:                      Toast.makeText(MainActivity.this, "Finish", Toast.LENGTH_SHORT).show();  
72:                  }  
73:                  break;  
74:    
75:              case R.id.btn_next_activity:  
76:                  /* jump to next activity */  
77:                  //Intent intent = new Intent();  
78:                  //intent.setClass(MainActivity.this, ListViewTest.class);  
79:                  //MainActivity.this.startActivity(intent);  
80:                  break;  
81:    
82:              default:  
83:                  return;  
84:              }  
85:          }  
86:    
87:          /**  
88:           * post progress onto progress bar and text views  
89:           *   
90:           * @param progress current progress  
91:           */  
92:          private void postProgress(int progress) {  
93:              String strProgress = String.valueOf(progress) + " %";  
94:              pbHorizontal.setProgress(progress);  
95:              /* update secondary progress of horizontal progress bar */  
96:              if(progress == 0) {  
97:                  pbHorizontal.setSecondaryProgress(0);  
98:              } else {  
99:                  pbHorizontal.setSecondaryProgress(progress + 5);  
100:              }  
101:              tvProgressHorizontal.setText(strProgress);  
102:              tvProgressCircle.setText(strProgress);  
103:          }  
104:      }  
105:    
106:  }  
107:    


Reference:

2 comments:

  1. Sands Casino Review & Ratings 2021
    Casino Review: Play at Sands Casino, including choegocasino real 인카지노 players' reviews, games, complaints, latest bonus codes 샌즈카지노 and promotions. Rating: 4 · ‎Review by Nathan Grohman

    ReplyDelete
  2. How to Get to Las Vegas by Bus or Train
    Directions to Las Vegas (North America) with public transportation. The following transit lines 마틴게일 전략 have routes that pass near Las Vegas. The following 피망 슬롯 머신 transit lines have 메리트 routes bet365 해외 배당 흐름 that pass 딥 슬롯 near

    ReplyDelete