Search code examples
androidandroid-layoutandroid-edittextgradientandroid-text-color

How can I apply a mask that fades out a text of a `EditText` on Android?


I'd like to achieve that result on Android:

enter image description here

I already tried to use a LinearGradient Shader, but it just applies the gradient effect in the EditText background instead of on the Text.

Can you help me with that?

Edit1: Add code

public class CustomEditText extends AppCompatEditText {
    public CustomEditText(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        @ColorInt int startColor = ResourcesCompat.getColor(
                getResources(), android.R.color.transparent, getContext().getTheme());
        @ColorInt int endColor = ResourcesCompat.getColor(
                getResources(), android.R.color.black, getContext().getTheme());
        LinearGradient gradient = new LinearGradient(0, 0, getWidth(), 0, startColor, endColor, Shader.TileMode.MIRROR);
        Paint paint = new Paint(Paint.DITHER_FLAG);
        paint.setShader(gradient);
        super.onDraw(canvas);
    }
}

Solution

  • I end up solving it by setting the EditText.setHorizontalFadingEdgeEnabled(true).

    It already handles the fading gradient color on the left border.