How to add Imageview and Textview on Image?

Question

I am using ListFragment and ArrayAdapter to show a Image view list using following list_view.xml

<?xml version="1.0" encoding="utf-8"?>

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/img"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>

In my Adapter.getview I am using picasso to load the image:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
 LayoutInflater inflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
    if (null == convertView) {
        convertView = inflater.inflate(R.layout.list_view, parent, false);
    }

    Picasso
            .with(context)
            .load("http://i.imgur.com/rFLNqWI.jpg")
            .fit()
            .into((ImageView) convertView);
    return convertView;
 }

This is onActivityCreated method in Fragment class extended by ListFragment:

 TestAdapter adapt = new TestAdapter(getActivity().getApplicationContext(), R.layout.list_view, pictures);
 setListAdapter(adapt);

Above code is giving me a listview where I can see the images loading from picasso library. How can I add text and image on the image loaded by picasso in listview? Inshort like this:

You can see one text "Type text here" in left bottom corner and one icon on right top corner (not exactly in the corner)

score 0 · Answer 1 · answered Sep 02 '15 at 20:20

0

You could implement a Picasso Transformation where you take the bitmap and then use the Canvas primitives to draw/render the text on top of the Bitmap and return the final bitmap.

Another approach would be to use a RelativeLayout with 3 sub-views: an ImageView which stretches to its parent (the RelativeLayout) so it becomes the overall background; and then a TextView for your text and finally another ImageView for your icon.

answered Sep 02 '15 at 20:20

Cody Caughlan

32,456
5
63
68

Can you please give me link to look at `Transformation` and `bitmap`. Is it possible to give coordinates for another imageview and textview? – Sep 02 '15 at 20:31
@SnowClue - this answer has a link to a Transformation http://stackoverflow.com/questions/27081534/draw-a-line-on-imageview-set-by-picasso – Cody Caughlan Sep 03 '15 at 02:01

score 0 · Answer 2 · answered Sep 02 '15 at 20:21

Create list_view.xml like this

<Relative layout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<ImageView
    android:id="@+id/img"        
    android:layout_width="match_parent"
    android:layout_height="200dp"/>

<EditText
    android:layout_width="wrap_content"
    android:layout_alignParentLeft="true"
    android:text="Type your text"
    android:layout_alignParentBottom="true"
    android:layout_margin="20dp"
    android:layout_height="200dp"/>

</Relative>

score 0 · Answer 3 · answered Sep 02 '15 at 20:22

you can use ViewHolder to set TextView and image both, and then use it with picasso.

Here's the code snippet.

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;
        ViewHolder holder;

        if (row == null) {
            LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
            row = inflater.inflate(layoutResourceId, parent, false);
            holder = new ViewHolder();
            holder.titleTextView = (TextView) row.findViewById(R.id.grid_item_title);
            holder.imageView = (ImageView) row.findViewById(R.id.grid_item_image);
            row.setTag(holder);
        } else {
            holder = (ViewHolder) row.getTag();
        }

        GridItem item = mGridData.get(position);
        holder.titleTextView.setText(Html.fromHtml(item.getTitle()));

        Picasso.with(mContext).load(item.getImage()).into(holder.imageView);
        return row;
    }

For more details refer http://javatechig.com/android/download-and-display-image-in-android-gridview

How to add Imageview and Textview on Image?

3 Answers3