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:
