CODEWITHSUNDEEP
androidtextview
Vitalii
Vitalii

Reputation: 11071

How to make the end of the text in TextView transparent in Android

I found an interesting design feature in the Google Play app.

enter image description here

As you can see at this picture text becomes invisible with some gradient. How can I do something similar in my app?

Upvotes: 4

Views: 1566

Answers (3)

allofmex
allofmex

Reputation: 597

An (more efficient) option would be to override onDraw and just draw a gradient on-top of your view:

   @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);
    }

Note: If your View is a Layout, overwrite dispatchDraw(Canvas canvas) instead.

Upvotes: 0

Bö macht Blau
Bö macht Blau

Reputation: 13009

I'd use a color gradient like this

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>

For example for the first row:

enter image description here

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

Please note that there are several options for the layout. The central idea in this approach is to make the gradient drawable plus the white box containing the Button overlap the TextViews

Upvotes: 3

Equa
Equa

Reputation: 54

It could be probably be done by making View that overlaps TextView background transparent gradient, like so:

Create a xml in drawable folder with a name lets say "gradient":

<?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>

Additional Hex value before "FFFFFF" gives color an alpha parameter which could be considered as transparency or opacity. Now in View that overlaps layout write android:background="@drawable/gradient"I haven't tested it but it should work. And of course make sure to extend View that overlaps margin with android:layout_marginLeft="20dp".

Upvotes: 1

Related Questions