CODEWITHSUNDEEP
androidandroid-layoutandroid-xmlandroid-buttonandroid-progressbar
Dus
Dus

Reputation: 4230

progressbar in the middle of a button

I want to create a progress bar in the middle of a standard button, something like this : progressbar

In the xml layout, when i click the progressbar, i do see that it's located where i wish it to be, but on realtime, i can't see it, it feels like its hiding below the button. android studio xml

I've tried :

  1. Changing the view's positioning (button above/below progressbar)
  2. indeterminate
  3. Playing with ProgressBar's style

Nothing seemed to be working.

Here's my xml : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="1dp"
        android:text="test button" />

    <ProgressBar
        android:id="@+id/progress"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button_id"
        android:layout_alignTop="@+id/button_id"
        android:layout_centerHorizontal="true"
        android:indeterminate="true"
        android:indeterminateTint="@android:color/holo_blue_dark"
        android:visibility="visible" />

</RelativeLayout>

Upvotes: 4

Views: 6442

Answers (3)

solamour
solamour

Reputation: 3204

If you still need to support devices older than 21 (thus can't use android:elevation), try wrapping your button in another dummy layout. I'm using FrameLayout as an example.

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Submit" />
    </FrameLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="24dp"
        android:layout_gravity="center"
        android:indeterminateTint="@android:color/white" />
</FrameLayout>

Upvotes: 0

AlbAtNf
AlbAtNf

Reputation: 3909

In the Preview, the ProgressBar is always invisible (at least to me).

The problem is, that you applied an elevation to your button. this changes the z-level of a view. So the ProgressBar really is behind your button, because the ProgressBar does not have an elevation.

Giving the ProgressBar an elevation of 3dp worked for me.

<ProgressBar
    android:id="@+id/progress"
    style="?android:attr/progressBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button_id"
    android:layout_alignTop="@+id/button_id"
    android:layout_centerHorizontal="true"
    android:indeterminate="true"
    android:elevation="3dp"
    android:indeterminateTint="@android:color/holo_blue_dark"
    android:visibility="visible" />

EDIT: You will be better of, using a ProgressDialog.

ProgressDialog dialog = new ProgressDialog(this);
dialog.setMessage("Wait...");
dialog.show();

Upvotes: 0

Matias Elorriaga
Matias Elorriaga

Reputation: 9150

The problem is related with elevation. Add elevation to the ProgressBar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="1dp"
        android:text="test button" />

    <ProgressBar
        android:id="@+id/progress"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button_id"
        android:layout_alignTop="@+id/button_id"
        android:layout_centerHorizontal="true"
        android:indeterminate="true"
        android:elevation="2dp"
        android:indeterminateTint="@android:color/holo_blue_dark"
        android:visibility="visible" />

</RelativeLayout>

Upvotes: 13

Related Questions