In my application,I am setting an image in my imageview. I just need to place a marker on that imageview. I am doing it with onDraw function in my custom image view class.The problem is,for example if I take x position and y position as 40 respectively.The marker position shown above image in my mobile is different when compared with running same application on tablet.
I want a solution such that when I give coordinates then the position of marker on image in mobile and tablet appears same.
Here is the code my main activity:
public class PointOnImageActivity extends Activity
{
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_point_on_image);
CustomImag ev= new CustomImag(this);
ev.setBackgroundResource(R.drawable.stad);// set background
setContentView(ev);
}
}
Here is the code of my custom imageview class:
public class CustomImag extends ImageView
{
public CustomImag(Context context)
{
super(context);
}
#Override
public void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
canvas.drawCircle(40,40,10,mPaint);
}
}
that's because 40 is pixel value, you actually need 40dp instead. so you can convert 40dp to px value dynamically, like this:
int pxValue1 = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40, context.getResources()
.getDisplayMetrics());
int pxValue2 = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, context.getResources()
.getDisplayMetrics());
canvas.drawCircle(pxValue,pxValue,pxValue2,mPaint);
You have to position your custom View according to the screen dimensions. This way, no matter what size screen displays your app, your positioning will be relative.
In your onDraw(Canvas) method, you can get the screen dimensions and draw the circle using them. In the following example(which is mostly your code), I place the red circle at screen_width / 4 and screen_height / 4:
public class MyCustomImageViewActivity extends Activity{
CustomImag ev;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ev = new CustomImag(this);
ev.setBackgroundResource(R.drawable.stad);// set background
setContentView(ev);
}
public class CustomImag extends ImageView {
Paint mPaint;
public CustomImag(Context context) {
super(context);
mPaint = new Paint();
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Point point = new Point();
getWindowManager().getDefaultDisplay().getSize(point);
mPaint.setColor(Color.RED);
canvas.drawCircle(point.x / 4, point.y / 4, 10, mPaint);
}
}
}
Related
My question is about difference in setting the coordinates of the center a circle using the half of the view and directly. My device is 240 * 320 and when I use the getWidht()/2 and the getHeight() methods to draw a circle in center of the screen I am successful. But when I use the 120 value instead the getWidth/2 and the 160 value instead the getHight()/2 , I can not draw the circle in center of the screen. while I think the getWidth()/2 value is equal to the 120 value and the getHeight()/2 value is equal to the 160 value.
public class MainActivity extends Activity {
RelativeLayout relativeLayout;
C c;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
relativeLayout = (RelativeLayout) findViewById(R.id.re);
c = new C(getApplicationContext());
relativeLayout.addView(c);
}
}
class C extends View {
Paint paint;
C(Context context) {
super(context);
paint = new Paint();
}
#Override
protected void onDraw(Canvas canvas) {
paint.setAntiAlias(true);
paint.setColor(Color.RED);
canvas.drawCircle(120,160,20,paint);//this is not in the center of the screen.
canvas.drawCircle(getWidth/2, getHeight/2, 20 , paint);// But this is in center of the screen
}
}
Did you print the getWidth and getHeight? It maybe not 160 and 120, because it according to your views size, sometime the size it will reduce the status bar on some Android device...
I solved my problem. because the relativeLayout object has padding attribute. I should remove the padding attributes from the relativeLayout object. For more information please see here.
I wrote the following code and it works well. But I have other purpose. I want to click only on a view to doing the operations.First, Please see the following image:
MY CODE IS AS FOLLOWS:
public class MainActivity extends Activity {
RelativeLayout relativeLayout;
#Override
protected void onCreate(Bundle bundle)
{ super.onCreate(bundle);
relativeLayout = new RelativeLayout(getApplicationContext());
setContentView(relativeLayout);
A a = new A(this);
relativeLayout.addView(a);
a.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
B b = new B(getApplicationContext());
relativeLayout.addView(b);
}
});
}
}
class A extends View {
Paint paint;
A(Context context) {
super(context);
paint = new Paint();
}
#Override
protected void onDraw(Canvas canvas) {
paint.setAntiAlias(true);
paint.setColor(Color.RED);
canvas.drawRect(20,60,100,150,paint);
}
}
class B extends View {
Paint paint;
B(Context context){
super(context);
paint = new Paint();
}
#Override
protected void onDraw(Canvas canvas){
paint.setAntiAlias(true);
paint.setColor(Color.GREEN);
canvas.drawRect(100,150,200,250,paint);
}
}
when I run the above code I can see the green rectangle after press on the red rectangle. But the problem is that when I press another places on the screen I can do this operations also. I want that only I can see the green rectangle to press on the red rectangle and not in the another places on the screen to doing this operations.
Use onTouch event
a.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getX(0)>=20 && event.getY(0)>=60 && event.getX(0)<=160 && event.getY(0)<=150) {
B b = new B(getApplicationContext());
relativeLayout.addView(b);
}
return true;
}
});
You are defining the red square's parameters but not the parameters of the canvas in which you are drawing. You are creating the view (A) without defining the width and height of it, so it is set to match_parent by default, which means it will take the whole size of your RelativeLayout (the whole screen). So, when you click "outside" the red square you are actually clicking the view (A).
Try to define an specific height and width for the view in which you are drawing, like this.
A a = new A(this);
a.setLayoutParams(new RelativeLayout.LayoutParams(300,300));
Remember that LayoutParams takes pixels as parameters, so you should really convert the dps to px as specified here
Also, setting some background colors to your views (relativeLayout, A) will help you visualize what you are doing.
# nukeforum, your guess helped me very much. I thank all of you. My problem was exactly from the canvas and its size. I added the following operation in my code and solved my problem.
relativeLayout.addView(a,70,70);
For A class, I changed as follows:
canvas.drawRect(10,20,30,40,paint);
I am implementing a custom view. I want to add a bunch of circles to a FrameLayout when a user touches a point in the ImageView hosted inside of the FrameLayout. Right now, I am drawing inside the onDraw method with a radius of 20. But, when I put it into the FrameLayout, it just shows a tiny corner. How can I tell the custom view that it should have a width/height of 20 as well? Is this something I should do within my custom view, or in the activity where I call addView once I instantiate the custom view?
public class MyCircle extends View {
Paint paint;
private static final int RADIUS = 20;
public MyCircle(Context context) {
super(context);
paint = new Paint();
paint.setColor(Color.WHITE);
setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
// LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( RADIUS * 2 , RADIUS * 2 );
// setLayoutParams(layoutParams);
}
#Override
public void onDraw( Canvas canvas ) {
canvas.drawCircle(0, 0, RADIUS, paint );
}
}
The activity code is basically this (called from within a onTouch handler with X/Y coordinates):
MyCircle circle;
circle = new MyCircle(this);
circle.setX( x );
circle.setY( y );
FrameLayout root = (FrameLayout)findViewById(R.id.image_review_frame);
root.addView( circle );
Override onMeasure()
#Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
{
float density = context.getResources().getDisplayMetrics().density;
setMeasuredDimension (RADIUS * density,RADIUS * density);
return;
}
the code re:density is to convert dp to pixels (e.g. xhdpi displays will have density 2.0)
I'm extending ImageView in order to manually scale an image within the view. I want to scale an image to fill the width of the custom view, and then draw it to the canvas, however, I'm unable to get the view width using this.getWidth()
It just returns 0, as the view has not yet been drawn and so has dimensions 0 by 0.
Currently I have the following in my main.xml:
<com.android.myapp.BackgroundView
android:id="#+id/background_view"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:src="#drawable/background"
android:dither="true"
/>
The custom class is as follows:
public class BackgroundView extends ImageView {
private Paint paint;
private Bitmap background;
public BackgroundView(Context context) {
super(context);
paint = new Paint();
loadBitmap();
}
public BackgroundView(Context context, AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
loadBitmap();
}
public void loadBitmap() {
BitmapDrawable src = (BitmapDrawable) this.getDrawable();
background = src.getBitmap();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(background, 0, 0, paint);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
My Main.java class is:
public class Main extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
I can't use
Bitmap.createScaledBitmap(background, view.getWidth(), view.getHeight(), false)
as the view hasn't yet been drawn, how would I go about scaling the image to fill the view/screen width at this point?
Thanks in advance.
I believe what you want to do could also be achieved by using ImageView directly in conjunction with the scaleType attribute. Either use fitXY or centerCrop, depending on your needs.
But to answer the question, you can only use getWidth() and getHeight() after layout() has been called. So you should be able to use the values inside your onDraw method.
Also you could use another drawBitmap method so you wouldn't have to create a new bitmap in memory.
I have the following class:
public class MainActivity extends Activity {
/** Called when the activity is first created. */
String value = "0";
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(new GaugeAnimation(this));
}
}
My GuageAnimation class is as follows:
public class GaugeAnimation extends View{
private Path p;
private Paint cPaint = new Paint();
private int width = 200;
private int angleStart = 135;
private int sweep = 90;
private int value=0;
Bitmap bottom = BitmapFactory.decodeResource(getResources(), R.drawable.dashboard_rpm_bottom);
Bitmap top= BitmapFactory.decodeResource(getResources(), R.drawable.dashboard_rpm_active);
public GaugeAnimation(Context context){
super (context);
//Arc Equations & etc....
}
#Override
public void onDraw(Canvas c){
Paint paint = new Paint();
paint.setFilterBitmap(false);
paint.setColor(Color.BLUE);
c.translate(55,320);
//Draw bottom image on canvas
c.save();
p.addArc(new RectF(0,0,width,width), angleStart, sweep);
p.lineTo(width/2, width/2);
c.clipPath(p);
//draw Image on top
c.restore();
invalidate()
}
}
so basically this crops a circular image one piece at a time based on arc equations. I want to show an animation like the circle's pieces all being filled in (so showing each clipped path which demonstrates a circle being built). So i was thinking of doing a for loop like:
for (int i=0; i<100; i++) {
sweep=i;
p.addArc(new RectF(0,0,width,width), angleStart, sweep);
p.lineTo(width/2, width/2);
c.clipPath(p);
invalidate();
}
but this doesn't work it just draws the end result when i=100, anyone have an idea as to how i can do this?
Currently your loop is performed on the main thread and keeps it busy, so it will not actually update the UI until you finish.
You should do the loop in a background thread (using Timer or AsyncTask) and perform the paint on main thread. Note that without a short sleep, it will probably would look like an animation too much, it will be pretty fast.