Overlap an image view on button in a constraint layout

Question

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>

Developer Sunshine · Answer 1 · 2021-11-16T16:17:00.260

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:

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

do you have a way of using just one constraint layout to make this layout? — Kiran, Nov 16 '21 at 04:38

score 0 · Answer 2 · answered Nov 15 '21 at 18:29

0

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)

answered Nov 15 '21 at 18:29

cactustictacs

17,935
2
14
25

Do check my question again. I have implemented as you mentioned in your answer but now the button overlaps the image view. Can you help? – Kiran Nov 16 '21 at 05:56
@Kiran try giving the icon an elevation (``android:elevation``), ``2dp`` might work but check the button doesn't elevate above it when you press it. Again, you probably just want to add an icon to the button itself, it provides that functionality and avoids weird behaviour! – cactustictacs Nov 16 '21 at 12:40
Actually, the image needs to have a different background color than the buttons so I am adding an image view over the button. – Kiran Nov 17 '21 at 06:40

Overlap an image view on button in a constraint layout

2 Answers2