Text being cut off. Android

Question

My text is being cut off in app when it's more then one line. It only happens on hdpi or less phones. Any help would be great.

Code:

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
                android:background="@drawable/backgroundp" >


<com.example.app.ObservableScrollView
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <View
            android:id="@+id/placeholder"
            android:layout_width="match_parent"
            android:layout_height="@dimen/sticky_height" />

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:paddingTop="10dip" >
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:text="Man what you doing that for. Come on"
                        android:textSize="20sp" />

                    <Button
                        android:id="@+id/button02"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Play" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:text="Come on Man. Just Stop, no need for that."
                        android:textSize="20sp" />

                    <Button
                        android:id="@+id/button03"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Play" />
                </LinearLayout>

               Lots of the same thing over and over again. 

          Then


      </LinearLayout>
            </LinearLayout>
        </ScrollView>
    </LinearLayout>
 </com.example.app.ObservableScrollView>

 <Button
    android:id="@+id/button01"
    style="@style/Item.Sticky"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Stop" 
    android:paddingLeft="10dp"
            android:paddingRight="10dp"
                    android:paddingTop="10dp"/>

            </FrameLayout>

Theres more stuff under but this is what you really need to see I guess. If the layout height is wrap content shouldn't it be fine. I was guessing it was the text size but not sure?

Answer 1

Below is the accepted answer.

I think the "real" answer is that LinearLayout has baselineAligned attribute as true by default. This means it'll align its children with whatever they define their "baseline" as. For TextViews, this is the bottom of the first line of text, which explains why the issue only manifests when you have multiple lines of text.

So you could set the android:baselineAligned="false" for the LinearLayout that holds the TextView and the Button.

See this article for an overview of the baselineAligned property: TechoTalkative article by Paresh Mayani.

---

You could use a RelativeLayout instead of so many nested LinearLayouts with the weight attribute (which degrades performance on account of the multiple passes required for measuring view bounds).

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Come on Man. Just Stop, no need for that."
        android:textSize="20sp"
        android:layout_alignParentLeft="true"
        />

    <Button
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Play"/>

</RelativeLayout>

This didn't get clipped text in my test.

Answer 2

I had the same issue. Happens that I was using:

android:layout_gravity="center"

Don't use that. Use:

android:gravity="center"

instead.

Some help:

android:layout_gravity is the Outside gravity of the View. That means, to specify the direction in which the View should touch it's parent's border.

android:gravity is the Inside gravity of that View. This means, in which direction it's contents should align.

Answer 3

Depending on what you want to do, you can break it into two lines, or ellipsize it.

to ellipsize, Add to that xml

  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:gravity="center"
  android:text="Come on Man. Just Stop, no need for that."

  android:ellipsize="end"
  android:paddingRight="10dp"

  android:textSize="20sp" />

to break into tow lines. set singleLine to false.

ellipsizing is better done thru xml, for singleline it doesn't matter.

Answer 4

Use padding for linearlayout like this..

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Man what you doing that for. Come on"
                android:textSize="20sp" />

            <Button
                android:id="@+id/button02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Play" />
        </LinearLayout>

Or Use margin for textview like this ...

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:layout_margin="10dp"
                android:text="Man what you doing that for. Come on"
                android:textSize="20sp" />

            <Button
                android:id="@+id/button02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Play" />
        </LinearLayout>