HadasM HadasM - 4 months ago 14
Android Question

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>

Answer

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>