Develop Reference

Android triangle custom buttons

I want to make 2 diagonal triangle buttons like in this question.
How can I achieve this? Should I make a drawable xml with a rectangle and rotate it somehow? Should I make an image and make it clickable only on the triangle parts with the help of mathematics?

package com.example.buttonsView;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.FillType;
import android.graphics.Point;
import android.graphics.RectF;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class TwoButtons extends View {
private Path path;
private Path path1;
private Region region;
private Region region1;
private static int GAP=10;
private ButtonClickEvents buttonClickEvent;
public interface ButtonClickEvents{
public void redButtonClick();
public void blueButtonClick();
}
public void setOnButtonClickEvent(ButtonClickEvents buttonClickEvent) {
this.buttonClickEvent=buttonClickEvent;
}
public TwoButtons(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);
Paint paint = new Paint();
paint.setColor(android.graphics.Color.BLACK);
canvas.drawPaint(paint);
paint.setStrokeWidth(0);
paint.setColor(android.graphics.Color.RED);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setAntiAlias(true);
Point a = new Point(GAP, GAP);
Point b = new Point(GAP, getHeight()-2*GAP);
Point c = new Point(getWidth()-2*GAP, GAP);
path = new Path();
path.setFillType(FillType.EVEN_ODD);
path.moveTo(a.x, a.y);
path.lineTo(b.x, b.y);
path.lineTo(c.x, c.y);
path.close();
canvas.drawPath(path, paint);
RectF rectF = new RectF();
path.computeBounds(rectF, true);
region = new Region();
region.setPath(path, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));
paint.setColor(Color.BLUE);
Point a1 = new Point(getWidth()-GAP, getHeight()-GAP);
Point b1 = new Point(getWidth()-GAP, 2*GAP);
Point c1 = new Point(2*GAP, getHeight()-GAP);
path1 = new Path();
path1.setFillType(FillType.EVEN_ODD);
path1.moveTo(a1.x, a1.y);
path1.lineTo(b1.x, b1.y);
path1.lineTo(c1.x, c1.y);
path1.close();
canvas.drawPath(path1, paint);
RectF rectF1 = new RectF();
path1.computeBounds(rectF1, true);
region1 = new Region();
region1.setPath(path1, new Region((int) rectF1.left, (int) rectF1.top, (int) rectF1.right, (int) rectF1.bottom));
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Point point = new Point();
point.x = (int) event.getX();
point.y = (int) event.getY();
invalidate();
if(region.contains((int)point.x,(int) point.y))
{
if(buttonClickEvent!=null)
buttonClickEvent.redButtonClick();
}else if(region1.contains((int)point.x,(int) point.y))
{
if(buttonClickEvent!=null)
buttonClickEvent.blueButtonClick();
}
return true;
}
return false;
}
}
activity_main.xml
<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"
tools:context="com.example.buttonsView.MainActivity" >
<com.example.buttonsView.TwoButtons
android:id="#+id/twoButtons1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
MainActivity.java
package com.example.buttonsView;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;
import com.afbb.preferencessample.R;
import com.example.buttonsView.TwoButtons.ButtonClickEvents;
public class MainActivity extends Activity {
TwoButtons buttons;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttons = (TwoButtons) findViewById(R.id.twoButtons1);
buttons.setOnButtonClickEvent(new ButtonClickEvents() {
#Override
public void redButtonClick() {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "red",
Toast.LENGTH_SHORT).show();
}
#Override
public void blueButtonClick() {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "blue",
Toast.LENGTH_SHORT).show();
}
});
}
}
output :

How to draw a view with animation in android?

I want to draw view like this image with animation. First i want draw circle then eyes and then mouth(arch like view ) with smooth animation. can we achieve such kind of animation? . Here i am getting problem of positioning the view eye and arc mouth.

Try this please
> AnimView.java
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.SurfaceHolder.Callback;
public class AnimView extends SurfaceView implements Runnable,
Callback {
Paint paint = new Paint();
Thread thread = null;
SurfaceHolder surfaceHolder;
boolean running=false;
long time=0;
int pos=0;
public AnimView(Context context) {
super(context);
paint.setColor(Color.GREEN);
surfaceHolder = getHolder();
}
public AnimView(Activity context) {
// TODO Auto-generated constructor stub
super(context);
paint.setColor(Color.GREEN);
surfaceHolder = getHolder();
}
public void onResumeMySurfaceView() {
thread = new Thread(AnimView.this);
thread.start();
running=true;
}
public void onPauseMySurfaceView() {
boolean retry = true;
running = false;
while (retry) {
try {
thread.join();
retry = false;
} catch (InterruptedException e) {
// TODO Auto-generated catch block
// e.printStackTrace();
}
}
}
// #Override
// public void onDraw(Canvas canvas) {
// canvas.drawLine(0, 0, 20, 20, paint);
// canvas.drawLine(20, 0, 0, 20, paint);
// Log.i("onDraw","Draw");
//
// }
#Override
public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
// TODO Auto-generated method stub
}
#Override
public void surfaceCreated(SurfaceHolder arg0) {
// TODO Auto-generated method stub
}
#Override
public void surfaceDestroyed(SurfaceHolder arg0) {
// TODO Auto-generated method stub
}
#Override
public void run() {
// TODO Auto-generated method stub
while(running)
{
if(time==0)
{
time=System.currentTimeMillis();
pos=0;
}
if((System.currentTimeMillis()-time) >3000)
{
pos=1;
}
if((System.currentTimeMillis()-time) >6000)
{
pos=2;
}
if((System.currentTimeMillis()-time) >9000)
{
pos=3;
}
if((System.currentTimeMillis()-time) >12000)
{
pos=0;
time=System.currentTimeMillis();
}
Canvas canvas = surfaceHolder.lockCanvas();
if(canvas!=null)
{
paint.setColor(Color.WHITE);
canvas.drawRect(0, 0, this.getWidth(),this.getHeight(), paint);
if(pos>0)
{
paint.setColor(Color.GREEN);
canvas.drawCircle(200, 200, 50, paint);
paint.setColor(Color.WHITE);
canvas.drawCircle(200, 200, 48, paint);
}
if(pos>1)
{
paint.setColor(Color.GREEN);
canvas.drawCircle(175, 185, 5, paint);
canvas.drawCircle(225, 185, 5, paint);
}
if(pos>2)
{
paint.setStrokeWidth(5);
// opacity
//p.setAlpha(0x80); //
RectF rectF = new RectF(160, 160, 240, 240);
canvas.drawArc (rectF, 45, 135, true, paint);
rectF = new RectF(159, 159, 238, 238);
paint.setColor(Color.WHITE);
canvas.drawArc (rectF, 35, 145, true, paint);
}
surfaceHolder.unlockCanvasAndPost(canvas);
}
Log.i("onDraw","Draw");
}
}
}
>MainActivity.java
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
AnimView av;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
av=new AnimView(this);
setContentView(av);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
protected void onPause() {
// TODO Auto-generated method stub
super.onPause();
av.onPauseMySurfaceView();
}
#Override
protected void onResume() {
// TODO Auto-generated method stub
super.onResume();
av.onResumeMySurfaceView();
}
}

change color of line in surfaceview and retain the color of the previous line

I followed the tutorial from here https://github.com/vivekrk/SurfaceView-Sample and modified it to the code below.
Every time I press on the button to change the color The entire color including the the line which was already present on the view changes.I want only the new line to change its color .
How do I do that?
I am a noob in Android and any help would be greatly appreciated.
Thanks in Advance.
CanvasView.java
import java.util.ArrayList;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
public class CanvasView extends SurfaceView implements SurfaceHolder.Callback {
private static final float STROKE_WIDTH = 8;
private UIThread uiThread;
private Path mPath;
public static Paint mPaint;
private Path oldPath;
private DrawableObject drawableObject = null;
private float mX;
private float mY;
private float TOUCH_TOLERANCE = 8;
private RectF dirtyRect;
private int mMode = Constants.FREE_DRAWING;
private ArrayList<DrawableObject> objectsToDraw;
public static int colorofpaint;
public CanvasView(Context context) {
super(context);
getHolder().addCallback(this);
objectsToDraw = new ArrayList<DrawableObject>();
mPath = new Path();
}
public void clearCanvas() {
mPath.reset();
}
public void setDrawingMode(int drawingMode) {
mMode = drawingMode;
}
#Override
public void onDraw(Canvas canvas) {
setPaintProperties();
if (canvas != null) {
canvas.drawColor(Color.WHITE);
synchronized (objectsToDraw) {
for (DrawableObject drawableObject : objectsToDraw) {
drawableObject.draw(canvas);
}
}
}
}
public void stopUIThread() {
uiThread.setRunning(false);
}
private void setPaintProperties() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setAntiAlias(true);
mPaint.setDither(true);
//mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(STROKE_WIDTH);
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
oldPath = mPath;
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (mMode) {
case Constants.FREE_DRAWING:
drawableObject = new FreeDrawing(mPath, mPaint);
if (colorofpaint==1) {
mPaint.setColor(Color.GREEN);
}
if (colorofpaint==2) {
mPaint.setColor(Color.RED);
}
if (colorofpaint==3) {
mPaint.setColor(Color.BLUE);
}
if (colorofpaint==4) {
mPaint.setColor(Color.YELLOW);
}
if (colorofpaint==5) {
mPaint.setColor(Color.CYAN);
}
if (colorofpaint==6) {
mPaint.setColor(Color.BLACK);
}
if (colorofpaint==7) {
mPaint.setColor(Color.MAGENTA);
}
break;
default:
break;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
synchronized (objectsToDraw) {
objectsToDraw.add(drawableObject);
}
mPath.moveTo(x, y);
mX = x;
mY = y;
break;
case MotionEvent.ACTION_MOVE:
switch (mMode) {
case Constants.FREE_DRAWING:
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
mX = x;
mY = y;
}
break;
}
break;
case MotionEvent.ACTION_UP:
switch (mMode) {
case Constants.FREE_DRAWING:
mPath.moveTo(x, y);
break;
}
break;
}
return true;
}
#Override
public void surfaceCreated(SurfaceHolder holder) {
uiThread = new UIThread(this);
uiThread.setRunning(true);
uiThread.start();
}
public void restoreOldPath() {
mPath = oldPath;
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
uiThread.setRunning(false);
}
public RectF getDirtyRect() {
if(dirtyRect == null) {
dirtyRect = new RectF();
}
return dirtyRect ;
}
}
UIThread .java
import android.graphics.Canvas;
import android.view.SurfaceHolder;
public class UIThread extends Thread {
private static boolean toRun = false;
private CanvasView canvasView;
private SurfaceHolder surfaceHolder;
public UIThread(CanvasView canvasView) {
this.canvasView = canvasView;
surfaceHolder = canvasView.getHolder();
}
public boolean isThreadRunning() {
return toRun;
}
public void setRunning(boolean run) {
toRun = run;
}
#Override
public void run() {
Canvas c;
while (toRun) {
c = null;
try {
c = surfaceHolder.lockCanvas(null);
canvasView.onDraw(c);
} finally {
if (c != null) {
surfaceHolder.unlockCanvasAndPost(c);
}
}
}
}
}
FreeDrawing .java
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
public class FreeDrawing extends DrawableObject {
private Path mPath;
private Paint mPaint;
public FreeDrawing(Path path, Paint paint) {
mPath = path;
mPaint = paint;
}
#Override
public void draw(Canvas canvas) {
canvas.drawPath(mPath, mPaint);
}
}
DrawableObject .java
import android.graphics.Canvas;
public abstract class DrawableObject {
abstract public void draw(Canvas canvas);
}
Constants .java
public class Constants {
// XXX:Drawing modes
public static final int FREE_DRAWING = 1000;
public static final int LINE_DRAWING = 1001;
public static final int RECT_DRAWING = 1002;
public static final int SELECT = 1003;
}
SurfaceViewSampleActivity .java
import android.app.Activity;
import android.content.res.Configuration;
import android.graphics.Color;
import android.graphics.LightingColorFilter;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;
public class SurfaceViewSampleActivity extends Activity {
/** Called when the activity is first created. */
private CanvasView view;
private static final int CLEAR = 100;
private FrameLayout surfaceViewFrame;
private RadioGroup mode;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
surfaceViewFrame = (FrameLayout) findViewById(R.id.surfaceviewFrame);
view = new CanvasView(this);
surfaceViewFrame.addView(view, 0);
CanvasView.colorofpaint=6;
view.setDrawingMode(Constants.FREE_DRAWING);
Button b1=(Button)findViewById(R.id.button1);
b1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
CanvasView.colorofpaint=2;
// view.setDrawingMode(Constants.FREE_DRAWING);
}
});
Button b2=(Button)findViewById(R.id.button2);
b2.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
CanvasView.colorofpaint=3;
view.setDrawingMode(Constants.FREE_DRAWING);
}
});
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
menu.add(0, CLEAR, 0, "Clear");
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case CLEAR:
view.clearCanvas();
break;
}
return true;
}
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Toast.makeText(getApplicationContext(), "onConfigurationChanged", Toast.LENGTH_SHORT).show();
}
}

Android - Moving text issue

I'm trying to create moving text.I have crated surface view and thread for looping it.but it not show me a moving motion but draw that text each after like * ** * * in infinite.
But what I need was move that this point to that** -> ** got it?
this is my code
package com.CurvePackage.Curve;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.widget.Toast;
public class Origin extends SurfaceView implements SurfaceHolder.Callback {
Context context1;
private MainThread thread;
private int x=0;
private int y=0;
public Origin(Context context) {
super(context);
// TODO Auto-generated constructor stub
setWillNotDraw(false);
context1 = context;
getHolder().addCallback(this);
thread = new MainThread(getHolder(), this);
setFocusable(true);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
Paint paint = new Paint();
paint.setTextSize(23);
paint.setFakeBoldText(true);
paint.setColor(Color.YELLOW);
// int score=(10-sprites.size()*100);
x=x+20;
y=y+20;
canvas.drawText("ewqewqe", x, y, paint);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return super.onTouchEvent(event);
// Toast.makeText(getba, "Replay clicked!", Toast.LENGTH_SHORT).show();
}
public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
// TODO Auto-generated method stub
}
public void surfaceCreated(SurfaceHolder holder) {
// TODO Auto-generated method stub
thread.setRunning(true);
thread.start();
}
public void surfaceDestroyed(SurfaceHolder holder) {
thread.setRunning(false);
// TODO Auto-generated method stub
// boolean retry = true;
// while (retry) {
// try {
// thread.join();
// retry = false;
// } catch (InterruptedException e) {
// // try again shutting down the thread
// }
// }
}
}
Main Thread
package com.CurvePackage.Curve;
import android.graphics.Canvas;
import android.view.SurfaceHolder;
public class MainThread extends Thread {
// flag to hold game state
private boolean running;
private SurfaceHolder surfaceHolder;
private Origin origin;
static final long FPS = 15;
public void setRunning(boolean running) {
this.running = running;
}
#Override
public void run() {
long ticksPS = 1000 / FPS;
long startTime;
long sleepTime;
while (running) {
Canvas c = null;
startTime = System.currentTimeMillis();
try {
c = origin.getHolder().lockCanvas();
synchronized (origin.getHolder()) {
origin.onDraw(c);
}
} finally {
if (c != null) {
origin.getHolder().unlockCanvasAndPost(c);
}
}
sleepTime = ticksPS-(System.currentTimeMillis() - startTime);
try {
if (sleepTime > 0)
sleep(sleepTime);
else
sleep(10);
} catch (Exception e) {}
}
}
public MainThread(SurfaceHolder surfaceHolder, Origin origin) {
super();
this.surfaceHolder = surfaceHolder;
this.origin = origin;
}
}

You need to paint the entire background in your onDraw method, before you paint your text.
Paint p2 = new Paint();
p2.setStyle(Style.FILL);
canvas.drawRect(0, 0, screenWidth, screenHeight, p2);
//draw text here
This will completely paint over the text from the previous time the canvas was drawn, and will remove this dragging effect.

Type mismatch: cannot convert from element type Object to Path from line for (Path path :_graphics) {

import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Bundle;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
public class DrawingActivity extends Activity {
private ArrayList _graphics = new ArrayList();
private Paint mPaint;
Handler myHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
myview.invalidate();
};
};
Myview myview;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(new DrawingPanel(this));
mPaint = new Paint();
mPaint.setDither(true);
mPaint.setColor(0xFFFFFF00);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(3);
myview = new Myview(this);
myview.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));
setContentView(myview);
myHandler = new Handler();
}
class Myview extends View {
public Myview(Context context) {
super(context);
}
Path path;
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
path = new Path();
path.moveTo(event.getX(), event.getY());
path.lineTo(event.getX(), event.getY());
_graphics.add(path);
} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
path.lineTo(event.getX(), event.getY());
} else if (event.getAction() == MotionEvent.ACTION_UP) {
path.lineTo(event.getX(), event.getY());
}
invalidate();
return true;
}
#Override
protected void onDraw(Canvas canvas) {
for (Path path :_graphics) {
// canvas.drawPoint(graphic.x, graphic.y, mPaint);
canvas.drawPath(path, mPaint);
}
}
}
}
Here the compiler shows the error in that line Type mismatch: cannot convert from element type Object to Path ---------- for (Path path :_graphics) { what problem occurs here

Your ArrayList is untyped, so even though you might only ever put objects of those type in there, the compiler doesn't know it. You either need to use generics (if Java on Android supports it) e.g.
ArrayList<Path> _graphics = new ArrayList<Path>();
Or rewrite the loop so you can cast the elements as you get them from the list.
for (int c=0; c< _graphic.size(); ++c ) {
Path p = (Path)_graphics.get(c);
....
}
Good luck.