Fade out last few lines of a TextView

2.6k views Asked by At

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:

enter image description here

enter image description here

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.

1

There are 1 answers

0
portfoliobuilder On

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!