How to make layout of an image and text left and under it?

Question

I need to make a layout which is specific to webpage and it needs to look like a web article with an image and a text left to and under it. Look at the image.

As this is an easy thing to do in a web world, I am not sure how to do it in XML layout.

Obviously, the TextView must be on the left while the image is present, and after it reaches the bottom of the image, it has to stretch to the screen width. I tried this with two TextViews (one for left and another for bottom), but it just does not look right due to the text font size.

---

EDIT

I also tried to dinamically catch the height of image and then assign it to my TextView, and then make another TextView with the size of the screen under these two elements. This does not work as well as I cannot control the text that is not visible due to limited height of the first TextView.

Answer 1

If you haven't found the answer yet. Here is the same kind of question that is being answered.

How to align TextView around an ImageView?

The only thing what you might have to change in your case is to, make the alignment to be opposite way.

<?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="wrap_content"
android:padding="5dp">
<TextView
    android:textSize="18.0sp"
    android:id="@+id/message_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/text" />
<ImageView 
    android:src="@drawable/icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/message_view"
    android:id="@+id/icon" />

Taken from here,

http://dev.androidteam.ru/snippets/textview/leadingmarginspan2

Answer 2

use this way layout

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

<RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="21dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/imageView1"
        android:layout_marginLeft="30dp"
        android:textColor="#fff"
        android:text="TextView" />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/relativeLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="30dp"
        android:text="TextViewaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        android:layout_alignBottom="@+id/textView1"></TextView>

</RelativeLayout>

And add in code

   TextView tv1=(TextView)findViewById(R.id.textView1);
   tv1.setMaxHeight(maxHeight);

where maxHeight is dynamically get height of imageview

and than put condition to by getting height of textview1 to assign text to second textview

may it helps u

like this am I right?

Answer 3

check out this. it does same as you want

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

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="fill_parent"
            android:layout_marginTop="5dp"
            android:background="#FFFFFF"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="fill_parent"
            android:background="#FFFFFF"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:layout_marginTop="5dp"
            android:text="TextView" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="wrap_content"

        android:gravity="center"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#FFFFFF" />

    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView5"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:text="TextView" />
    <TextView
        android:id="@+id/textView6"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#FFFFFF"
        android:text="TextView" />
    <TextView
        android:id="@+id/textView7"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#FFFFFF"
        android:text="TextView" />
    <TextView
        android:id="@+id/textView8"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#FFFFFF"
        android:text="TextView" />
    <TextView
        android:id="@+id/textView9"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#FFFFFF"
        android:text="TextView" />

</LinearLayout>
</LinearLayout>