Как сделать конец текста в TextView прозрачным в Android

Question

Я нашел интересную функцию дизайна в приложении Google Play.

Как вы можете видеть на этой картинке, текст становится невидимым с некоторым градиентом. Как я могу сделать что-то подобное в моем приложении?

Answer 1

Я бы использовал такой градиент цвета, как этот

color_gradient.xml

<shape android:shape="rectangle"
   xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#ffffff"
        android:endColor="#00ffffff"
        android:angle="180"/>
</shape>

Например, для первого ряда:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="120dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_centerVertical="true"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World HelloWorld HelloWorld"
           android:textAppearance="@style/Base.TextAppearance.AppCompat.Title"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World HelloWorld HelloWorld"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
        />
    </LinearLayout>

    <View
        android:id="@+id/gradient"
        android:layout_width="60dp"
        android:layout_height="match_parent"
        android:layout_toStartOf="@+id/button_box"
        android:background="@drawable/color_gradient"/>

    <FrameLayout
        android:id="@+id/button_box"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:padding="16dp"
        android:background="#ffffff">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="8dp"
            android:text="Tout mettre a jour"
            android:textColor="#ffffff"
            android:background="#22bb66"/>
    </FrameLayout>
</RelativeLayout>

Обратите внимание, что существует несколько вариантов макета. Основная идея этого подхода состоит в том, чтобы сделать градиент для рисования плюс белое поле, содержащее Button, перекрывающим TextView s

Answer 2

(более эффективным) вариантом было бы переопределить onDraw и просто нарисовать градиент поверх вашего вида:

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();
        paint.setShader(new LinearGradient(0, 0, 0, getHeight(),
                        Color.WHITE, Color.TRANSPARENT, Shader.TileMode.CLAMP));
        canvas.drawPaint(paint);
    }

Примечание. Если ваш вид является макетом, перезаписать dispatchDraw(Canvas canvas)вместо этого.

Answer 3

Возможно, это можно сделать, сделав View перекрывающим TextView фоновый прозрачный градиент, например:

Создайте папку xml в drawable с именем, скажем, «градиент»:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient 
            android:startColor="#FFFFFF"
            android:centerColor="#88FFFFFF"
            android:endColor="#FFFFFFFF"
            android:angle="90"
            android:dither="true"
         />
    </shape>

Дополнительное шестнадцатеричное значение перед «FFFFFF» дает цвет альфа-параметру, который можно рассматривать как прозрачность или непрозрачность. Теперь в View, который перекрывает макет, пишите android:background="@drawable/gradient" Я не тестировал его, но он должен работать. И, конечно, убедитесь, что расширение View перекрывает поле с android:layout_marginLeft="20dp".