title: How to merge two Drawables dynamically in Android?
body: <p>so I have two different <code>Drawables</code> which I need to merge and get a single <code>Drawable</code> at runtime. I want the first <code>Drawable</code> to be at the top and the other one at the bottom. I came across <code>LayerDrawable</code> and it looks like it's exactly what I need, but I'm having trouble trying to arrange the <code>Drawables</code>.</p>
  
  <p>So I have an <code>ImageButton</code> which is 48x48 <code>dp</code> and this is where the final <code>Drawable</code> goes. The first <code>Drawable</code> is a plus button (20x20 <code>dp</code>) and the second one is a small dot (4x4 <code>dp</code>) below the plus button.</p>
  
  <p>The plus button <code>Drawable</code> is loaded using font glyphs. I'm creating the dot button <code>Drawable</code> using this xml snippet:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;shape xmlns:android="http://schemas.android.com/apk/res/android" 
         android:shape="oval"&gt;
      &lt;solid
          android:color="@color/white_40"/&gt;
      &lt;size
          android:width="4dp"
          android:height="4dp"/&gt;
  &lt;/shape&gt;
  </code></pre>
  
  <p>My first approach was to just add both <code>Drawables</code> to the <code>LayerDrawable</code>, but when I do that, the width/height attributes of the dot specified in the xml are ignored, and it stretches to cover the plus icon.</p>
  
  <pre><code>LayerDrawable finalDrawable = new LayerDrawable(new Drawable[] {plusIcon, dotIcon});
  </code></pre>
  
  <p>The above results in this:<br/>
  <a href="https://i.stack.imgur.com/UyuMW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UyuMW.png" alt=""></a>
  <br/><br>
  <br/></p>
  
  <p>The second approach I tried was by using <code>setLayerInset</code> to try and position the two <code>Drawables</code>. </p>
  
  <pre><code>    LayerDrawable finalDrawable = new LayerDrawable(new Drawable[] {plusIcon, dotIcon});
      finalDrawable.setLayerInset(0, 0, 0, 0, 0);
      finalDrawable.setLayerInset(1, dp(22), dp(44), dp(22), 0);
  </code></pre>
  
  <p>The above code snippet ended up placing the dot in the correct position, but it also started affecting the position and size of the plus button and it ended up looking like this: <br/>
  <a href="https://i.stack.imgur.com/8ki5V.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8ki5V.png" alt="enter image description here"></a></p>
  
  <p>But what I really want is to have the plus button in the centre of the <code>ImageButton</code> and the plus icon just below it. Does anyone have an idea where I'm going wrong and how can I position the two drawables correctly?</p>
  
  <p>PS: My app supports API 15+, so I can't use a bunch of methods from <code>LayerDrawable</code>'s API like <code>setLayerGravity</code>, `setPaddingMode, etc.</p>