Placing button that overlaps two views in Android

Question

I would like to place a button like so (overlapping two views, centered):

I tried to solve the issue with a RelativeLayout and a negative margin but somehow I can't overlap the two views. Instead the button always get's placed at the bottom of the image view. Any ideas?

Thanks in advance for the help!

Here my code:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/tour_image"
            android:layout_width="match_parent"
            android:layout_height="220dp" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_marginBottom="-35dp"
            android:layout_marginEnd="16dp">

            <Button
                android:id="@+id/go_to_map_button"
                style="@style/FloatingActionButton.Light"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:drawableTop="@drawable/ic_directions_walk_color_24dp"
                android:paddingTop="12dp"
                android:text="@string/tour_button_show_map"
                android:textAllCaps="true"
                android:textAppearance="@style/p.Small"
                android:textColor="@color/primary_main" />
        </RelativeLayout>
    </RelativeLayout>

The code results in this layout:

You might also take a look at this answer:: https://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts/30990661#30990661 — Barns, Mar 27 '18 at 21:48

Ben P. · Accepted Answer · 2018-03-27T21:01:02.893

In my opinion, the best way to handle this would be to convert your existing top-level RelativeLayout into a ConstraintLayout. Developer guide for ConstraintLayout is available here: https://developer.android.com/training/constraint-layout/index.html

Once you have a top-level ConstraintLayout, you can position a view on the edge of two views by constraining your button's top and bottom to the view edge:

<android.support.constraint.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">

    <View
        android:id="@+id/top"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="#caf"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <View
        android:id="@+id/bottom"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="#fac"
        app:layout_constraintTop_toBottomOf="@+id/top"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <View
        android:id="@+id/overlap"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginRight="24dp"
        android:background="#fff"
        app:layout_constraintTop_toBottomOf="@+id/top"
        app:layout_constraintRight_toRightOf="@+id/top"
        app:layout_constraintBottom_toBottomOf="@+id/top"/>

</android.support.constraint.ConstraintLayout>

The important part of this code is that the "overlap" view has these two constraints:

app:layout_constraintTop_toBottomOf="@+id/top"
app:layout_constraintBottom_toBottomOf="@+id/top"

These are saying "match my top edge to the other view's bottom edge" and "match my bottom edge to the other view's bottom edge". Obviously that's impossible, since the view has a non-zero height, and so ConstraintLayout will automatically position it so that it is centered on the other view's edge. Further details are available in the developer guide I linked above.

This solution worked perfectly. Thank you very much for the great explanation! — Hansi Hansenbaum, Mar 28 '18 at 12:10

Placing button that overlaps two views in Android

1 Answers1