Android ConstraintLayout - Put one view on top of another view

Question

I'm trying to add a ProgressBar on top of a Button (both are inside a ConstraintLayout).

<Button
    android:id="@+id/sign_in_button"
    android:layout_width="280dp"
    android:layout_height="75dp"
    android:layout_marginBottom="75dp"
    android:layout_marginTop="50dp"
    android:text="@string/sign_in"
    android:textColor="@color/white"
    android:textSize="22sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/passwordEditText"
    app:layout_constraintVertical_bias="0.0"/>

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="@+id/sign_in_button"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/sign_in_button"
    android:layout_marginBottom="8dp"
    app:layout_constraintVertical_bias="0.5"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="@+id/sign_in_button"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="@+id/sign_in_button"/>

But even after calling bringToFront on the ProgressBar in onCreate, it always stays behind the Button.

ProgressBar progressBar = (ProgressBar)findViewById(R.id.progressBar);
progressBar.bringToFront();

this is so weird, I tried to play a bit with your layout, even inverting the chain so that the progress bar is constraint to the edit text and the button to the progress bar but the button seems to be always on top of the progress bar — lelloman, Jun 04 '17 at 06:53
Are you able to use a FrameLayout ? Give it a try, knowing that in FrameLayout, the z-index is given by the order inside the layout ( so Button 1st, Progress 2nd ) — razgraf, Jun 04 '17 at 07:27
where is your passwordEditText as i checked without app:layout_constraintTop_toBottomOf="@+id/passwordEditText" i can see progress bar on top can u provide that passwordEditText — Pavan, Jun 04 '17 at 08:08

Cheticamp · Accepted Answer · 2017-06-05T22:06:50.337

249

Set an elevation on the ProgressBar; 2dp seems to work.

android:elevation="2dp"

You could also try setting translationZ as suggested in the accepted answer to a similar question.

I also came across this answer as an alternative.

edited Jun 05 '17 at 22:06

answered Jun 05 '17 at 22:01

Cheticamp

61,413
10
78
131

21

But `elevation` and `translationZ` are only for API >=21, what about older APIs? – q126y Jul 09 '17 at 05:15
1

@q126y I don't think this became an issue until API 21, so older APIs should not need this. I have tried it on an emulator running API 17 and the progress bar appeared on top as expected. – Cheticamp Jul 09 '17 at 12:39
@Cheticamp so How to handle this? AS is giving a warning it works only API level 21 and higher. – Ajay S Nov 22 '17 at 15:54
@Anaya See my comment above. If you don't want to see the warning, check build version at run time. – Cheticamp Nov 22 '17 at 20:22
8

@q126y `ViewCompat.setTranslationZ(view, 5)` – Silvia H Nov 27 '17 at 13:10
3

`ViewCompat.setElavation(view, 20f)` helps you – sagus_helgy Jul 26 '18 at 09:23
@SilviaH , inside of `ViewCompat.setTranslationZ(...) SDK_VERSION checks automatically. if (VERSION.SDK_INT >= 21) { view.setTranslationZ(translationZ); } – Mojtaba Oct 23 '18 at 13:33
Elevation in API < 21 is defined by tag order in the XML. The view/layout at the top is at the bottom of the stack. – Manuel May 28 '19 at 00:14
why 2dp? Is 1dp ok? – hmac Oct 23 '19 at 11:28
@hmac If it works for you, yes. `2dp` was the smallest I could get down to with the layout provided. – Cheticamp Oct 23 '19 at 11:31

score 27 · Answer 2 · edited Jul 03 '20 at 02:58

27

We need to use android:elevation to control this.

android:elevation="10dp"

This elevation attribute only work in API level >= 21. But In below that it will behave normally. If we add Progress below the Button view it show the view which is in the bottom at the top of the other view.

edited Jul 03 '20 at 02:58

ThomasW

16,981
4
79
106

answered Feb 15 '19 at 03:34

Ishan Fernando

2,758
1
31
38

Cristan · Answer 3 · 2021-01-29T11:32:48.510

13

You can simply define the view which you want on top after the one which should appear below it.

With buttons, note that their elevation is governed by their stateListAnimator. The stateListAnimator of Widget.MaterialComponents.Button has a default elevation of @dimen/mtrl_btn_elevation (2dp). So if you want to show a view on top of a Button, it should have an elevation of at least 2dp.

edited Jan 29 '21 at 11:32

answered Apr 15 '19 at 13:44

Cristan

12,083
7
65
69

How do you ensure that coz the xml can accidentally get rearranged – RamPrasadBismil May 23 '19 at 19:56
@Cristan, its better to provide a code snippet or an example. Thanks – blueware Jun 17 '19 at 08:35
1

I wonder why `ProgressBar` isn't on top of the `Button` even though `ProgressBar` is defined after `Button` in the question. – Michael Osofsky Jun 21 '19 at 20:46
I thought this was true too but no matter where I place an imageview in the constraint layout ordering, it is always appearing behind a button – behelit Jun 23 '20 at 03:04
I finally figured out why this doesn't seem to work for buttons. I've updated my answer to reflect this. – Cristan Jan 29 '21 at 11:35

score 7 · Answer 4 · answered Apr 08 '20 at 17:29

7

In Constraint layout you should use

traslationz

higher than view that you want to below .

answered Apr 08 '20 at 17:29

Waqas Yousaf

264
4
13

score 5 · Answer 5 · answered Aug 23 '20 at 09:27

Although android:elevation="4dp" or traslationz will work, but for that API level should at least 21. If for some reason you can't do that, make sure the view you want on top is mentioned after other views. For example, if I want progressBar on top of ImageView:

<?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"
   tools:context=".ImageActivity">

<ImageView
   android:id="@+id/image_view"
   android:layout_width="0dp"
   android:layout_height="0dp"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintDimensionRatio="6:4"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" />

<ProgressBar
   android:id="@+id/progress_bar"
   style="?android:attr/progressBarStyle"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

PRANAV SINGH · Answer 6 · 2021-05-03T16:12:17.017

2

Using elevation is working but it has some limitations like it requires api level 21+ and also if elevation is less(in my case it was 2dp) then view become invisible while doing long click therefore you can use a trick simply replace button with "View" or "TextView" you can do everything with these views which can be done with buttonView

edited May 03 '21 at 16:12

answered Apr 08 '21 at 14:18

PRANAV SINGH

1,000
11
17

Refael · Answer 7 · 2019-09-16T08:49:02.620

Updated answer for Android Sutdio 3.5:

In the updated Layout Editor it's now much easier to choose which View will be in front as demonstrated in the Android Studio release notes

.. In addition, a blue overlay now highlights the target of the constraint. This highlighting is particularly useful when attempting to constrain to a component that overlaps with another.

https://developer.android.com/studio/releases

Even easier, If you drag the View up (copy paste or from the Component Tree in the layout editor) it will get lower priority (so it will be behind the other views)

score 1 · Answer 8 · answered Jul 16 '20 at 11:25

Button by default have TranslationZ set , so you have two options

1 - make progress bar TranslationZ greater than button elevation

ViewCompat.setTranslationZ(progressBar, 5)// to support older api <21

2 - make button TranslateZ to 0 so the views Appear above each other in order in your Constraint Layout , you can achieve this by Setting Style to button

style="@style/Widget.AppCompat.Button.Borderless"

Android ConstraintLayout - Put one view on top of another view

8 Answers8

Linked