Android basic 2 UI Design

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