在布局中拟合ImageView和TextView

Question

I have horizontal ListView with with following item:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:src="@drawable/a" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Title"
        android:textColor="#FFFFFF" />

</LinearLayout>

This is basically thumbnail and some text beneath it. The problem is - when this item is displayed in ListView the text at bottom is only partially visible - bottom part disappears. Looks like ImageView is not scaling to fit TextView.

But if you put TextView above ImageView everything looks fine - ImageView is scaled down and text fits perfectly. So..why?

Let me illustrate:

TextView at bottom

TextView at top (images scaled perfectly)

And as requested main.xml:

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

    <LinearLayout
        android:id="@+id/linearLayout0"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Top Activity Header"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="90"
        android:orientation="vertical"
        android:weightSum="100" >

        <LinearLayout
            android:background="#6056CC"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="30"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Top"
                android:textAppearance="?android:attr/textAppearanceLarge" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="40" >

            <test.name.Coverflow
                android:id="@+id/coverflow"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent" />
        </LinearLayout>

        <LinearLayout
            android:background="#BF5E76"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="30"
            android:orientation="vertical" >

        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_height="65dp"
        android:id="@+id/linearLayout2"
        style="@style/TabPanel">

    </LinearLayout>

</LinearLayout>

Answer 1

So hey I had this same problem and this is what I did to get it work:

<LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="vertical" 
            android:layout_gravity="center|center_vertical">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="0dip"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="fitEnd"
                android:layout_gravity="center|center_vertical"
                android:src="@drawable/ic_pen" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:layout_gravity="center|center_vertical"
                android:text="@string/main_write"
                android:textColor="@color/color_darkgray"
                android:textSize="24sp" />
        </LinearLayout>

The trick is to set the TextView and the ImageView's layout_height to "0dip". Set the ImageView's layout_weight to "2" and the TextView's layout_weight to "1". Set the ImageView's scaleType to "fitEnd". Set adjustViewBounds to "true" et voila! Even works when you size up and down so you don't lose the TextView and only the image scales down.

Answer 2

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white"
    android:gravity="center_vertical" >

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" >

        <TableRow
            android:layout_gravity="left"
            android:padding="5dp" >

            <ImageView
                android:id="@+id/thumbnail"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:src="@drawable/a" 
                android:layout_gravity="left">
            </ImageView>
        </TableRow>

        <TableRow
            android:gravity="left"
            android:padding="5dp" >

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:textColor="@android:color/black"
                />
        </TableRow>
    </TableLayout>

</LinearLayout>

Please try this. Hope this would help.

Answer 3

You can use relative layout for this.it may helpfull for you. The below code

     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="vertical" >

   <ImageView
     android:id="@+id/thumbnail"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:paddingLeft="5dp"
     android:paddingRight="5dp"
     android:src="@drawable/a" />

   <TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="Title"
    android:textColor="#FFFFFF" 
    android:layout_below="@id/thumbnail"/>

    </RelativeLayout>

By using relativelayout, you can set textview below the imageview so that imageview and textview can wrap.

Edit:

  <RelativeLayout>
       <LinearLayout
         android:id="@+id/linearlayout1">
          //here the textview and imageview code
       </LinearLayout>
      <LinearLayout
       android:layout_below="@id/linearlayout1"
       >
      //here the redblock code
     </LinearLayout>

so now entire redblock will come below the previous layout..may b helpful