Android
|
Modified: |
Resources
Tutorial - http://developer.android.com/resources/tutorials/views/hello-tabwidget.html
Overview
Switching between an Activity is one approach to displaying different views.
Another approach is to display different views within the same Activity. One advantage is that the views can share access to the data defined within the Activity.
Below are three examples: two of flipping between views using buttons and finger drags, and tabbing.
Example - ViewFlipper using buttons
The example demonstrates a ViewFlipper widget to change the current view exposed to the user.
Views are flipped using buttons.
To implement the examples below:
- Create an Android project with a new directory
res/anim
- Right-click on the new directory called anim
- Import all the XML files from:
Android_SDK\Platform\android-?.?\samples\ApiDemos\res\anim.
The animations are created using XML or created in code.
- Copy the following files.
<?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:background="#ffffff"
>
<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/tv_country"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#CC0000"
android:textStyle="bold"
android:textSize="18px"
android:text="Country" >
</TextView>
<Spinner android:text=""
android:id="@+id/spinner_country"
android:layout_width="200px"
android:textColor="#CC0000"
android:background="#ffff00"
android:layout_height="55px">
</Spinner>
<Button android:text="Next"
android:id="@+id/Button_next"
android:textColor="#CC0000"
android:layout_width="250px"
android:textSize="18px"
android:layout_height="55px">
</Button>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<Button android:text="Back"
android:id="@+id/Button_back"
android:textColor="#CC0000"
android:layout_width="250px"
android:textSize="18px"
android:layout_height="55px">
</Button>
<Button android:text="Forward"
android:id="@+id/Button_forward"
android:textColor="#CC0000"
android:layout_width="250px"
android:textSize="18px"
android:layout_height="55px">
</Button>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/tv_income"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#CC0000"
android:textStyle="bold"
android:textSize="18px"
android:text="Income" >
</TextView>
<EditText android:text=""
android:id="@+id/et_income"
android:layout_width="200px"
android:textColor="#CC0000"
android:layout_height="55px">
</EditText>
<Button android:text="Previous"
android:id="@+id/Button_previous"
android:layout_width="250px"
android:textSize="18px"
android:textColor="#CC0000"
android:layout_height="55px">
</Button>
</LinearLayout>
</ViewFlipper>
</LinearLayout>
|
package edu.ius.rwisman.ViewFlipButton;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.ViewFlipper;
public class ViewFlipButtonActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Add a few countries to the spinner
Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
android.R.layout.simple_spinner_dropdown_item,
new String[] { "Canada", "USA" });
spinnerCountries.setAdapter(countryArrayAdapter);
Button buttonNext = (Button) findViewById(R.id.Button_next);
buttonNext.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: push left in
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
vf.showNext();
}
});
Button buttonback = (Button) findViewById(R.id.Button_back);
buttonback.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: push left out
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
vf.showPrevious();
}
});
Button buttonforward = (Button) findViewById(R.id.Button_forward);
buttonforward.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: push left out
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
vf.showNext();
}
});
Button buttonPrevious = (Button) findViewById(R.id.Button_previous);
buttonPrevious.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: push left out
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
vf.showPrevious();
}
});
}
}
|
Example - ViewFlipper using Drag
The example demonstrates a ViewFlipper widget to change the current view exposed to the user.
Views are flipped using drag, requires implementing OnTouchListener.
<?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:background="#ffffff"
android:id="@+id/layout_main"
>
<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#555555">
<TextView android:id="@+id/tv_country"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#CC0000"
android:textStyle="bold"
android:textSize="18px"
android:text="Country" >
</TextView>
<Spinner android:text=""
android:id="@+id/spinner_country"
android:layout_width="200px"
android:layout_height="55px">
</Spinner>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#00ff00">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
android:text="middle" >
</TextView>
<EditText android:text=""
android:id="@+id/et_income"
android:layout_width="200px"
android:layout_height="55px">
</EditText>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0000ff">
<TextView android:id="@+id/tv_income"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
android:text="Income" >
</TextView>
<EditText android:text=""
android:id="@+id/et_income"
android:layout_width="200px"
android:layout_height="55px">
</EditText>
</LinearLayout>
</ViewFlipper>
</LinearLayout>
|
package edu.ius.rwisman.ViewFlipButton;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Spinner;
import android.widget.ViewFlipper;
public class ViewFlipButtonActivity extends Activity implements OnTouchListener{
private float downXValue;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout layMain = (LinearLayout) findViewById(R.id.layout_main);
layMain.setOnTouchListener((OnTouchListener) this);
// Add a few countries to the spinner
Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
android.R.layout.simple_spinner_dropdown_item,
new String[] { "Canada", "USA" });
spinnerCountries.setAdapter(countryArrayAdapter);
}
public boolean onTouch(View arg0, MotionEvent arg1) {
// Get the action that was done on this touch event
switch (arg1.getAction()) {
case MotionEvent.ACTION_DOWN: {
// store the X value when the user's finger was pressed down
downXValue = arg1.getX();
break;
}
case MotionEvent.ACTION_UP: {
// Get the X value when the user released his/her finger
float currentX = arg1.getX();
// going backwards: pushing stuff to the right
if (downXValue < currentX) {
// Get a reference to the ViewFlipper
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set the animation
vf.setAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_right));
// Flip!
vf.showNext();
}
// going forwards: pushing stuff to the left
if (downXValue > currentX) {
// Get a reference to the ViewFlipper
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set the animation
vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_left));
// Flip!
vf.showPrevious();
}
break;
}
}
// if you return false, these actions will not be recorded
return true;
}
}
|
Example - Tabs
The example demonstrates a TabWidget to change the current view exposed to the user.
Note there
doSomething = (Button) findViewById(R.id.btn_do_something);
doSomething.setOnClickListener(this);
flipper = (ViewFlipper) findViewById(R.id.layout_tab_one);
flipper.setOnClickListener(this);
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ViewFlipper android:id="@+id/layout_tab_one" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/tabone1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Tab 1 view 1" /> <TextView android:id="@+id/tabone2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Tab 1 view 2" /> </ViewFlipper> <LinearLayout android:id="@+id/layout_tab_two" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/textview2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Tab 2 view" /> <Button android:id="@+id/btn_do_something" android:text="do something" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost> |
package edu.ius.rwisman.Tabs;
import android.app.TabActivity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TabHost;
import android.widget.Toast;
import android.widget.ViewFlipper;
public class TabsActivity extends TabActivity implements OnClickListener {
Button doSomething;
TabHost tabHost;
ViewFlipper flipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
doSomething = (Button) findViewById(R.id.btn_do_something);
doSomething.setOnClickListener(this);
flipper = (ViewFlipper) findViewById(R.id.layout_tab_one);
flipper.setOnClickListener(this);
tabHost = getTabHost();
tabHost.addTab(tabHost.newTabSpec("tab1")
.setContent(R.id.layout_tab_one).setIndicator("Tab 1"));
tabHost.addTab(tabHost.newTabSpec("tab2")
.setContent(R.id.layout_tab_two).setIndicator("Tab 2"));
tabHost.setCurrentTab(0);
}
@Override
public void onClick(View v) {
// flip TextView in Tab 1
if (v == flipper)
flipper.showNext();
// show a toast in Tab 2
if (v == doSomething)
Toast.makeText(getApplicationContext(), "doing something",
Toast.LENGTH_SHORT).show();
}
}
|
