I am struggling to create collapsing image header alongside Constraint where my design looks like this
Currently the profile pic is a part of the ConstraintLayout
because it needs Guideline constraints and unfortunately it is overlapped by the AppBarLayout
Any ideas how to achieve that? Can't find any source regarding my combination of layouts.....
<?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="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/playerViewBg"
android:fitsSystemWindows="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/bgIV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="@drawable/header_bg" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/playerIV"
android:layout_width="177dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="62dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/profilePic"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<!-- Other content -->
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.27" />
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.73" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
Following is the snippet of my working layout:
Please make sure that you haven't make any childview height to match parent(0 dp) inside constrianlayout also for scroll view android:fillViewport="true"
. Ask me if any doubt Occur.
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:fitsSystemWindows="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ivImagec"
android:layout_width="wrap_content"
android:layout_height="@dimen/_90sdp"
android:contentDescription="@string/no_des"
android:scaleType="centerCrop"
app:srcCompat="@drawable/outdoorgames" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/_90sdp"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/cvLayout"
android:animateLayoutChanges="true">
....
</android.support.constraint.ConstraintLayout>