Saturday, January 19, 2013

Android - Horizontal Text Scrolling like credits scroll in Angry Birds

I always like credits scrolling in Angry Birds. It gives you feeling of watching a movie till end. All names slowly scrolling in the screen gives a dramatic effect. Let us see how to add a scrolling like that.

Create a new android project scrolltext and new activity scrolltextactivity.

Step 1:

In main.xml add a TextView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >
         <TextView
        android:id="@+id/textview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello"
        android:gravity="bottom"
        />
</RelativeLayout>

Step 2:

Now lets go to our scrolltextactivity, get the textview.  After getting the textview, let us create a new scroller and set this new scroller to our textview.


public class ScrolltextActivity extends Activity {
    /** Called when the activity is first created. */
Scroller myscroll = null;
TextView tvData = null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        tvData = (TextView)findViewById(R.id.textview);
        
        myscroll = new Scroller(ScrolltextActivity.this,
        new LinearInterpolator()); // create new scroller
        
        tvData.setScroller(myscroll); // set the scroller to text view 

    }


Step 3:

Now this alone doesn't do the scrolling. Let us add a new function scroll()

startScroll()


start scrolling by providing a starting point and the distance to travel. The scroll will use the default value of 250 milliseconds for the duration.
Parameters
startXStarting horizontal scroll offset in pixels. Positive numbers will scroll the content to the left.
startYStarting vertical scroll offset in pixels. Positive numbers will scroll the content up.
dxHorizontal distance to travel. Positive numbers will scroll the content to the left.
dyVertical distance to travel. Positive numbers will scroll the content up.



public void Scroll() {
           tvData.setText(R.string.hello);
            myscroll.startScroll(0, 0, 0, 500,10000);
        }

Now call scroll() in our OnCreate function after setscroller

Step 4:

Create a new runnable compscroll

computeScrollOffset() returns false when the animation is over else it returns true. So we start a thread where we keep checking if the scroll is done. Once it it done we again start scrolling here.


private Runnable compScroll = new Runnable() {

@Override
public void run() {
if(false == myscroll.computeScrollOffset())
{
Log.i("App", "Scroll Again");
Scroll();
}

}
};



Step 5:


Now start a thread in OnCreate() after calling scroll()


Thread thread = new Thread()
        {
            @Override
            public void run() {
                try {
                    while(true) {
                    Log.i("App", "Thread Run");
                        sleep(1000);
                        ScrolltextActivity.this.runOnUiThread(compScroll);
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };

        thread.start();


Complete Activity Code:



package com.myexample.scrolltext;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.animation.LinearInterpolator;
import android.widget.Scroller;
import android.widget.TextView;

public class ScrolltextActivity extends Activity {
    /** Called when the activity is first created. */
Scroller myscroll = null;
TextView tvData = null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        tvData = (TextView)findViewById(R.id.textview);
        
        myscroll = new Scroller(ScrolltextActivity.this,
        new LinearInterpolator());
        
        tvData.setScroller(myscroll);
        Scroll();    

        
        Thread thread = new Thread()
        {
            @Override
            public void run() {
                try {
                    while(true) {
                    Log.i("App", "Thread Run");
                        sleep(1000);
                        ScrolltextActivity.this.runOnUiThread(compScroll);
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };

        thread.start();
    }
    
   

private Runnable compScroll = new Runnable() {

@Override
public void run() {
if(false == myscroll.computeScrollOffset())
{
Log.i("App", "Scroll Again");
Scroll();
}

}
};
        
        public void Scroll() {
           tvData.setText(R.string.hello);
        int length = tvData.getLineCount();
        myscroll.startScroll(0, 0, 0, 500,10000);
        
    }
}


Now enjoy your scroll view. I am sure this code can be further enhanced to any of the views.



Labels: , , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home