Linear Gradient CenterX
<p>I am trying to make a transparent gradient background for a button, something like this:</p>

<p>(The start color is not grey but transparent)</p>

<p><a href="https://i.stack.imgur.com/Itir3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Itir3.png" alt="Desired gradient"></a></p>

<p>But I am getting this:
(where white portion is too narrow)</p>

<p><a href="https://i.stack.imgur.com/1Ue2l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Ue2l.png" alt="enter image description here"></a></p>

<p>This is my gradient.xml:</p>

<pre><code>&lt;!-- Here centerX does not work --&gt;
&lt;shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"&gt;

    &lt;gradient
        android:centerX="30%"
        android:startColor="@android:color/transparent"
        android:endColor="@android:color/white"/&gt;

&lt;/shape&gt;
</code></pre>

<p>I have also tried adding a <code>centerColor</code>, but then the transparent area turns to grey!</p>

<pre><code>&lt;!-- Here the startColor turns greyish --&gt;
&lt;shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"&gt;

    &lt;gradient
        android:centerColor="@android:color/white"
        android:centerX="30%"
        android:endColor="@android:color/white"
        android:startColor="@android:color/transparent" /&gt;

&lt;/shape&gt;
</code></pre>

<p>Thanks in advance!</p>