More about ViewFlipper

I use The Pulse app everyday, it’s a rss reader more than complete .

But it’s not really hard to make a look a like, in term of UI . Here’s how i did it .

Main.java :

public class Main extends Activity implements OnClickListener {

/** Called when the activity is first created. */

ViewFlipper flipper;

TextView profile_tv, portfolio_tv, history_tv;

Animation flip_in_from_left, flip_in_from_right, flip_out_to_left, flip_out_to_right, stay_still;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

profile_tv = (TextView)findViewById(R.id.main_access_profile);

portfolio_tv = (TextView)findViewById(R.id.main_access_portfolio);

history_tv = (TextView)findViewById(R.id.main_access_history);

flipper = (ViewFlipper)findViewById(R.id.main_flipper);

test1 = (LinearLayout)findViewById(R.id.test1);

test2 = (LinearLayout)findViewById(R.id.test2);

test3 = (LinearLayout)findViewById(R.id.test3);

flip_in_from_left = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_in_from_left);

flip_in_from_right = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_in_from_right);

flip_out_to_left = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_out_to_left);

flip_out_to_right = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_out_to_right);

stay_still = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.stay_still);

profile_tv.setOnClickListener(this);

portfolio_tv.setOnClickListener(this);

history_tv.setOnClickListener(this);

profile_tv.setTextColor(getResources().getColor(R.color.blue_dark));

portfolio_tv.setTextColor(getResources().getColor(R.color.blue_light));

history_tv.setTextColor(getResources().getColor(R.color.blue_light));

}

@Override

public void onClick(View v) {

if(v == profile_tv){

if(flipper.getDisplayedChild() > 0){

flipPrevious();

}else if(flipper.getDisplayedChild() == 0){

stayStill();

Toast.makeText(getApplicationContext(), “do nothing”, Toast.LENGTH_SHORT).show();

}else if(flipper.getDisplayedChild() < 0){

flipNext();

}

profile_tv.setTextColor(getResources().getColor(R.color.blue_dark));

resetAllColors(portfolio_tv, history_tv);

flipper.setDisplayedChild(0);

}else if(v == portfolio_tv){

if(flipper.getDisplayedChild() > 1){

flipPrevious();

}else if(flipper.getDisplayedChild() == 1){

stayStill();

Toast.makeText(getApplicationContext(), “do nothing”, Toast.LENGTH_SHORT).show();

}else if(flipper.getDisplayedChild() < 1){

flipNext();

}

portfolio_tv.setTextColor(getResources().getColor(R.color.blue_dark));

resetAllColors(profile_tv, history_tv);

flipper.setDisplayedChild(1);

}else if(v == history_tv){

if(flipper.getDisplayedChild() > 2){

flipPrevious();

}else if(flipper.getDisplayedChild() == 2){

stayStill();

Toast.makeText(getApplicationContext(), “do nothing”, Toast.LENGTH_SHORT).show();

}else if(flipper.getDisplayedChild() < 2){

flipNext();

}

history_tv.setTextColor(getResources().getColor(R.color.blue_dark));

resetAllColors(portfolio_tv, profile_tv);

flipper.setDisplayedChild(2);

}

}

// Methods concerning the flip

public void flipNext(){

flipper.setInAnimation(flip_in_from_right);

flipper.setOutAnimation(flip_out_to_left);

}

public void flipPrevious(){

flipper.setInAnimation(flip_in_from_left);

flipper.setOutAnimation(flip_out_to_right);

}

public void stayStill(){

flipper.setInAnimation(stay_still);

flipper.setOutAnimation(stay_still);

}

public void resetAllColors(TextView one, TextView two){

one.setTextColor(getResources().getColor(R.color.blue_light));

two.setTextColor(getResources().getColor(R.color.blue_light));

}

//

}

Main.xml :

<?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”

android:background=”@color/blue_dark”>

<HorizontalScrollView

android:id=”@+id/main_horizontal_container”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:background=”@color/white”

>

<RelativeLayout

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

>

<TextView

android:id=”@+id/main_access_profile”

android:text=”Profile”

android:textSize=”25dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

/>

<TextView

android:id=”@+id/main_blank_1″

android:text=” “

android:textSize=”25dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_toRightOf=”@id/main_access_profile”

/>

<TextView

android:id=”@+id/main_access_portfolio”

android:text=”Portfolio”

android:textSize=”25dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_toRightOf=”@id/main_blank_1″

/>

<TextView

android:id=”@+id/main_blank_2″

android:text=” “

android:textSize=”25dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_toRightOf=”@id/main_access_portfolio”

/>

<TextView

android:id=”@+id/main_access_history”

android:text=”History”

android:textSize=”25dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_toRightOf=”@id/main_blank_2″

/>

</RelativeLayout>

</HorizontalScrollView>

<ViewFlipper

android:id=”@+id/main_flipper”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:layout_below=”@id/main_horizontal_container”

>

<include android:id=”@+id/main_test1″ layout=”@layout/test1″/>

<include android:id=”@+id/main_test2″ layout=”@layout/test2″/>

<include android:id=”@+id/main_test3″ layout=”@layout/test3″/>

</ViewFlipper>

</RelativeLayout>

test1, test2, test3 xml :

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:orientation=”vertical”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:id=”@+id/test1″>

<TextView

android:text=”Test 1″

android:textSize=”35dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

/>

</LinearLayout>

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:orientation=”vertical”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:id=”@+id/test2″>

<TextView

android:text=”Test 2″

android:textSize=”35dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

/>

</LinearLayout>

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:orientation=”vertical”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:id=”@+id/test3″>

  <TextView

android:text=”Test 3″

android:textSize=”35dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

/>

</LinearLayout>

Animations :

push in from left :

<?xml version=”1.0″ encoding=”utf-8″?>

<set xmlns:android=”http://schemas.android.com/apk/res/android”>

<translate

android:fromXDelta=”-100%”

android:toXDelta=”0%”

android:duration=”500″

/>

</set>

push in from right :

<?xml version=”1.0″ encoding=”utf-8″?>

<set xmlns:android=”http://schemas.android.com/apk/res/android”>

<translate

android:fromXDelta=”100%”

android:toXDelta=”0%”

android:duration=”500″

/>

</set>

push out to left :

<?xml version=”1.0″ encoding=”utf-8″?>

<set xmlns:android=”http://schemas.android.com/apk/res/android”>

<translate

android:fromXDelta=”0%”

android:toXDelta=”-100%”

android:duration=”500″

/>

</set>

push out to right :

<?xml version=”1.0″ encoding=”utf-8″?>

<set xmlns:android=”http://schemas.android.com/apk/res/android”>

<translate

android:fromXDelta=”0%”

android:toXDelta=”100%”

android:duration=”500″

/>

</set>

stay still :

<?xml version=”1.0″ encoding=”utf-8″?>

<set xmlns:android=”http://schemas.android.com/apk/res/android”>

</set>