Draw a rectangular over an image by code

Question

I have this xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="@drawable/photo0"
    android:id="@+id/imagBackground">

    <TextView android:layout_width="20dip" android:layout_height="20dip"
        android:layout_marginLeft="250dip" android:layout_marginTop="15dip" android:background="#FFFFFF"
        android:id="@+id/index" android:text="0" android:textColor="#000000">
        </TextView>

        <ImageView android:layout_marginTop="280dip"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:background="@drawable/anim_ctrl_panel" android:id="@+id/change">
        </ImageView>
</LinearLayout>

and over this I must draw some rectangular by code. How to do this ?

I tried this :

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        layout = (LinearLayout) findViewById(R.id.imagBackground);
        changeImage = (ImageView) findViewById(R.id.change);
        index = (TextView) findViewById(R.id.index);

        draw();
    }

        private void draw() {
        System.out.println("desenam");
        int width = 50;
        int height = 100;

        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);

        Paint paint = new Paint();
        paint.setColor(Color.BLUE);


        Canvas canvas = new Canvas(bitmap);

        canvas.drawColor(Color.RED);

        canvas.drawRect(25, 50, 75, 150, paint);
         ImageView imageView = new ImageView(this);


        imageView.setImageBitmap(bitmap);

         layout.addView(imageView);

        setContentView(layout);
    }

but the rectangulars are on the bottom on screen. How to set the location where to put them?

Answer 1

My guess is, the reason why it's in the bottom of the page is because of the LinearLayout: in the end you will have 3 children: TextView, ImageView and ImageView, all below each other.

A few possible solutions:

1. Add a FrameLayout inside the LinearLayout and add the ImageViews inside it, so the hierarchy would be:

   • LinearLayout
     • TextView
     • FrameLayout
       • ImageView
       • ImageView

2. Use a RelativeLayout instead of the LinearLayout and align all the edges of the second ImageView with the first one

3. Create a custom ImageView class, for example "com.foo.bar.MyImageView", which of course extends ImageView. Override onDraw:

   public void onDraw(Canvas canvas) {
       super.onDraw(canvas); // This will render the original image
       // ... and here you can have the code to render the rectangle
   }
   

In the xml you replace

 <ImageView ...

with

 <com.foo.bar.MyImageView ...

I would go for the last solution, since from a performance point of view it's the best.

Answer 2

try this code:

        Point left=new Point(x, y);

        paint.setColor(Color.parseColor("#00CCFF"));
        paint.setStyle(Style.FILL);
        canvas.drawCircle(left.x, left.y, 9, paint);

So you have to create a Point using pixels and then draw a rectangle around it otherwise it doesn't know where to draw

Answer 3

Why dont you do this in the layout file itself:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="@drawable/photo0"
android:id="@+id/imagBackground">

<LinearLayout android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:background="@android:color/darker_gray">
 <LinearLayout android:layout_width="fill_parent"
 android:layout_margin="5dip"
        android:layout_height="fill_parent"              android:background="@android:color/black">
<TextView android:layout_width="20dip" android:layout_height="20dip"
    android:layout_marginLeft="250dip" android:layout_marginTop="15dip" android:background="#FFFFFF"
    android:id="@+id/index" android:text="0" android:textColor="#000000">
    </TextView>

    <ImageView android:layout_marginTop="280dip"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:background="@drawable/anim_ctrl_panel" android:id="@+id/change">
    </ImageView>
</LinearLayout>
            </LinearLayout>
</LinearLayout>

Answer 4

Try to change your LinearLayout to this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent" 
    android:gravity="top" android:layout_gravity="top"
    android:layout_height="fill_parent" android:background="@drawable/photo0"
    android:id="@+id/imagBackground">
...