androidandroid-constraintlayoutz-order

Bring to Button front while having two ConstraintLayout


I'm trying to implement the following design on Android.

Android Screen

I know that to have the button at that position I should have two constraint layout; one for whole change password form and one for change password form without the Save button and then set the Save button's Top and Bottom constraint to the second ConstraintLayout.
But when I do this, the button goes behind the form, and therein lies the problem:

enter image description here

Here is my XML:

    <android.support.design.widget.CoordinatorLayout 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=".ChangePasswordActivity">
    
        <include
            android:id="@+id/changePasswordBar"
            layout="@layout/top_bar_full"></include>
    
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <android.support.constraint.ConstraintLayout
                android:id="@+id/changePasswordCTL"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/activities_constraint_top_bottom"
                android:layout_marginEnd="@dimen/activities_constraint_start_end"
                android:layout_marginStart="@dimen/activities_constraint_start_end"
                android:layout_marginTop="@dimen/activities_constraint_top_bottom"
                android:background="@drawable/radius_background_exchange"
                android:elevation="5dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">
    
                // some EditText and TextView views here
    
    
            </android.support.constraint.ConstraintLayout>

    <br.com.simplepass.loading_button_lib.customViews.CircularProgressButton
                android:id="@+id/changePasswordBT"
                style="@style/customButton"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="32dp"
                android:layout_marginStart="32dp"
                android:layout_marginTop="8dp"
                android:fontFamily="@font/sans_web_medium"
                android:text="@string/finish"
                android:textAllCaps="false"
                android:textColor="@android:color/white"
                android:textSize="@dimen/signinup_button_font_size"
                app:initialCornerAngle="5dp"
                app:layout_constraintBottom_toBottomOf="@+id/changePasswordCTL"
                app:layout_constraintEnd_toEndOf="@+id/changePasswordCTL"
                app:layout_constraintStart_toStartOf="@+id/changePasswordCTL"
                app:layout_constraintTop_toBottomOf="@+id/changePasswordCTL"
                app:spinning_bar_color="@android:color/white"
                app:spinning_bar_padding="6dp"
                app:spinning_bar_width="4dp" />
    
        </android.support.constraint.ConstraintLayout>
    
    </android.support.design.widget.CoordinatorLayout>

Solution

  • When elevation isn't in the picture, views that are defined later in the XML file will draw "on top" of views defined earlier. However, your password form has android:elevation="5dp", and this will override the normal drawing order.

    To fix, add elevation to the button as well. android:elevation="5dp" should be enough, since then they're at the same elevation and the normal rules should apply. But you could give it more elevation to guarantee that it always draws on top of the password form.