I'm trying to implement the following design on Android.
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:
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>
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.