I was wondering how can we create a gradient overlay which colours are extracted from a image.

Like Resso home track player does.

It's really going to be interesting

CodePudding user response：

I assume you wanted to have a background gradient effect, to make this do these steps:

1. Go to res -> drawable -> Right click on the folder and then select New -> Drawable Resource File

2. Make a file name "gradient_background" and then press OK

3. Add <item>, <shape> and then <gradient>, example:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="#4e54c8"
                android:endColor="#8f94fb"
                android:type="linear" />
        </shape>
    </item>
</selector>

4. Adjust what type of the gradient effect you want to make, it can be a linear, radial, sweep and so on.

Full documentation: https://learntodroid.com/how-to-add-a-gradient-background-to-an-android-app/

CodePudding user response：

To make a gradient that you will use as background, you can follow these simple steps

1. Go to res -> drawable, right click and select New -> Drawable Resource file.
2. Name the file anything you want example "background_gradient"
3. On Root element: type shape and create the file.
4. Add gradient element inside the shape element. You will have something like this below

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><gradient android:startColor="@color/your_start_color" android:endColor="@color/your_end_color" android:angle="0" android:type="linear"/></shape>

The gradient element comes with attribute that will define what you want. Like android:type = "linear|radial|sweep" android:gradientRadius for radial type. centerX and centerY etc.. you can play with them.

5. To use the the created gradient, goTo the layout you want to use it and use it as background. for example

 <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"  android:background="@drawable/background_gradient"><!-- other content of your xml --></RelativeLayout>