CODEWITHSUNDEEP
androidandroid-layoutandroid-fragmentsandroid-framelayoutfloating-action-button
XeniaSis
XeniaSis

Reputation: 2354

FAB inside FrameLayout to be on top of fragments

In my layout I have a FrameLayout in which I intend to display different layouts depending on user input. I want to display a FloatingActionButton in all those layouts.

In order to not repeat the FloatingActionButton in all of them, I want to have it attached to the FrameLayout. The problem is that the button is not displayed correctly on top of the fragment layout. For example, the initial fragment displayed, has a GridView and the button is behind it.

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="xeniasis.mymarket.MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:baselineAligned="false"
        android:orientation="horizontal"
        android:weightSum="4">

        <LinearLayout
            android:id="@+id/categories_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:paddingRight="20dp">

            <ExpandableListView
                android:id="@+id/categories_listView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

        <FrameLayout
            android:id="@+id/mainPane"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/settings"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|start"
                android:layout_margin="8dp"
                android:clickable="true"
                android:elevation="5dp"
                android:src="@android:drawable/ic_menu_search" />
        </FrameLayout>
    </LinearLayout>
</LinearLayout>

and the fragment layout displayed programmatically: 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="xeniasis.mymarket.MainActivity">

        <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/swipeRefreshContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:paddingTop="@dimen/activity_vertical_margin">

            <GridView
                android:id="@+id/productsGridview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:numColumns="3"></GridView>

        </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

The result: enter image description here

Upvotes: 3

Views: 5213

Answers (5)

Aditya Aggarwal
Aditya Aggarwal

Reputation: 680

You can add the layout_gravity to the FAB, and then you can set it in any corner you want.

For Setting at right bottom:

android:layout_gravity="right|bottom"

For Setting at left bottom:

android:layout_gravity="left|bottom"

For Setting at left top:

android:layout_gravity="left|top"

For Setting at right top:

android:layout_gravity="right|top"

Upvotes: 0

sourav pandit
sourav pandit

Reputation: 9135

find your framelayout and call this methord and pass your frame layout in this method 100% it will work

    private void addFloatingButton(FrameLayout frameLayout) {
    int i20 = 20;
    int i50 = 50;
    FrameLayout.LayoutParams clFloatingButtonParams = new FrameLayout.LayoutParams(i50, i50);
    clFloatingButtonParams.setMargins(0, 0, i20, i20);
    clFloatingButtonParams.gravity = Gravity.BOTTOM | Gravity.END;
    FloatingActionButton clFloatingActionButton = new FloatingActionButton(getActivity());
    clFloatingActionButton.setId(R.id.calander_view_fab);
                 frameLayout.addView(clFloatingActionButton, clFloatingButtonParams);

      }

Upvotes: 0

saigopi.me
saigopi.me

Reputation: 14938

add FAB inside the framelayout without using coordinativelayout

   <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/framelayout"
        android:layout_below="@+id/drawer_toolbar"
        android:layout_above="@+id/drawer_foot" >
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/shareFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="8dp"
            android:clickable="true"
            android:elevation="5dp"
            android:src="@android:drawable/ic_menu_share" />
    </FrameLayout>

Upvotes: 1

Udayaditya Barua
Udayaditya Barua

Reputation: 1162

In the FrameLayout, declare another Framelayout and inflate the fragment there. It should work.

... <LinearLayout>
     .....

   <FrameLayout
        android:id="@+id/mainPane"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3">

        <FrameLayout
            android:id="@+id/fragment_inflate"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/settings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|start"
            android:layout_margin="8dp"
            android:clickable="true"
            android:elevation="5dp"
            android:src="@android:drawable/ic_menu_search" />
    </FrameLayout>

Upvotes: 7

Francesc
Francesc

Reputation: 29320

Change it like this, so that the FAB and the fragment don't share the same FrameLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="xeniasis.mymarket.MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:baselineAligned="false"
        android:orientation="horizontal"
        android:weightSum="4">

        <LinearLayout
            android:id="@+id/categories_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:paddingRight="20dp">

            <ExpandableListView
                android:id="@+id/categories_listView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

        <FrameLayout
            android:id="@+id/mainPane"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/settings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:layout_margin="8dp"
        android:clickable="true"
        android:elevation="5dp"
        android:src="@android:drawable/ic_menu_search" />

    </FrameLayout>
</LinearLayout>

Upvotes: 1

Related Questions