SlideShare ist ein Scribd-Unternehmen logo
1 von 16
Downloaden Sie, um offline zu lesen
Android
Graphical User Interface
Agenda
Fonts
Tab
Web Kit Browser
WebKit Browser
Web Kit Browser
 In Android you can embed the built‐in Web browser as a widget in
your own activities, for displaying HTML material or perform
Internet browsing.
 The Android browser is based on WebKit, the same engine that
powers Apple's Safari Web browser.
 Android uses the WebView widget to host the browser’s pages
 Applications using the WebView component must request
 INTERNET permission.
WebKit Browser - Browsing Power
 The browser will access the Internet through whatever means are available
to that specific device at the present time (WiFi,cellular network,
Bluetooth‐tethered phone, etc.).
 The WebKit rendering engine used to display web pages includes
methods to
 1. navigate forward and backward through a history,
 2. zoom in and out,
 3. perform text searches,
 4. load data
 5. stop loading and
 6. more.
Example –Web Kit Browser (XML Layout)
Example –Web Kit Browser (Activity)
Example –Web Kit Browser (Manifest)
Browser Commands
There is no navigation toolbar with the WebView widget (saving space). You could supply the
UI –such as a Menu– to execute the following operations:
 reload() to refresh the currently‐viewed Web page
 goBack() to go back one step in the browser history, and canGoBack() to
determine if there is any history to trace back
 goForward() to go forward one step in the browser history, and canGoForward()
to determine if there is any history to go forward to
goBackOrForward() to go backwards or forwards in the browser history,where
negative/positive numbers represent a count of steps to go
canGoBackOrForward() to see if the browser can go backwards or forwards the
stated number of steps (following the same positive/negative
convention as goBackOrForward())
 clearCache() to clear the browser resource cache and clearHistory() to clear the
browsing history
Fonts
Fonts
Developers may add any font to their application by
following the next steps:
1. Create the /fonts folder in the /assets directory.
2. Copy any fonts you plan to use into the new folder.
3. Use Java code to bind the font with the UI widget wanting
to display the custom typeface (see example)
Example - fonts
Tab Selection Widget
 Android UIs should be kept simple at all costs.
When many pieces of information must be displayed in a
single app, the Tab Widget could be used to make the
user aware of the pieces but show only a portion at the
time.
Tabs – Components
There are a few widgets and containers you need to use in order to set
up a tabbed portion of a view:
 TabHost is the main container for the tab buttons and tab
contents
 TabWidget implements the row of tab buttons, which contain
text labels and optionally contain icons
 FrameLayout is the container for the tab contents
Example: Tabs (Xml Layout)
Questions?

Weitere ähnliche Inhalte

Was ist angesagt?

Android application development workshop day1
Android application development workshop   day1Android application development workshop   day1
Android application development workshop day1
Borhan Otour
 

Was ist angesagt? (20)

Android Tutorial
Android TutorialAndroid Tutorial
Android Tutorial
 
Unit2
Unit2Unit2
Unit2
 
Android studio 2.0: default project structure
Android studio 2.0: default project structureAndroid studio 2.0: default project structure
Android studio 2.0: default project structure
 
Android xml-based layouts-chapter5
Android xml-based layouts-chapter5Android xml-based layouts-chapter5
Android xml-based layouts-chapter5
 
Android the new Mobile Technoogy
Android the new Mobile TechnoogyAndroid the new Mobile Technoogy
Android the new Mobile Technoogy
 
04 user interfaces
04 user interfaces04 user interfaces
04 user interfaces
 
Visual Studio IDE
Visual Studio IDEVisual Studio IDE
Visual Studio IDE
 
Android Screen Containers & Layouts
Android Screen Containers & LayoutsAndroid Screen Containers & Layouts
Android Screen Containers & Layouts
 
Android application-component
Android application-componentAndroid application-component
Android application-component
 
Application Development - Overview on Android OS
Application Development - Overview on Android OSApplication Development - Overview on Android OS
Application Development - Overview on Android OS
 
Day1 before getting_started
Day1 before getting_startedDay1 before getting_started
Day1 before getting_started
 
IntroToAndroid
IntroToAndroidIntroToAndroid
IntroToAndroid
 
Android App Development (Basics)
Android App Development (Basics)Android App Development (Basics)
Android App Development (Basics)
 
Android development orientation for starters v2
Android development orientation for starters v2Android development orientation for starters v2
Android development orientation for starters v2
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)
 
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...
 
Android development orientation for starters v4 seminar
Android development orientation for starters v4   seminarAndroid development orientation for starters v4   seminar
Android development orientation for starters v4 seminar
 
01 introduction to android
01 introduction to android01 introduction to android
01 introduction to android
 
Android chapter02-setup2-emulator
Android chapter02-setup2-emulatorAndroid chapter02-setup2-emulator
Android chapter02-setup2-emulator
 
Android application development workshop day1
Android application development workshop   day1Android application development workshop   day1
Android application development workshop day1
 

Ähnlich wie 01 11 - graphical user interface - fonts-web-tab

Creating Effective Web Pages Creating HTML Documents
Creating Effective Web Pages Creating HTML Documents Creating Effective Web Pages Creating HTML Documents
Creating Effective Web Pages Creating HTML Documents
webhostingguy
 
01 asp.net session01
01 asp.net session0101 asp.net session01
01 asp.net session01
Mani Chaubey
 
Mobile application
Mobile applicationMobile application
Mobile application
aspnet123
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
Patrick Lauke
 
Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)
Goran Kljajic
 
3) web development
3) web development3) web development
3) web development
techbed
 

Ähnlich wie 01 11 - graphical user interface - fonts-web-tab (20)

PPT
PPTPPT
PPT
 
Parallelminds.web partdemo1
Parallelminds.web partdemo1Parallelminds.web partdemo1
Parallelminds.web partdemo1
 
Creating Effective Web Pages Creating HTML Documents
Creating Effective Web Pages Creating HTML Documents Creating Effective Web Pages Creating HTML Documents
Creating Effective Web Pages Creating HTML Documents
 
Html5
Html5Html5
Html5
 
15 asp.net session22
15 asp.net session2215 asp.net session22
15 asp.net session22
 
01 asp.net session01
01 asp.net session0101 asp.net session01
01 asp.net session01
 
Liferay UG Meetup #8 - Portal 7.3 + portlets com nodeJS - 2020-03-04
Liferay UG Meetup #8 - Portal 7.3 + portlets com nodeJS - 2020-03-04Liferay UG Meetup #8 - Portal 7.3 + portlets com nodeJS - 2020-03-04
Liferay UG Meetup #8 - Portal 7.3 + portlets com nodeJS - 2020-03-04
 
01 asp.net session01
01 asp.net session0101 asp.net session01
01 asp.net session01
 
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
 
10 asp.net session14
10 asp.net session1410 asp.net session14
10 asp.net session14
 
Mobile application
Mobile applicationMobile application
Mobile application
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
 
Parallelminds.web partdemo
Parallelminds.web partdemoParallelminds.web partdemo
Parallelminds.web partdemo
 
11 asp.net session16
11 asp.net session1611 asp.net session16
11 asp.net session16
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Unit 5 World_Wide_Web.pptx
Unit 5 World_Wide_Web.pptxUnit 5 World_Wide_Web.pptx
Unit 5 World_Wide_Web.pptx
 
3) web development
3) web development3) web development
3) web development
 

Mehr von Siva Kumar reddy Vasipally (7)

01 10 - graphical user interface - others
01  10 - graphical user interface - others01  10 - graphical user interface - others
01 10 - graphical user interface - others
 
01 09 - graphical user interface - basic widgets
01  09 - graphical user interface - basic widgets01  09 - graphical user interface - basic widgets
01 09 - graphical user interface - basic widgets
 
01 07 -android programming basics (cont)
01  07 -android programming basics (cont)01  07 -android programming basics (cont)
01 07 -android programming basics (cont)
 
01 06 - android programming basics
01  06 - android programming basics01  06 - android programming basics
01 06 - android programming basics
 
01 05 - introduction xml
01  05 - introduction xml01  05 - introduction xml
01 05 - introduction xml
 
01 04 - android set up and creating an android project
01  04 - android set up and creating an android project01  04 - android set up and creating an android project
01 04 - android set up and creating an android project
 
01 01 - introduction to mobile application development
01  01 - introduction to mobile application development01  01 - introduction to mobile application development
01 01 - introduction to mobile application development
 

Kürzlich hochgeladen

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Kürzlich hochgeladen (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
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
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​
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
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
 
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
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 

01 11 - graphical user interface - fonts-web-tab

  • 4. Web Kit Browser  In Android you can embed the built‐in Web browser as a widget in your own activities, for displaying HTML material or perform Internet browsing.  The Android browser is based on WebKit, the same engine that powers Apple's Safari Web browser.  Android uses the WebView widget to host the browser’s pages  Applications using the WebView component must request  INTERNET permission.
  • 5. WebKit Browser - Browsing Power  The browser will access the Internet through whatever means are available to that specific device at the present time (WiFi,cellular network, Bluetooth‐tethered phone, etc.).  The WebKit rendering engine used to display web pages includes methods to  1. navigate forward and backward through a history,  2. zoom in and out,  3. perform text searches,  4. load data  5. stop loading and  6. more.
  • 6. Example –Web Kit Browser (XML Layout)
  • 7. Example –Web Kit Browser (Activity)
  • 8. Example –Web Kit Browser (Manifest)
  • 9. Browser Commands There is no navigation toolbar with the WebView widget (saving space). You could supply the UI –such as a Menu– to execute the following operations:  reload() to refresh the currently‐viewed Web page  goBack() to go back one step in the browser history, and canGoBack() to determine if there is any history to trace back  goForward() to go forward one step in the browser history, and canGoForward() to determine if there is any history to go forward to goBackOrForward() to go backwards or forwards in the browser history,where negative/positive numbers represent a count of steps to go canGoBackOrForward() to see if the browser can go backwards or forwards the stated number of steps (following the same positive/negative convention as goBackOrForward())  clearCache() to clear the browser resource cache and clearHistory() to clear the browsing history
  • 10. Fonts
  • 11. Fonts Developers may add any font to their application by following the next steps: 1. Create the /fonts folder in the /assets directory. 2. Copy any fonts you plan to use into the new folder. 3. Use Java code to bind the font with the UI widget wanting to display the custom typeface (see example)
  • 13. Tab Selection Widget  Android UIs should be kept simple at all costs. When many pieces of information must be displayed in a single app, the Tab Widget could be used to make the user aware of the pieces but show only a portion at the time.
  • 14. Tabs – Components There are a few widgets and containers you need to use in order to set up a tabbed portion of a view:  TabHost is the main container for the tab buttons and tab contents  TabWidget implements the row of tab buttons, which contain text labels and optionally contain icons  FrameLayout is the container for the tab contents