Android: Image over image

I have a video thumbnail and when you click on it, the video starts playing in the YouTube player.

This works, but It's not clear that you have to click on the thumbnail to play, therefore, I want to draw a play button image over the thumbnail in th开发者_JAVA技巧e bottom right corner. How would I go about this?

I currently have the thumbnail in a Drawable object and the play button in my drawable resource directory.

I tried stuff with bitmaps and canvas but it's quite hard and I don't know if this is the way to go.

Use Relative or FrameLayout:

   <RelativeLayout 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content">

        <ImageView 
               android:layout_width="wrap_content" 
               android:layout_height="wrap_content"
               android:src="@drawable/thumbnail"/>
        <ImageView  
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/play" 
               android:layout_alignParentBottom="true"
               android:layout_alignParentRight="true"/>

    </RelativeLayout>

or

<FrameLayout
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content">

      <ImageView 
           android:layout_width="wrap_content" 
           android:layout_height="wrap_content"
           android:src="@drawable/thumbnail"/>

      <ImageView 
           android:layout_width="wrap_content" 
           android:layout_height="wrap_content" 
           android:src="@drawable/play" 
           android:layout_gravity="bottom|right"/>

</FrameLayout>

What about using a FrameLayout or a RelativeLayout to stack the views..

Here follows some psaudo code:

<FrameLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
>
<com.yourpackage.VideoPlayer
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
></VideoPlayer>

<!-- Adjust the layout position of the button with gravity, margins etc...  -->
<Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:text="Play"
/>

</FrameLayout>

I used RelativeLayout and it worked for me

<RelativeLayout
    android:id="@+id/image_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:clickable="true"
        android:layout_gravity="top"
        android:maxHeight="400dp"/>

    <ImageView
        android:id="@+id/play"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_menu_play_large"
        android:layout_centerInParent="true" />

</RelativeLayout>

This is Easiest Way i Found i think to merge morethan one images in one. this is very helpful if we want share merged file.

Resources r = getResources();    
Drawable[] layers = new Drawable[3];
layers[0] = r.getDrawable(R.drawable.image3);
layers[1] = r.getDrawable(R.drawable.image1);
layers[2] = r.getDrawable(R.drawable.image2);

LayerDrawable layerDrawable= new LayerDrawable(layers);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
// align image1 over image3
layerDrawable.setLayerGravity(1, Gravity.TOP);
layerDrawable.setLayerInsetTop(1, 250);

// align image2 over image3
layerDrawable.setLayerGravity(2, Gravity.BOTTOM);
layerDrawable.setLayerInsetBottom(2, 250);
}
 // both image1 & 2 placed over image3 in layerDrawable.
imageView.setImageDrawable(layerDrawable);

Hope this will works