FloatingActionButton正在占用屏幕的宽度

Question

More Android Layout woes for the android newbie. I have been trying to learn android programming, and for the most part it is easy(ish), the hardest part is the layout. I have a Tab layout right now that is the "home" view, and on that view I need a floating action button. For some reason the floating action button is taking up the entire width of the screen. The button itself is the correct size, however the layout cuts off the bottom of the screen. I have followed a few tutorials and no matter what I do it always takes the entire width cutting off the bottom of my screen. Screenshot attached of it running in an emulator from Android Studio. The layout is here...

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.google.firebase.quickstart.auth.HomeActivity"
    android:orientation="vertical">
    <!--<android.support.design.widget.AppBarLayout-->
        <!--android:id="@+id/appbar"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:paddingTop="8dp"-->
        <!--android:theme="@style/AppTheme.AppBarOverlay">-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>
    <!--</android.support.design.widget.AppBarLayout>-->
    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:scaleType="center"
        android:padding="8dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="8dp"
        android:elevation="8dp"
        android:tint="@color/white"
        app:srcCompat="@drawable/ic_add"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primaryLightColor" />
</LinearLayout>

I am filling the view with Fragments and such, but I don't think that would be the problem. Can anyone see why the FloatingActionButton isn't floating, but instead acting as a full linear layout? Thank you so much for the help.

Answer 1

use coordinate Layout for showing floating action button:

Remove floating action Button from your XML code and your XML code should be like this :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="info.androidhive.fab.MainActivity">


    <include layout="@layout/your_current_layout" /> // your current xml code layout

    <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_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Answer 2

You need tu add the FAB only in the home layout:

<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:src="@drawable/ic_add"
        android:layout_gravity="bottom|end"/>