How to exactly do Read More in an Android TextView?

Question

Question: How to fade out the end of the last line and append Read More text in a TextView?

See:

Like in this post, I want to append read more text when description is about end and also you can notice that some text are blurry, invisible. I want all those.

I tried some answer, but that are different.

I want like this and at the end I want to append "Read More":

And I know there is answer in this question: How to fade out the end of the last line in a TextView?

But that answer is not working for me.

My purpose is to not expand the texview while clicking on Read More, but instead I'll open new activity.

You can find here https://stackoverflow.com/questions/19099296/set-text-view-ellipsize-and-add-view-more-at-end — Askar, May 18 '20 at 15:13
Does this answer your question? [Set Text View ellipsize and add view more at end](https://stackoverflow.com/questions/19099296/set-text-view-ellipsize-and-add-view-more-at-end) — Izhan Ali, May 19 '20 at 03:50
@IzhanAli I tried that, but I don't want like this. I don't want to expand there, instead I'll create new activity. But I want like this question and I tried, but view is not coming properly: https://stackoverflow.com/questions/49295526/how-to-fade-out-the-end-of-the-last-line-in-a-textview/49299770#49299770 — , May 19 '20 at 04:36

Kasım Özdemir · Accepted Answer · 2020-05-19T11:21:13.070

There was some problems this answer. I changed it a little bit as like this:

public class FadingTextView extends android.support.v7.widget.AppCompatTextView {

private static final double FADE_LENGTH_FACTOR = 1.5;

private final Shader shader;
private final Matrix matrix;
private final Paint paint;
private final Rect bounds;

public FadingTextView(Context context) {
    this(context, null);
}

public FadingTextView(Context context, AttributeSet attrs) {
    this(context, attrs, android.R.attr.textViewStyle);
}

public FadingTextView(Context context, AttributeSet attrs, int defStyleAttribute) {
    super(context, attrs, defStyleAttribute);

    matrix = new Matrix();
    paint = new Paint();
    bounds = new Rect();
    shader = new LinearGradient(0f, 0f, 1f, 0f, 0, 0xFF000000, Shader.TileMode.CLAMP);
    paint.setShader(shader);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
}

@Override
protected void onDraw(Canvas canvas) {
    // Locals
    final Matrix m = matrix;
    final Rect b = bounds;
    final Layout l = getLayout();

    // Last line index
    final int line = getLineCount() - 1;

    // Determine text direction
    final boolean isRtl = l.getParagraphDirection(line) == Layout.DIR_RIGHT_TO_LEFT;

    // Last line bounds
    getLineBounds(line, b);

    // Adjust end bound to text length
    final int lineStart = l.getLineStart(line);
    final int lineEnd = l.getLineEnd(line);
    final CharSequence text = getText().subSequence(lineStart, lineEnd);
    final int measure = (int) (getPaint().measureText(text, 0, text.length()) + .5f);

    final int fadeLength = (int) (b.width() / FADE_LENGTH_FACTOR);


    // Save the layer
    final int saveCount = canvas.saveLayer(b.left, 0, b.right,
            b.bottom, null,
            Canvas.ALL_SAVE_FLAG);

    // Let TextView draw itself
    super.onDraw(canvas);

    // Adjust and set the Shader Matrix
    m.reset();
    m.setScale(fadeLength, 1f);
    if (isRtl) {
        m.postRotate(180f, fadeLength / 2f, 0f);
    }
    m.postTranslate(b.left, 0f);
    shader.setLocalMatrix(matrix);

    // Finally draw the fade
    canvas.drawRect(b, paint);

    canvas.restoreToCount(saveCount);
}
}

TextView

 <com.example.FadingTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#e2f3eb"
        android:ellipsize="end"
        android:maxLines="3"
        android:text="Lorem ipsum dolor....."
        android:textColor="#0b8043" />

Read More:

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/post_desc"
        android:layout_alignBottom="@+id/post_desc"
        android:layout_marginEnd="0dp"
        android:layout_marginBottom="0dp"
        android:background="@android:color/transparent"
        android:text="Read More"/>

FADE_LENGTH_FACTOR = 1

FADE_LENGTH_FACTOR = 1.5

Okay, I tried your answer, it is better then original question, but my motive is still not completed. Okay fad out is working, but I want to append Read More like I posted one Quora post image. Exactly I want that. And make sure on the click of read more Ive to open new activity — , May 19 '20 at 11:06
You should make your design accordingly. I used two textViews in one FrameLayout. — Kasım Özdemir, May 19 '20 at 11:13
I know we can use textview but my problem is how It should overlap with last line? See my layout here: https://drive.google.com/open?id=1WQr4DEuOzm0xS3O_idovVEEi9K-qu8kA — , May 19 '20 at 11:15
See in the same link, I added and tested textview, but not working — , May 19 '20 at 11:20
Can you please help me for this? https://stackoverflow.com/questions/61843230/how-stick-to-with-adapter-position-while-its-scrolling-in-android — , May 19 '20 at 15:10

How to exactly do Read More in an Android TextView?

1 Answers1