I am new Android programming.
I am trying to open an image from the Gallery of a phone and draw a Rectangle on top of the image I have opened. But I am able to open the image but I am not able to see the rectangle. I am using ImageView and Canvas to open image and draw. I have created a Button and used to image from Gallery. I have written the code to open and draw in onActiviesult() method.Could somebody help me?!. Thanks in advance
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button gal=(Button)findViewById(R.id.button1);
gal.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent gal_open=new Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(gal_open,1);
}
});
}
public void onActivityResult(int requestCode,int resultCode,Intent intentData){
super.onActivityResult(requestCode, resultCode, intentData);
if(requestCode==1 && resultCode==RESULT_OK && intentData!=null){
ImageView img=(ImageView)findViewById(R.id.imageView1 );
Bitmap bmp=Bitmap.createBitmap(img.getHeight(),img.getWidth(),Bitmap.Config.RGB_565);
Canvas cnvs=new Canvas(bmp);
//img.setImageBitmap(bmp);
Paint paint=new Paint();
paint.setColor(Color.RED);
Uri data=intentData.getData();
String[] filePath={MediaStore.Images.Media.DATA};
Cursor cur=getContentResolver().query(data,filePath,null,null,null );
cur.moveToFirst();
int colIndex=cur.getColumnIndex(filePath[0]);
String picPath=cur.getString(colIndex);
cur.close();
cnvs.drawRect(20, 20,50,50 , paint);
img.setImageBitmap(bmp);
img.setImageBitmap(BitmapFactory.decodeFile(picPath));
}
}
return super.onOptionsItemSelected(item);
}
}
try drawing the bitmap on the canvas and then call setImageBitmap just once. In this moment you are overriding the content of the ImageView. Remove img.setImageBitmap(BitmapFactory.decodeFile(picPath));
and
cnvs.drawBitmap(BitmapFactory.decodeFile(picPath), 0, 0, null);
cnvs.drawRect(20, 20,50,50 , paint);
img.setImageBitmap(bmp);
I am not sure abaut the drawing order. If you don't see the rectangle try changing the order of drawRect and drawBitmap
You may try like this way which i use:
create customborder.xml file.
Just take imageview in layout and make border xml file
and now use this customborder in layout backgourd like:
android:layout_height="fill_parent"
android:background="#drawable/customborder">
Related
I'm trying to create an app that has a fairly complex UI.
I'm trying to understand what is the best practice to render irregular button shapes to the screen.
I'm adding this image as an example. Each one of these wooden boards is a button.
I obviously can't use Android's Button or ImageButton because the shape is not a rectangle.
I assume I need to draw this directly onto a canvas or use onDraw or Draw to make this happen.
Is this the correct way I should use to render these as buttons?
Any good reading material on these is HIGHLY appreciated..
Thank you
You can create a customized View working in following way:
in onDraw() paint 3 bitmaps each representing single button (where 2 other buttons are transparent),
in onTouch() check the touched pixel against those bitmaps to see which bitmap was clicked
Code snippet:
public class DrawingBoard extends View {
Bitmap mBitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.button1);
Bitmap mBitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.button2);
Bitmap mBitmap3 = BitmapFactory.decodeResource(getResources(), R.drawable.button3);
public DrawingBoard (Context context) {
// TODO Auto-generated constructor stub
super (context);
}
#Override
protected void onDraw (Canvas canvas) {
canvas.drawBitmap(mBitmap1, 0, 0, null);
canvas.drawBitmap(mBitmap2, 0, 0, null);
canvas.drawBitmap(mBitmap3, 0, 0, null);
}
#Override
public boolean onTouchEvent (MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN :
int xx = (int)event.getX();
int yy = (int)event.getY();
if(Color.alpha(mBitmap1.getPixel(xx,yy)) != 0) {
// button1 pressed
}
else if(Color.alpha(mBitmap2.getPixel(xx,yy)) != 0) {
// button2 pressed
}
else if(Color.alpha(mBitmap3.getPixel(xx,yy)) != 0) {
// button3 pressed
}
break;
}
return true;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
// bitmaps are assumed to be of the same size
setMeasuredDimension(mBitmap1.getWidth(),mBitmap1.getHeight());
}
}
I didn't test the code, it it may have errors.
A variant - you can create a virtual bitmap storing 'hit codes' for pixels on whole image. You can create it from original picture but replace pixels with ids to detect which area was touched, all other pixels make 'empty' (0x0). So getPixel() will return id of a button.
I want to generate Rectangle on same size but at random positions on an ImageView. When I click the button the position of the rectangle must change
I have attached the entire Activity. First, I open an image from the gallery and draw a rectangle on it. When the shuffle button is clicked, it has to move
public class Register extends Activity {
ImageView img;
String picpath;
Bitmap bmp;
Canvas cnvs;
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.register);
img=(ImageView)findViewById(R.id.imageView1);
//Open Button
Button open=(Button)findViewById(R.id.button3);
open.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent gal_open=new Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(gal_open,1);
}
});
Button shuffle=(Button)findViewById(R.id.button2);
shuffle.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
int height=img.getHeight();
int width=img.getWidth();
int x;
int y;
Random r=new Random();
x=r.nextInt(width)*width;
y=r.nextInt(height)*height;
Paint paint=new Paint();
cnvs.drawBitmap(BitmapFactory.decodeFile(picpath), 0, 0, null);
cnvs.drawRect(x, y,x+50,y+50 , paint);
img.setImageBitmap(bmp);
}
});
}
public void onActivityResult(int requestCode,int resultCode,Intent intentData)
{
super.onActivityResult(requestCode, resultCode, intentData);
if(requestCode==1 && resultCode==RESULT_OK && intentData!=null)
{
//ImageView img=(ImageView)findViewById(R.id.imageView1 );
Bitmap bmp=Bitmap.createBitmap(img.getHeight(),img.getWidth(),Bitmap.Config.RGB_565);
Canvas cnvs=new Canvas(bmp);
Paint paint=new Paint();
paint.setColor(Color.RED);
Uri data=intentData.getData();
String[] filePath={MediaStore.Images.Media.DATA};
Cursor cur=getContentResolver().query(data,filePath,null,null,null );
cur.moveToFirst();
int colIndex=cur.getColumnIndex(filePath[0]);
picpath=cur.getString(colIndex);
cur.close();
cnvs.drawBitmap(BitmapFactory.decodeFile(picpath), 0, 0, null);
cnvs.drawRect(20, 20,50,50 , paint);
img.setImageBitmap(bmp);
//cnvs.drawRect(20, 20,50,50 , paint);
}
}
}
Please consider this:
//drawRect (float left, float top, float right, float bottom, Paint paint)
in your case it would never change the position as its starting point would always be same you need to change that also. I think this is the case you are getting wrong values in X,and Y . Also try to give the range to the Random generator like 1 to 60
You can simply change the values of X and Y like
x=r.nextInt(width);
y=r.nextInt(height);
but make it sure it should not go beyond the bounds of bitmap
x=r.nextInt(width) will already give you 0 <= x < width, so you shouldn't multiply it again by width.
Same for y and height.
Also, where is your cnvs coming from ? I'm not sure you can just draw on your ImageView in the onClick. I would have made a custom ImageView which remembers where the rectangle is supposed to be and draw it in its onDraw method, then during the onClick, method I would change the variables that store the rectangle position and force a redraw (so onDraw will draw the rectangle at the new position).
Create Random r as a class member and initialize it in the onCreate() method and not as Random r=new Random() inside the onClick()
If i use the ImageView , i can see the image on my activity , however i can't see when i draw it with a canvas. am i missing something ?. The drawable has the dimensions 479px*100px. I can see onDraw function is being called using a breakpoint inside it.
public View getScrollingImage(){
View temp = new View(this){
BitmapDrawable cloud= (BitmapDrawable) MainActivity.this.getResources().getDrawable(R.drawable.cartoon_clouds);
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(cloud.getBitmap(), 0,0, null);
invalidate();
}
};
//ImageView temp = new ImageView(this);
//temp.setImageDrawable(this.getResources().getDrawable(R.drawable.cartoon_clouds));
temp.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT,1.0f));
return temp;
}
adding it to view by ,
mainLayout.addView(getScrollingImage());
I am on Android 4.0.4.
Got this working by overriding the onMeasure function in view , got this from Android: Drawing on Canvas in Scrollview
Thanks stackOverflow.
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(cloud.getBitmap().getWidth(),
cloud.getBitmap().getHeight());
}
How I can put an image over an activity (something like the image below) but with the buttons and other widgets under this image receiving the touch events?
image http://images.macworld.com/appguide/images/android/558/2908791394402692/5582908791394402692_1.jpg
You can create a transparent Activity like this How do I create a transparent Activity on Android? and make a Layout with a fullscreen ImageView
I solve the problem override the draw function.
public class TutorialLinearLayout extends LinearLayout {
public TutorialLinearLayout(Context context) {
super(context);
}
#Override
public void draw(Canvas canvas) {
super.draw(canvas);
Bitmap tutorial = BitmapFactory.decodeResource(getResources(), R.drawable.tutorial);
canvas.drawBitmap(tutorial, 0, 0, null);
tutorial.recycle();
}
}
I want to display canvas contents on imageview in android
i am not understanding the
imageview.draw(canvas);
Heres my code:
public class Matrix extends Activity {
public Bitmap mybitmap,newbmp,bitmap,bmp;
ImageView imageview;
Paint paint;
#Override
public void onCreate(final Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imageview=(ImageView)findViewById(R.id.ImageView01);
imageview.setDrawingCacheEnabled(true);
}
protected void onDraw(Canvas canvas)
{
imageview.draw(canvas);
mybitmap=BitmapFactory.decodeResource(getResources(), R.drawable.image);
canvas.drawBitmap(mybitmap, 0, 0, paint);
}
}
"I want to display canvas contents on imageview in android"
So you want to draw what is on the Canvas in to your ImageView? If that's what you want then you need to read the links given by johike because you seem to have become confused a little.
The following in your code:
imageview.draw(canvas);
Does NOT mean draw the contents of canvas in to the imageview. It means the opposite, draw the imageview to the canvas.
Even if your question is not detailed enough to give you a precise answer I can give you the following hints:
Derive your on class from ImageView and then override the onDraw method
#Override
protected void onDraw(Canvas canvas) {
// draw a blue background
canvas.drawColor(Color.BLUE);
// additional drawings here
}
Further study the Android references:
http://developer.android.com/guide/topics/graphics/2d-graphics.html
http://developer.android.com/reference/android/graphics/Canvas.html