Overlap an image view on button in a constraint layout-CodePudding

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: Button

CodePudding user response：

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"

Example code:

 <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@ id/clMain11"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        android:padding="10dp">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@ id/btnLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cornerRadius="10dp"
                android:text="LOGIN"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>
        </androidx.constraintlayout.widget.ConstraintLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            app:layout_constraintEnd_toEndOf="@ id/btnLogin"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:src="@drawable/ic_next"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

CodePudding user response：

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)