title: ConstraintLayout: Overlap ImageView on Toolbar and set image Height based on width by GuideLine
body: <h2>I want to achieve these points (first image):</h2>
  
  <ul>
  <li><p><code>Toolbar</code> height must be 35% of screen height</p></li>
  <li><p>The center of <code>ImageView</code> must be placed on the bottom of <code>Toolbar</code> (shown in image)</p></li>
  <li>Width of <code>ImageView</code> must be 33% of screen width</li>
  <li>The ratio of <code>ImageView</code> must be 1:1 (resize based on screen size)</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/QIIzR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QIIzR.png" alt="enter image description here"></a></p>
  
  <h2>My code is:</h2>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
      &lt;android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          tools:context="io.inov.nepalwaterapp.UserProfileActivity"&gt;
  
          &lt;android.support.constraint.Guideline
              android:id="@+id/guidelineToolbarHeight"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              app:layout_constraintGuide_percent=".35" /&gt;
  
          &lt;android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="0dp"
              android:layout_height="0dp"
              android:background="@color/colorPrimary"
              android:theme="@style/ThemeOverlay.MyApp.ActionBar"
              app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toTopOf="parent"&gt;
  
          &lt;/android.support.v7.widget.Toolbar&gt;
  
  &lt;android.support.constraint.Guideline
              android:id="@+id/guidelineImageStart"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              app:layout_constraintGuide_percent=".33" /&gt;
  
          &lt;android.support.constraint.Guideline
              android:id="@+id/guidelineImageEnd"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              app:layout_constraintGuide_percent=".66" /&gt;
  
          &lt;ImageView
              android:id="@+id/imageView"
              android:layout_width="0dp"
              android:layout_height="0dp"
              android:src="@drawable/avatar_diver"
              app:layout_constraintDimensionRatio="h,1:1"
              app:layout_constraintBottom_toBottomOf="@id/toolbar"
              app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
              app:layout_constraintRight_toRightOf="@id/guidelineImageEnd"
              app:layout_constraintTop_toBottomOf="@id/toolbar" /&gt;
  
      &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <h2>Result of above code is:</h2>
  
  <p><a href="https://i.stack.imgur.com/onv87.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/onv87.png" alt="enter image description here"></a></p>
  
  <p>Please help me to find the problem.</p>
  
  <p>Thanks.</p>