The document discusses different types of tabs and how to implement them in Android, including fixed tabs, scrollable tabs, stacked tabs, and using TabHost. It also covers using intents to launch activities, make phone calls, send SMS, take photos and more. ListViews with different row types are demonstrated along with backward compatible tab implementations.

1. by Eakapong Kattiya
UI Design
Monday, July 15, 13

2. Tabs
by Eakapong Kattiya
Monday, July 15, 13

3. Fixed Tabs : Movies ,Twitter
Fixed Tabs
- ต้องการเน้นให้ผู้ใช้เห็นข้อมูลหน้าอื่น ๆ
- ใช้เมื่อต้องสลับหน้าจอ(View) บ่อย ๆ
- จํานวน Top LevelView ไม่ควรเกิน 3-5
by Eakapong Kattiya
Monday, July 15, 13

4. Scrollable Tabs : Google Play Store
by Eakapong Kattiya
Monday, July 15, 13

5. Stacked Tabs :You Tube
by Eakapong Kattiya
Monday, July 15, 13

6. TabHost : Step 1 : activity_main.xml
by Eakapong Kattiya
Monday, July 15, 13

7. TabHost : Step 2 : MainActivity.java
public class MainActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost mtabHost = getTabHost();
addTab1(mTabHost);
addTab2(mTabHost);
addTab3(mTabHost);
}
by Eakapong Kattiya
Monday, July 15, 13

8. TabHost : Step 3 : MainActivity.java
void addTab1(TabHost tabHost) {
// Tab for First
TabSpec tbFirst = tabHost.newTabSpec("Intent");
// setting Title and Icon for the Tab
tbFirst.setIndicator("Intent",null);
Intent firstIntent = new Intent(this, FirstActivity.class);
tbFirst.setContent(firstIntent);
// Adding TapSpec to tabHost
tabHost.addTab(tbFirst);
}
by Eakapong Kattiya
Monday, July 15, 13

9. TabHost : Step 4 : MainActivity.java
void addTab2(TabHost tabHost) {
// Tab for Second
TabSpec tbSecond = tabHost.newTabSpec("WebView");
// setting Title and Icon for the Tab
tbSecond.setIndicator("WebView", null);
Intent secondIntent = new Intent(this,SecondActivity.class);
tbSecond.setContent(secondIntent);
// Adding TapSpec to tabHost
tabHost.addTab(tbSecond);
}
by Eakapong Kattiya
Monday, July 15, 13

10. TabHost : Step 5 : MainActivity.java
void addTab3(TabHost tabHost) {
// Tab for Third
TabSpec tbThird = tabHost.newTabSpec("Third");
// setting Title and Icon for the Tab
tbThird.setIndicator(null,
getResources().getDrawable(R.drawable.ic_tab_third));
Intent thirdIntent = new Intent(this, ThirdActivity.class);
tbThird.setContent(thirdIntent);
// Adding TapSpec to tabHost
tabHost.addTab(tbThird);
}
by Eakapong Kattiya
Monday, July 15, 13

11. TabHost
by Eakapong Kattiya
Monday, July 15, 13

12. Lists
by Eakapong Kattiya
Monday, July 15, 13

13. ListView
* TabActivity is deprecated
* use fragment Activity instead
by Eakapong Kattiya
Monday, July 15, 13

14. Single Line List : simple_list_item_1
* TabActivity is deprecated
* use fragment Activity instead
android.R.layout.simple_list_item_1
by Eakapong Kattiya
Monday, July 15, 13

15. Single Line List : simple_list_item_1 : FirstActivity.java
public class FirstActivity extends Activity
implements OnItemClickListener{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_first);
initListView();
}
by Eakapong Kattiya
Monday, July 15, 13

16. Single Line List : simple_list_item_1 : FirstActivity.java
* TabActivity is deprecated
* use fragment Activity instead
private void initListView() {
// 1. Create listView object
ListView listView = (ListView) findViewById(R.id.listView1);
// 2. Create mArraylist object
String[] stringArray = new String[]{"Phone","SMS","EMAIL","CAMERA"};
// Alternative
// ArrayList<String> mArraylist = new ArrayList<String>();
// mArraylist.add("Item1");
// mArraylist.add("Item2");
// 3. Create arrayAdapter object
// first parameter = context of the activity
// second parameter = the type of list view
// third parameter = your array
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>
(this,android.R.layout.simple_list_item_1, stringArray);
listView.setAdapter(arrayAdapter);
// 4. Add listView Listener
listView.setOnItemClickListener(this);
}
by Eakapong Kattiya
Monday, July 15, 13

17. Single Line List : simple_list_item_1 : FirstActivity.java
* TabActivity is deprecated
* use fragment Activity instead
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
String item = (String) arg0.getItemAtPosition(arg2);
Log.i("Click listView", item);
Toast.makeText(getApplicationContext(),
"Click listView " + item,
Toast.LENGTH_LONG).show();
}
by Eakapong Kattiya
Monday, July 15, 13

18. Single Line List : simple_list_item_1
by Eakapong Kattiya
Monday, July 15, 13

19. 2 Line List : simple_list_item_2
android.R.layout.simple_list_item_2
by Eakapong Kattiya
TwoLineListItem
Monday, July 15, 13

20. 2 Line List : simple_list_item_2 : SecondActivity.java
* TabActivity is deprecated
* use fragment Activity instead
public class SecondActivity extends Activity
implements OnItemClickListener{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
initListView();
}
by Eakapong Kattiya
Monday, July 15, 13

21. 2 Line List : simple_list_item_2 : SecondActivity.java
* TabActivity is deprecated
* use fragment Activity instead
private void initListView(){
ListView listView = (ListView) findViewById(R.id.listView1);
ArrayList<Item> items = new ArrayList<Item>();
Item item1 = new Item();
item1.setTitle("iBluecode");
item1.setDetail("http://www.ibluecode.com");
items.add(item1);
Item item2 = new Item();
item2.setTitle("Facebook");
item2.setDetail("http://www.facebook.com");
items.add(item2);
Item item3 = new Item();
item3.setTitle("Twitter");
item3.setDetail("http://www.twitter.com");
items.add(item3);
Item item4 = new Item();
item4.setTitle("YouTube");
item4.setDetail("http://www.youtube.com");
items.add(item4);
listView.setAdapter(new ItemBaseAdapter(this, items));
listView.setOnItemClickListener(this);
}
by Eakapong Kattiya
Monday, July 15, 13

22. 2 Line List : simple_list_item_2 : SecondActivity.java
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
Item item = (Item) arg0.getItemAtPosition(arg2);
Log.i("Click listView ", item.title);
Toast.makeText(getApplicationContext(),
"Click listView " + item.title,
Toast.LENGTH_LONG).show();
Intent intent = null ;
if(arg2 == 0){
intent = new Intent(SecondActivity.this,FirstActivity.class)
.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
}
if(arg2 == 1){
intent = new Intent(SecondActivity.this, SecondActivity.class)
.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
}
startActivity(intent);
//finish();
}
by Eakapong Kattiya
Monday, July 15, 13

23. 2 Line List : simple_list_item_2
by Eakapong Kattiya
TwoLineListItem
Monday, July 15, 13

24. Backward-compatible Tabs
by Eakapong Kattiya
Eclair (Android 2.3) Honeycomb (Android 4.0)
http://developer.android.com/shareables/training/TabCompat.zip
Monday, July 15, 13

25. Intent
by Eakapong Kattiya
Monday, July 15, 13

26. by Eakapong Kattiya
Intent
Intents can be used to
• Opening new activity
• Passing data between activities.
• Launching the built-in web browser and supplying a URL address
• Launching the web browser and supplying a search string
• Launching the built-in Dialer application and supplying a phone number
• Launching the built-in Maps application and supplying a location
• Launching Google StreetView and supplying a location
• Launching the built-in Camera application in still or video mode
• Launching a ringtone picker
• Recording a sound
Monday, July 15, 13

27. by Eakapong Kattiya
Intent : Opening new activity
Intent intent = new Intent(getApplicationContext(), WebViewActivity.class);
startActivity(intent);
//or
startActivity(new Intent(FirstActivity.this, WebViewActivity.class));
//or
startActivity(Intent.createChooser(intent, "Open url with:"));
//or
startActivityForResult(intent,1337);
FirstActivity.java
Monday, July 15, 13

28. by Eakapong Kattiya
Intent : Passing data between activities.
//set Extra Data before startActivity;
Intent intent = new Intent(this, WebViewActivity.class);
intent.putExtra("url","http://www.ibluecode.com");
intent.putExtra("tag",100);
startActivity(intent);
//get Extra Data on WebViewActivity;
String urlString = "http://www.default.com" ;
Intent intent = getIntent();
if( intent.getExtras() != null)
{
urlString = intent.getExtras().get("url").toString() ;
}
FirstActivity.java
WebViewActivity.java
Monday, July 15, 13

29. by Eakapong Kattiya
Intent : Phone call
String uriString = "tel:" + "086-673-2111" ;
Intent intent = new Intent(Intent.ACTION_DIAL); //Intent.ACTION_CALL
intent.setData(Uri.parse(uriString));
startActivity(intent);
FirstActivity.java
Monday, July 15, 13

30. by Eakapong Kattiya
Intent : Send SMS
String uriString = "smsto:" + "0866732111" ;
Intent intent = new Intent(Intent.ACTION_SENDTO);
intent.setData(Uri.parse(uriString));
intent.putExtra("sms_body", "The SMS text");
startActivity(intent);
}
FirstActivity.java
Monday, July 15, 13

31. by Eakapong Kattiya
Intent : Send Email
Intent intent = new Intent(android.content.Intent.ACTION_SEND);
String aEmailList[] = { "eakkattiya@gmail.com","eak.k@ibluecode.com" };
String aEmailCCList[] = { "eakkattiya@gmail.com" };
String aEmailBCCList[] = { "eakkattiya@gmail.comm" };
intent.putExtra(android.content.Intent.EXTRA_EMAIL, aEmailList);
intent.putExtra(android.content.Intent.EXTRA_CC, aEmailCCList);
intent.putExtra(android.content.Intent.EXTRA_BCC, aEmailBCCList);
intent.putExtra(android.content.Intent.EXTRA_SUBJECT, "My subject");
intent.setType("plain/text");
intent.putExtra(android.content.Intent.EXTRA_TEXT, "My message body.");
startActivity(Intent.createChooser(intent, "Send your email with:"));
FirstActivity.java
Monday, July 15, 13

32. by Eakapong Kattiya
Intent :Take a photo
Intent intent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(Intent.createChooser(intent, "Take a with:"),MY_CAMERA_REQUEST);
//Get Taken Image
protected void onActivityResult(int requestCode, int resultCode, Intent data)
{
if (requestCode == MY_CAMERA_REQUEST && resultCode == RESULT_OK) {
Bitmap photo = (Bitmap) data.getExtras().get("data");
ImageView imageView = (ImageView)findViewById(R.id.imageView1);
imageView.setImageBitmap(photo);
}
}
FirstActivity.java
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
AndroidManifest.xml
Monday, July 15, 13