Android - Best way to overlay a play button on an image/thumbnail

Question

I have an android application which can playback audio/video and show pictures. For videos I want to overlay a play button on top of the preview image and also in list views.. R

Answer 1

Consider using RelativeLayout as the container for your views. It gives you freedom of placing child views. You could bind your button to the right or top edge of your imageview.

Answer 2

I ended up using a FrameLayout like this:

<FrameLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="3dp"
    android:layout_gravity="center_horizontal|center_vertical" >

<ImageView 
    android:id="@+id/MediaPreview"      
    android:layout_width="267dp"
    android:layout_height="201dp"
    android:scaleType="centerCrop"
    android:src="@drawable/loading" />

<ImageView
    android:id="@+id/VideoPreviewPlayButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="10dp"
    android:layout_gravity="center_horizontal|bottom"
    android:visibility="gone"
    android:src="@drawable/play_overlay_large" />

</FrameLayout>

Then I just set the visibility to View.VISIBLE to the preview play button for videos and left it gone for photos. For my list view I used the layer list method shown above because all of the thumbnails were the same dimension. Hope this helps someone else!

notice that the layout_gravity on the ImageView with id VideoPreviewPlayButton puts it at the bottom centered horizontally, and the 10dp paddingBottom moves it up a bit from the bottom.