CODEWITHSUNDEEP
androidandroid-coordinatorlayoutfloating-action-button
Ahmed Hegazy
Ahmed Hegazy

Reputation: 12605

Use Button instead of FloatingActionButton with AppBarLayout anchor in CoordinatorLayout

I have a problem with using a normal Button and setting the AppBarLayout as the anchor to that Button as the upper part of the Button is placed under the AppBarLayout. It works when using a FloatingActionButton and I have tried to set elevation and using bringToFront, but nothing works.

enter image description here

enter image description here

<?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/materialup.appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        ​​​
        <android.support.v7.widget.Toolbar
            android:id="@+id/materialup.toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="enterAlways|snap"
            style="@style/ToolBarWithNavigationBack"
            />
        ​
        <LinearLayout
            android:id="@+id/materialup.title_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="30dp"
            android:orientation="vertical"
            android:paddingTop="8dp"
            android:gravity="center"
            app:layout_scrollFlags="scroll|enterAlways|snap">
            ​
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:text="@string/title_mup_name"
                />
            ​
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:layout_marginBottom="4dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                android:text="@string/subtitle_mup"
                android:textColor="@android:color/white"
                />
            ​
        </LinearLayout>
        ​
    </android.support.design.widget.AppBarLayout>
    ​
    <android.support.v4.view.ViewPager
        android:id="@+id/materialup.viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
    ​

    <Button
        android:id="@+id/btn_submit_trip"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@+id/materialup.appbar"
        app:layout_anchorGravity="bottom|center_horizontal"
        android:text="Submit"
        />

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

Upvotes: 2

Views: 406

Answers (2)

Mohamed Ashik
Mohamed Ashik

Reputation: 362

Wrap your submit button inside Cardview and set elevation to the cardview. It will work. I used textview instead of button:

<androidx.cardview.widget.CardView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:cardElevation="4dp"
    app:layout_anchor="@+id/materialup.appbar"
    app:layout_anchorGravity="bottom|center_horizontal">

    <TextView
        android:id="@+id/btn_submit_trip"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:padding="12dp"
        android:text="Submit"
        android:textStyle="bold"/>
</androidx.cardview.widget.CardView>

Upvotes: 1

yassine
yassine

Reputation: 3

You can try two possible solutions : first try to delete the padding_bottom from your linear layout in your appbar likewise you will minimize the surface of your appbar to let the button appear. second add android:layout_marginTop to your button. Let me know if that worked, if not we can search for other options.

Upvotes: 0

Related Questions