Layout is beyond the right margin

Question

I have a ListView in my Activity.

Each ListView item use (in a array adapter) this layout:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_gravity="top"
    android:background="#ffffff"
    android:columnCount="2"
    android:rowCount="1" >

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_gravity="left|top"
        android:layout_margin="5dp"
        android:layout_row="0"
        android:rowCount="3" >

        <TextView
            android:id="@+id/settingsHeader"
            android:layout_column="0"
            android:layout_gravity="left|top"
            android:layout_row="0"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/settingsContent"
            android:layout_column="0"
            android:layout_gravity="left|top"
            android:layout_row="2"
            android:layout_width="match_parent"
            android:text="Small Text"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </GridLayout>

    <Switch
        android:id="@+id/settingsToggle"
        android:layout_column="1"
        android:layout_marginRight="5dp"
        android:layout_gravity="center_vertical|right"
        android:layout_row="0"/>

</GridLayout>

But my problem is, that the layout is beyond the right margin. I think it's because the TextView settingsContent is not wrap the text. How can i solve this problem?

Answer 1

Add these piece of code to your TextView settingsContent.

 android:ellipsize="end"
 android:ems="9"
 android:lines="1"
 android:singleLine="true"

Set the width of your 1st GridLayout to 'fill_parent'.

XML will be like this:

 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:background="#ffffff"
android:columnCount="2"
android:rowCount="1" >

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="left|top"
    android:layout_margin="5dp"
    android:layout_row="0"
    android:rowCount="3" >

    <TextView
        android:id="@+id/settingsHeader"
        android:layout_column="0"
        android:layout_gravity="left|top"
        android:layout_row="0"
        android:ellipsize="end"
        android:ems="9"
        android:lines="1"
        android:singleLine="true"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/settingsContent"
        android:layout_column="0"
        android:layout_gravity="left|top"
        android:layout_row="2"
        android:layout_width="match_parent"
        android:ellipsize="end"
        android:ems="9"
        android:lines="1"
        android:singleLine="true"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />
</GridLayout>

<Switch
    android:id="@+id/settingsToggle"
    android:layout_column="1"
    android:layout_marginRight="5dp"
    android:layout_gravity="center_vertical|right"
    android:layout_row="0"/>

This will might help you.

Answer 2

Try this..

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:background="#ffffff"
android:columnCount="2"
android:rowCount="1" >

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="left|top"
    android:layout_margin="5dp"
    android:layout_row="0"
    android:rowCount="3" >

    <TextView
        android:id="@+id/settingsHeader"
        android:layout_column="0"
        android:layout_gravity="left|top"
        android:layout_row="0"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/settingsContent"
        android:layout_column="0"
        android:layout_gravity="left|top"
        android:layout_row="2"
        android:layout_width="match_parent"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />
</GridLayout>

<Switch
    android:id="@+id/settingsToggle"
    android:layout_column="1"
    android:layout_marginRight="5dp"
    android:layout_gravity="center_vertical|right"
    android:layout_row="0"/>

Answer 3

You might try the following code which will give you the same look..

<?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="wrap_content"
    android:orientation="vertical" 
    android:gravity="center">   
  <LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" 
    android:gravity="center">  

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal"
        android:layout_margin="5dp">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.8"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_margin="2dp">

    <TextView
         android:id="@+id/settingsHeader"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:textStyle="bold"
        android:textColor="#696969"
        android:layout_gravity="center"
        android:text="hello how are you guys"/>

    <TextView
         android:id="@+id/settingsContent"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:textColor="#9C9A9A"
        android:layout_gravity="center"
        android:text="I am fine wat abt u"/>
    </LinearLayout>

     <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.2"
        android:gravity="center|right"
        android:orientation="vertical"
        android:layout_margin="5dp">

         <Switch
         android:id="@+id/settingsToggle"
        android:layout_width="60dp"
        android:layout_height="25dp"
        android:layout_margin="3dp"
        android:textColor="#FFFFFF"
        android:gravity="center"
        android:text="Error"
        android:background="#942B2A"/>

    </LinearLayout>

    </LinearLayout>

    </LinearLayout>
</LinearLayout>