How to draw ImageView on ImageView?

Question

I have an ImageView and I would like to draw dinamically another images on my base ImageView.

In this image for example I have a tree and I would like to draw image of people

Any suggestions to start?

enter image description here

yes my problem is like @Tsunaze say:

I have a tree, and I want to put heads on it,

Quick question, are all the images of people added in single image? — VenomVendor, Dec 31 '13 at 15:11
You need to create a class extending a view, and override the onDraw method, here you will have a canvas where you can draw imageViews on it. — Tsunaze, Dec 31 '13 at 15:11
I don't really have a tutorial, but i can put this link for you, for basic understanding : http://stackoverflow.com/questions/2172523/draw-object-image-on-canvas — Tsunaze, Dec 31 '13 at 15:19
@Tsunaze he wants to render 2 images in multiple view, he doesn't want to draw. probably the way of questioning is wrong or am wrong. — VenomVendor, Dec 31 '13 at 15:22
What i understood is : he have a tree, and want to put heads on it, the way i would do it is set the canvas background to a tree, and draw bitmaps on it (which represents heads) in certains locations (x, y) he would have to get the window view before. — Tsunaze, Dec 31 '13 at 15:26
yes @Tsunaze I will try after new year. what you say it's right but i didn't use Canvas before. Can you add a answer with an example for me? Thanks a lot at all anyway — alfo888_ibg, Dec 31 '13 at 15:47

score 2 · Accepted Answer · answered Dec 31 '13 at 16:28

XML :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ImageView
    android:id="@+id/iv_tree"
    android:scaleType="fitXY"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:adjustViewBounds="true"
    android:src="@drawable/my_tree" />

</RelativeLayout>

MyView.java :

public MyView extends View{
 private Bitmap head_1, head_2;
 public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.context = context;
    init();
}
public MyView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    init();
}
public MyView(Context context) {
    super(context);
    this.context = context;
    init();
}
    private void init(){
     head_1= BitmapFactory.decodeResource(context.getResources(), 
R.drawable.head_1); 
     head_2= BitmapFactory.decodeResource(context.getResources(), 
R.drawable.head_2);
    }

    @Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);       
    canvas.drawBitmap(head_1, coordinateX_head_1, coordinateY_head_1, null);
            canvas.drawBitmap(head_2, coordinateX_head_2, coordinateY_head_2, null);
}
  }

You choose the coordinate you want, you can even use function like canvas.getWidth() or canvas.getHeight(). Pose yourself as a painter. Good luck.

Thanks a lot.It works. I have to make adjustments (for example to keep the image of background in my main ImageView - tree) and " — alfo888_ibg, Jan 02 '14 at 11:08
You're welcome, i had to do something very similar not so long ago, and it was the first time i had to do something like this so, i'm glad it helped. — Tsunaze, Jan 02 '14 at 11:16
100+. what do you think about change ImageView with "namespace.MyView"? — alfo888_ibg, Jan 02 '14 at 11:21
Actually what i wanted to show is your not obligated to load all images in your custom view, for example the base would be the tree, the xml represent the custom view itself, now if you want to call it, you would use the "namespace.MyView" — Tsunaze, Jan 02 '14 at 11:25

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

setBackgroundResource to ImageView and use setImageResource over it.

Ex :

imageView.setBackgroundResource(R.id.backgroundTree);
imageView.setImageResource(R.id.allPeople);

EDIT :

If you want multiple images to be overlayed, check this example.

You can also use RelativeLayout and add ImageView inside it programmatically.

 <RelativeLayout>
   <ImageView/>
   <ImageView/>
   <ImageView/>
   <ImageView/>
 </RelativeLayout>

edited May 23 '17 at 10:32

Community

1
1

answered Dec 31 '13 at 15:18

VenomVendor

15,064
13
65
96

Well I download image from facebook and I have N imageView to add to my tree.. do you think it'is the best way? because I will need to draw in specific points of my tree. – alfo888_ibg Dec 31 '13 at 15:30
1

No, in this case not at all, That why I asked you if the second image was a single image. – VenomVendor Dec 31 '13 at 15:33
1

@alfo888_ibg check updated answer. No need to use complex canvas instead use [LayerDrawable](http://developer.android.com/reference/android/graphics/drawable/LayerDrawable.html). – VenomVendor Dec 31 '13 at 15:50

score 1 · Answer 3 · answered Dec 31 '13 at 15:22

What you have to do is create a class that extends from ImageView, set the default parameters that you want as usual and override the on draw method, this method will give you the chance to get a reference to the canvas and draw bitmaps or pretty much anything you want, but remember to call first super.onDraw to keep your default configuration and overlay your new images.

There's plenty of tutorials on how to use canvas, so now you have the proper path to take, hope this helps.

Regards

How to draw ImageView on ImageView?

3 Answers3