Develop Reference

Filling pattern in stead of a color using flood fill algroithim android

I am developing a coloring app and was able to fill white color of the image with different colors using the below code.
Here is the Java class
import java.util.LinkedList;
import java.util.Queue;
import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapFactory.Options;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class Main extends Activity {
private RelativeLayout dashBoard;
private MyView myView;
public ImageView image;
Button b_red, b_blue, b_green, b_orange, b_clear;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
myView = new MyView(this);
setContentView(R.layout.activity_main);
findViewById(R.id.dashBoard);
b_red = (Button) findViewById(R.id.b_red);
b_blue = (Button) findViewById(R.id.b_blue);
b_green = (Button) findViewById(R.id.b_green);
b_orange = (Button) findViewById(R.id.b_orange);
b_red.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
myView.changePaintColor(0xFFFF0000);
}
});
b_blue.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
myView.changePaintColor(0xFF0000FF);
}
});
b_green.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
myView.changePaintColor(0xFF00FF00);
}
});
b_orange.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
myView.changePaintColor(0xFFFF9900);
}
});
dashBoard = (RelativeLayout) findViewById(R.id.dashBoard);
dashBoard.addView(myView);
}
public class MyView extends View {
private Paint paint;
private Path path;
public Bitmap mBitmap;
public ProgressDialog pd;
final Point p1 = new Point();
public Canvas canvas;
//Bitmap mutableBitmap ;
public MyView(Context context) {
super(context);
this.paint = new Paint();
this.paint.setAntiAlias(true);
pd = new ProgressDialog(context);
this.paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(5f);
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.forme).copy(Bitmap.Config.ARGB_8888, true);
this.path = new Path();
}
#Override
protected void onDraw(Canvas canvas) {
this.canvas = canvas;
this.paint.setColor(Color.RED);
canvas.drawBitmap(mBitmap, 0, 0, paint);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
p1.x = (int) x;
p1.y = (int) y;
final int sourceColor = mBitmap.getPixel((int) x, (int) y);
final int targetColor = paint.getColor();
new TheTask(mBitmap, p1, sourceColor, targetColor).execute();
invalidate();
}
return true;
}
public void clear() {
path.reset();
invalidate();
}
public int getCurrentPaintColor() {
return paint.getColor();
}
public void changePaintColor(int color){
this.paint.setColor(color);
}
class TheTask extends AsyncTask<Void, Integer, Void> {
Bitmap bmp;
Point pt;
int replacementColor, targetColor;
public TheTask(Bitmap bm, Point p, int sc, int tc) {
this.bmp = bm;
this.pt = p;
this.replacementColor = tc;
this.targetColor = sc;
pd.setMessage("Filling....");
pd.show();
}
#Override
protected void onPreExecute() {
pd.show();
}
#Override
protected void onProgressUpdate(Integer... values) {
}
#Override
protected Void doInBackground(Void... params) {
FloodFill f = new FloodFill();
f.floodFill(bmp, pt, targetColor, replacementColor);
return null;
}
#Override
protected void onPostExecute(Void result) {
pd.dismiss();
invalidate();
}
}
}
// flood fill
public class FloodFill {
public void floodFill(Bitmap image, Point node, int targetColor, int replacementColor) {
int width = image.getWidth();
int height = image.getHeight();
int target = targetColor;
int replacement = replacementColor;
if (target != replacement) {
Queue<Point> queue = new LinkedList<Point>();
do {
int x = node.x;
int y = node.y;
while (x > 0 && image.getPixel(x - 1, y) == target) {
x--;
}
boolean spanUp = false;
boolean spanDown = false;
while (x < width && image.getPixel(x, y) == target) {
image.setPixel(x, y, replacement);
if (!spanUp && y > 0 && image.getPixel(x, y - 1) == target) {
queue.add(new Point(x, y - 1));
spanUp = true;
} else if (spanUp && y > 0 && image.getPixel(x, y - 1) != target) {
spanUp = false;
}
if (!spanDown && y < height - 1 && image.getPixel(x, y + 1) == target) {
queue.add(new Point(x, y + 1));
spanDown = true;
} else if (spanDown && y < (height - 1) && image.getPixel(x, y + 1) != target) {
spanDown = false;
}
x++;
}
} while ((node = queue.poll()) != null);
}
}
}
}
As you can see i used fill flood algorithm for coloring the a white space in an image.
The image is below:
Image to be used to fill the color
Now question is how can i fill the white space region with the below pattern(or any other pattern) instead of the color.
Pattern image
Please any help is appreciated as i am new to android. Thankyou

Well after a little workaround I was able to fill the pattern in the closed region using Flood Fill Algorithm. Below is what I did.
1.Introduced a new bitmap with the pattern as u can see below.
bitmapPattern = BitmapFactory.decodeResource(getResources(),R.drawable.pattern1).copy(Bitmap.Config.ARGB_8888, true);
And passed this bitmapPattern to the Flood Fill Algorithm as follows.
FloodFillPattern f = new FloodFillPattern();
f.floodFillPattern(bmp, pt, targetColor, replacementColor, pattern);
Note you have to scale this bitmap equal to the size of your image in which you will fill this pattern.
Then simply replace the pixels of your original image with the pixels of the pattern bitmap in the flood fill algorithm. As Follows:
image.setPixel(x, y, pattern.getPixel(x,y));
pattern is the patternBitmap you passed.
May it help someone :)

Custom Android View displaying differently in Linear and Relative Layouts

I've created a custom view (ArrowContainer) to wrap around other elements giving them an arrow shaped background. However, my view displays differently when contained in a Relative Layout to how it displays when contained in a Linear Layout.
Here is the problem, the top ArrowContainer is contained in a LinearLayout and behaves correctly, the bottom ArrowContainer is contained in a RelativeLayout and behaves incorrectly.
Has anyone seen something like this before? The debug code I have inserted in ArrowContainer.java suggests that the problem arises from RelativeLayout measuring the view twice, but I'm not sure why this causes a problem...
Below is the code:
ArrowContainer.java
package com.example.arrowcontainertest;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
public class ArrowContainer extends ViewGroup {
private static final int ARROW_LEFT = 0;
private static final int ARROW_RIGHT = 1;
private static final int ARROW_BOTH = 2;
private static final int DEFAULT_COLOUR = 0xFFFF0000;
private static final int HORIZONTAL_PADDING = 150;
private Path path;
private Paint paint;
private int arrowSide = ARROW_RIGHT;
private int colour = DEFAULT_COLOUR;
private int downColour;
private Paint downPaint;
private Boolean isButton = false;
private View child;
public ArrowContainer(Context context) {
super(context);
init();
}
public ArrowContainer(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ArrowContainer, 0, 0);
try {
arrowSide = a.getInteger(R.styleable.ArrowContainer_arrowSide, ARROW_RIGHT);
colour = a.getColor(R.styleable.ArrowContainer_colour, DEFAULT_COLOUR);
isButton = a.getBoolean(R.styleable.ArrowContainer_isButton, false);
} finally {
a.recycle();
}
init();
}
public ArrowContainer(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ArrowContainer, 0, 0);
try {
arrowSide = a.getInteger(R.styleable.ArrowContainer_arrowSide, ARROW_RIGHT);
colour = a.getColor(R.styleable.ArrowContainer_colour, DEFAULT_COLOUR);
isButton = a.getBoolean(R.styleable.ArrowContainer_isButton, false);
} finally {
a.recycle();
}
init();
}
private void init() {
paint = new Paint();
paint.setColor(colour);
paint.setStyle(Style.FILL);
setWillNotDraw(false);
if (isButton) {
setFocusable(true);
setClickable(true);
downColour = 0xFF00FF00;
downPaint = new Paint();
downPaint.setColor(downColour);
downPaint.setStyle(Style.FILL);
}
}
#Override
protected void onFinishInflate() {
// Must have exactly 1 child
assert getChildCount()==1;
if (getChildCount() == 1) {
child = getChildAt(0);
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Debug
Log.e("DEBUG", "Type:" + getParent().getClass());
Log.e("DEBUG", "Width Mode: " + MeasureSpec.getMode(widthMeasureSpec));
Log.e("DEBUG", "Height Mode: " + MeasureSpec.getMode(heightMeasureSpec));
Log.e("DEBUG", "Width Size: " + MeasureSpec.getSize(widthMeasureSpec));
Log.e("DEBUG", "Height Size: " + MeasureSpec.getSize(heightMeasureSpec));
// Restrict the childs width to at most this components size minus a fixed value (HORIZONTAL_PADDING*numArrows)
int numArrows=0;
switch (arrowSide) {
case ARROW_RIGHT:
numArrows = 1;
break;
case ARROW_LEFT:
numArrows = 1;
break;
case ARROW_BOTH:
numArrows = 2;
break;
}
int widthSpec = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec)-HORIZONTAL_PADDING*numArrows, MeasureSpec.AT_MOST);
int heightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
child.measure(widthSpec, heightSpec);
int width = child.getMeasuredWidth();
int height = child.getMeasuredHeight();
setMeasuredDimension(width + (int) (numArrows*height/2f), height);
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int width = getMeasuredWidth();
int height = getMeasuredHeight();
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
switch (arrowSide) {
case ARROW_RIGHT:
// Hug left
child.layout(0, height/2 - childHeight/2, width - height/2, height/2 + childHeight/2);
break;
case ARROW_LEFT:
// Hug right
child.layout(height/2, height/2 - childHeight/2, width, height/2 + childHeight/2);
break;
case ARROW_BOTH:
// Center
child.layout(width/2 - childWidth/2, height/2 - childHeight/2, width/2 + childWidth/2, height/2 + childHeight/2);
break;
}
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
path = new Path();
switch (arrowSide) {
case ARROW_RIGHT:
path.lineTo(0, h);
path.lineTo(w-h/2f, h);
path.lineTo(w, h/2f);
path.lineTo(w-h/2f, 0);
break;
case ARROW_LEFT:
path.moveTo(h/2f, 0);
path.lineTo(0, h/2f);
path.lineTo(h/2f, h);
path.lineTo(w, h);
path.lineTo(w, 0);
break;
case ARROW_BOTH:
path.moveTo(h/2f, 0);
path.lineTo(0, h/2f);
path.lineTo(h/2f, h);
path.lineTo(w-h/2f, h);
path.lineTo(w, h/2f);
path.lineTo(w-h/2f, 0);
break;
}
path.close();
}
#Override
protected void onDraw(Canvas canvas) {
invalidate();
if (isPressed()) {
canvas.drawPath(path, downPaint);
} else {
canvas.drawPath(path, paint);
}
super.onDraw(canvas);
}
}
activity_main.xml
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity" xmlns:app="http://schemas.android.com/apk/res/com.example.arrowcontainertest">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.example.arrowcontainertest.ArrowContainer
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:arrowSide="right">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
android:textSize="50sp"/>
</com.example.arrowcontainertest.ArrowContainer>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.example.arrowcontainertest.ArrowContainer
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:arrowSide="right">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
android:textSize="50sp"/>
</com.example.arrowcontainertest.ArrowContainer>
</RelativeLayout>
MainActivity.java
package com.example.arrowcontainertest;
import android.os.Bundle;
import android.app.Activity;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

An update:
I've been unable to solve this problem and this component has been causing problems in other situations. As such I decided to rewrite the component to use a little custom functionality as possible.
My solution has been to create a custom LinearLayout which contains a nested LinearLayout. The outer layout is responsible for drawing the background, and applies sufficient padding to allow space to draw the arrows. All children get passed to the inner layout. This solution isn't perfect as there is often excess padding and so wasted space, but it is sufficient for my purposes.
Code is here:
package com.example.arrowcontainertest;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
public class NewArrowContainer extends LinearLayout {
private static final int ARROW_LEFT = 0;
private static final int ARROW_RIGHT = 1;
private static final int ARROW_BOTH = 2;
private static final int DEFAULT_COLOUR = 0xFFFF0000;
private static final int ARROW_MAX_WIDTH = 150;
private LinearLayout childLayout;
private Path path;
private Paint paint;
private int arrowSide = ARROW_RIGHT;
private int colour = DEFAULT_COLOUR;
private int downColour;
private Paint downPaint;
private Boolean isButton = false;
public NewArrowContainer(Context context) {
super(context);
init();
}
public NewArrowContainer(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ArrowContainer, 0, 0);
try {
arrowSide = a.getInteger(R.styleable.ArrowContainer_arrowSide, ARROW_RIGHT);
colour = a.getColor(R.styleable.ArrowContainer_colour, DEFAULT_COLOUR);
isButton = a.getBoolean(R.styleable.ArrowContainer_isButton, false);
} finally {
a.recycle();
}
init();
}
public NewArrowContainer(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ArrowContainer, 0, 0);
try {
arrowSide = a.getInteger(R.styleable.ArrowContainer_arrowSide, ARROW_RIGHT);
colour = a.getColor(R.styleable.ArrowContainer_colour, DEFAULT_COLOUR);
isButton = a.getBoolean(R.styleable.ArrowContainer_isButton, false);
} finally {
a.recycle();
}
init();
}
private void init() {
paint = new Paint();
paint.setColor(colour);
paint.setStyle(Style.FILL);
setWillNotDraw(false);
if (isButton) {
setFocusable(true);
setClickable(true);
downColour = 0xFF00FF00;
downPaint = new Paint();
downPaint.setColor(downColour);
downPaint.setStyle(Style.FILL);
}
LayoutInflater layoutInflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layoutInflater.inflate(R.layout.arrow_container, this);
childLayout = (LinearLayout) findViewById(R.id.child);
// Pass properties to childLayout
childLayout.setPadding(getPaddingLeft(), getPaddingTop(), getPaddingRight(), getPaddingBottom());
childLayout.setOrientation(getOrientation());
// Give the padding sufficient for arrows
switch (arrowSide) {
case ARROW_RIGHT:
setPadding(0, 0, ARROW_MAX_WIDTH, 0);
break;
case ARROW_LEFT:
setPadding(ARROW_MAX_WIDTH, 0, 0, 0);
break;
case ARROW_BOTH:
setPadding(ARROW_MAX_WIDTH, 0, ARROW_MAX_WIDTH, 0);
break;
}
}
public void setColour(int colour) {
paint.setColor(colour);
}
#Override
public void onFinishInflate() {
// Pass all children to the childLayout
while (getChildCount() > 1) {
View v = getChildAt(1);
removeViewAt(1);
childLayout.addView(v);
}
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
path = new Path();
switch (arrowSide) {
case ARROW_RIGHT:
path.lineTo(0, h);
path.lineTo(w-ARROW_MAX_WIDTH, h);
path.lineTo(w-ARROW_MAX_WIDTH+h/2f, h/2f);
path.lineTo(w-ARROW_MAX_WIDTH, 0);
break;
case ARROW_LEFT:
path.moveTo(ARROW_MAX_WIDTH-h/2f, h/2f);
path.lineTo(ARROW_MAX_WIDTH, h);
path.lineTo(w, h);
path.lineTo(w, 0);
path.lineTo(ARROW_MAX_WIDTH, 0);
break;
case ARROW_BOTH:
path.moveTo(ARROW_MAX_WIDTH-h/2f, h/2f);
path.lineTo(ARROW_MAX_WIDTH, h);
path.lineTo(w-ARROW_MAX_WIDTH, h);
path.lineTo(w-ARROW_MAX_WIDTH+h/2f, h/2f);
path.lineTo(w-ARROW_MAX_WIDTH, 0);
path.lineTo(ARROW_MAX_WIDTH, 0);
break;
}
path.close();
}
#Override
protected void onDraw(Canvas canvas) {
invalidate();
if (isPressed()) {
canvas.drawPath(path, downPaint);
} else {
canvas.drawPath(path, paint);
}
super.onDraw(canvas);
}
}

MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec)-HORIZONTAL_PADDING*numArrows, MeasureSpec.AT_MOST);
I am concerned about this line, why you don't check if width, supplied to makeMeasureSpec, isn't negative? This method doesn't perform range check, so it your responsibility. Negative width = invalid measureSpec = undefined behavior.
Also, when i have implemented some custom layouts, i've used super.onMeasure to determine maximum available dimensions and then used them via getMeasuredWidth(), getMeasuredHeight().

How can I create a 3D circular scrolling view for Text? (As seen in Appy Geek)

I am looking to implement some sort of "canvas" where you can place X number of TextViews/Links at "random positions" (Positioned like in the image below). You would then be able to scroll this "canvas" view left or right continuously and the view will repeat/be circular (sort of like a HTML marquee except that you are doing the scrolling manually). In the most simplest of cases I am just looking to have horizontal scrolling - but an example of a more "complex case" is where you can do "sphere scrolling" - see the example below from Appy Geek. (For now I am just interested in the horizontal scrolling)
Example from Appy Geek:

Well this will get you started, I have implemented a simple tag cloud using both approaches (i.e. by extending View and ViewGroup) that keeps rotating. You can use this logic in your custom ViewGroup which positions its View's accordingly. After that add clickable TextViews inside that layout and handle touch events.
Final result (ofcourse its rotating, look closer):
Lot of things can be improved in the following code.
BY EXTENDING ViewGroup:
Put this in xml layout:
<com.vj.tagcloud.TagCloudLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</com.vj.tagcloud.TagCloudLayout>
TagCloudLayout class:
import java.util.Random;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class TagCloudLayout extends ViewGroup {
final Random mRandom = new Random();
private float mRotateAngle;
private Handler mHandler = new Handler();
private float rotateAngleDegree;
public TagCloudLayout(Context context) {
super(context);
}
public TagCloudLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TagCloudLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final float radius = Math.min(getMeasuredWidth(), getMeasuredHeight()) / 2F;
float halfWidth = getMeasuredWidth() / 2F;
float halfHeight = getMeasuredHeight() / 2F;
final int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
float sinTheta = (float) Math.sin(lp.theta);
float x = (int) (radius * Math.cos(lp.fi + mRotateAngle)
* sinTheta);
if (child instanceof TextView) {
((TextView) child)
.setTextSize(15 * ((radius - x) / radius) + 10);
}
measureChild(child, widthMeasureSpec, heightMeasureSpec);
// http://en.wikipedia.org/wiki/Spherical_coordinates
lp.x = (int) ((halfWidth + radius * Math.sin(lp.fi + mRotateAngle)
* sinTheta) - /* for balancing on x-axis */(child
.getMeasuredWidth() / 2F));
lp.y = (int) (halfHeight + radius * Math.cos(lp.theta)-/* for balancing on y-axis */(child
.getMeasuredHeight() / 2F));
}
}
#Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
mHandler.postDelayed(new Runnable() {
#Override
public void run() {
rotateAngleDegree += 5;
mRotateAngle = (float) Math.toRadians(rotateAngleDegree);
requestLayout();
mHandler.postDelayed(this, 40);
}
}, 40);
}
#Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
mHandler.removeCallbacksAndMessages(null);
}
#Override
public void addView(View child, int index,
android.view.ViewGroup.LayoutParams params) {
super.addView(child, index, params);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
lp.fi = (float) Math.toRadians(mRandom.nextInt(360));
lp.theta = (float) Math.toRadians(mRandom.nextInt(360));
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y
+ child.getMeasuredHeight());
}
}
#Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p instanceof LayoutParams;
}
#Override
protected LayoutParams generateDefaultLayoutParams() {
return new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
}
#Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new LayoutParams(getContext(), attrs);
}
#Override
protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
return new LayoutParams(p.width, p.height);
}
public static class LayoutParams extends ViewGroup.LayoutParams {
int x;
int y;
float fi, theta;
public LayoutParams(Context context, AttributeSet attrs) {
super(context, attrs);
}
public LayoutParams(int w, int h) {
super(w, h);
}
}
}
BY EXTENDING View:
Put this in xml layout:
<com.vj.wordtap.TagCloud
android:layout_width="match_parent"
android:layout_height="match_parent" />
and this in java code:
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import android.content.Context;
import android.graphics.Camera;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;
public class TagCloud extends View {
private List<String> mItems = new ArrayList<String>();
private List<Angles> mAngles = new ArrayList<Angles>();
private Camera mCamera = new Camera();
private TextPaint mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
private Handler mHandler = new Handler();
private float mRotateAngle;
private float rotateAngleDegree;
public static class Angles {
float fi, theta;
}
public TagCloud(Context context) {
super(context);
init();
}
public TagCloud(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TagCloud(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
List<String> items = new ArrayList<String>();
for (int i = 0; i < 10; i++) {
items.add("item:" + i);
}
setItems(items);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.translate(canvas.getWidth() / 2F, canvas.getHeight() / 2F);
mTextPaint.setColor(Color.BLACK);
final float radius = 100;
mCamera.setLocation(0, 0, -100);
for (int i = 0; i < mItems.size(); i++) {
String item = mItems.get(i);
Angles xyz = mAngles.get(i);
mCamera.save();
canvas.save();
float sinTheta = (float) Math.sin(xyz.theta);
float x = (float) (radius * Math.cos(xyz.fi + mRotateAngle) * sinTheta);
float y = (float) (radius * Math.sin(xyz.fi + mRotateAngle) * sinTheta);
float z = (float) (radius * Math.cos(xyz.theta));
// mapping coordinates with Android's coordinates
// http://en.wikipedia.org/wiki/Spherical_coordinates
mCamera.translate(y, z, x);
mCamera.applyToCanvas(canvas);
// http://en.wikipedia.org/wiki/Spherical_coordinates
// set size based on x-Axis that is coming towards us
mTextPaint.setTextSize(20 * ((100 - x) / 100) + 10);
canvas.drawText(item, 0, 0, mTextPaint);
mCamera.restore();
canvas.restore();
}
}
#Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
mHandler.postDelayed(new Runnable() {
#Override
public void run() {
rotateAngleDegree += 5;
mRotateAngle = (float) Math.toRadians(rotateAngleDegree);
invalidate();
mHandler.postDelayed(this, 40);
}
}, 40);
}
#Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
mHandler.removeCallbacksAndMessages(null);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
public void setItems(List<String> items) {
mItems = items;
final Random ran = new Random();
final List<Angles> xyzList = mAngles;
xyzList.clear();
for (int i = 0; i < items.size(); i++) {
Angles xyz = new Angles();
float fi = (float) Math.toRadians(ran.nextInt(360));
xyz.fi = fi;
float theta = (float) Math.toRadians(ran.nextInt(360));
xyz.theta = theta;
xyzList.add(xyz);
}
}
}

Create Custom Seekbar in android

can any one help me to create balow image cutomize seek bar
i have already go throught
SeekBar with custom thumb and segmented text
and SeekBar Thumb position issue
but i am not success to create my custome seekbar pls help me

Use Library From This Link: This link and put into your project,
Now Create A Seekbar Like This Class:
package com.tokaracamara.android.verticalslidevar;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
public class DemoSeek extends AbsVerticalSeekBar {
public interface OnSeekBarChangeListener {
void onProgressChanged(DemoSeek seekBar, int progress, boolean fromUser);
void onStartTrackingTouch(DemoSeek seekBar);
void onStopTrackingTouch(DemoSeek seekBar);
}
private OnSeekBarChangeListener mOnSeekBarChangeListener;
private Drawable progressDrawable;
private Rect barBounds, labelTextRect;
private Bitmap labelBackground;
private Point labelPos;
private Paint labelTextPaint, labelBackgroundPaint;
int viewWidth, barHeight, labelOffset;
// private int thumbX;
float progressPosX;
private String expression;
public DemoSeek(Context context) {
super(context);
// Log.i("Seekbar", "DemoSeek");
progressDrawable = getProgressDrawable();
// labelBackground = BitmapFactory.decodeResource(getResources(),
// R.drawable.thumb_marker);
labelBackground = drawableToBitmap(mThumb);
labelTextPaint = new Paint();
labelTextPaint.setColor(Color.WHITE);
labelTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
labelTextPaint.setAntiAlias(true);
labelTextPaint.setDither(true);
labelTextPaint.setTextSize(13f);
labelBackgroundPaint = new Paint();
barBounds = new Rect();
labelTextRect = new Rect();
labelPos = new Point();
}
public Bitmap drawableToBitmap(Drawable drawable) {
if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable) drawable).getBitmap();
}
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
drawable.getIntrinsicHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
}
#Override
void onProgressRefresh(float scale, boolean fromUser) {
super.onProgressRefresh(scale, fromUser);
if (mOnSeekBarChangeListener != null) {
mOnSeekBarChangeListener.onProgressChanged(this, getProgress(),
fromUser);
}
}
public DemoSeek(Context context, AttributeSet attrs) {
super(context, attrs);
progressDrawable = getProgressDrawable();
labelBackground = BitmapFactory.decodeResource(getResources(),
R.drawable.thumb_with_arrow);
labelTextPaint = new Paint();
labelTextPaint.setColor(Color.WHITE);
labelTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
labelTextPaint.setAntiAlias(true);
labelTextPaint.setDither(true);
labelTextPaint.setTextSize(15f);
labelBackgroundPaint = new Paint();
barBounds = new Rect();
labelTextRect = new Rect();
labelPos = new Point();
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// Log.i("Seekbar", "onMeasure");
if (labelBackground != null) {
viewWidth = getMeasuredWidth();
barHeight = getMeasuredHeight() - getPaddingTop()
- getPaddingBottom();
setMeasuredDimension(viewWidth + labelBackground.getWidth(),
barHeight + labelBackground.getHeight() / 2);
}
}
#Override
protected void onDraw(Canvas canvas) {
canvas.save();
if (labelBackground != null) {
barBounds.left = getPaddingLeft();
barBounds.top = (int) (labelBackground.getHeight() / 2f);
barBounds.right = barBounds.left + viewWidth - getPaddingRight()
- getPaddingLeft();
barBounds.bottom = barBounds.top + barHeight - getPaddingBottom()
- getPaddingTop();
progressPosX = barBounds.top
+ ((float) this.getProgress() / (float) this.getMax())
* barBounds.height() + getTopPaddingOffset();
labelPos.y = getBottom() - (int) progressPosX - labelOffset
+ (int) (getProgress() * 0.1f);
labelPos.x = getPaddingLeft();
progressDrawable = getProgressDrawable();
progressDrawable.setBounds(barBounds.left, barBounds.top,
barBounds.right, getBottom());
progressDrawable.draw(canvas);
String pro = getProgress() * multiplier + "";
if (expression != null) {
pro = pro.concat(expression);
}
labelTextPaint.getTextBounds(pro, 0, pro.length(), labelTextRect);
canvas.drawBitmap(labelBackground, labelPos.x, labelPos.y,
labelBackgroundPaint);
canvas.drawText(pro, labelPos.x + labelBackground.getWidth() / 2
- labelTextRect.width() / 2 + 15, labelPos.y
+ labelBackground.getHeight() / 2 + labelTextRect.height()
/ 2 - 5, labelTextPaint);
}
canvas.restore();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
invalidate();
return super.onTouchEvent(event);
}
public void setOnSeekBarChangeListener(
com.tokaracamara.android.verticalslidevar.DemoSeek.OnSeekBarChangeListener onSeekBarChangeListener) {
mOnSeekBarChangeListener = (OnSeekBarChangeListener) onSeekBarChangeListener;
}
#Override
void onStartTrackingTouch() {
if (mOnSeekBarChangeListener != null) {
mOnSeekBarChangeListener.onStartTrackingTouch(this);
}
}
#Override
void onStopTrackingTouch() {
if (mOnSeekBarChangeListener != null) {
mOnSeekBarChangeListener.onStopTrackingTouch(this);
}
}
private int multiplier = 1;
public void setMultiplier(int multiplier) {
this.multiplier = multiplier;
}
public int getMultiplier() {
return multiplier;
}
public void setExpression(String expression) {
this.expression = expression.trim();
}
public String getExpression() {
return expression;
}
}
Create Xml Like This:
<com.tokaracamara.android.verticalslidevar.DemoSeek
android:id="#+id/v_four_university"
android:layout_width="#dimen/vs_width"
android:layout_height="match_parent"
android:clickable="false"
android:focusable="false"
android:longClickable="false"
android:progress="50"
android:progressDrawable="#drawable/progress_vertical"
android:saveEnabled="false"
android:thumb="#drawable/your thumb" />

Highlight/select a region in a bitmap

I am trying to be able to select/highlight a specific grid position onTouch.
Basically, I have an image, with a canvas/bitmap over layering the top of the image, I want to be able to click on a point of the image, and have that box become highlighted(first step is highlighting the grid, I will perform other algorithms on this later on)..
Here is the code for what I have now.. I am able to grab the x y coordinates, but I do not know how to associate the x y coordinates with the grid position.
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Bundle;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.MeasureSpec;
public class ImageWithGridView extends View {
private int rows = 12;
private int columns = 12;
private float width;
private float height;
public static final String TAG="ImageWithGridView";
private static final String SELX = "selX";
private static final String SELY = "selY";
private static final String VIEW_STATE = "viewState";
//private static final int ID = 92;
private int selX; //X index of selection
private int selY; //Y index of selection
private final Bitmap bitmap;
public ImageWithGridView(Context context) {
super(context);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sample);
//use your own image file name, instead of mobot_spring
}
public ImageWithGridView(Context context, AttributeSet attrs){
super(context, attrs);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sample);
//TODO Auto-generated constructor sub
}
public ImageWithGridView(Context context, AttributeSet attrs, int defStyle) {
super (context, attrs, defStyle);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sample);
//TODO Auto-generated constructor stub
}
#Override
protected Parcelable onSaveInstanceState() {
Parcelable p = super.onSaveInstanceState();
Log.d(TAG, "onSaveInstanceState");
Bundle bundle = new Bundle();
bundle.putInt(SELX, selY);
bundle.putInt(SELY, selY);
bundle.putParcelable(VIEW_STATE, p);
return bundle;
}
#Override
protected void onRestoreInstanceState(Parcelable state) {
Log.d(TAG, "onRestoreInstanceState");
Bundle bundle = (Bundle) state;
selX = bundle.getInt(SELX);
selY = bundle.getInt(SELY);
super.onRestoreInstanceState(bundle.getParcelable(VIEW_STATE));
return;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
//adjust the ratio for width and height here:
this.setMeasuredDimension(parentWidth, parentHeight*2/3);
}
#Override
protected void onSizeChanged(int newWidth, int newHeight, int oldw, int oldh) {
width = newWidth / (float) columns;
height = newHeight / (float)rows;
Log.d(TAG, "~~~~~~~~~~~onSizeChanged: width " + width + ", height " + height);
super.onSizeChanged(newWidth, newWidth, oldw, oldh);
}
#Override
protected void onDraw(Canvas canvas) {
RectF dst = new RectF(width, height, (columns-1) * width, (rows - 1) * height);
//Draw the background...
Paint background = new Paint();
background.setColor(getResources().getColor(R.color.background));
Log.d(TAG, "~~~~~~~~~10 ");
canvas.drawRect(0, 0, getWidth(), getHeight(), background);
Log.d(TAG, "~~~~~~~~~20 ");
canvas.drawBitmap(bitmap, null, dst, null);
Log.d(TAG, "~~~~~~~~~30 ");
//Define colors for the grid lines
Paint dark = new Paint();
dark.setColor(getResources().getColor(R.color.dark));
Paint hilite = new Paint();
hilite.setColor(getResources().getColor(R.color.hilite));
Paint light = new Paint();
light.setColor(getResources().getColor(R.color.light));
//Draw the minor grid lines
for (int i = 0; i < rows; i++) {
canvas.drawLine(0, i * height-1, getWidth(), i * height-1, dark);
canvas.drawLine(0, i * height, getWidth(), i * height, light);
canvas.drawLine(0, i * height + 1, getWidth(), i * height + 1, hilite);
}
for (int i=0; i<columns; i++) {
canvas.drawLine(i * width-1, 0, i* width-1, getHeight(), dark);
canvas.drawLine(i * width, 0, i * width, getHeight(), light);
canvas.drawLine(i * width + 1, 0, i* width + 1, getHeight(), hilite);
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() != MotionEvent.ACTION_DOWN){
return super.onTouchEvent(event);
}
selX = (int) event.getX();
selY = (int) event.getY();
Log.d(TAG, "onTouchEvent: x " + selX + ", y " + selY);
return true;
}
public int getClickedX() {return selX;}
public int getClickedY() {return selY;}
}
This is my other class
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class CustomizeImageViewActivity extends Activity{
/** Called when the activity is first created. */
private Button btnShow;
private TextView label;
private ImageWithGridView imgView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//setContentView(R.layout.relative_layout);
//setContentView(R.layout.table_layout);
btnShow = (Button) findViewById(R.id.btnShow);
label = (TextView) findViewById(R.id.label);
imgView = (ImageWithGridView)findViewById(R.id.imageView1);
btnShow.setOnClickListener(
new View.OnClickListener() {
#Override
public void onClick(View arg0) {
label.setText("("+imgView.getClickedX() + "," + imgView.getClickedY() + ")");
}
});
}
}
Please advise with any guides/tutorials I should look at.. I have tried doing some research but I have not been able to find anything on this.