Parallax effect with collapsing toolbar not working, image in header squished

Question

In the blog Design Support Library: Collapsing Toolbar Layout blog article there is a header image with nice parallax effect:

In a simple test project at GitHub I am trying to achieve similar effect - but for some reason the image is squished:

In the activity_main.xml I have tried all possible values for the scaleType but the image stays 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 please?

UPDATE:

I have tried to change 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 this does not help - the header image is squished:

Answer 1

By default, backgrounds will stretch to fit. You should be setting the android:src rather than the android:background on your 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" />