android put button at edge of view

Question

I'm trying to add a floating action button on the corner of an image view as such. I have looked over all the current solutions on stackoverflow, but the answers I came across were not detailed and only contained broad information like "use layout anchor" or "use frame layout". How would I go about doing this? By the way, the root layout I am using is a constraint layout.

Answer 1

You can wrap both in a ConstraintLayout and manipulate the constraints to the fab top & bottom.

But this isn't enough to have the button engaged in the image, so, you can add handle this by scaling the FAB and/or image with android:scaleX & android:scaleY and set the FAB size to be mini with app:fabSize="mini"

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#0E153A">

    <ImageView
        android:id="@+id/image"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@drawable/rect_frame"
        android:scaleX="1.1"
        android:scaleY="1.1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:backgroundTint="#3D5AF1"
        app:fabSize="mini"
        app:borderWidth="0dp"
        app:layout_constraintBottom_toBottomOf="@id/image"
        app:layout_constraintEnd_toEndOf="@id/image"
        app:layout_constraintStart_toEndOf="@id/image"
        app:layout_constraintTop_toBottomOf="@+id/msimageg"
        app:srcCompat="@drawable/ic_baseline_edit_24"
        app:tint="#FFF" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Output: Code Output

layout file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#255177">

<!--Image code-->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/round_box"
        android:src="@drawable/demo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="20dp"
        app:layout_constraintBottom_toBottomOf="@id/imageView"
        app:layout_constraintEnd_toEndOf="@id/imageView"
        app:layout_constraintStart_toEndOf="@id/imageView"
        app:layout_constraintTop_toBottomOf="@id/imageView">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:background="@mipmap/edit_pro" />
    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

You say you are using constraint layout so you can set the button to the bottom right of that grey background view.

In the XML for your view, make sure the button comes after your grey view in the XML file and set the button's constraint layout attributes (I've given arbitrary values for layout_width and layout_height:

...

<View
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:id="@+id/backrgoundGreyView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="@id/headerMenuButton"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="20dp"
    android:layout_height="20dp"
    app:layout_constraintStart_toEndOf="@id/backgroundGreyView"
    app:layout_constraintEnd_toEndOf="@id/backgroundGreyView"
    app:layout_constraintTop_toBottomOf="@id/backgroundGreyView"
    app:layout_constraintBottom_toBottomOf="@id/backgroundGreyView"/>

...

Answer 4

You can use attributes: layout_anchor and layout_anchorGravity but it works only inside CoordinatorLayout

Sample:

  <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    android:orientation="vertical">


<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:srcCompat="@tools:sample/avatars" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/imageView"
    app:layout_anchorGravity="end|bottom" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

It will looks like: