Fade out last few lines of a TextView

Question

I've been researching all over, I was unable to find a proper answer.

I also can't achieve this on my own, so please help me out

I have a InfoWindowDialog view I'm creating, which has a TextView, that has a certain maxHeight.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

        <TextView
            android:id="@+id/txt_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="LONG_TEXT_WHICH_HAS_A_FEW_LINES..."
            android:maxHeight="50dp"/>

</RelativeLayout>

And I want to achieve something similar to the last few lines of this example:

I have tried a solution mentioned Fade bottom of a textview android

By placing android:requiresFadingEdge="vertical" and android:fadingEdgeLength="32dp" and had no results.

Why don't you use button with text more and background with some transparency? That might help you to achieve what you want. — baldguy, Dec 13 '16 at 20:14
I was seeking for something that would eventually not have a button on top — James, Dec 13 '16 at 20:15
Why? What's reason for it? If you already think about it then you should mention in question as what you have tried and what you are looking for. — baldguy, Dec 13 '16 at 20:16
How about placing a faded out .png over the textview with its gravity set to bottom? — suomi35, Dec 13 '16 at 22:04
as you are noticing, this does not involve just a textview, it'll involve more than one ui element to achieve what you want — TWL, Dec 13 '16 at 22:10

score 5 · Answer 1 · answered Dec 13 '16 at 22:46

There are a few solutions to this. The easiest is to add an UI element. Add an overlay graphic at the bottom of your view that has some sort of transparency, e.g. 50%. This will achieve what you are asking.

Others options to consider:

1) Track the last line of text, break it up, and add 50% transparency to it.

2) Track the last line of text, break it up, and change the color to a different gray. This gives the impression of transparency

3) If using scrollview, they have fading edge features.

<ScrollView android:requiresFadingEdge="vertical">

and in your code, you can do the following

ScrollView scroll = findById(); scroll.setFadingEdgeLength(150);

OR in your XML use android:fadingEdgeLength="150dp". Cheers!

Fade out last few lines of a TextView

1 Answers1