Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show Text on Image

I have written a code, in which i am showing images in GridView, but now i want to show text in bottom of every image.

And i want to show my Grid like this:

enter image description here

but getting like this [also want to show Text for Image]:

enter image description here

main.xml:

<?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"
    >
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:stretchMode="columnWidth"
        android:numColumns="2" 
        />
</FrameLayout>
like image 285
Sneha Avatar asked Jun 17 '13 10:06

Sneha


People also ask

How do I display text on a picture?

This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div). The top, right, bottom, and left properties of these elements specify their location from the parent.

How do I put text under an image in HTML?

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or last child of the <figure> element.

How do I show text on hovering?

To add a text on hover, you'll need to use the title attribute. In this snippet, we'll use it on the <div>, <span>, <abbr>, and <p> elements.


1 Answers

You need to define a custom grid item layout which contains a textview to assign the text.

<?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/thumbnail"
        android:padding="8dp"
        android:scaleType="cropCenter"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="#55000000" />
</FrameLayout>

Here we have created a FrameLayout which has the imageview set to match the parent's dimensions, this will be the imageview that displays the photo. Next, there is a TextView which will be used to display the item title and that is aligned to the bottom of the FrameLayout.

Next, we need to edit your adapter to use this grid item layout and render the correct information.

public View getView(int position, View convertView, ViewGroup parent) {

    // Inflate the single grid item layout
    if (convertView == null) {  
        convertView = mLayoutInflater.inflate(R.layout.grid_item, parent, false);
    }

    // Set Image
    ImageView thumbnail = convertView.findViewById(R.id.thumbnail);
    if (thumbnail != null) {
        thumbnail.setImageResource(mThumbIds[position]);
    }

    // Set Text
    TextView title = convertView.findViewById(R.id.title);
    if (title != null) {
        title.setText("Image Number: " + position);
    }

    return convertView;     
}

mLayoutInflater should be globally defined in your constructor using

mLayoutInflater = LayoutInflater.from(context);
like image 112
jimmithy Avatar answered Sep 28 '22 22:09

jimmithy