(Android) Lay ProgressBar on top of a View

user_13353161 0
Viewed 461

I'm want to put the ProgressBar to the front of (on top of) the View. This is my xml file and the ProgressBar is currently being in the back, covered by the View

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:indeterminateOnly="false"
        android:progressDrawable="@drawable/percentage_circle"
        app:layout_constraintWidth_percent="0.6"
        app:layout_constraintHeight_percent="0.36"
        app:layout_constraintStart_toStartOf="@+id/view2"
        app:layout_constraintTop_toTopOf="@+id/view2" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/rounded_rec"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.6"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/rounded_rec"
        app:layout_constraintHeight_percent="0.4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.6" />

    <View
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/rounded_rec"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.4"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.4" />

</androidx.constraintlayout.widget.ConstraintLayout>

I want to know what are the possible ways to bring the ProgressBar to the front. Also are those solutions applicable to other objects (EditText, TextView,...) as well?

android-layout android-studio android
3 Answers

You're using ConstraintLayout. In ConstraintLayout unlike RelativeLayout or LinearLayout, views declared after previous one are placed above the previous one which means last declared view would be on top. So, just move the ProgressBar to the bottom as below :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity">

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/rounded_rec"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.6"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/rounded_rec"
        app:layout_constraintHeight_percent="0.4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.6" />

    <View
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/rounded_rec"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.4"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.4" />

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:indeterminateOnly="false"
        android:progressDrawable="@drawable/percentage_circle"
        app:layout_constraintWidth_percent="0.6"
        app:layout_constraintHeight_percent="0.36"
        app:layout_constraintStart_toStartOf="@+id/view2"
        app:layout_constraintTop_toTopOf="@+id/view2" />

</androidx.constraintlayout.widget.ConstraintLayout>
user_82446320

Just need android:elevation="1dp"

   <ProgressBar
    android:elevation="1dp"
    android:id="@+id/progressBar"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:indeterminateOnly="false"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.36"
    app:layout_constraintStart_toStartOf="@+id/view2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.6" />
user_142484620

Use your progress loader in bottom of the view stack. Because bottom view shows in top of user interface

user_43402730
Related