Android enlarge center color with gradient

Question

I can not enlarge the width of a centeral color with a gradient.
The goal is:

Larger center with some color, and transparent on sides.

Usage:

Answer 1

I hope this is what you had in mind. I am using layer-list. I have used "@color/colorAccent" for either end. Change it to "#0FFF" to get a transparent color, which was required in the question.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="50dp">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="@color/colorPrimary"
                android:endColor="@color/colorAccent"
                android:centerColor="@color/colorPrimary"
                android:centerX="10%"/>
            <size
                android:height="100dp"
                android:width="50dp"/>
        </shape>
    </item>
    <item
        android:right="50dp">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="@color/colorAccent"
                android:endColor="@color/colorPrimary"
                android:centerColor="@color/colorPrimary"
                android:centerX="80%"/>
            <size
                android:height="100dp"
                android:width="50dp"/>
        </shape>
    </item>
</layer-list>

Play around with the android:centerX attributes till you get what you want.

OUTPUT

This is what the drawable preview looks like with centerX at 10% and 80%

now with centerX at 60% and 40%

EDIT

To get the same effect in a layout that uses match_parent as the layout_width parameter, split the gradient into two drawables and set it as background for 2 different ImageViews or FrameLayouts

left_gradient.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#0FFF"
        android:centerColor="#000"
        android:centerX="50%"
        android:endColor="#000"/>
</shape>

right_gradient.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#000"
        android:centerColor="#000"
        android:centerX="50%"
        android:endColor="#0FFF"/>
</shape>

In your Layout xml file

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="15dp"
    android:baselineAligned="false">
    <FrameLayout
        android:layout_width="0dp"
        android:background="@drawable/left_gradient"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    <FrameLayout
        android:layout_width="0dp"
        android:background="@drawable/right_gradient"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
</LinearLayout>

Like with the previous case, tweak around with the values in android:centerX of both the gradient files to get the desired result