android basic 2 ui design
DESCRIPTION
Android basic 2 UI DesignTRANSCRIPT
by Eakapong Kattiya
UI Design
Monday, July 15, 13
Tabs
by Eakapong KattiyaMonday, July 15, 13
Fixed Tabs : Movies , Twitter
Fixed Tabs- ต้องการเน้นให้ผู้ใช้เห็นข้อมูลหน้าอื่น ๆ - ใช้เมื่อต้องสลับหน้าจอ(View) บ่อย ๆ- จํานวน Top Level View ไม่ควรเกิน 3-5
by Eakapong KattiyaMonday, July 15, 13
Scrollable Tabs : Google Play Store
by Eakapong KattiyaMonday, July 15, 13
Stacked Tabs : You Tube
by Eakapong KattiyaMonday, July 15, 13
TabHost : Step 1 : activity_main.xml
by Eakapong KattiyaMonday, July 15, 13
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 KattiyaMonday, July 15, 13
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 KattiyaMonday, July 15, 13
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 KattiyaMonday, July 15, 13
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 KattiyaMonday, July 15, 13
TabHost
by Eakapong KattiyaMonday, July 15, 13
Lists
by Eakapong KattiyaMonday, July 15, 13
ListView
* TabActivity is deprecated* use fragment Activity instead
by Eakapong KattiyaMonday, July 15, 13
Single Line List : simple_list_item_1
* TabActivity is deprecated* use fragment Activity instead
android.R.layout.simple_list_item_1
by Eakapong KattiyaMonday, July 15, 13
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 KattiyaMonday, July 15, 13
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 KattiyaMonday, July 15, 13
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 KattiyaMonday, July 15, 13
Single Line List : simple_list_item_1
by Eakapong KattiyaMonday, July 15, 13
2 Line List : simple_list_item_2
android.R.layout.simple_list_item_2
by Eakapong Kattiya
TwoLineListItem
Monday, July 15, 13
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 KattiyaMonday, July 15, 13
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 KattiyaMonday, July 15, 13
2 Line List : simple_list_item_2 : SecondActivity.java
@Overridepublic 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 KattiyaMonday, July 15, 13
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/shareables/training/TabCompat.zip
Monday, July 15, 13
Intent
by Eakapong KattiyaMonday, July 15, 13
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 Street View 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
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
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
by Eakapong Kattiya
Intent : Phone call
String uriString = "tel:" + "086-673-2111" ;
Intent intent = new Intent(Intent.ACTION_DIAL); //Intent.ACTION_CALLintent.setData(Uri.parse(uriString));
startActivity(intent);
FirstActivity.java
Monday, July 15, 13
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
by Eakapong Kattiya
Intent : Send Email
Intent intent = new Intent(android.content.Intent.ACTION_SEND); String aEmailList[] = { "[email protected]","[email protected]" };
String aEmailCCList[] = { "[email protected]" }; String aEmailBCCList[] = { "[email protected]" }; 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
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 Imageprotected 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