Android enlarge center color with gradient

Issue

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:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:src="@drawable/gradient_normal"/>

I tried many combinations with layer-list, but the result was not nice. One solution can be divide Layout to 50%-50% and set the first gradient from left to right (from transparent to color) and second right to left (from color to transparent), but this solution seems very complicated to me.

For example, this generator cannot enlarge the center yellow color. (There is Android XML code generator.)

Any simpler solution? Thank you.

API21+

Solution

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

Answered By - Ajil O.