I have already made a horizontal progress bar and it works perfectly. I would like to display a textview or something similar right in the middle of it showing a countdown as the bar is loading. Keep in mind its not a progress dialog, progress bar resides inside an activity and shows a countdown timer. Can anyone help me out, whats the best way to do this and how can I accomplish this?
39
votes
8 Answers
44
votes
If your ProgressBar and TextView are inside a RelativeLayout you can give the ProgressBar an id, and then align the TextView with the ProgressBar using that. It should then show on top of the ProgressBar. Make sure the background is transparent so that you can still see the ProgressBar
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="match_parent"
// other attributes
android:id="@+id/PROGRESS_BAR"
>
<TextView
android:background="#00000000" // transparent
// other attributes
android:layout_alignLeft="@id/PROGRESS_BAR"
android:layout_alignTop="@id/PROGRESS_BAR"
android:layout_alignRight="@id/PROGRESS_BAR"
android:layout_alignBottom="@id/PROGRESS_BAR"
>
</RelativeLayout>
13
votes
You can use a FrameLayout to display the TextView over the ProgressBar:
...
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="@+id/progress"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:progressDrawable="@drawable/progressbar" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true" />
...
</RelativeLayout>
</FrameLayout>
5
votes
You can set LinearLayout with RelativeLayout inside it and make RelativeLayout Height & width equal to wrap_content then in the TextView under the ProgressBar you will add android:layout_centerInParent="true"
Example :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="200dp"
android:layout_height="200dp"
android:max="100"
android:progress="65" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:textColor="@color/white"
android:text="6:00 AM"
android:textSize="25sp"
android:textStyle="bold"/>
</RelativeLayout>
</LinearLayout>
4
votes
that is what worked for me:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="@+id/progressBar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:progressDrawable="@drawable/customprogressbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:max="100"/>
<TextView
android:id="@+id/progressBarinsideText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
/>
</RelativeLayout>
1
votes
This is what I used to display progress text above a spinner centered on a web view:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/help_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#F22"
android:scrollbars="none" />
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true" />
<TextView
android:id="@+id/progressBarMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Loading, please wait..."
android:layout_centerInParent="true"
android:layout_above="@id/progressBar"
android:background="#00000000" />
</RelativeLayout>
0
votes
You can put the ProgressBar and the TextView inside a Relative Layout and add the following line to both of these children's XML file:
android:layout_centerInParent="true"
This should force both the ProgressBar and the TextView to be displayed in the Center of the same Relative layout.
This can also work if you want to display a Textfield inside a Circular ProgressBar.
PS. if you further want to show the textview above or below (vertically) the progress bar, then you can adjust the 'margin' element of the TextView.
0
votes
Here I am using the Frame Layout and put text inside the Frame Layout
<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
map:layout_constraintBottom_toBottomOf="@+id/programStatusTextView"
map:layout_constraintStart_toEndOf="@+id/programStatusTextView"
map:layout_constraintTop_toTopOf="@+id/programStatusTextView">
<RelativeLayout
android:layout_width="130dp"
android:layout_height="60dp"
android:background="@drawable/battery">
<ProgressBar
android:id="@+id/batteryIndicaterBar"
style="@style/CustomProgressBarHorizontal"
android:layout_width="119dp"
android:layout_height="52dp"
android:layout_marginStart="3dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="7dp"
android:backgroundTint="@color/colorPrimary"
android:max="100"
android:minHeight="10dip"
android:paddingEnd="4dp"
android:progress="0"
android:progressBackgroundTintMode="src_over"
android:progressTint="@color/green"
android:visibility="visible" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="0"
android:textSize="20sp"
android:textStyle="bold" />
</FrameLayout>
Here is the output I am getting
-3
votes
In Activity we can Show and Dismiss ProgressBar using the following methods
// Method to show Progress bar
private void showProgressDialogWithTitle(String substring) {
progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
//Without this user can hide loader by tapping outside screen
progressDialog.setCancelable(false);
progressDialog.setMessage(substring);
progressDialog.show();
}
// Method to hide/ dismiss Progress bar
private void hideProgressDialogWithTitle() {
progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
progressDialog.dismiss();
}
Check other
