Android - displaying text in center of progress bar

Question

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?

score 47 · Answer 1 · edited Aug 27 '22 at 12:35

47

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"
        android:id="@+id/PROGRESS_BAR"/>

    <!-- TextView with transparent background -->
    <TextView
        android:background="#00000000"
        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>

edited Aug 27 '22 at 12:35

Asror Abdurakhmanov

88
1
2
7

answered Aug 23 '13 at 20:52

Matt Harris

3,496
5
32
43

Only this android:layout_alignTop="@id/simpleProgressBar" work fine for me. – Diego Venâncio Jul 26 '17 at 16:10
Great solution! – Mr. Nicky Jul 08 '18 at 17:14
3

Need closing tags on the textView and ProgressBar elements – Ben Schmidt Sep 23 '18 at 17:18
Becomes problematic if font scaling is introduced by the user. The progressbar bounds don't wrap around the expanding text. – Otieno Rowland Nov 19 '21 at 05:44

Yann · Answer 2 · 2014-02-12T16:51:23.600

14

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>

edited Feb 12 '14 at 16:51

answered Feb 12 '14 at 16:40

Yann

3,841
1
22
14

Good solution. Not sure of the purpose of the Relative Layout -- seems superfluous. – dazed Dec 25 '15 at 17:14
@dazed FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute. Source: https://developer.android.com/reference/android/widget/FrameLayout.html In resume, RelativeLayout is better when you want to put many views and organize them relatively to each other. – androidevil Jul 30 '16 at 00:04

Yousef Elsayed · Answer 3 · 2020-09-03T04:40:48.163

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>

score 3 · Answer 4 · answered Nov 23 '16 at 14:58

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>

score 2 · Answer 5 · answered Sep 03 '20 at 12:50

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

Thanks a lot! I was trying to achieve this but nothing worked. Thanks for including the output image as well! — Shubham Nanche, Mar 11 '22 at 08:54
How does the `@style/CustomProgressBarHorizontal` look like? — francis, Dec 02 '22 at 20:35

score 1 · Answer 6 · answered Feb 14 '18 at 19:34

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>

score 1 · Answer 7 · answered Jul 17 '20 at 00:14

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.

Code Spy · Answer 8 · 2019-06-30T09:37:56.130

-4

Source tutorial

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

edited Jun 30 '19 at 09:37

answered Aug 16 '18 at 07:11

Code Spy

9,626
4
66
46

5

Your link provides a how-to on `ProgressDialog` which is deprecated. The question is asking about a `ProgressBar`, which is a totally different thing. – ChumiestBucket Nov 20 '18 at 21:17
Question is related to progressbar not progress dialog – Rahul Hawge May 30 '23 at 05:12

Android - displaying text in center of progress bar

8 Answers8

Linked