Foursquare android top banner animation

Question

How can we add a zooming image background in android application? It was available in previous version of android twitter landing page (not home) and currently in foursquare the top banner background has the same animation. You can see a video of the animation from following link. Animation video on youtube

I searched through the web but could not find any solution. May be my keywords were wrong. Any guideline will be highly appreciated.

Answer 1

I found out a hack to do this thing. But I'm not sure whether this is the most optimum way to do this. In Android API demo there is a class call AnimateDrawables in com.example.android.apis.graphics package. Using the theory of that I got this work done.

Add an Framelayout as the base layout and you can add animated view between other widgets.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.cit.testmovingbg.MovingBGView
        android:id="@+id/movingBGView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:text="@string/app_name"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#FFFFFF"
        android:textSize="35sp" />

</FrameLayout>

MovingBGView class is a subsclass of view class and it's like below

public class MovingBGView extends View {

    private AnimateDrawable mDrawable;

    public MovingBGView(Context context) {
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);

        Drawable dr = context.getResources().getDrawable(R.drawable.colombo);
        dr.setBounds(0, 0, dr.getIntrinsicWidth(), dr.getIntrinsicHeight());

        Animation an = new TranslateAnimation(0, 100, 0, 200);
        an.setDuration(2000);
        an.setRepeatCount(-1);
        an.initialize(10, 10, 10, 10);

        mDrawable = new AnimateDrawable(dr, an);
        an.startNow();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);

        mDrawable.draw(canvas);
        invalidate();
    }   
}