Gradient Drawing Example 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

Leave a Comment:

1 comment
pradeep says May 15, 2013

very good………………..thanks

Reply
Add Your Reply