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.. Right now how I'm doing it is with an ImageView in xml, and then the drawable is a layer layer-list which I define programmatically because one of the images is dynamic, the play button is static of course. I want to align the play button 10px from the bottom, and centered horizontally.

My ImageView is defined like this (in xml)

<ImageView 
          android:id="@+id/EvidencePreview"      
          android:layout_width="267dp"
          android:layout_height="201dp"
          android:scaleType="centerCrop"
          android:layout_margin="3dp"
          android:layout_gravity="center_horizontal|center_vertical"/>

The ImageView is part of a form where the user can edit title and other information. Then in my activity now I create the layer list like this:

Resources resources = mContext.getResources();
Drawable playOverlayDrawable = resources.getDrawable(R.drawable.play_overlay_large);                        
Drawable[] layers = new Drawable[2];
layers[0] = Drawable.createFromPath(tb.filePath);
layers[1] = playOverlayDrawable;
LayerDrawable layerDrawable = new LayerDrawable(layers);
ViewGroup.LayoutParams lp = iv.getLayoutParams();

int imageHeight = lp.height;
int imageWidth = lp.width;
int overlayHeight = layers[1].getIntrinsicHeight();
int overlayWidth = layers[1].getIntrinsicWidth();
int lR = (imageWidth - overlayWidth) / 2;
int top = imageHeight - (overlayHeight + 10);
int bottom = 10;
layerDrawable.setLayerInset(1, lR, top, lR, bottom);
iv.setImageDrawable(layerDrawable);

This only works when the orientation of the image is horizontal. Keep in mind that the image/thumbnail is the MINI_KIND which means its supposed to be 512 x 384 but I'm seeing that it actually isn't the size.. On my phone they are either 480x800 or 800x480 depending on the orientation the camera was in.. Since my layout width/height is pre defined I just want a way to keep the play button layer from scaling at all and align it the same way everytime..

The other obvious way to do this would be to use a relative layout (or perhaps a frame layout?) but I was hoping to avoid that since I'm using the same code for displaying both images and videos (both of which have an image thumbnail preview -- but only videos should have the play button on them).

Any idea how to align the layers with a layer list, or alternatives that would work just as well or better?

Answer 1

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.