SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
by Eakapong Kattiya
UI Design
Monday, July 15, 13
Tabs
by Eakapong Kattiya
Monday, July 15, 13
Fixed Tabs : Movies ,Twitter
Fixed Tabs
- ต้องการเน้นให้ผู้ใช้เห็นข้อมูลหน้าอื่น ๆ
- ใช้เมื่อต้องสลับหน้าจอ(View) บ่อย ๆ
- จํานวน Top LevelView ไม่ควรเกิน 3-5
by Eakapong Kattiya
Monday, July 15, 13
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(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
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
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
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
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_list_item_1
by Eakapong Kattiya
Monday, 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 Kattiya
Monday, 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 Kattiya
Monday, 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 Kattiya
Monday, July 15, 13
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, 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 Kattiya
Monday, 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 Kattiya
Monday, July 15, 13
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
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
Monday, 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 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
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_CALL
intent.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[] = { "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
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

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Google I/O 2021 Recap
Google I/O 2021 RecapGoogle I/O 2021 Recap
Google I/O 2021 Recap
 
Advanced Dagger talk from 360andev
Advanced Dagger talk from 360andevAdvanced Dagger talk from 360andev
Advanced Dagger talk from 360andev
 
Android - Working with Fragments
Android - Working with FragmentsAndroid - Working with Fragments
Android - Working with Fragments
 
Material Design and Backwards Compatibility
Material Design and Backwards CompatibilityMaterial Design and Backwards Compatibility
Material Design and Backwards Compatibility
 
droidparts
droidpartsdroidparts
droidparts
 
New text document
New text documentNew text document
New text document
 
Architecting Single Activity Applications (With or Without Fragments)
Architecting Single Activity Applications (With or Without Fragments)Architecting Single Activity Applications (With or Without Fragments)
Architecting Single Activity Applications (With or Without Fragments)
 
Navigation Architecture Component
Navigation Architecture ComponentNavigation Architecture Component
Navigation Architecture Component
 
Simplified Android Development with Simple-Stack
Simplified Android Development with Simple-StackSimplified Android Development with Simple-Stack
Simplified Android Development with Simple-Stack
 
Advancing the UI — Part 1: Look, Motion, and Gestures
Advancing the UI — Part 1: Look, Motion, and GesturesAdvancing the UI — Part 1: Look, Motion, and Gestures
Advancing the UI — Part 1: Look, Motion, and Gestures
 
Action bar
Action barAction bar
Action bar
 
Managing Activity Backstack
Managing Activity BackstackManaging Activity Backstack
Managing Activity Backstack
 
Architectures in the compose world
Architectures in the compose worldArchitectures in the compose world
Architectures in the compose world
 
Android App Development - 05 Action bar
Android App Development - 05 Action barAndroid App Development - 05 Action bar
Android App Development - 05 Action bar
 
Ejemplo radio
Ejemplo radioEjemplo radio
Ejemplo radio
 
Testing Android apps based on Dagger and RxJava
Testing Android apps based on Dagger and RxJavaTesting Android apps based on Dagger and RxJava
Testing Android apps based on Dagger and RxJava
 
Saindo da zona de conforto… resolvi aprender android
Saindo da zona de conforto… resolvi aprender androidSaindo da zona de conforto… resolvi aprender android
Saindo da zona de conforto… resolvi aprender android
 
Android Navigation Component
Android Navigation ComponentAndroid Navigation Component
Android Navigation Component
 
Managing parallelism using coroutines
Managing parallelism using coroutinesManaging parallelism using coroutines
Managing parallelism using coroutines
 
Mini curso Android
Mini curso AndroidMini curso Android
Mini curso Android
 

Similar a Android basic 2 UI Design

Short Intro to Android Fragments
Short Intro to Android FragmentsShort Intro to Android Fragments
Short Intro to Android Fragments
Jussi Pohjolainen
 
Day 4: Activity lifecycle
Day 4: Activity lifecycleDay 4: Activity lifecycle
Day 4: Activity lifecycle
Ahsanul Karim
 
02 programmation mobile - android - (activity, view, fragment)
02 programmation mobile - android - (activity, view, fragment)02 programmation mobile - android - (activity, view, fragment)
02 programmation mobile - android - (activity, view, fragment)
TECOS
 
Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android Development
Jussi Pohjolainen
 

Similar a Android basic 2 UI Design (20)

Android Basic Components
Android Basic ComponentsAndroid Basic Components
Android Basic Components
 
Short Intro to Android Fragments
Short Intro to Android FragmentsShort Intro to Android Fragments
Short Intro to Android Fragments
 
Day 4: Activity lifecycle
Day 4: Activity lifecycleDay 4: Activity lifecycle
Day 4: Activity lifecycle
 
Androidaop 170105090257
Androidaop 170105090257Androidaop 170105090257
Androidaop 170105090257
 
What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...
 
Pertemuan 03 - Activities and intents.pptx
Pertemuan 03 - Activities and intents.pptxPertemuan 03 - Activities and intents.pptx
Pertemuan 03 - Activities and intents.pptx
 
Alexey Buzdin "Maslow's Pyramid of Android Testing"
Alexey Buzdin "Maslow's Pyramid of Android Testing"Alexey Buzdin "Maslow's Pyramid of Android Testing"
Alexey Buzdin "Maslow's Pyramid of Android Testing"
 
Oleksandr Tolstykh
Oleksandr TolstykhOleksandr Tolstykh
Oleksandr Tolstykh
 
Android Application managing activites.pptx
Android Application managing activites.pptxAndroid Application managing activites.pptx
Android Application managing activites.pptx
 
深入淺出談Fragment
深入淺出談Fragment深入淺出談Fragment
深入淺出談Fragment
 
Lesson 4
Lesson 4Lesson 4
Lesson 4
 
Android development - Activities, Views & Intents
Android development - Activities, Views & IntentsAndroid development - Activities, Views & Intents
Android development - Activities, Views & Intents
 
02 programmation mobile - android - (activity, view, fragment)
02 programmation mobile - android - (activity, view, fragment)02 programmation mobile - android - (activity, view, fragment)
02 programmation mobile - android - (activity, view, fragment)
 
How to write better code: in-depth best practices for writing readable, simpl...
How to write better code: in-depth best practices for writing readable, simpl...How to write better code: in-depth best practices for writing readable, simpl...
How to write better code: in-depth best practices for writing readable, simpl...
 
How to write better code: in-depth best practices for writing readable, simpl...
How to write better code: in-depth best practices for writing readable, simpl...How to write better code: in-depth best practices for writing readable, simpl...
How to write better code: in-depth best practices for writing readable, simpl...
 
Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android Development
 
classes & objects in cpp
classes & objects in cppclasses & objects in cpp
classes & objects in cpp
 
Modern Android app library stack
Modern Android app library stackModern Android app library stack
Modern Android app library stack
 
04 activities - Android
04   activities - Android04   activities - Android
04 activities - Android
 
Complex Architectures in Ember
Complex Architectures in EmberComplex Architectures in Ember
Complex Architectures in Ember
 

Más de Eakapong Kattiya (8)

(31 July 2013) iOS Basic Development Day 2 Human interface design
(31 July 2013) iOS Basic Development Day 2 Human interface design (31 July 2013) iOS Basic Development Day 2 Human interface design
(31 July 2013) iOS Basic Development Day 2 Human interface design
 
Evrdi : Social Diary ( iOS and Android )
Evrdi : Social Diary ( iOS and Android )Evrdi : Social Diary ( iOS and Android )
Evrdi : Social Diary ( iOS and Android )
 
Android Basic Development Day 1 Introduction & ADT
Android Basic Development Day 1 Introduction & ADTAndroid Basic Development Day 1 Introduction & ADT
Android Basic Development Day 1 Introduction & ADT
 
iOS Basic Development Day 2 - Objective-C 2.0 & iOS Framework
iOS Basic Development Day 2 - Objective-C 2.0 & iOS Framework iOS Basic Development Day 2 - Objective-C 2.0 & iOS Framework
iOS Basic Development Day 2 - Objective-C 2.0 & iOS Framework
 
(1 July 2013) iOS Basic Development Day 5 - Submit to App Store
(1 July 2013) iOS Basic Development Day 5 - Submit to App Store(1 July 2013) iOS Basic Development Day 5 - Submit to App Store
(1 July 2013) iOS Basic Development Day 5 - Submit to App Store
 
Iphone developer advance twitter
Iphone developer advance   twitterIphone developer advance   twitter
Iphone developer advance twitter
 
iOS Advance Development - Social Media
iOS Advance Development - Social MediaiOS Advance Development - Social Media
iOS Advance Development - Social Media
 
Iphone developer advance location based
Iphone developer advance location basedIphone developer advance location based
Iphone developer advance location based
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Último (20)

Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 

Android basic 2 UI Design

  • 1. by Eakapong Kattiya UI Design 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
  • 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
  • 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