How to add Text in the end of ImageView in Android?

Question

I have a ListFragment in which I am downloading images using picasso in a ListView. Here is my ArrayAdapter code:

 @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_dish_view, parent, false);
    }

    DrawLineTransformationation myTransformation = new DrawLineTransformationation() {
        @Override
        public String key() {
            return super.key();
        }
    };


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

private class DrawLineTransformationation implements Transformation {
    @Override
    public String key() {
        // TODO Auto-generated method stub
        return "drawline";
    }

    @Override
    public Bitmap transform(Bitmap bitmap) {
        // TODO Auto-generated method stub
        synchronized (DrawLineTransformationation.class) {
            if(bitmap == null) {
                return null;
            }
            Bitmap resultBitmap = bitmap.copy(bitmap.getConfig(), true);
            Bitmap bitmapImage = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_heart);
            Canvas canvas = new Canvas(resultBitmap);
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            paint.setColor(Color.WHITE);
            paint.setStyle(Paint.Style.FILL);
            paint.setTextSize(50);
            paint.setShadowLayer(2.0f, 1.0f, 1.0f, Color.BLACK);

            canvas.drawText("$250", 10, 500, paint);
            canvas.drawBitmap(bitmapImage, 900, 20, null);
            bitmap.recycle();
            return resultBitmap;
        }
    }
}

list_dish_view.xml

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

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

If I run the above code I can see this view. Now, I want to add text in the end of every Image and add a image on right bottom corner (So that half side would be on text description and other half is on big Image). See this example. You can see the text and profile picture in view. How can I achieve in my case?

Answer 1

Try the following layout to achieve your design. I had used negative margining in xml, If you want to avoid it, margin cant be set in activity after calculating it.

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="#FF000000"
        android:src="@drawable/matrix" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:background="#FFFF00FF"
        android:padding="10dp"
        android:text="Some text........." />

    <ImageView
        android:id="@+id/profilePic"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_below="@id/imageView"
        android:layout_marginTop="-25dp"
        android:src="@drawable/circle" />
</RelativeLayout>