CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Shlok Jain
Shlok Jain

Reputation: 51

How to overlap elements in a ConstraintLayout in android?

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

Upvotes: 2

Views: 2553

Answers (2)

Tamir Abutbul
Tamir Abutbul

Reputation: 7651

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:

enter image description here

enter image description here

Upvotes: 2

C&#244;ng Hải
C&#244;ng Hải

Reputation: 5241

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"
         />

Upvotes: 0

Related Questions