How to overlap elements in a ConstraintLayout in android?

Question

I have looked at many links referring to overlapping elements in android-studio but I cannot find a solution to help me overlap my floating action button over my bottom navigation bar.

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="44dp"
        app:layout_constraintBottom_toTopOf="@+id/nav_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"

        android:foregroundGravity="center"
         />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

End Result

Check this link this may be help you https://stackoverflow.com/questions/4182486/placing-overlappingz-index-a-view-above-another-view-in-android — Jignesh Mayani, Jun 12 '20 at 10:58

Tamir Abutbul · Answer 1 · 2020-06-14T07:21:59.353

With constraintLayout you can create view overlapping another view like this:

<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">


<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Bottom nav bar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:background="@color/colorAccent"
    app:layout_constraintHeight_percent="0.2"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="FAB"
    android:background="@color/colorPrimary"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintEnd_toEndOf="@+id/button3"
    app:layout_constraintStart_toStartOf="@+id/button3"
    app:layout_constraintTop_toTopOf="@+id/button3" />

</android.support.constraint.ConstraintLayout>

It will look like this:

can you add the blueprint for the same? – Shlok Jain Jun 14 '20 at 07:16 — Shlok Jain, Jun 14 '20 at 07:16

score 0 · Answer 2 · answered Jun 12 '20 at 11:27

Try this, you should anchor top and bottom of FloatingActionButton in top of BottomNavigationView

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="44dp"
        app:layout_constraintBottom_toTopOf="@+id/nav_view"
        app:layout_constraintTop_toTopOf="@+id/nav_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
         />

How to overlap elements in a ConstraintLayout in android?

2 Answers2