Si8
Si8

Reputation: 9225

Slide in while fade in a textview

How can I combine XML animation to do the following effect:

enter image description here

1 -> 2 (Slide in while fading in the TextView)

My partial XML code is:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="horizontal"
    android:layout_weight="1" >

    <TextView
        android:id="@+id/tvData"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="TYPE:"
        android:gravity="center"
        android:textStyle="bold"
        android:textSize="@dimen/info_height"
        android:shadowDx="4"
        android:shadowDy="4"
        android:shadowColor="#A7A7A7"
        android:shadowRadius="15" />
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:padding="@dimen/about_divider_height" >
        <TextView
            android:id="@+id/tvBloodDetail"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/roundtv"
            android:text=""
            android:gravity="center"
            android:textSize="@dimen/btn_text"
            android:textStyle="bold"
            android:shadowDx="8"
            android:shadowDy="8"
            android:shadowColor="#CC900205"
            android:shadowRadius="25"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />
    </LinearLayout>
</LinearLayout>

Part of the Java:

private Runnable task = new Runnable() { 
        public void run() {
            //run the animated task
            tvB.setAnimation(animationTranslateIn);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.bloodtype);

            tvB = (TextView) findViewById(R.id.tvBloodDetail);

                animationTranslateIn = AnimationUtils.loadAnimation(BloodType.this, R.anim.slideanim);
        }

I have the slideanim xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator" 
   android:shareInterpolator="true">
   <alpha
       android:fromAlpha="1.0"
       android:toAlpha="0.1"
       android:duration="200"
       android:repeatCount="1"
       android:repeatMode="reverse"
       android:startOffset="0" />
   <translate android:duration="2000"
       android:fromXDelta="0"
       android:toXDelta="100%p"
       android:startOffset="0" />
</set>

How can I combine the two above or even differently to follow the same process as 1 & 2?

Upvotes: 4

Views: 7083

Answers (2)

Jason C
Jason C

Reputation: 40315

Put them both in the same set and set their start offsets to the same value:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator" 
   android:shareInterpolator="true">
   <alpha
       android:fromAlpha="1.0"
       android:toAlpha="0.1"
       android:duration="200"
       android:repeatCount="1"
       android:repeatMode="reverse"
       android:startOffset="0" />
   <translate android:duration="2000"
       android:fromXDelta="0"
       android:toXDelta="100%p"
       android:startOffset="0" />
</set>

Default startOffset is 0 so you could leave that out. You could also not share the interpolator if you don't want.

See http://developer.android.com/guide/topics/resources/animation-resource.html.

Upvotes: 8

Andrew Mackenzie
Andrew Mackenzie

Reputation: 5737

You need to create a new animation XML with an "animation set" then apply it as normal.

You can set timing offsets on each part.

Well explained at developer web site.

Upvotes: 1

Related Questions