Reputation: 355

Android - Toolbar overlaps anchor

I want a ImageView to be between my toolbar and content (layouts with content). Toolbar is not expandable.

How can I achieve this?

I do it in a such way:

    <?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="wrap_content">

        <android.support.design.widget.AppBarLayout
           android:id="@+id/appBarLayout"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:theme="@style/AppTheme.AppBarOverlay">
            <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:background="?attr/colorPrimary"
               app:popupTheme="@style/AppTheme.PopupOverlay"
               app:titleTextAppearance="@style/AppTheme.ToolbarText" />
        </android.support.design.widget.AppBarLayout>

        <android.support.percent.PercentRelativeLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_marginTop="?attr/actionBarSize"
           android:orientation="vertical">

            <android.support.percent.PercentRelativeLayout
               android:id="@+id/viewB"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:background="@drawable/advantages_background"
               app:layout_heightPercent="100%">

                ....
            </android.support.percent.PercentRelativeLayout>
        </android.support.percent.PercentRelativeLayout>

        <FrameLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:layout_anchor="@id/appBarLayout"
           app:layout_anchorGravity="bottom|center">

            <ImageView
               android:id="@+id/fab"
               android:layout_width="70dp"
               android:layout_height="70dp"
               android:src="@drawable/advantages_circle" />
...
        </FrameLayout>
    </android.support.design.widget.CoordinatorLayout>

I got this (toolbar overlaps my circle):

How can I fix it?

I want ImageView (my FrameLayout) to overlap Toolbar (anchor)

Upvotes: 0

Answers (4)

Rachit

Reputation: 3235

This will work if you change your AppBarLayout to a FrameLayout

<?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="wrap_content">

        <FrameLayout
           android:id="@+id/appBarLayout"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:theme="@style/AppTheme.AppBarOverlay">
            <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:background="?attr/colorPrimary"
               app:popupTheme="@style/AppTheme.PopupOverlay"
               app:titleTextAppearance="@style/AppTheme.ToolbarText" />
        </FrameLayout>

        <android.support.percent.PercentRelativeLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_marginTop="?attr/actionBarSize"
           android:orientation="vertical">

            <android.support.percent.PercentRelativeLayout
               android:id="@+id/viewB"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:background="@drawable/advantages_background"
               app:layout_heightPercent="100%">

                ....
            </android.support.percent.PercentRelativeLayout>
        </android.support.percent.PercentRelativeLayout>

        <FrameLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:layout_anchor="@id/appBarLayout"
           app:layout_anchorGravity="bottom|center">

            <ImageView
               android:id="@+id/fab"
               android:layout_width="70dp"
               android:layout_height="70dp"
               android:src="@drawable/advantages_circle" />
...
        </FrameLayout>
    </android.support.design.widget.CoordinatorLayout>

This is what it would look like:

Upvotes: 1

Salauddin Gazi

Reputation: 1517

add app:layout_behavior="@string/appbar_scrolling_view_behavior" into FrameLayout

<?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="wrap_content">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

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

    <android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:orientation="vertical">

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_blue_dark"
            app:layout_heightPercent="100%" />
    </android.support.percent.PercentRelativeLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appBarLayout"
        app:layout_anchorGravity="bottom|center"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <ImageView
            android:id="@+id/fab"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/ic_launcher" />
    </FrameLayout>
</android.support.design.widget.CoordinatorLayout>

if your want to overlap into toolbar then add app:behavior_overlapTop="20dp"

Upvotes: 2