How to Display Text and Image in Paragraph

Question

I am trying to display Image And Text in this format, but i am unable to do it. enter image description here

Is this possible? if so, Can anybody please help me in doing this. Thanks in advance..

this is my XML for the list view row..

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/myImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/myImageViewText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/myImageView"

            android:layout_alignTop="@+id/myImageView"
            android:layout_margin="1dp"
            android:gravity="center"
            android:text="Hello"
            android:textColor="#000000" />
    </RelativeLayout>

here is getView method:

     @Override
            public View getView(final int position, View convertView, ViewGroup parent) {
                View v = convertView;

                if (v == null) {
                    LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                    v = vi.inflate(R.layout.alerts_row, null);
                }
            DbNewsItem o = items.get(position);
        if (o != null) {
                   TextView desc = (TextView) v.findViewById(R.id.alert_details);
            ImageView iv = (ImageView) v.findViewById(R.id.alert_image);
                     desc.setText(o.getDesc());
                    imageLoader.displayImage(img_url, iv, options);
            }
        return view;
       }

Based on http://stackoverflow.com/questions/3626750/textview-wrap-around-view you can go with WebView or Spannable string — Boris Mocialov, Jun 26 '13 at 12:40
i need this view in a list. how to use the html view to display our own data? — wolverine, Jun 26 '13 at 12:46
Take a look at http://www.ezzylearning.com/tutorial.aspx?tid=1763429 If you just change listview_item_row.xml so that it will have WebView instead of ImageView & TextView (as from the example) and then change the content of every WebView instance from your getView method — Boris Mocialov, Jun 26 '13 at 12:49
i know custom adapter, but no idea about the loading HTML view and use our data in it.. And the image in list view is optional, image may or may not present.. if there is no image we should not display the empty space.. — wolverine, Jun 26 '13 at 12:53
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/32411/discussion-between-wolverine-and-mocialov-boris) — wolverine, Jun 26 '13 at 13:02
can you also post your **getView** or how do you inflate this view and set values? — Boris Mocialov, Jun 26 '13 at 13:02
y not using 2 different Textview with image right side & image below side — Ankitkumar Makwana, Jun 26 '13 at 13:09
i have more views in the item.. it'll be slow if i use more and more views.. and using two views is not the right process, right.. — wolverine, Jun 26 '13 at 13:12
change your xml (content of RelativeLayout): remove ImageView and TextView and add WebView then instead of : TextView desc = (TextView) v.findViewById(R.id.alert_details); ImageView iv = (ImageView) v.findViewById(R.id.alert_image); desc.setText(o.getDesc()); imageLoader.displayImage(img_url, iv, options); you use WebView wv = (WebView) v.findViewById(your_id_here); wv.loadData("html code here"); — Boris Mocialov, Jun 26 '13 at 13:29

score 0 · Answer 1 · answered Jun 26 '13 at 12:53

Use a listview or a custom UI component. Firstly define a row component XML for using in a listview. It must include an imageview in the left and 2 text view in the right and bottom. (You can do this for your custom component. Listview allows you to show multiple posts)

Size of the imageview must be bounded.

After that, set the values for imageview and textview. When your text length is 300-500 etc. characters, set it for textview1 which is on the right, then set the remaining text to the textview2 which is on the bottom.

That's not perfect solution I think, but It works. You can use this if you don^t have enoug time to lose.

score 0 · Answer 2 · answered Jun 28 '13 at 21:05

You can get that text flow by apply the bellow code in XML :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  android:id="@+id/RelativeLayout01"  
  android:layout_width="fill_parent"  
  android:layout_height="wrap_content" >

<TextView
 android:id="@+id/tv1"
 android:layout_width="200dp"
 android:layout_height="wrap_content"
 android:layout_alignBottom="@+id/image"
 android:layout_alignParentRight="true"
 android:layout_alignTop="@+id/image"
 android:text="@string/text_one"
 android:textSize="20sp" />

<ImageView
 android:id="@+id/image"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:layout_alignParentLeft="true"
 android:layout_alignParentTop="true"
 android:background="@drawable/ic_launcher" />

<TextView
 android:id="@+id/tv2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_below="@+id/tv1"
 android:text="@string/text_two"
 android:textSize="20sp" />

</RelativeLayout>

Output :

enter image description here

Hope this help.

@prateek you solved your problem , you said that in your post , am i right? — Android Stack, Aug 13 '13 at 11:28

How to Display Text and Image in Paragraph

2 Answers2