Choletski Choletski - 1 year ago 57
Android Question

layout_anchor between toolbar and layout

I want a view to be anchored between AppBarLayout and layout. I get this behavior only on Android Studio editor, but on real device is different like so:
enter image description here

I am really confused. My code is:

<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"
tools:context="view.activity.MainActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/bar_layout"
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" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="84dp"
android:layout_marginTop="@dimen/activity_vertical_margin">

<!--views on toolbar-->

</RelativeLayout>

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

<include layout="@layout/activity_home_content" />

<RelativeLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="@dimen/activity_horizontal_margin"
android:background="@drawable/circle_accent"
app:layout_anchor="@+id/whole_layout"
app:layout_anchorGravity="top|start">

<!--img view-->
</RelativeLayout>

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


and 'activity_home_content'

<LinearLayout 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:id="@+id/whole_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="view.activity.MainActivity"
tools:showIn="@layout/activity_home_toolbar">


<!--some other views-->

</LinearLayout>

Answer Source

Just tried it. As I mentioned in the comments, your whole_layout is a LinearLayout with elevation 0dp. Any element you anchor to this LinearLayout will receive an elevation of 0dp (same as the view you are anchoring to) by default. This means that the RelativeLayout will have an elevation of 0dp.

The AppBarLayout has an elevation of 4dp, so by default the RelativeLayout will always be drawn below it.

The Fix

Give an elevation to the relative layout that is greater than or equal to 4. This will fix your problem, except that the RelativeLayout will now cast a shadow too.

Here is the code for the RelativeLayout

<RelativeLayout
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_marginStart="@dimen/activity_horizontal_margin"
    android:background="@drawable/circle_accent"
    app:layout_anchor="@+id/whole_layout"
    app:layout_anchorGravity="top|start"
    android:elevation="4dp">

    <!--img view-->

</RelativeLayout>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download