Friday, August 16, 2013

How to use TextSwitcher with Animation

Labels: , ,

For a recent project, I need to update display data constantly. However, this could be quite annoying when the update value doesn't change (or vibrant) while my manager asks to reveal the change of that display data, which means I have to make that TextView change with Animation even the Text in TextView doesn't change. I just need to make them looks like changed.

After a few searches on Google, I found two options we can use.

Screenshot of Demo


One is to use ViewFliper, where we could put several child views in that ViewFlipper, then each time the child views will be used in circularly order. One good example is Android ApiDemo's com.example.android.apis.view.Animation2.java.

Another one is to use TextSwitcher. The animation will be performed each time you set the new text to it.

Since I don't need multiple views support for my purpose, I chose the TextSwitcher.

The following part will demonstrate how to use TextSwitcher

Key Parts of using TextSwitcher are "What Animation You Use?", and "How Do You Display It?"

First Problem,  "What Animation You Use?"
This problem can be solved in TWO ways, in Java code or XML specification.
In XML,

1
2
3
4
5
6
7
8
9
<TextSwitcher
        android:id="@+id/main_textswitcher"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:inAnimation="@anim/push_up_in"
        android:outAnimation="@anim/push_up_out" >
</TextSwitcher>

In Java,


1
2
mTextSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_in));
mTextSwitcher.setOutAnimation(this, R.anim.push_up_out);

As you can see, you could use setInAnimation(Animation), or setInAnimation(Context, int) to specify the animation for your TextSwitcher.

Second Problem, "How Do You Display It?"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
mTextSwitcher = (TextSwitcher) findViewById(R.id.main_textswitcher);
mTextSwitcher.setFactory(new ViewFactory() {

 public View makeView() {
  TextView myText = new TextView(MainActivity.this);
  myText.setGravity(Gravity.CENTER);

  FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,
    Gravity.CENTER);
  myText.setLayoutParams(params);

  myText.setTextSize(36);
  myText.setTextColor(Color.BLACK);
  return myText;
 }
});
The TextView will display the content you need, and every time new text is set to TextSwitcher, TextView will be updated with Animation.

Full Implementation:
MainActivity.java
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
package com.antonio08104.example.textswitchersample;

import java.util.Random;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity {

 private TextSwitcher mTextSwitcher;
 private Button mButton;
 private Random mRandom;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  mRandom = new Random();

  mTextSwitcher = (TextSwitcher) findViewById(R.id.main_textswitcher);
  mTextSwitcher.setFactory(new ViewFactory() {

   public View makeView() {
    TextView myText = new TextView(MainActivity.this);
    myText.setGravity(Gravity.CENTER);

    FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
      LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,
      Gravity.CENTER);
    myText.setLayoutParams(params);

    myText.setTextSize(36);
    myText.setTextColor(Color.BLACK);
    return myText;
   }
  });
  mTextSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
    R.anim.push_up_in));
  mTextSwitcher.setOutAnimation(this, R.anim.push_up_out);

  mButton = (Button) findViewById(R.id.main_button);
  mButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    mTextSwitcher.setText(Integer.toString(mRandom.nextInt(10000)));
   }
  });
 }

}

XML:
activity_main.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEF2F4"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextSwitcher
        android:id="@+id/main_textswitcher"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:inAnimation="@anim/push_up_in"
        android:outAnimation="@anim/push_up_out" >
    </TextSwitcher>

    <Button
        android:id="@+id/main_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/next_random_number" />

</LinearLayout>

Here is the piece of code I took from Google Android for animation:
push_up_in.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2007 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<set xmlns:android="http://schemas.android.com/apk/res/android">
 <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/>
 <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_up_out.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2007 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<set xmlns:android="http://schemas.android.com/apk/res/android">
 <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="300"/>
 <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
Author: at
Location: 13111 Brooks Drive, Baldwin Park, CA 91706, USA

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )