Overlap an image view on button in a constraint layout

user_17286476 0
Viewed 625

I want to design a layout that has one image view on the side but overlaps the button. I have to do this in constraint layout. Can anyone suggest a way to accomplish this? Thanks in advance.

attached is the design below:design needed

Edit: I tried how the second answer told me to do. But still, the image is hidden by the button. So can anyone suggest a way to make the image visible on top of the button?

Login screen

login_layout

<layout>

    <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:background="@color/colorAccent"
        tools:context=".MainActivity">

        <View
            android:id="@+id/view_form"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/marginTopLogin"
            android:background="@drawable/round_cornered_top_white_bg_drawable"
            app:layout_constraintBottom_toBottomOf="@+id/btnSubmit"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/etUsername"
            app:layout_constraintVertical_weight="0.50" />


        <EditText
            android:id="@+id/etUsername"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="20dp"
            android:autofillHints="name"
            android:hint="Username"
            android:imeOptions="actionNext"
            android:inputType="text"
            android:maxLines="1"
            android:padding="16dp"
            app:layout_constraintEnd_toEndOf="@id/view_form"
            app:layout_constraintStart_toStartOf="@id/view_form"
            app:layout_constraintBottom_toTopOf="@id/etPassword" />

        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:autofillHints="password"
            android:hint="Password"
            android:imeOptions="actionDone"
            android:inputType="textPassword"
            android:maxLines="1"
            android:padding="16dp"
            app:layout_constraintEnd_toEndOf="@id/view_form"
            app:layout_constraintStart_toStartOf="@id/view_form"
            app:layout_constraintBottom_toTopOf="@+id/btnSubmit" />

        <CheckBox
            android:id="@+id/imgTogglePassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="-5dp"
            android:layout_marginEnd="-5dp"
            android:button="@drawable/btn_toggle_password"
            android:padding="16dp"
            app:layout_constraintBottom_toBottomOf="@id/etPassword"
            app:layout_constraintEnd_toEndOf="@id/etPassword"
            app:layout_constraintTop_toTopOf="@id/etPassword" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnSubmit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:textColor="@color/colorWhite"
            android:text="Submit"
            android:background="@color/purple_700"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imgNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_ico_gonext"
            android:padding="16dp"
            android:layout_marginEnd="20dp"
            app:layout_constraintTop_toTopOf="@id/btnSubmit"
            app:layout_constraintBottom_toBottomOf="@id/btnSubmit"
            app:layout_constraintEnd_toEndOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>
android-constraintlayout android-layout android
2 Answers

Add below code in your ImageView. btnLogin is id of your button id, Add parent in top and bottom constraints to align imageview vertically center.

app:layout_constraintEnd_toEndOf="@+id/btnLogin"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Edit:

Overlap image on button using one ConstraintLayout, You need to add android:stateListAnimator="@null", but using this all elevation and translationZ will not be display to Button.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnSubmit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:textColor="@color/white"
        android:text="Submit"
        android:background="@color/purple_700"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:stateListAnimator="@null"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imgNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_next"
        android:padding="16dp"
        android:layout_marginEnd="20dp"
        app:layout_constraintTop_toTopOf="@id/btnSubmit"
        app:layout_constraintBottom_toBottomOf="@id/btnSubmit"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Output for above code:

enter image description here

For more info regarding adding elevation and overlap views, check this answer

user_165091960

You can just set the ImageView's top and bottom constraints to the top and bottom of the Button (which basically centres it vertically) and the same for the end constraint (or right if it's specifically meant to always be on the right, even in RTL layouts) to position it at the end. Add margin as appropriate.

But really in this case you probably just want to add an icon to the button:

<Button
    ...
    app:icon="@drawable/ic_next"
    app:iconGravity="end"
    style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
/>

(rundown of the attributes here)

user_135982220
Related