How i can set a part of image overlap the app bar

Question

I wrap the Toolbar inside CollapsingToolbarLayout to create the collapsing toolbar effect with image so the Toolbar responsive to scroll events using a container layout AppBarLayout

i want to add another image the top part of it overlap the app bar like the poster movie image in play store app and the lower part of image overlap the content layout

my code is look like this

<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:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|snap">


        <ImageView
            android:layout_width="match_parent"
            android:layout_height="220dp"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/scarlett_johansson"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/app_name"
            android:textSize="40sp" />

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

I want to add another ImageView overlap the app bar like movie poster in play store app

Answer 1

You have to do like this

<android.support.design.widget.CoordinatorLayout> 
  <android.support.design.widget.AppBarLayout>     
    <android.support.design.widget.CollapsingToolbarLayout>          
        <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>

  <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:behavior_overlapTop="52dp"
    app:expandedTitleMarginBottom="70dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
   </RelativeLayout>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Answer 2

Try the following code for CollapsingToolbarLayout :

<android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|snap">




        <RelativeLayout
            android:layout_width="match_parent"
            android:background="#ffff"
            app:layout_collapseMode="parallax"
            android:layout_height="280dp">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="220dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/d"
                android:id="@+id/img"
                app:layout_collapseMode="parallax" />

            <View android:layout_height="90dp"
                android:layout_width="60dp"
                android:background="#dd7788"
                android:gravity="top"
                android:layout_alignBottom="@id/img"
                android:layout_marginBottom="-30dp"
                android:layout_marginLeft="10dp"/>

        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:gravity="top"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"
            app:layout_collapseMode="pin" />

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

You have to replace the View with ImageView you want. hope it will help.