android basic 2 ui design

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


Scrollable Tabs : Google Play Store


Stacked Tabs : You Tube


TabHost : Step 1 : activity_main.xml


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); }



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);

}



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); }



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); }


TabHost


Lists


ListView

* TabActivity is deprecated* use fragment Activity instead


Single Line List : simple_list_item_1


android.R.layout.simple_list_item_1


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();

}




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);}




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(); }


Single Line List : simple_list_item_1


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


public class SecondActivity extends Activity implements OnItemClickListener{

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second);

initListView();

}




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); }


http://www.ibluecode.com


http://www.facebook.com

http://www.facebook.com

http://www.twitter.com

http://www.twitter.com

http://www.youtube.com

http://www.youtube.com


@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(); }


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 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



http://www.default.com

http://www.default.com

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

mailto:[email protected]








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

android basic 2 ui design

Technology