title: How to position buttons on scaled background image
body: <p>Starting in Android development, i wonder how to do this layout in XML (using Android Studio), targeting 4.x Android devices.</p>
  
  <p>How to precisely position 4 buttons on a bitmap background? Should work despite bitmap scaling.</p>
  
  <p>Scenario:
  My application main screen should consist of 4 buttons placed on a bitmap. Button positioning should always look exactly like this, and the whole should scale up/down (proportional width/height) to match the screen space. A layout sketch:</p>
  
  <p><img src="https://i.stack.imgur.com/W9ZeP.png" alt="layout sketch"></p>
  
  <p>Tried solutions:</p>
  
  <ul>
  <li><p>4 Buttons in a GridLayout with background:</p>
  
  <pre><code>&lt;GridLayout
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:layout_centerHorizontal="true"
      android:orientation="horizontal"
      android:columnCount="2"
      android:rowCount="2"&gt;
  
      &lt;Button android:id="@+id/button1"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="Button1" /&gt;
  
      &lt;Button android:id="@+id/button2"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="Button2" /&gt;
  
      &lt;Button android:id="@+id/button3"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="Button3" /&gt;
  
      &lt;Button android:id="@+id/button4"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="Button4" /&gt;
  &lt;/GridLayout&gt;
  </code></pre></li>
  <li><p>4 Buttons in a GridLayout, above a ImageView in a RelativeLayout.</p></li>
  <li>One ImageView with onTouch() that checks a colorcoded bitmap. (<a href="http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/" rel="nofollow noreferrer">source here</a>)</li>
  </ul>
  
  <p>The only solution that worked ok regarding scaling is the onTouch(), but i'd rather keep using actual buttons so keyboard navigation and press/hover effects work as expected.</p>
  
  <p>How is it possible to position buttons, to have them always match scale with the bitmap?
  Thanks for any insights.</p>
  
  <p>Due to the title this question looks like a dupe but i havent found any that demonstrate how this can be accomplished.</p>