CODEWITHSUNDEEP
android
Mukund Srivathsan
Mukund Srivathsan

Reputation: 151

Floating action button in top of Bottom Bar

how do I have floating action button on top of the bottom bar / Navigation bottom view like how it is shown in the picture ! Please help me !

AnchorImage

Upvotes: 9

Views: 15865

Answers (3)

user7451086
user7451086

Reputation:

You can use FloatingActionButton attributes in xml.

Set FloatingActionButton layout_anchor (the view's id you want to attach) and layout_anchorGravity.

Upvotes: 0

Abu Faisal
Abu Faisal

Reputation: 398

You need to use elevation attribute of the FloatingActionButton.

elevation="8dp" worked for me.

Sample Layout:

<FrameLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:id="@+id/message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="@string/title_home" />

    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="40dp"
        android:clickable="true"
        app:elevation="8dp"
        app:srcCompat="@android:drawable/ic_input_add" />

</FrameLayout>

Upvotes: 16

IAmGroot
IAmGroot

Reputation: 13865

That bottom bar is something they have created in their app. It is not the functional (Home/Back/App) buttons of the android itself.

As such, like any view, it is more than easy to put views on top of one another.

This can be accomplished with a Relative layout

Another thing to note, is via android studio, one of the android activity templates actually creates an example of a hovering button similar to that shown in your picture. Use the wizard to create the activity, then move the button if required.

enter image description here

Upvotes: 1

Related Questions