Android: Image over image

Question

Hi all,

I have a video thumbnail and when you click on it, the video starts playing in the YouTube player. This works great, but It's not so clear that you have to click on the thumbnail to play, so I have a play button image that I want to draw over the thumbnail in the 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.

Thanks a lot! Erik

Answer 1

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>

Answer 2

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>