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?

Solution 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.

Solution 2

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>

Solution 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.

Comments

[user2407147]

Wouldn't that make the button smaller?

[user2407147]

I would like to break it to 2 lines. If you can show me how thats done would be awesome!

[ataulm]

singleLine is already false for TextViews developer.android.com/reference/android/widget/…

[user2407147]

I've done the ellipsize as you have said but it crashes, is it meant to have a layout_width?

[ataulm]

@user2407147 it will still need to retain both layout width and height.

[user2407147]

Would the width still be 0dp?

[user2407147]

The padding does not work but the margin does but makes the buttons a little out of line of the text. Think of any way to fix it?

[ataulm]

Only if you've retained a non-zero value for layout weight.

[Shark]

I thought the question was about solving ugly text hitting the end of the screen, pay attention to either ellipsize or singleLine properties.

[user2407147]

So what would the width be? if im using ellipsize

[ataulm]

@Shark I think the issue is that the TextView isn't wrapping to the next line, which it should do by default. It's either that the TextView is getting super wide, and just clipped, or it is wrapping to the next line, but the height is getting clipped.

[user2407147]

So how can I fix this?

[user2407147]

I may just add this and leave it android:singleLine="true"

[Shark]

if you want it to autoscroll (marquee forever or a few times) remember to call setSelected(true) on that textview.

[rzaaeeff]

thank you! I didn't try this one, but appreciate your behavior.