title: Parallax effect with collapsing toolbar not working, image in header squished
body: <p>In the blog <a href="http://antonioleiva.com/collapsing-toolbar-layout/" rel="nofollow noreferrer">Design Support Library: Collapsing Toolbar Layout</a> blog article there is a header image with nice parallax effect:</p>
  
  <p><a href="https://i.stack.imgur.com/t4YMq.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t4YMq.gif" alt="app screenshot"></a></p>
  
  <p>In <a href="https://github.com/afarber/android-newbie/tree/master/MyCoordinator" rel="nofollow noreferrer">a simple test project at GitHub</a> I am trying to achieve similar effect - but for some reason the image is squished:</p>
  
  <p><a href="https://i.stack.imgur.com/EV6DV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EV6DV.png" alt="app screenshot"></a></p>
  
  <p>In the <a href="https://github.com/afarber/android-newbie/blob/master/MyCoordinator/app/src/main/res/layout/activity_main.xml" rel="nofollow noreferrer">activity_main.xml</a> I have tried all possible values for the <code>scaleType</code> but the image stays distorted:</p>
  
  <pre><code>        &lt;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" /&gt;
  </code></pre>
  
  <p>What am I missing here please?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have tried to change to <code>match_parent</code> as Apurva suggests (thanks +1):</p>
  
  <pre><code>        &lt;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" /&gt;
  </code></pre>
  
  <p>But this does not help - the header image is squished:</p>
  
  <p><a href="https://i.stack.imgur.com/ZtB7A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZtB7A.png" alt="app screenshot 1"></a></p>
  
  <p><a href="https://i.stack.imgur.com/iBMnw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iBMnw.png" alt="app screenshot 2"></a></p>