title: Selector TabBackground often does not apply all the layer-lists' width as you select/deselect the TabItems in a TabLayout
body: <p>I have a <code>TabLayout</code> with a selector as its indicator background, like so:</p>
  
  <pre><code>&lt;android.support.design.widget.TabLayout
      android:id="@+id/custom_indicator"
      android:layout_width="wrap_content"
      android:layout_height="3dp"
      android:layout_gravity="bottom|center"
      app:tabBackground="@drawable/dashpageindicator"
      app:tabMinWidth="5dp"
      app:tabMaxWidth="15dp"
      app:tabGravity="fill"
      app:tabIndicatorHeight="0dp"
      app:tabMode="scrollable"
      android:layout_marginBottom="24dp"
      app:tabPaddingStart="0dp"
      app:tabPaddingEnd="0dp"&gt;
  </code></pre>
  
  <p>The drawable <code>dashpageindicator</code> is this one:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:drawable="@drawable/indicator_dash_selected"
      android:state_selected="true" /&gt;
      &lt;item android:drawable="@drawable/indicator_dash_unselected" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p><code>indicator_dash_selected</code> and <code>indicator_dash_unselected</code> are <code>layer-list</code>s with differing width and height, like so:</p>
  
  <p><code>indicator_dash_selected</code></p>
  
  <pre><code>&lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:start="1dp" android:end="1dp"&gt;
          &lt;shape
              android:innerRadius="0dp"
              android:shape="rectangle"
              android:thickness="2dp"
              android:useLevel="false"&gt;
          &lt;size android:height="2dp" android:width="12dp" /&gt;
          &lt;solid android:color="@color/default_text_color"/&gt;
          &lt;padding android:left="0dp" android:right="0dp" /&gt;
      &lt;/shape&gt;
  &lt;/item&gt;
  </code></pre>
  
  <p><code>indicator_dash_unselected</code></p>
  
  <pre><code>&lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:start="1dp" android:end="1dp"&gt;
          &lt;shape
              android:innerRadius="0dp"
              android:shape="rectangle"
              android:thickness="2dp"
              android:useLevel="false"&gt;
          &lt;size android:height="0.5dp" android:width="4dp" /&gt;
          &lt;solid android:color="@color/default_text_color"/&gt;
          &lt;padding android:left="0dp" android:right="0dp" /&gt;
      &lt;/shape&gt;
  &lt;/item&gt;
  </code></pre>
  
  <p>I intend that when a particular <code>ViewPager</code> item is selected, the tab item is supposed to grow like so:</p>
  
  <p><a href="https://i.stack.imgur.com/yCqvU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yCqvU.png" alt="Selected tab indicator (1) must be this big"></a></p>
  
  <p>However, when I swipe to the other tabs, they <em>often</em> do not grow in <code>width</code>. Instead they:</p>
  
  <p><a href="https://i.stack.imgur.com/f5Wqg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f5Wqg.png" alt="What actually happens"></a></p>
  
  <p>All the attributes of the <code>layer-list</code>s work fine except for its <code>size</code>'s <code>width</code></p>
  
  <p>I say <em>often</em> because sometimes, it works perfectly. Second tab grows to the expected width and height if second tab is selected. Third tab grows if it's the one selected, and so on. But most often, no.</p>
  
  <p>Also, whenever it works as it rarely does, I notice several seconds of delay. Meaning, the selected tab's background remains as <code>indicator_dash_unselected</code> for several seconds or minutes before becoming <code>indicator_dash_selected</code></p>
  
  <p>I also noticed that the <code>selector</code> works after waiting for a couple of seconds by:</p>
  
  <ol>
  <li>Going to a new <code>Activity</code></li>
  <li>Going back to the <code>Activity</code> housing the
  <code>TabLayout</code> and <code>ViewPager</code></li>
  </ol>
  
  <p>Like so:</p>
  
  <p><a href="https://i.stack.imgur.com/7Xlo3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Xlo3.png" alt="How it&#39;s supposed to happen."></a></p>
  
  <p><strong>Nota bene:</strong> <code>TabLayout</code> is in a <code>CoordinatorLayout</code> together with a <code>ViewPager</code> and a <code>ConstraintLayout</code> that <code>fitsSystemWindows</code>.</p>
  
  <p>Any help or insight would be appreciated.</p>
  
  <p><strong>PROGRESS:</strong> Acting on @Dhananjay's advice to put both <code>layer-list</code>s inside the <code>selector</code> <code>items</code>, this solution does not work either:</p>
  
  <pre><code>&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:state_selected="true" &gt;
          &lt;layer-list&gt;
              &lt;item android:start="1dp" android:end="1dp"&gt;
                  &lt;shape
                      android:innerRadius="0dp"
                      android:shape="rectangle"
                      android:thickness="2dp"
                      android:useLevel="false"&gt;
                      &lt;size android:height="2dp" android:width="12dp" /&gt;
                      &lt;solid android:color="#ffffff"/&gt;
                      &lt;padding android:left="0dp" android:right="0dp" /&gt;
                  &lt;/shape&gt;
              &lt;/item&gt;
          &lt;/layer-list&gt;
      &lt;/item&gt;
      &lt;item android:state_selected="false" &gt;
          &lt;layer-list&gt;
              &lt;item android:start="1dp" android:end="1dp"
                  android:top="1dp" android:bottom="1dp"&gt;
                  &lt;shape
                      android:innerRadius="0dp"
                      android:shape="rectangle"
                      android:thickness="1dp"
                      android:useLevel="false"&gt;
                      &lt;size android:height="0.5dp" android:width="4dp" /&gt;
                      &lt;solid android:color="#ffffff"/&gt;
                      &lt;padding android:left="4dp" android:right="4dp" /&gt;
                  &lt;/shape&gt;
              &lt;/item&gt;
          &lt;/layer-list&gt;
      &lt;/item&gt;
  &lt;/selector&gt;
  </code></pre>