CODEWITHSUNDEEP
androidfloating-action-button
itin
itin

Reputation: 450

How we can put Floating action button on top of any layout

I am doing some operation on floating action button . I have a list view and showing google ad at bottom of my screen, The floating action button is showing at same place (bottom|end). so action button is hiding the ad.

I want shift the Floating action button little above the ad linear layout.

Please have a look the image: enter image description here

My code is look like:

<android.support.design.widget.FloatingActionButton
     android:id="@+id/fab"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_margin="@dimen/fab_margin"
     android:layout_alignParentBottom="true"
     android:layout_alignParentEnd="true"
     android:layout_alignParentRight="true"
     android:layout_gravity="bottom|end"
     android:src="@drawable/fav"
     android:adjustViewBounds="false" />


adLayoutId is ad layout id

Please help.

Thanks in advance.

Upvotes: 3

Views: 14756

Answers (6)

Shashank jethat
Shashank jethat

Reputation: 1

Here's the entire code I used for the floatingactionbutton:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabCradleMargin="10dp"
    android:backgroundTint="@color/bg_bottomnav"
    app:fabCradleRoundedCornerRadius="10dp"
    app:fabCradleVerticalOffset="10dp">

    <!-- Bottom Navigation View -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        android:background="@android:color/transparent"
        app:menu="@menu/bottom_menu"
        app:itemIconTint="@color/bottomicon_color"
        app:tint="@color/white"
        android:backgroundTint="@color/white"/>

</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/floatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/app_name"
    android:layout_marginBottom="60dp"
    android:src="@drawable/baseline_add_circle_24"
    app:layout_anchor="@id/bottomAppBar"
    app:tint="@color/white"
    android:backgroundTint="@color/bottomicon_color"/>
    
    <View
    android:id="@+id/snackbar"
    android:layout_width="0dp"
    android:layout_height="25dp"
    android:layout_marginTop="252dp"
    android:layout_marginBottom="8dp"
    android:layout_alignParentBottom="true"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Upvotes: 0

carloswm85
carloswm85

Reputation: 2397

These two lines inside the fab button helped me solved this problem:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"

Here's the entire code I used for the button alone:

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_newStudent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:contentDescription="@string/todo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_baseline_add_24" />

Upvotes: 1

user3156040
user3156040

Reputation: 751

THESE TWO LINES ARE IMPORTANT.

android:layout_alignParentEnd="true"

android:layout_alignParentBottom="true"

Upvotes: 0

Timur
Timur

Reputation: 176

You should use RelativeLayout, and as we know, later children in a RelativeLayout tend to float over earlier children in a RelativeLayout.

So, to have a FAB float over of any layout, make sure that the FAB is defined after all views (at the end of the XML layout).

If you use android:layout_margin="@dimen/fab_margin" the best way to manipulate FAB is set dependencies between views, for example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/adLayoutId"/>

    <LinearLayout
        android:id="@+id/adLayoutId"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/black"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/adLayoutId"
        android:layout_alignParentRight="true"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/fav"/>
</RelativeLayout>

Floating action button always will be above the ad linear layout, and independent from ad layout size. Hope it helps.

Upvotes: 8

Saint
Saint

Reputation: 11

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="100dp"
        android:layout_marginRight="30dp"
       />

Upvotes: 1

Ephraim Kigamba
Ephraim Kigamba

Reputation: 158

Add a bottom Margin of 55dp which is the size of Admob Banners

This line in either the floating button or enclosing layout.

android:layout_marginBottom="55dp

Upvotes: -1

Related Questions