CODEWITHSUNDEEP
androidtextviewimageview
zundi
zundi

Reputation: 2457

How to get a TextView to not push an ImageView off the screen

I'm dynamically generating a layout, and to do this I have a menu_row_element.xml file which contains the repeating row structure.

It consists of a LinearLayout (horizontal) which contains an image, a larger text above a smaller one, and an ImageView with a right arrow (inside another LinearLayout to keep it right aligned).

When the text part is small, everything looks fine. However if the text part is long, the right arrow is pushed off the screen.

How can I keep the right arrow always right aligned on the screen and have the textviews wrap the text appropriately?

In this image, the last row is OK since the text is small, but rows 1 and 2 push the right arrow off the screen.

a busy cat http://img706.imageshack.us/img706/2927/device20111221203115.jpg

The xml file is:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:clickable="true"
        android:background="@drawable/main_menu_button"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:orientation="horizontal"
        android:gravity="left|center_vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <!-- Icon of each section -->
        <ImageView
            android:id="@+id/menu_icon"
            android:layout_width="wrap_content" 
            android:layout_height="fill_parent"
            android:padding="10px" />

        <!-- Text, in two parts -->
        <LinearLayout
            android:orientation="vertical"
            android:paddingLeft="10px"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent">

            <!-- Big font text -->
            <TextView
                android:id="@+id/menu_element_big_text"
                android:textSize="20dp"
                android:textColor="@color/black"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

            <!-- Small font text -->
            <TextView
                android:id="@+id/menu_element_small_text"
                android:scrollHorizontally="false"
                android:textSize="15dp"
                android:textColor="@color/black"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <!-- Layout just to be able to right align, sheesh! -->
        <LinearLayout
            android:gravity="right|center_vertical"
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:padding="0dp"
                android:src="@drawable/right" />
        </LinearLayout>

    </LinearLayout>

Thanks!

Upvotes: 0

Views: 3332

Answers (2)

Krylez
Krylez

Reputation: 17820

You can keep your linear layout. Just give a layout weight value of 1 to the text block. You don't need to put your imageview inside another layout this way.

You'll want to limit your textviews to a single line as well.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:clickable="true"
android:background="@drawable/main_menu_button"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:orientation="horizontal"
android:gravity="left|center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<!-- Icon of each section -->
<ImageView
    android:id="@+id/menu_icon"
    android:layout_width="wrap_content" 
    android:layout_height="fill_parent"
    android:padding="10px" />

<!-- Text, in two parts -->
<LinearLayout
    android:orientation="vertical"
    android:paddingLeft="10px"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="1">

            <!-- Big font text -->
    <TextView
        android:id="@+id/menu_element_big_text"
        android:scrollHorizontally="false"
        android:singleLine="true"
        android:textSize="20dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <!-- Small font text -->
    <TextView
        android:id="@+id/menu_element_small_text"
        android:scrollHorizontally="false"
        android:singleLine="true"
        android:textSize="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:padding="0dp"
    android:src="@drawable/right" />

Upvotes: 1

Reed
Reed

Reputation: 14984

Use a RelativeLayout.

The structure should be then:

<LinearLayout> <!--This is the outer one and will contain everything else-->
       <RelativeLayout> <!-- width: fill, height: wrap, one of these for each row-->
           <ImageView 
              android:id="@+id/rightArrow"
              android:layout_alignParentRight="true"/> <!-- This is the arrow that points to the right wrap width and height-->
           <ImageView
              android:id="@+id/icon"
              android:layout_alignParentLeft="true"/><!--This is the icon on the left wrap width and height-->
           <TextView
              android:id="@+id/largeText"
              android:text="Large Text"
              android:layout_alignParentBottom="true"
              android:layout_toLeftOf="@+id/rightArrow"
              android:layout_toRightOf="@+id/icon"/> <!-- fill width and wrap height-->
           <TextView
              android:id="@+id/smallText"
              android:text="Small Text"
              android:layout_below="@+id/largeText"
              android:layout_toLeftOf="@+id/rightArrow"
              android:layout_toRightOf="@+id/icon"/> <!-- fill width and wrap height-->
        </RelativeLayout>
    </LinearLayout>

Or if you prefer (and this is actually probably better), do this:

<LinearLayout> <!--This is the outer one and will contain everything else-->
   <RelativeLayout> <!-- width: fill, height: wrap, one of these for each row-->
       <ImageView 
          android:id="@+id/rightArrow"
          android:layout_alignParentRight="true"/> <!-- This is the arrow that points to the right wrap width and height-->
     <LinearLayout android android:layout_toLeftOf="@+id/rightArrow"
          ><!--orientation:horizontal, fill width, wrap height-->
       <ImageView
          android:id="@+id/icon"/><!--This is the icon on the left wrap width and height-->
       <TextView
          android:id="@+id/largeText"
          android:text="Large/> <!-- fill width and wrap height-->
       <TextView
          android:id="@+id/smallText"
          android:text="Small Text"/> <!-- fill width and wrap height-->
     </LinearLayout>
    </RelativeLayout>
</LinearLayout>

Upvotes: 1

Related Questions