Android UI

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 startcenter 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

gradient_tool

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

run_circular_gradient

About author

Geethu is a teacher by profession, but she likes to research new things and is also interested in writing. Devdeeds is her blog, where she writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

Your email address will not be published. Required fields are marked *