Gradient Drawing in Android

This example shows how you can draw different gradient shapes in android.

Algorithm:

1.) Create a new project by File-> New -> Android Project name it GradientDrawingExample.

2.) Create and write following into src/GraphicsActivity.java:

package com.example.GradientDrawingExample;

import android.app.Activity;
import android.os.Bundle;

import android.view.View;
import android.view.ViewGroup;

class GraphicsActivity extends Activity {
    private static final boolean TEST_PICTURE = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public void setContentView(View view) {
        if (TEST_PICTURE) {
            ViewGroup vg = new PictureLayout(this);
            vg.addView(view);
            view = vg;
        }

        super.setContentView(view);
    }
}

3.) Create and write following into src/PictureLayout.java:

package com.example.GradientDrawingExample;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Picture;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;

public class PictureLayout extends ViewGroup {
    private final Picture mPicture = new Picture();

    public PictureLayout(Context context) {
        super(context);
    }

    public PictureLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void addView(View child) {
        if (getChildCount() > 1) {
            throw new IllegalStateException("PictureLayout can host only one direct child");
        }

        super.addView(child);
    }

    @Override
    public void addView(View child, int index) {
        if (getChildCount() > 1) {
            throw new IllegalStateException("PictureLayout can host only one direct child");
        }

        super.addView(child, index);
    }

    @Override
    public void addView(View child, LayoutParams params) {
        if (getChildCount() > 1) {
            throw new IllegalStateException("PictureLayout can host only one direct child");
        }

        super.addView(child, params);
    }

    @Override
    public void addView(View child, int index, LayoutParams params) {
        if (getChildCount() > 1) {
            throw new IllegalStateException("PictureLayout can host only one direct child");
        }

        super.addView(child, index, params);
    }

    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int count = getChildCount();

        int maxHeight = 0;
        int maxWidth = 0;

        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() != GONE) {
                measureChild(child, widthMeasureSpec, heightMeasureSpec);
            }
        }

        maxWidth += getPaddingLeft() + getPaddingRight();
        maxHeight += getPaddingTop() + getPaddingBottom();

        Drawable drawable = getBackground();
        if (drawable != null) {
            maxHeight = Math.max(maxHeight, drawable.getMinimumHeight());
            maxWidth = Math.max(maxWidth, drawable.getMinimumWidth());
        }

        setMeasuredDimension(resolveSize(maxWidth, widthMeasureSpec),
                resolveSize(maxHeight, heightMeasureSpec));
    }

    private void drawPict(Canvas canvas, int x, int y, int w, int h,
                          float sx, float sy) {
        canvas.save();
        canvas.translate(x, y);
        canvas.clipRect(0, 0, w, h);
        canvas.scale(0.5f, 0.5f);
        canvas.scale(sx, sy, w, h);
        canvas.drawPicture(mPicture);
        canvas.restore();
    }

    @SuppressWarnings("unused")
        @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(mPicture.beginRecording(getWidth(), getHeight()));
        mPicture.endRecording();

        int x = getWidth()/2;
        int y = getHeight()/2;

        if (false) {
            canvas.drawPicture(mPicture);
        } else {
            drawPict(canvas, 0, 0, x, y,  1,  1);
            drawPict(canvas, x, 0, x, y, -1,  1);
            drawPict(canvas, 0, y, x, y,  1, -1);
            drawPict(canvas, x, y, x, y, -1, -1);
        }
    }

    @Override
    public ViewParent invalidateChildInParent(int[] location, Rect dirty) {
        location[0] = getLeft();
        location[1] = getTop();
        dirty.set(0, 0, getWidth(), getHeight());
        return getParent();
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        final int count = super.getChildCount();

        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() != GONE) {
                final int childLeft = getPaddingLeft();
                final int childTop = getPaddingTop();
                child.layout(childLeft, childTop,
                        childLeft + child.getMeasuredWidth(),
                        childTop + child.getMeasuredHeight());

            }
        }
    }
}

4.) Create and write following into res/drawable/line.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="line">
    <stroke android:width="1dp" android:color="#FF000000"
           android:dashWidth="1dp" android:dashGap="2dp" />
    <size android:height="5dp" />
</shape>

5.) Create and write following into res/drawable/shape_1.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#00000000"/>
    <stroke android:width="2dp" android:color="#ff000000"/>
    <padding android:left="1dp" android:top="1dp"
           android:right="1dp" android:bottom="1dp" />
</shape>

6.) Create and write following into res/drawable/shape_2.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF0000FF"/>
    <stroke android:width="4dp" android:color="#FFFFFFFF"
           android:dashWidth="1dp" android:dashGap="2dp" />
    <padding android:left="7dp" android:top="7dp"
           android:right="7dp" android:bottom="7dp" />
    <corners android:radius="4dp" />
</shape>

7.) Create and write following into res/drawable/shape_3.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval">
    <solid android:color="#00000000"/>
    <stroke android:width="4dp" android:color="#99000000"
           android:dashWidth="4dp" android:dashGap="2dp" />
    <padding android:left="7dp" android:top="7dp"
           android:right="7dp" android:bottom="7dp" />
    <corners android:radius="4dp" />
</shape>

8.) Create and write following into res/drawable/shape_4.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="line">
    <stroke android:width="1dp" android:color="#FF000000"
           android:dashWidth="1dp" android:dashGap="2dp" />
</shape>

9.) Create and write following into res/drawable/shape_5.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
    <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
           android:angle="270"/>
    <padding android:left="7dp" android:top="7dp"
           android:right="7dp" android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

10.) Write following into main.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
     
    <LinearLayout
        android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="50dip"
                        android:src="@drawable/shape_1" />
                     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/line" />
                     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="50dip"
                        android:src="@drawable/shape_2" />
                     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/line" />
                     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="50dip"
                        android:src="@drawable/shape_3" />
                     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/line" />
                                     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="50dip"
                        android:src="@drawable/shape_4" />
                     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/line" />
                                                     
                <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="50dip"
                        android:src="@drawable/shape_5" />
        </LinearLayout>
</ScrollView>

11.) Run for output.

Steps:

1.) Create a project named GradientDrawingExample and set the information as stated in the image.

Build Target: Android 4.0
Application Name: GradientDrawingExample
Package Name: com. example. GradientDrawingExample
Activity Name: GradientDrawingExampleActivity
Min SDK Version: 14

2.) Open GradientDrawingExampleActivity.java file and write following code there:

package com.example.GradientDrawingExample;

import android.os.Bundle;

public class GradientDrawingExampleActivity extends GraphicsActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

3.) Compile and build the project.

Output