How to overlay a view in a constraintlayout?

Question

I have this layout of my login activity. I want to overlay progressBar as like it can be done using FrameLayout. How to do this using ConstraintLayout?

<layout>      <data>          <variable             name="vm"             type="com.app.android.login.vm" />     </data>      <ScrollView 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:fillViewport="true"         tools:context="com.app.android.login.LoginActivity"         tools:ignore="missingPrefix">          <android.support.constraint.ConstraintLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:paddingBottom="@dimen/default_view_margin_bottom_8dp">              <android.support.design.widget.TextInputLayout                 android:id="@+id/til_login_email"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginEnd="@dimen/default_view_margin_right_8dp"                 android:layout_marginStart="@dimen/default_view_margin_left_8dp"                 android:textColorHint="@color/colorSecondaryText"                 app:hintTextAppearance="@style/AppTheme.InputLayoutStyle"                 app:layout_constraintBottom_toTopOf="@+id/til_login_password"                 app:layout_constraintTop_toTopOf="parent"                 app:layout_constraintVertical_chainStyle="packed">                  <android.support.design.widget.TextInputEditText                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:hint="@string/login_email"                     android:imeOptions="actionNext"                     android:singleLine="true"                     android:text="@={vm.emailField}"                     android:textColor="@color/colorPrimaryText" />             </android.support.design.widget.TextInputLayout>              <android.support.design.widget.TextInputLayout                 android:id="@+id/til_login_password"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginEnd="@dimen/default_view_margin_right_8dp"                 android:layout_marginStart="@dimen/default_view_margin_left_8dp"                 android:textColorHint="@color/colorSecondaryText"                 app:hintTextAppearance="@style/AppTheme.InputLayoutStyle"                 app:layout_constraintBottom_toTopOf="@+id/btn_login_login"                 app:layout_constraintTop_toBottomOf="@+id/til_login_email"                 app:layout_constraintVertical_chainStyle="packed">                  <android.support.design.widget.TextInputEditText                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:hint="@string/login_password"                     android:imeOptions="actionDone"                     android:inputType="textPassword"                     android:singleLine="true"                     android:text="@={vm.passwordField}"                     android:textColor="@color/colorPrimaryText" />             </android.support.design.widget.TextInputLayout>              <Button                 android:id="@+id/btn_login_login"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginEnd="@dimen/default_view_margin_right_8dp"                 android:layout_marginStart="@dimen/default_view_margin_left_8dp"                 android:layout_marginTop="48dp"                 android:onClick="@{vm::login}"                 android:text="@string/login_btn_text"                 android:textColor="@color/colorWhite"                 app:layout_constraintBottom_toTopOf="@+id/textview_login_forgot_password"                 app:layout_constraintTop_toBottomOf="@+id/til_login_password"                 app:layout_constraintVertical_chainStyle="packed" />              <TextView                 android:id="@+id/textview_login_forgot_password"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginEnd="@dimen/default_view_margin_right_8dp"                 android:layout_marginStart="@dimen/default_view_margin_left_8dp"                 android:layout_marginTop="36dp"                 android:gravity="center"                 android:text="@string/login_forgot_password"                 app:layout_constraintBottom_toTopOf="@+id/btn_login_register"                 app:layout_constraintTop_toBottomOf="@+id/btn_login_login"                 app:layout_constraintVertical_chainStyle="packed" />              <Button                 android:id="@+id/btn_login_register"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginEnd="@dimen/default_view_margin_right_8dp"                 android:layout_marginStart="@dimen/default_view_margin_left_8dp"                 android:text="@string/login_sign_up"                 android:textColor="@color/colorWhite"                 app:layout_constraintBottom_toBottomOf="parent" />              <ProgressBar                 android:id="@+id/progressBar"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:visibility="@{vm.progressVisibility}"                 app:layout_constraintBottom_toBottomOf="parent"                 app:layout_constraintLeft_toLeftOf="parent"                 app:layout_constraintRight_toRightOf="parent"                 app:layout_constraintTop_toTopOf="parent" />          </android.support.constraint.ConstraintLayout>     </ScrollView> </layout> 

It looks like this:

I am looking for solution which should work for API level 19+. I don't want to add more hierarchy in my layout by wrapping Button or ProgressBar inside ViewGroup or so.

Answer 1

There are two options, in each case you add one attribute to your <ProgressBar/> tag. It is either

android:translationZ="2dp" 

or

android:elevation="2dp" 

API level must be >= 21.

Answer 2

If you want to 100% overlay the target view, constrain all the sides of the overlaying view to the corresponding sides of the target view and set the height and width of the overlaying view to 0dp like the following:

    <View         android:layout_width="0dp"         android:layout_height="0dp"         app:layout_constraintBottom_toBottomOf="@id/animation_view"         app:layout_constraintLeft_toLeftOf="@id/animation_view"         app:layout_constraintRight_toRightOf="@id/animation_view"         app:layout_constraintTop_toTopOf="@id/animation_view"/> 

Here is a working example. In the following image, a red scrim is placed over an image. The XML follows the image.

<android.support.constraint.ConstraintLayout      android:layout_width="match_parent"     android:layout_height="match_parent">      <ImageView         android:id="@+id/animation_view"         android:layout_width="250dp"         android:layout_height="250dp"         android:src="@mipmap/ic_launcher"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toTopOf="parent" />      <View         android:layout_width="0dp"         android:layout_height="0dp"         android:background="#AAFF0000"         app:layout_constraintBottom_toBottomOf="@id/animation_view"         app:layout_constraintLeft_toLeftOf="@id/animation_view"         app:layout_constraintRight_toRightOf="@id/animation_view"         app:layout_constraintTop_toTopOf="@id/animation_view" /> </android.support.constraint.ConstraintLayout> 

See the documentation for ConstraintLayout for more information.