How to Create Circular Gradient Programmatically in Android

In Android we can create gradient effect in two ways. First one is by creating a drawable xml file and second method is by program. Here in this article i will explain the second method. Creating circular gradient programmatically does not require you to add graphics in your application. Thus it can save your precious application size.

What is a circular gradient in graphics ?

It is a blend between multiple colors. A circular gradient is of circle shape and it has a start, center and end color with a radius. Center color is optional. If you are familiar with Photoshop gradient tool then you can understand it easily.

Gradient Tool In Photoshop

In program this is achieved by creating a gradient drawable object with start, end colors and radius.

In your onCreate function of your Activity class add these lines,

Activity Class

import android.graphics.drawable.GradientDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        View layout = findViewById(R.id.wrapper);  // root view

        GradientDrawable g = new GradientDrawable(GradientDrawable.Orientation.TL_BR, new int[]{getResources().getColor(R.color.primary_grad_start),  //#fff this is the start color of gradient
                getResources().getColor(R.color.primary_grad_end)}); //#97712F this is the end color of gradient
        g.setGradientType(GradientDrawable.RADIAL_GRADIENT); // making it circular gradient
        g.setGradientRadius(100);  // radius of the circle

        int sdk = android.os.Build.VERSION.SDK_INT;

        if (sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
            layout.setBackgroundDrawable(g);
        } else {
            layout.setBackground(g);
        }
    }
}

Activity Layout XML File

This layout has only one view, which is a RelativeLayout. We are giving gradient effect to this view.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:id="@+id/wrapper"
    tools:context="circulargradient.devdeeds.com.circulargradient.MainActivity" >
</RelativeLayout>

Output