CODEWITHSUNDEEP
androidandroid-layoutandroid-collapsingtoolbarlayoutandroid-relativelayout
Bernardo Peters
Bernardo Peters

Reputation: 163

How to nest a RelativeLayout inside a CollapsingToolbarLayout? (Bottom of the RelativeLayout is being cropped)

I'm trying to put a RelativeLayout inside the CollapsingToolbarLayout. I started with the Scrolling Activitity template. The final structure looks something like this:

<AppBarLayout>
    <CollapsingToolbarLayout>
        <RelativeLayout>
            <ImageView android:layout_alignParentBottom="true"/>
        </RelativeLayout>
        <Toolbar/>
    </CollapsingToolbarLayout>
</AppBarLayout>

I realized that the ImageView is being "cropped". It needs a layout_marginBottom of approximately 25dp to appear full size. I could use this magic number, but I would prefer to solve this problem properly, because the ImageView is a small circle to indicate the ViewPager and any small variation could hide it. It is interesting to mention that the xml layout properly shown in the preview window, but on the emulator I need this margin. So, any ideas of how I can solve this problem?

The full xml layout is the following one:

<?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="com.example.attemptscrolling.ScrollingActivity">

    <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/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src=    "@drawable/ic_circle"/>

                <ImageView
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="25dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_circle"/>

            </RelativeLayout>

            <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>

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

    <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"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

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

Upvotes: 0

Views: 1093

Answers (1)

Ben P.
Ben P.

Reputation: 54234

Short answer:

Add this attribute to your RelativeLayout:

android:fitsSystemWindows="true"

Longer answer:

The root of your layout (the CoordinatorLayout) specifies android:fitsSystemWindows="true". This will cause the system to add top padding to that view to make its contents dodge the system bar at the top of the screen.

This top padding affects all the children of the CoordinatorLayout, including your RelativeLayout. Since it is being pushed down by ~25dp (the size of the system bar), your image appears cropped.

By adding the attribute to your RelativeLayout as well, the system will re-adjust it for you and the problem will disappear.

Upvotes: 2

Related Questions