How to put caption in an Imageview

Question

I wonder if it is possible to put caption in a ImageView similar to the image below, if possible an explanation or study material.

Answer 1

There are several ways to accomplish this. Here are two:

1- Drawing all elements (image and footer) manually on canvas, extending the Imageview class and overwriting your onDraw method()

public class ImagemComRodape extends ImageView {
    ...
    @Override
    protected void onDraw(Canvas canvas) {
        //deixa a classe ImageView desenhar a imagem normalmente
        super.onDraw(canvas);

        //desenha o rodapé (que aparecerá em cima da imagem)
        canvas.drawRect(...);
        canvas.drawText(...);
    }
}

2- Instead of using an Imageview, it is possible to create a Relativelayout, assign the image as the background of that Relativelayout, set the width and height of the Relativelayout as desired, and finally add a Textview (with the text of your caption) to Relativelayout, aligning it to the bottom of Relativelayout.

In my applications I use the first solution, by involving fewer views.

Answer 2

One way to do it is to put the image as background of a layout and within this layout a textView. It would look like this:

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_launcher"
    android:gravity="bottom"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="TextView" />

</LinearLayout>

from this you can adjust a background in the text to look similar to the transparent image you placed.

Answer 3

Following @Wakim’s tip for me on this question, you can do so:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Legenda da imagem"
        android:textColor="@color/white"
        android:ellipsize="end"
        android:lines="2"
        android:gravity="center_vertical"
        android:fontFamily="sans-serif-light"
        android:background="#99000000" />
</FrameLayout>