Develop Reference

Draw new Circle with each new Touch Event

I have a class that draws a circle at the point where the user touches. However, the circle disappears whenever a new point on the same surface is touched. I would like to keep the circle and draw a new one instead. Here is my current code.
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import java.util.Random;
public class ArtSurface extends SurfaceView implements Runnable, View.OnTouchListener {
private SurfaceHolder aHolder;
private Thread aThread;
private boolean aFlag=false;
private float aX;
private float aY;
private Paint aPaint;
private Random cRandom;
public int randomColor(){
if (cRandom==null){
cRandom=new Random();
}
int randomCol=0xff000000+256*256*cRandom.nextInt(256)+256*cRandom.nextInt(256)+cRandom.nextInt(256);
return randomCol;
}
public ArtSurface(Context context, AttributeSet attrs) {
super(context, attrs);
aHolder=getHolder();
aX=-100;
aY=-100;
aPaint=new Paint();
aPaint.setColor(randomColor());
}
public void resume(){
aThread= new Thread(this);
aFlag=true;
aThread.start();
}
public void pause(){
aFlag=false;
}
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch(motionEvent.getAction()){
case MotionEvent.ACTION_DOWN:
aX= motionEvent.getX();
aY=motionEvent.getY();
break;
case MotionEvent.ACTION_UP:
//Leave art where it is
break;
}
return true;
}
#Override
public void run() {
while(aFlag){
if(!aHolder.getSurface().isValid())
continue;
Canvas canvas=aHolder.lockCanvas();
canvas.drawARGB(255,255,255,255);
canvas.drawCircle(aX,aY,50,aPaint);
aHolder.unlockCanvasAndPost(canvas);
}
}
}```
The way the code is currently, every new touch event causes a new circle to be drawn at the new point of touch. The previous circle is removed and I can only draw one circle at a time. My main aim is to have a new circle with a random color whenever the user touches a new point on the screen. All the other previous circles should remain where they were initially rendered. Thank you.

The line
canvas.drawARGB(255,255,255,255);
keeps drawing over the rendered circle. Removing it means that each new circle is visible on the canvas.

Android add two views with canvases programmatically

I have been trying to add two views with canvases to my activity programmatically, but it looks like only the first one is being added (I can tell by looking at the console output). What am I doing wrong?
Here is my code:
package app.com.example.android.drawtwoviews;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
DrawView drawView;
DrawView2 drawView2;
private LinearLayout root;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
root = new LinearLayout(this);
root.setOrientation(LinearLayout.VERTICAL);
drawView = new DrawView(this);
drawView.setBackgroundColor(Color.WHITE);
root.addView(drawView);
drawView2 = new DrawView2(this);
drawView2.setBackgroundColor(Color.WHITE);
root.addView(drawView2);
setContentView(root);
}
public class DrawView extends View {
Paint paint = new Paint();
public DrawView(Context context) {
super(context);
}
#Override
public void onDraw(Canvas canvas) {
System.out.println("DrawView1");
paint.setColor(Color.BLACK);
//paint.setStrokeWidth(3);
canvas.drawRect(30, 30, 80, 80, paint);
}
}
public class DrawView2 extends View {
Paint paint = new Paint();
public DrawView2(Context context) {
super(context);
}
#Override
public void onDraw(Canvas canvas) {
System.out.println("DrawView2");
paint.setColor(Color.BLUE);
paint.setStrokeWidth(3);
canvas.drawRect(300, 300, 400, 400, paint);
}
}
}

You are adding your views to the root without specifying layout parameters. That means they both get the default layout parameters of LinearLayout, which, for a vertical layout, is (MATCH_PARENT, WRAP_CONTENT).
Neither of your custom views overrides onMeasure(), which means both measure to their default suggested minimum size of 0×0.
This means that your LinearLayout is layouting two views with a requested size of 0×0 and a layout spec of (MATCH_PARENT, WRAP_CONTENT). The way this works out is a bit tricky, but your first child takes up the full screen height and your second child is 0px tall. Both children are full screen width. You can easily see this in the Hierarchy Viewer.
To fix the problem, you need to either specify layout params:
// in onCreate()
int width = LinearLayout.LayoutParams.MATCH_PARENT;
int height = 0;
int weight = 1;
LinearLayout.LayoutParams params =
new LinearLayout.LayoutParams(width, height, weight);
drawView = new DrawView(this);
drawView.setBackgroundColor(Color.WHITE);
root.addView(drawView, params); // note the extra argument
drawView2 = new DrawView2(this);
drawView2.setBackgroundColor(Color.WHITE);
root.addView(drawView2, params); // note the extra argument
Or you can modify the DrawViews so that they measure to some minimum size:
public class DrawView extends View {
// paint
// constructor
// onDraw
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
setMeasuredDimension(80, 80);
}
}
public class DrawView2 extends View {
// paint
// constructor
// onDraw
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
setMeasuredDimension(400, 400);
}
}

Try setting this flag in your view's contructor:
public DrawView(Context context) {
super(context);
setWillNotDraw(false);
}
This is needed because your view doesn't know that you wanna do custom drawing and onDraw() never gets called since there's nothing to draw.

Android how to match text with images by pointing text and images with lines

I am trying to create app which is match text with appropriate images by pointing with line.
I want to create app exactly same which is shown in the below image:
can any one please give me an idea?
This is my main class:
public class MatchActivity extends Activity {
ArrayAdapter<String> listadapter;
float x1;
float y1;
float x2;
float y2;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
String[] s1 = { "smiley1", "smiley2", "smiley3" };
ListView lv = (ListView) findViewById(R.id.text_list);
ArrayList<String> list = new ArrayList<String>();
list.addAll(Arrays.asList(s1));
listadapter = new ArrayAdapter<String>(this,R.layout.rowtext, s1);
lv.setAdapter(listadapter);
GridView gv = (GridView) findViewById(R.id.image_list);
gv.setAdapter(new ImageAdapter(this));
lv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View v, int arg2,
long arg3){
x1=v.getX();
y1=v.getY();
Log.d("list","text positions x1:"+x1+" y1:"+y1);
}
});
gv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View v, int arg2,
long arg3){
DrawView draw=new DrawView(MatchActivity.this);
x2=v.getX();
y2=v.getY();
draw.position1.add(x1);
draw.position1.add(y1);
draw.position2.add( x2);
draw.position2.add(y2);
Log.d("list","image positions x2:"+x2+" y2:"+y2);
LinearLayout ll=LinearLayout)findViewById(R.id.draw_line);
ll.addView(draw);
}
});
}
}
This is my drawing class to draw a line:
public class DrawView extends View {
Paint paint = new Paint();
private List<Float> position1=new ArrayList<Float>();
private List<Float> position2=new ArrayList<Float>();;
public DrawView(Context context) {
super(context);
invalidate();
Log.d("drawview","In DrawView class position1:"+position1+" position2:"+position2) ;
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d("on draw","IN onDraw() position1:"+position1+" position2:"+position2);
assert position1.size() == position2.size();
for (int i = 0; i < position1.size(); i += 2) {
float x1 = position1.get(i);
float y1 = position1.get(i + 1);
float x2 = position2.get(i);
float y2 = position2.get(i + 1);
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
canvas.drawLine(x1,y1, x2,y2, paint);
}
}
}
My layout main.xml file:
<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:gravity="center_horizontal">
<ListView
android:id="#+id/text_list"
android:layout_width="150dp"
android:layout_height="fill_parent"
/>
<LinearLayout
android:id="#+id/draw_line"
android:layout_width="150dp"
android:layout_height="fill_parent"
android:background="#cccccc" />
<GridView
android:id="#+id/image_list"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"
android:columnWidth="150dp"/>
</LinearLayout>
My Logcat details:
First time selection of text and image:
10-19 10:42:23.672: D/Text list(653): Clicking on text co-ordinates are:0.0 ,151.0
10-19 10:42:25.831: D/Image list(653): Clicking on image co-ordinates are:0.0 ,320.0
10-19 10:42:25.861: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]
Second time selection of text and image:
10-19 10:42:58.512: D/Text list(653): Clicking on text co-ordinates are:0.0 ,302.0
10-19 10:43:00.144: D/Image list(653): Clicking on image co-ordinates are:0.0 ,0.0
10-19 10:43:00.303: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]
Third time selection of text and image:
10-19 10:43:24.962: D/Text list(653): Clicking on text co-ordinates are:0.0 ,0.0
10-19 10:43:26.144: D/Image list(653): Clicking on image co-ordinates are:0.0 ,320.0
10-19 10:43:26.261: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]
Thanks in advance .

I would probably do this in a custom component, where you also render the images and texts. Detect touches, and use a simple algorithm to detect what they hit (e.g. divide by the height of each component to get which line, and test to see which side (left or right) the touch hits. You probably don't have to bother with text and image bounds. Store the connected components in a list, and calculate the coordinates of the lines given the connected components (more or less same as for detecting touches but inversed).
Some small comments on your code: Keep the variables that are local to methods in the methods, Float and float are automatically converted, and don't use arrays to represent objects that are better represented as classes (p1.getX() is more readable than p1.get(0)).
Edit: If you just want to draw lines between your points you can do something like this:
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d("on draw","on draw position1:"+position1+" position2:"+position2);
assert position1.size() == position2.size();
for (int i = 0; i < position1.size(); i += 2) {
float x1=position1.get(i);
float y1=position1.get(i+1);
float x2=position2.get(i);
float y2=position2.get(i+1);
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
canvas.drawLine(x1,y1+75, x2+300,y2, paint);
}
}
But now you have to make sure that the user clicks on the components in the right order. If you click twice on the same column you will have problems. You will have to solve that in the click handlers. The biggest issue I have with this is the hard coded constants 75 and 300. I don't see your layout so I don't know what you did there, but I'm quite sure that you will be better off using one component that draws everything.
Edit: Rewrite
This is a cleaned up version of your MatchActivity (untested though):
package com.example.mediakey;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.ListView;
public class MatchActivity extends Activity {
ArrayAdapter<String> listadapter;
DrawView draw;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
String[] s1 = { "smiley1", "smiley2", "smiley3" };
ListView lv = (ListView) findViewById(R.id.text_list);
ArrayList<String> list = new ArrayList<String>();
list.addAll(Arrays.asList(s1));
listadapter = new ArrayAdapter<String>(this, R.layout.rowtext, s1);
lv.setAdapter(listadapter);
GridView gv = (GridView) findViewById(R.id.image_list);
gv.setAdapter(new ImageAdapter(this));
// This should be done in the layout xml
// I moved it here to do it only once not for every click
// I don't know how your layout is defined but it seems as this should
// be the parent component of the text and image views and it's not.
// If it works like this I don't think you should bother with it.
// Otherwise post your layout file.
LinearLayout ll= (LinearLayout) findViewById(R.id.draw_line);
draw = new DrawView(this);
ll.addView(draw);
lv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3){
float x1 = v.getX();
float y1 = v.getY();
draw.addSourcePoint(x1, y1);
Log.d("list","text positions x1:"+x1+" y1:"+y1);
}
});
gv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3){
float x2 = v.getX();
float y2 = v.getY();
draw.addDestinationPoint(x2, y2);
Log.d("list","image positions x2:"+x2+" y2:"+y2);
}
});
}
}
And here is a rewritten DrawView (also untested):
package com.example.mediakey;
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;
public class DrawView extends View {
Paint paint = new Paint();
private List<Float> position1=new ArrayList<Float>();
private List<Float> position2=new ArrayList<Float>();;
public DrawView(Context context) {
super(context);
invalidate();
Log.d("drawview","In DrawView class position1:"+position1+" position2:"+position2) ;
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d("on draw","IN onDraw() position1:"+position1+" position2:"+position2);
assert position1.size() == position2.size();
for (int i = 0; i < position1.size(); i += 2) {
float x1 = position1.get(i);
float y1 = position1.get(i + 1);
float x2 = position2.get(i);
float y2 = position2.get(i + 1);
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
canvas.drawLine(x1,y1, x2,y2, paint);
}
}
public void addSourcePoint(float x1, float y1) {
position1.add(x1);
position1.add(y1);
}
public void addDestinationPoint(float x2, float y2) {
position2.add(x2);
position2.add(y2);
invalidate();
}
}
Now you need to check which of the add*Points methods where called last and if the same is called twice in a row you need to handle that. You need to solve this your self.

How to draw lines over ImageView on Android?

I am trying to develop a simple map application, which will display a map in the screen.
When the user moves the cursor on screen, I want to display 2 perpendicular lines over my map. I had tried many examples to get an idea for that, but unfortunately, didn't succeed.
How can I make this?
And as one previous questionhere I had tried. but didn't get the answer. Can anyone guide me?
My main.xml is as following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/main_imagemap"
android:src="#drawable/worldmap"
android:clickable="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
And my activity file(i had just started it..)
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
public class LineMapActivity extends Activity
{
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView map_image = (ImageView)findViewById(R.id.main_imagemap);
}
}
And as in that link, i had also added MyImageView.
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.widget.ImageView;
public class MyImageView extends ImageView
{
public MyImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
canvas.drawLine(0, 0, 20, 20, p);
super.onDraw(canvas);
}
}
Now how can i add this MyImageView to my app?

Finally I figured out a solution. It's a simple program which draws a line over an Image.
Here is my main.xml file (com.ImageDraw.MyImageView is my custom view, code below):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.ImageDraw.MyImageView android:id="#+id/main_imagemap"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
And here is the main activity:
import android.app.Activity;
import android.os.Bundle;
public class MyActivity extends Activity
{
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
and this is my custom image view (MyImageView):
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
public class MyImageView extends SurfaceView implements SurfaceHolder.Callback
{
private CanvasThread canvasthread;
public MyImageView(Context context) {
super(context);
getHolder().addCallback(this);
canvasthread = new CanvasThread(getHolder(), this);
setFocusable(true);
}
public MyImageView(Context context, AttributeSet attrs)
{
super(context,attrs);
getHolder().addCallback(this);
canvasthread = new CanvasThread(getHolder(), this);
setFocusable(true);
}
protected void onDraw(Canvas canvas) {
Log.d("ondraw", "ondraw");
Paint p = new Paint();
Bitmap mapImg = BitmapFactory.decodeResource(getResources(), R.drawable.mybitmap);
canvas.drawColor(Color.BLACK);
canvas.drawBitmap(mapImg, 0, 0, null);
p.setColor(Color.RED);
canvas.drawLine(0, 0, 100, 100, p);
}
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
}
public void surfaceCreated(SurfaceHolder holder) {
canvasthread.setRunning(true);
canvasthread.start();
}
public void surfaceDestroyed(SurfaceHolder holder) {
boolean retry = true;
canvasthread.setRunning(false);
while (retry)
{
try
{
canvasthread.join();
retry = false;
}
catch (InterruptedException e) {
// TODO: handle exception
}
}
}
}
And finally here is my CanvasThread:
import android.graphics.Canvas;
import android.view.SurfaceHolder;
public class CanvasThread extends Thread
{
private SurfaceHolder surfaceHolder;
private MyImageView myImageView;
private boolean run = false;
public CanvasThread(SurfaceHolder s, MyImageView m)
{
surfaceHolder = s;
myImageView = m;
}
public void setRunning(boolean r)
{
run = r;
}
public void run()
{
Canvas c;
while(run)
{
c=null;
try
{
c= surfaceHolder.lockCanvas(null);
synchronized (surfaceHolder) {
myImageView.onDraw(c);
}
}
finally
{
if(c!=null)
{
surfaceHolder.unlockCanvasAndPost(c);
}
}
}
}
}
You can find more details in this tutorial

Error you are getting because you are trying to casting ImageView object to MyImageView object.

Just fix the xml to include your object instead of an imageview like so (note that com.your.package.MyImageView should be the full package name of the package containing your class and then the class name)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.your.package.MyImageView android:id="#+id/main_imagemap"
android:src="#drawable/worldmap"
android:clickable="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>

Android Custom Component not being displayed

Having a problem with Android Custom components. Trying to draw an oval shape but nothing happening.
I have this line in layout xml file
<android.project.realtimedata.DemoView android:id="#+id/demoView"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
Here is the code for my custom component class.
package android.project.realtimedata;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.view.View;
public class DemoView extends View{
ShapeDrawable thisGauge = null;
public DemoView(Context context){
super(context);
init();
}
public DemoView(Context context, AttributeSet attrs)
{
super(context, attrs);
init();
}
private void init(){
int x = 10;
int y = 10;
int width = 300;
int height = 50;
thisGauge = new ShapeDrawable(new OvalShape());
thisGauge.getPaint().setColor(0xff74AC23);
thisGauge.setBounds(x, y, x + width, y + height);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
thisGauge.draw(canvas);
}
}
I also have this line in onCreate method of Activity
demoView = (DemoView) findViewById(R.id.demoView);
Whenever I launch the application the custom component is not there.
I tried looking at it from LogCat and it definitely gets created.
What am I missing here?
Thanks in advance.

Make sure that you calling findViewById(R.id.demoView) after calling setContentView(...). To ensure that your view is being inflated, you can call Log.d("DemoView", "Created") from inside your DemoView constructor.