Search code examples
androidandroid-layoutfloating

Floating button between action bar and Frame Layout

I want something like this:

enter image description here

I have the following now:

enter image description here

With the following XML:

<?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_height="130dp"
            android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:toolbarId="@+id/toolbar"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

                app:contentScrim="?attr/colorPrimary">
            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_width="match_parent">

            </android.support.v7.widget.Toolbar>

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

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

    <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

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

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@android:drawable/ic_input_add"
            android:layout_margin="16dp"
            android:clickable="true"
            android:focusable="true"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|end"/>

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

But I have some problems:

  1. The Title is on top instead of bottom
  2. There's something like a separator on top

I'm using a coordinator now, but I don't need a collapsing toolbar, so I think that there must be another solution maybe. How can I solve this?

Solution

  • Let's first start by making the toolbar taller. I think what you're looking for is CollapingToolbarLayout

    To use the CollapsingToolbarLayout you have to change your ConstraintLayout to CoordinatorLayout. Then you have to create an AppBarLayout to hold the CollapsingToolbarLayout and the Toolbar.

    Then to make the floating button in that place you have to anchor it to the AppBarLayout created earlier like below:

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:clickable="true"
        android:src="@drawable/message" 
        android:focusable="true" 
        app:elevation="30dp"/>

    That way it will be anchored to the AppBarLayout so it will go up and down as the AppBarLayout goes up or down.

    EDIT #1 :

    To remove the title from the top and remove the separator you have to set your activity's theme to NoActionBar. In your AndroidManifest.xml file go to your activity and change its code to the following:

    <activity
        android:name="YOUR_ACTIVITY_PATH.BookDetailActivity"
        android:theme="@style/AppTheme.NoActionBar" />

    This way the activity will be declared without an action bar which means no separator and no title.

    Then to add the title to the bottom you just have to set the title of the CollapsingToolbarLayout to the text you want.

    You can set it in the xml with app:title="YOUR_TITLE" attribute or you can set it programmatically by calling the function setTitle("YOUR_TITLE") for your CollapsingToolbarLayout variable .

    Here is what the full code could look like:

    <?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BookDetailActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:title="YOUR_TITLE"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="0dp" 
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp" 
        app:layout_constraintStart_toStartOf="parent" 
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp" 
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp" 
        app:layout_constraintEnd_toEndOf="parent" 
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" 
        android:id="@+id/book_detail">
    </FrameLayout>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:clickable="true"
        android:src="@drawable/message" 
        android:focusable="true" 
        app:elevation="30dp"/>


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

    EDIT 2:

    In your activity set your action bar by this : setSupportActionBar(YOUR_TOOLBAR_VARIABLE) then you can use getSupportActionBar().setDisplayHomeAsUpEnabled(true)

    Note that the toolbar should be the id of this one: android.support.v7.widget.Toolbar so in our case the toolbar with the id toolbar