Android: Image over image

Question

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 thum

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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>