Question

I’m a bit confused and don’t know how to solve this styling issue. I have a ListView element with 2 images and 3 TextViews (created in XML).

The images should surround the TextViews and should be displayed in every resolution and in every orientation. As soon as I exceed the current length of the TextViews, the image on the right side gets out of the display (tested with QVGA).

Any idea how to solve my problem?

<TableLayout
    android:id="@+id/tableLayout_ScrollviewEntry"
    android:layout_width="wrap_content"
    android:stretchColumns="1" android:layout_height="fill_parent">
    <View
     android:layout_width="fill_parent"
     android:layout_height="1dip"
     android:background="#cccccc" />
        <TableRow
            android:layout_height="wrap_content"
            android:id="@+id/MainRow"
            android:layout_width="wrap_content">
            <ImageView
                android:src="@drawable/favs_action"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/image1">
            </ImageView>

            <TableLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:id="@+id/InnerTextTable">

                <TableRow
                    android:id="@+id/InnerRow0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView
                    android:textColor="#4444dd"
                        android:scrollHorizontally="false"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceLarge"
                        android:id="@+id/textView1" 
                        android:editable="false"
                         android:layout_width="match_parent" 
                         android:hapticFeedbackEnabled="false" 
                         android:text="xxxxxxxx Special xxxxx">
                    </TextView>
                </TableRow>

                <TableLayout
                    android:id="@+id/InnerRow1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView
                    android:textColor="#000000"
                        android:id="@+id/textView2"
                        android:text="xxxxx xxxx xxx x xxxxxxxx"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceMedium"
                        android:layout_width="wrap_content"></TextView>

                </TableLayout>
                <TableRow
                    android:id="@+id/InnerRow2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView
                    android:textColor="#888888"
                        android:text="xxxxx xxxxxxxxxx"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"></TextView>
                </TableRow>
            </TableLayout>
            <ImageView
                android:src="@drawable/image2"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:id="@+id/image1" android:layout_gravity="left">
            </ImageView>
        </TableRow>
    <View
     android:layout_width="fill_parent"
     android:layout_height="1dip"
     android:background="#cccccc" />
    </TableLayout>      
</LinearLayout>

Answer 1

Relative layout will be the best solution for your problem…you can put your images in either sides and the three texts between them. for longer text you can use ellipsize property of textView.