by Eakapong Kattiya
UI Design
Monday, July 15, 13
Tabs
by Eakapong Kattiya
Monday, July 15, 13
Fixed Tabs : Movies ,Twitter
Fixed Tabs
- ต้องการเน้นให้ผู้ใช้เห็นข้อมูลหน้าอื่น ๆ
- ใช้เมื่อต้องสลับหน้าจอ(View) บ่อย ๆ
-...
Scrollable Tabs : Google Play Store
by Eakapong Kattiya
Monday, July 15, 13
Stacked Tabs :You Tube
by Eakapong Kattiya
Monday, July 15, 13
TabHost : Step 1 : activity_main.xml
by Eakapong Kattiya
Monday, July 15, 13
TabHost : Step 2 : MainActivity.java
public class MainActivity extends TabActivity {
	 @Override
	 protected void onCreate...
TabHost : Step 3 : MainActivity.java
void addTab1(TabHost tabHost) {
	 	 // Tab for First
	 	 TabSpec tbFirst = tabHost.ne...
TabHost : Step 4 : MainActivity.java
void addTab2(TabHost tabHost) {
	 	 // Tab for Second
	 	 TabSpec tbSecond = tabHost....
TabHost : Step 5 : MainActivity.java
void addTab3(TabHost tabHost) {
	 	 // Tab for Third
	 	 TabSpec tbThird = tabHost.ne...
TabHost
by Eakapong Kattiya
Monday, July 15, 13
Lists
by Eakapong Kattiya
Monday, July 15, 13
ListView
* TabActivity is deprecated
* use fragment Activity instead
by Eakapong Kattiya
Monday, July 15, 13
Single Line List : simple_list_item_1
* TabActivity is deprecated
* use fragment Activity instead
android.R.layout.simple_...
Single Line List : simple_list_item_1 : FirstActivity.java
public class FirstActivity extends Activity
implements OnItemCl...
Single Line List : simple_list_item_1 : FirstActivity.java
* TabActivity is deprecated
* use fragment Activity instead
pri...
Single Line List : simple_list_item_1 : FirstActivity.java
* TabActivity is deprecated
* use fragment Activity instead
pub...
Single Line List : simple_list_item_1
by Eakapong Kattiya
Monday, July 15, 13
2 Line List : simple_list_item_2
android.R.layout.simple_list_item_2
by Eakapong Kattiya
TwoLineListItem
Monday, July 15, ...
2 Line List : simple_list_item_2 : SecondActivity.java
* TabActivity is deprecated
* use fragment Activity instead
public ...
2 Line List : simple_list_item_2 : SecondActivity.java
* TabActivity is deprecated
* use fragment Activity instead
private...
2 Line List : simple_list_item_2 : SecondActivity.java
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, i...
2 Line List : simple_list_item_2
by Eakapong Kattiya
TwoLineListItem
Monday, July 15, 13
Backward-compatible Tabs
by Eakapong Kattiya
Eclair (Android 2.3) Honeycomb (Android 4.0)
http://developer.android.com/sha...
Intent
by Eakapong Kattiya
Monday, July 15, 13
by Eakapong Kattiya
Intent
Intents can be used to
• Opening new activity
• Passing data between activities.
• Launching th...
by Eakapong Kattiya
Intent : Opening new activity
Intent intent = new Intent(getApplicationContext(), WebViewActivity.clas...
by Eakapong Kattiya
Intent : Passing data between activities.
//set Extra Data before startActivity;
	 Intent intent = new...
by Eakapong Kattiya
Intent : Phone call
String uriString = "tel:" + "086-673-2111" ;
Intent intent = new Intent(Intent.ACT...
by Eakapong Kattiya
Intent : Send SMS
String uriString = "smsto:" + "0866732111" ;
Intent intent = new Intent(Intent.ACTIO...
by Eakapong Kattiya
Intent : Send Email
Intent intent = new Intent(android.content.Intent.ACTION_SEND);
String aEmailList[...
by Eakapong Kattiya
Intent :Take a photo
Intent intent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
sta...
Upcoming SlideShare
Loading in …5
×

Android basic 2 UI Design

2,116 views

Published on

Android basic 2 UI Design

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,116
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
151
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Android basic 2 UI Design

  1. 1. by Eakapong Kattiya UI Design Monday, July 15, 13
  2. 2. Tabs by Eakapong Kattiya Monday, July 15, 13
  3. 3. Fixed Tabs : Movies ,Twitter Fixed Tabs - ต้องการเน้นให้ผู้ใช้เห็นข้อมูลหน้าอื่น ๆ - ใช้เมื่อต้องสลับหน้าจอ(View) บ่อย ๆ - จํานวน Top LevelView ไม่ควรเกิน 3-5 by Eakapong Kattiya Monday, July 15, 13
  4. 4. Scrollable Tabs : Google Play Store by Eakapong Kattiya Monday, July 15, 13
  5. 5. Stacked Tabs :You Tube by Eakapong Kattiya Monday, July 15, 13
  6. 6. TabHost : Step 1 : activity_main.xml by Eakapong Kattiya Monday, July 15, 13
  7. 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. 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. 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. 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. 11. TabHost by Eakapong Kattiya Monday, July 15, 13
  12. 12. Lists by Eakapong Kattiya Monday, July 15, 13
  13. 13. ListView * TabActivity is deprecated * use fragment Activity instead by Eakapong Kattiya Monday, July 15, 13
  14. 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. 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. 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. 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. 18. Single Line List : simple_list_item_1 by Eakapong Kattiya Monday, July 15, 13
  19. 19. 2 Line List : simple_list_item_2 android.R.layout.simple_list_item_2 by Eakapong Kattiya TwoLineListItem Monday, July 15, 13
  20. 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. 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. 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. 23. 2 Line List : simple_list_item_2 by Eakapong Kattiya TwoLineListItem Monday, July 15, 13
  24. 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. 25. Intent by Eakapong Kattiya Monday, July 15, 13
  26. 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. 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. 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. 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. 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. 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. 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

×