Parallax effect with crumbling toolbar not working, image in header squished
The blog post Design Support Library: Collapsing Toolbar Layout in the blog post has an image with nice parallax effect:
Into a simple test project on GitHub I'm trying to achieve a similar effect, but for some reason the image is compressed:
In activity_main.xml I have tried every possible value for scaleType
, but the image remains distorted:
<ImageView
android:id="@+id/header_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/header"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
What am I missing here?
UPDATE:
I tried changing to match_parent
, as Apurva suggests (thanks +1):
<ImageView
android:id="@+id/header_image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/header2"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
But that doesn't help - the header image is compressed:
source to share
By default, backgrounds will stretch to fit. You must install android:src
, not android:background
on ImageView
.
<ImageView
android:id="@+id/header_image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/header2"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
source to share
Did you mention which in the tutorial the author is using SquareImageView
?
He overridden the method onMeasure
:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
setMeasuredDimension(width, width);
}
The class is implemented here
source to share