We Keep Coding

Custom ImageView background draw with app:srcCompat

I have a custom ImageView and I am drawing background to it dynamically like:
#Override
protected void onDraw(Canvas canvas){
p.setColor(SkinHelper.getColor(getContext(), R.color.color_transparent_white));
canvas.drawPath(hexagon.getPoints(0, 0), p);
p.setColor(SkinHelper.getColor(getContext(), R.color.color_dark));
canvas.drawPath(hexagon.getPartPoints(0, 0, (int) mNumericValue), p);
super.onDraw(canvas);
}
If I set the image of the imageview in xml like
android:src="#drawable/selector_plan_cancel"
than everything works well. But I am using the support library, so I want to set the image of the imageView like
app:srcCompat="#drawable/selector_plan_cancel"
and it's not working. What should I do differently?

Try to extend AppCompatImageView instead of ImageView and keep the app:srcCompat.

Add image to location where user click on Layout

I am trying to add image to the point (X,Y) on Layout i have created dynamicaly.
I want to add the imageview on exact user clicked location. But the image is not placed on correct location when clicked.
here is my code
final LinearLayout layoutColumnBoxes = new LinearLayout(getParent());
layoutColumnBoxes.setBackgroundColor(Color.GREEN);
layoutColumnBoxes.setId(counterIdForBoxes);
layoutColumnBoxes.setLayoutParams(layoutParamsColumns);
layoutColumnBoxes.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
Toast.makeText(getParent(),"Event="+event.getX()+"Event Y = "+event.getY(),Toast.LENGTH_SHORT).show();
return false;
}
});
layoutColumnBoxes.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
ImageView imageView = new ImageView(getParent());
imageView.setImageResource(R.drawable.crack);
LinearLayout lay = (LinearLayout) view.findViewById(v.getId());
lay.addView(imageView);
// Toast.makeText(getParent(),"Clicked View Id is="+v.getId(),Toast.LENGTH_SHORT).show();
}
});
Please help.

See I know what you're trying to say cause I too had this problem a few months back when developing an application. When you click a point on the screen the position of the imageview is not close to the way you clicked it right?
the things I did were
1) remove the excess space around your image.
This is optional. The only reason I stated this was because it depends on the type of image in your image view cause later you will be placing the image based on the top left corner of the imageview.
2) if your loading the images from the drawable folder make sure that you have the right size image in the right folder. This is IMPORTANT. if you screw up the sizes, android is going to alter the size and location of your images based on when your touch is based on the screen.
3) you need to set the margins of your image view properly. After hours of googling I came up with the following first you'll need to get half the height and width of your imageview, use imageview.getMeasuredHeight() / 2 and imageview.getMeasuredWidth() / 2 (Call these imgH and imgW respectively for explanation purposes)
the later in your OnTouchListener you'll have to set the top left margin of your imageview (the methods vary on the type of layout you use). This is done by setting the top margin at "event.getY - imgH" and the left margin at "event.getX - imgW"
I have an app in the playstore which uses this feature, you can check it here .
I hope this has solved your problem :) if it hasn't then don't hesitate to speak your doubts.

this code work for me:
public class MainActivity extends ActionBarActivity {
float x, y;
RelativeLayout rl;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getActionBar().hide();
rl = (RelativeLayout) findViewById(R.id.root_view);
rl.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
// rl.removeView(iv);
x = motionEvent.getX();
y = motionEvent.getY();
setImageLocation(x, y);
//rl.addView(iv);
}
return false;
}
});
}
public void setImageLocation(float x, float y) {
ImageView newImage;
RelativeLayout.LayoutParams newparams;
newparams = new RelativeLayout.LayoutParams(20, 20);
newparams.setMargins((int) (x-rl.getPaddingLeft()), (int) (y-rl.getPaddingTop()), 0, 0);
newImage = new ImageView(this);
newImage.setLayoutParams(newparams);
newImage.setImageResource(R.drawable.clock);
rl.addView(newImage);
}
}
activity_main.xml layout only has one relativeLayout that has full screen size(match parent)

Add an image as background and put other images on top of it

I am creating an image by using Canvas- and Bitmap class. I want to set it as a background for the user. Then I want to add some more images on top of it.
this is the code for image that is supposed to be as background.
ImageView imgMap1 = (ImageView) findViewById(R.id.imgMap1);
imgMap1.setImageDrawable(new BitmapDrawable(Bitmap.createBitmap(bmp, 0, 0, 500, 500)));
and this is the code to make it as background:
LinearLayout ll = new LinearLayout(this);
ll.setBackgroundResource(R.drawable.nn);
this.setContentView(ll);
The Problem here is: When I set it as background, I can't see the other photo anymore.
How can I do this?
Thanks in advance.
The other Images are added in the Layout. they are movable by finger touch. user can reposition them by finger.
ImageView i1 = (ImageView) findViewById(R.id.Image1);
ImageView i2 = (ImageView) findViewById(R.id.Image2);

The layout is built from the top down in your XML file, or in the order you add elements in code. It sounds like your other images is being added to the layout first, either as a higher-up element in the XML file, or earlier in your code. You'll need to add the other code as context for a complete answer.

Just noticed that you can directly set Bitmap as your ImageView's content using setImageBitmap(Bitmap bm)See the Android Reference
Then let talk about your question.
First, create your own class extends the View;
Second, load background image and overlay image using Bitmap
Third, invoke onTouch event, so that the onDraw method will automatically redraw the overlay image using the coordinates returned by onTouch
Something like:
public class dragndrop extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
// using this to load your background image
BitmapFactory.Options opt = new BitmapFactory.Options();
opt.inPreferredConfig = Bitmap.Config.RGB_565; // this is not a must
bmBackground = BitmapFactory.decodeFile(filePath, opt);
super.onCreate(savedInstanceState);
DrawView dv = new DrawView(dragndrop.this);
setContentView(dv);
}
public class DrawView extends View {
Point coordinate;
public DrawView(Context context) {
super(context);
setFocusable(true); //necessary for getting the touch events
}
#Override
protected void onDraw(Canvas canvas) {
// assume you have already load your background image as bitmap
canvas.drawBitmap(bmBackground, 0, 0, null);
// assume bm is the overlay image you need to put on top,
// the method here will draw the object with the coordinate you give
canvas.drawBitmap(bm, coordinate.x, coordinate.y, null);
}
// events when touching the screen
public boolean onTouchEvent(MotionEvent event) {
int eventaction = event.getAction();
int x = (int)event.getX();
int y = (int)event.getY();
switch (eventaction ) {
case MotionEvent.ACTION_DOWN:
// add code here to determine the point user touched is within the object or not
break;
}
}
break;
case MotionEvent.ACTION_MOVE: // touch 'n' drag
// pass the touch point to your object
coordinate.x = x;
coordinate.y = y;
break;
case MotionEvent.ACTION_UP:
// touch drop - just do things here after dropping
break;
}
// redraw the canvas
invalidate();
return true;
}
}
}
This is my own snippet, please edit before use, and please let me know when your question is resolved.

Problems drawing text onto an ImageView using a Canvas

I'm trying to implement a footer for my ListView which will act as a menu-type frame with five elements. I want the elements to be able to (dynamically, based on user input) display either images or text (or possibly both, but I'm not there yet). Eventually it will be more interactive but for now I was trying to implement it so that the ImageView (which by default displays an image) would erase the image and display text instead.
I thought the best way to implement this was to draw text on a canvas and use the android.view.View.draw(canvas c) method to draw it onto the ImageView. However, I'm having trouble doing this. Specifically, I can modify the view in almost any way (set the background color, change the drawable, etc etc) and it all works fine, and the code to draw the canvas compiles properly, but it doesn't do anything at runtime. The view remains completely unchanged.
(Note: I've tried to eliminate any stupid mistakes through code (i.e. made sure text wasn't transparent/same color as bg, made sure text was drawn inside the area of the view, etc) but I am not 100% it's error free.)
I tried both drawing to the view passed into the onClick function and drawing to a new ImageView constructed from the passed view - neither works.
Does anyone have any suggestions?
Code follows:
login_button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
Bitmap img = Bitmap.createBitmap( 60, 60, Config.ARGB_8888);
Canvas c = new Canvas();
c.setBitmap(img);
Paint myPaint = new Paint();
myPaint.setTypeface(mFace);
myPaint.setColor(android.R.color.black);
myPaint.setTextSize(2);
myPaint.setTextAlign(Paint.Align.LEFT);
String content = "testing";
c.drawText(content, 0,0, myPaint);
view.draw(c);//does nothing
ImageView view2 = (ImageView) view;
view2.setBackgroundColor(android.R.color.white); //this works perfectly
view2.draw(c);//does nothing
Toast.makeText(MainListView.this, ""+c.getHeight(), Toast.LENGTH_SHORT).show(); //making sure c has height - this returns 60 as expected
Toast.makeText(MainListView.this, "end of method", Toast.LENGTH_SHORT).show();
}
});

View.draw(Canvas) draws the View onto the Canvas, not vice versa like you seem to expect.
If you want to do it along the lines that you already are, you need to extend an existing View class, likely TextView or ImageView, and override onDraw(), as explained in the Custom Components Dev Guide.
I think what I would do is use something like a FrameLayout and set it to contain either the appropriate TextView or ImageView as necessary. That seems cleaner than manually rendering text in an ImageView.

You could create the Canvas from the Bitmap, and set the Bitmap as the Image for your ImageView.
Bitmap img = Bitmap.createBitmap( 60, 60, Config.ARGB_8888);
Canvas c = new Canvas(img);
Paint myPaint = new Paint();
myPaint.setTypeface(mFace);
myPaint.setColor(android.R.color.black);
myPaint.setTextSize(2);
myPaint.setTextAlign(Paint.Align.LEFT);
String content = "testing";
c.drawText(content, 0,0, myPaint);
ImageView view2 = (ImageView) view;
view2.setImageBitmap(img);
Toast.makeText(MainListView.this, ""+c.getHeight(), Toast.LENGTH_SHORT).show(); //making sure c has height - this returns 60 as expected
Toast.makeText(MainListView.this, "end of method", Toast.LENGTH_SHORT).show();
Although, I believe the "right" way to do this is to use an extension of View and override the onDraw method to draw differently based on some local variables:
login_button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
((MyView)view).mContextVariable = true; //or false, etc
//you might not need this invalidate, because the click event probably causes and invalidate to be called
view.invalidate();
}
}
class MyView extends View
{
Paint myPaint;
boolean mContextVariable;
public MyView(Context context)
{
super(context);
myPaint = new Paint();
myPaint.setTypeface(mFace);
myPaint.setColor(android.R.color.black);
myPaint.setTextSize(2);
myPaint.setTextAlign(Paint.Align.LEFT);
}
#Override
protected void onDraw(Canvas canvas)
{
if(mContextVariable)
{
//draw something
}
else
{
//draw something else
}
canvas.drawText("testing", 0,0, myPaint);
}
}

shrinking surfaceview to be in a box

I would like to change the current SurfaceView in my app from
to
Is there a way to do this without using main.xml at all?
I'm trying to code the GUI in run-time. I can achieve the current SurfaceView (top picture) by overriding onMeasure() and using setMeasuredDimension(), but I would like to achieve the bottom picture. The green area is the rest of the screen.
EDIT:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
this.setMeasuredDimension(500, 300);
param.gravity = Gravity.CENTER_VERTICAL;
}

Have you tried using the android:layout_gravity-attribute to center your View in the Layout?
The corresponding class would be FrameLayout.LayoutParams, possible gravity's are listed here. The code could then look something like this:
FrameLayout f = new FrameLayout(this);
ImageView test = new ImageView(this);
f.addView(test, new FrameLayout.LayoutParams(500, 300, Gravity.CENTER));