Adding percentage to gradients

Question

I'm trying to create an button with xml gradient code. (Because I'm a new user can't upload the image :( ) This image has two colors and corners in its edges.The color which starts the gradient will start from 15% of all gradient length and ending color ends on 75% of gradient length. I use this code to create Gradient with two colors:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item  >
    <shape  android:shape="rectangle">
        <gradient
    android:angle="-45"
    android:startColor="#64bcfb"
    android:endColor="#2f8fd4"
     android:type="linear"/>

        <corners android:radius="10dp" />
    </shape>
</item>
</layer-list>

The problem is that i don't know how to add the start percentage and the end percentage of gradient.I have some searches about this and ind some things in:

banded background with two colors?

Gradients and shadows on buttons

in both there is some solutions but i it's not work for me. The solutions is about creating a simple bar with two colors but i want to create a button that have some corners in its edges also. I cant also use the original image in my app because i need to changes its colors pragmatically. Have any body some idea about how we can add percentages in gradients?

Answer 1

This is quite old but no answer and I think I was having the issue and found a fix.

If you only need a gradient with 2 colors, a single transition and with corners, you can do the following:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <gradient
        android:angle="270"
        android:startColor="@android:color/transparent"
        android:centerColor="@android:color/transparent"
        android:centerY="0.65"
        android:endColor="@color/colorPrimary"
        android:type="linear" />
</shape>

The trick here is adding a centerColor and centerY and modifying it's center. This will allow you to modify where the transition occur.