Draw view on Image within xml

Question

Hello all, can you help me by sharing your knowledge on how to draw a small rectangle on top of image in android. I have main.xml and there are some widgets. right at top, there is a image and I would like to draw a rectangle on that Image and display both while app is running.

Here is how my xml file looks like:

   <?xml version="1.0" encoding="utf-8"?>
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="5px" android:padding="20px">
     <ImageView
    android:id="@+id/myImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/sinewave"/>
    <TableRow>


    </TableRow>

    <TableRow>    
            <TextView android:text="00:00" 
                android:id="@+id/TextView02" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:paddingBottom="30dip"

                android:gravity="center">
            </TextView>      
    </TableRow>
    <TableRow android:gravity="center">

            <Button android:text="Start" 
                    android:id="@+id/btnStart" 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:padding="20px"
                    >
            </Button>



            <Button android:text="Stop" 
                    android:id="@+id/btnStop" 
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content" 
                    android:padding="20px"
                    >
            </Button>

    </TableRow>
    <TableRow>
            <TextView android:text=""
                android:id="@+id/TextView01"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:paddingLeft="5px"
android:paddingRight="5px"
android:paddingTop="10px"
android:paddingBottom="10px"

                >
            </TextView>

     </TableRow>
    <TableRow>   
            <Button android:text="Mute Phone" 
                    android:id="@+id/Button01" 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:paddingBottom="10dip"
                >
            </Button>
    </TableRow>
    <TableRow>
            <Button 
                android:text="Settings"
                android:id ="@+id/btnClick"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingTop="30dip"
            />
    </TableRow>

</TableLayout>

Answer 1

Don't use the standard ImageView for that. Create your own class extending View. Then override the draw() method. There you can display the image and do all the stuff you want including drawing the rectangle.