Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create View partially invisible

Tags:

android

view

What I'd like to achieve is effect like the one in the picture: enter image description here

So basically there's a TextView which slowly disappears. I don't want whole View to be made for example 50% transparent, but rather for example left part of it to be 0% transparent, and it smoothly goes into 100% transparency at the right side.

I know that some components (e.g. ListView) uses this, but is it possible to do it manually in quite easy way?

Thanks in advance for answers

like image 523
Piotr Chojnacki Avatar asked Jan 17 '13 13:01

Piotr Chojnacki


1 Answers

First, create a shape with an alpha gradient. Place the XML into your drawable directory. Let's call it gradient_view.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:startColor="#FFFFFFFF"
        android:endColor="#00FFFFFF"
        android:type="linear"/>
</shape>

Now create a view in your layout to the right of your TextView. You'll need to set width and height appropriately and position in your view as required (RelativeLayout with layout_toTheRightOf would work well).

<View android:layout_width="100dp"
    android:layout_height="50dp"
    android:background="@drawable/gradient_view"/>

In the right place in your code, animate it. Change the -200 to whatever you need (or even better, find the left X of your gradient view and subtract the left edge of your TextView to find the amount to move).

TranslationAnimation anim = new TranslateAnimation(0, -200, 0, 0);
anim.setDuration(1000);
myTextView.startAnimation(anim);

http://developer.android.com/reference/android/view/animation/TranslateAnimation.html

There's a bit more work to do but this is most of what you need.

Good luck

like image 109
Simon Avatar answered Oct 21 '22 17:10

Simon