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>

My app Looks like this

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

i want to set image overlap the app bar like movie poster like play store app

check accepted answer. instead of fab used over there, use your imageview http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts — karan, Dec 21 '16 at 06:45
not working as expected its of course overlap the AppBar but when scroll down it's still Float on the screen not disappear like Fab — Mohamed Mohy, Dec 21 '16 at 07:36

score 3 · Answer 1 · edited Jul 06 '18 at 18:34

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>

score -1 · Answer 2 · answered Dec 22 '16 at 06:51

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.

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

2 Answers2

Linked