SlideShare a Scribd company logo
1 of 18
Download to read offline
Android
Graphical User Interface
Agenda
Basic Widgets
Labels
Buttons
Edit Text
Check Box
Spinner
RadioGroup
Basic Widgets
Android Basics: Main components of Interest
• the control file-tells the system what to do with the top-
level componentsAndroidManifest.xml:
• an object that has a life cycle and is a chunk of code
that does some work. Corresponds to a single screen.Activity:
• an object that knows how to draw itself to the screenView:
• a simple message object that represents an "intention"
to do something. Consider an intent received when an
event is triggered (e.g., a phone ring)
Intent:
Basic Widgets: Labels
•A label is called in android a
TextView.
•TextViews are typically used to
display a caption.
•TextViews are not editable, therefore
they take no input.
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:id="@+id/absLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/an
droid”>
<TextView
android:id="@+id/myTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000ff"
android:padding="3px"
android:text="Enter User Name"
android:textSize="16sp” android:textStyle="bold"
android:gravity="center“ android:layout_x="20px"
android:layout_y="22px“ >
</TextView>
</AbsoluteLayout>
Basic Widgets: Buttons
•A Button widget allows the
simulation of a clicking action on a
GUI.
•Button is a subclass of TextView.
Therefore formatting a Button’s face is
similar to the setting of a TextView.
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:id="@+id/absLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/an
droid”>
<Button android:id="@+id/btnExitApp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10px"
android:layout_marginLeft="5px"
android:text="Exit Application"
android:textSize="16sp"
android:textStyle="bold"
android:gravity="center"
android:layout_gravity="center_horizontal”>
</Button>
</AbsoluteLayout>
Basic Widgets: Images
Image View and Image Button are two Android
widgets that allow embedding of images in your
applications.
Both are image-based widgets analogue to TextView and
Button, respectively.
Each widget takes an android:src or
android:background attribute (in an XML layout) to
specify what picture to use.
Pictures are usually reference a drawable resource.
You can also set the image content based on a URI from
a content provider via setImageURI().
ImageButton, is a subclass of Image View. It adds the
standard Button behavior for responding to click events.
...
<ImageButton
android:id="@+id/myImageBtn1"
android:background="@drawable/defa
ult_wallpaper"
android:layout_width="125px"
android:layout_height="131px“
>
</ImageButton>
<ImageView
android:id="@+id/myImageView1"
android:background="@drawable/ic_l
auncher_android"
android:layout_width="108px"
android:layout_height="90px“>
</ImageView>
Basic Widgets: Edit Text
The EditText(or textBox) widget is an extension of TextView that
allows updates.
The control configures itself to be editable.
Important Java methods are:
txtBox.setText(“someValue”) and txtBox.getText().toString()
In addition to the standard TextView properties EditText has many others
features such as:
• android:autoText, (true/false) provides automatic spelling assistance
• android:capitalize, (words/sentences) automatic capitalization
• android:digits, to configure the field to accept only certain digits
• android:singleLine, is the field for single-line / multiple-line input
• android:password, (true/false) controls field’s visibility
• android:numeric, (integer, decimal, signed) controls numeric format
• android:phonenumber, (true/false) Formatting phone numbers
Basic Widgets: Edit Text
Edit Text
 <EditText
android:id="@+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
 final EditText edittext = (EditText) findViewById(R.id.edittext);
edittext.setOnKeyListener(new OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
// If the event is a key-down event on the "enter" button
if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
(KeyEvent.KEYCODE_ENTER)) {
// Perform action keyCode == on key press
Toast.makeText(HelloFormStuff.this, edittext.getText(),
Toast.LENGTH_SHORT).show();
return true;
}
return false;
}
});
Basic Widgets: Check Box
A checkbox is a specific type of two-states button
that can be either checked or unchecked.
A example usage of a checkbox inside your activity
would be the following
<CheckBox
android:id="@+id/chkCream"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cream" android:textStyle="bold" >
</CheckBox>
<CheckBox
android:id="@+id/chkSugar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Sugar"
android:textStyle="bold" >
</CheckBox>
Check Box
 <CheckBox android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="check it out" />
 final CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox);
checkbox.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks, depending on whether it's now checked
if (((CheckBox) v).isChecked()) {
Toast.makeText(HelloFormStuff.this, "Selected",
Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(HelloFormStuff.this, "Not selected",
Toast.LENGTH_SHORT).show();
}
}
});
Basic Widgets: Spinner [listbox]
A view that displays one child at a time
and lets the user pick among them.
The items in the Spinner come from the
Adapter associated with this view.
<Spinner
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/State"/>
Basic Widgets: RadioGroup
A view that displays one child at a time and lets
the user pick among them.
The items in the Spinner come from the Adapter
associated with this view.
<RadioGroup android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<RadioButton android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Veg" android:id="@+id/radio_veg"/>
<RadioButton android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Non-Veg"
android:id="@+id/radio_nonveg"/>
</RadioGroup>
Basic Widgets: Radio Buttons
 A radio button is a two-states button that can be either checked or unchecked.
 When the radio button is unchecked, the user can press or click it to check it.
 Radio buttons are normally used together in a RadioGroup.
 When several radio buttons live inside a radio group, checking one radio button
unchecks all the others.
 RadioButton inherits from … TextView. Hence, all the standard TextView
properties for font face, style, color, etc. are available for controlling the look of
radio buttons.
 Similarly, you can call isChecked() on a RadioButton to see if it is selected,
toggle() to select it, and so on, like you can with a CheckBox.
Radio Button
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_cont
ent” android:orientation="vertical">
<RadioButton
android:id="@+id/radio_red“
android:layout_width="wrap_content“
android:layout_height="wrap_content“
android:text="Red" />
<RadioButton
android:id="@+id/radio_blue“
android:layout_width="wrap_content“
android:layout_height="wrap_content“
android:text="Blue" />
</RadioGroup>
UI –Other Features
 All widgets extend View therefore they acquire a number of useful
View properties and methods including:
 XML Controls the focus sequence:
 android:visibility
 Android:background
 Java methods
 myButton.requestFocus()
 myTextBox.isFocused()
 myWidget.setEnabled()
 myWidget.isEnabled()
Questions?

More Related Content

What's hot

What's hot (20)

Android UI Patterns
Android UI PatternsAndroid UI Patterns
Android UI Patterns
 
View groups containers
View groups containersView groups containers
View groups containers
 
Basic Android Layout
Basic Android LayoutBasic Android Layout
Basic Android Layout
 
Chapter 5 - Layouts
Chapter 5 - LayoutsChapter 5 - Layouts
Chapter 5 - Layouts
 
Chapter 10 - Views Part 2
Chapter 10 - Views Part 2Chapter 10 - Views Part 2
Chapter 10 - Views Part 2
 
04 user interfaces
04 user interfaces04 user interfaces
04 user interfaces
 
Android Widget
Android WidgetAndroid Widget
Android Widget
 
Advance Android Layout Walkthrough
Advance Android Layout WalkthroughAdvance Android Layout Walkthrough
Advance Android Layout Walkthrough
 
Unit2
Unit2Unit2
Unit2
 
Android UI
Android UIAndroid UI
Android UI
 
Android apps development
Android apps developmentAndroid apps development
Android apps development
 
Best Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue SolutionsBest Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue Solutions
 
Android android layouts
Android android layoutsAndroid android layouts
Android android layouts
 
Support Design Library
Support Design LibrarySupport Design Library
Support Design Library
 
Android appwidget
Android appwidgetAndroid appwidget
Android appwidget
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
 
How to create ui using droid draw
How to create ui using droid drawHow to create ui using droid draw
How to create ui using droid draw
 
Android UI Fundamentals part 1
Android UI Fundamentals part 1Android UI Fundamentals part 1
Android UI Fundamentals part 1
 
How to use data binding in android
How to use data binding in androidHow to use data binding in android
How to use data binding in android
 
Ui 5
Ui   5Ui   5
Ui 5
 

Similar to 01 09 - graphical user interface - basic widgets

Android Tutorials : Basic widgets
Android Tutorials : Basic widgetsAndroid Tutorials : Basic widgets
Android Tutorials : Basic widgetsPrajyot Mainkar
 
Android Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_androidAndroid Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_androidDenis Minja
 
Android Workshop
Android WorkshopAndroid Workshop
Android WorkshopJunda Ong
 
Android Development Made Easy - With Sample Project
Android Development Made Easy - With Sample ProjectAndroid Development Made Easy - With Sample Project
Android Development Made Easy - With Sample ProjectJoemarie Amparo
 
Android Development for Beginners with Sample Project - Day 1
Android Development for Beginners with Sample Project - Day 1Android Development for Beginners with Sample Project - Day 1
Android Development for Beginners with Sample Project - Day 1Joemarie Amparo
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android AppsGil Irizarry
 
Android Tutorial
Android TutorialAndroid Tutorial
Android TutorialFun2Do Labs
 
4.preference management
4.preference management 4.preference management
4.preference management maamir farooq
 
Introduction to Android Programming
Introduction to Android ProgrammingIntroduction to Android Programming
Introduction to Android ProgrammingRaveendra R
 
Printing photos-html-using-android
Printing photos-html-using-androidPrinting photos-html-using-android
Printing photos-html-using-androidKetan Raval
 
Android Tutorials - Powering with Selection Widget
Android Tutorials - Powering with Selection WidgetAndroid Tutorials - Powering with Selection Widget
Android Tutorials - Powering with Selection WidgetPrajyot Mainkar
 
Fragments: Why, How, What For?
Fragments: Why, How, What For?Fragments: Why, How, What For?
Fragments: Why, How, What For?Brenda Cook
 
mobile application development -unit-3-
mobile application development  -unit-3-mobile application development  -unit-3-
mobile application development -unit-3-TejamFandat
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to androidShrijan Tiwari
 

Similar to 01 09 - graphical user interface - basic widgets (20)

Android Tutorials : Basic widgets
Android Tutorials : Basic widgetsAndroid Tutorials : Basic widgets
Android Tutorials : Basic widgets
 
Android Button
Android ButtonAndroid Button
Android Button
 
Android Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_androidAndroid Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_android
 
Ap quiz app
Ap quiz appAp quiz app
Ap quiz app
 
Android
AndroidAndroid
Android
 
Android Workshop
Android WorkshopAndroid Workshop
Android Workshop
 
Android Development Made Easy - With Sample Project
Android Development Made Easy - With Sample ProjectAndroid Development Made Easy - With Sample Project
Android Development Made Easy - With Sample Project
 
Android Development for Beginners with Sample Project - Day 1
Android Development for Beginners with Sample Project - Day 1Android Development for Beginners with Sample Project - Day 1
Android Development for Beginners with Sample Project - Day 1
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android Apps
 
Android Tutorial
Android TutorialAndroid Tutorial
Android Tutorial
 
Android Application Fundamentals.
Android Application Fundamentals.Android Application Fundamentals.
Android Application Fundamentals.
 
Android programming basics
Android programming basicsAndroid programming basics
Android programming basics
 
4.preference management
4.preference management 4.preference management
4.preference management
 
Introduction to Android Programming
Introduction to Android ProgrammingIntroduction to Android Programming
Introduction to Android Programming
 
Printing photos-html-using-android
Printing photos-html-using-androidPrinting photos-html-using-android
Printing photos-html-using-android
 
Android Tutorials - Powering with Selection Widget
Android Tutorials - Powering with Selection WidgetAndroid Tutorials - Powering with Selection Widget
Android Tutorials - Powering with Selection Widget
 
Android
AndroidAndroid
Android
 
Fragments: Why, How, What For?
Fragments: Why, How, What For?Fragments: Why, How, What For?
Fragments: Why, How, What For?
 
mobile application development -unit-3-
mobile application development  -unit-3-mobile application development  -unit-3-
mobile application development -unit-3-
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to android
 

More from Siva Kumar reddy Vasipally

More from Siva Kumar reddy Vasipally (9)

01 11 - graphical user interface - fonts-web-tab
01  11 - graphical user interface - fonts-web-tab01  11 - graphical user interface - fonts-web-tab
01 11 - graphical user interface - fonts-web-tab
 
01 10 - graphical user interface - others
01  10 - graphical user interface - others01  10 - graphical user interface - others
01 10 - graphical user interface - others
 
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 03 - introduction to android
01  03 - introduction to android01  03 - introduction to android
01 03 - introduction to android
 
01 02 - introduction - adroid stack
01  02 - introduction - adroid stack01  02 - introduction - adroid stack
01 02 - introduction - adroid stack
 
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
 

Recently uploaded

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 

Recently uploaded (20)

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 

01 09 - graphical user interface - basic widgets

  • 4. Android Basics: Main components of Interest • the control file-tells the system what to do with the top- level componentsAndroidManifest.xml: • an object that has a life cycle and is a chunk of code that does some work. Corresponds to a single screen.Activity: • an object that knows how to draw itself to the screenView: • a simple message object that represents an "intention" to do something. Consider an intent received when an event is triggered (e.g., a phone ring) Intent:
  • 5. Basic Widgets: Labels •A label is called in android a TextView. •TextViews are typically used to display a caption. •TextViews are not editable, therefore they take no input. <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:id="@+id/absLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/an droid”> <TextView android:id="@+id/myTextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000ff" android:padding="3px" android:text="Enter User Name" android:textSize="16sp” android:textStyle="bold" android:gravity="center“ android:layout_x="20px" android:layout_y="22px“ > </TextView> </AbsoluteLayout>
  • 6. Basic Widgets: Buttons •A Button widget allows the simulation of a clicking action on a GUI. •Button is a subclass of TextView. Therefore formatting a Button’s face is similar to the setting of a TextView. <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:id="@+id/absLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/an droid”> <Button android:id="@+id/btnExitApp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10px" android:layout_marginLeft="5px" android:text="Exit Application" android:textSize="16sp" android:textStyle="bold" android:gravity="center" android:layout_gravity="center_horizontal”> </Button> </AbsoluteLayout>
  • 7. Basic Widgets: Images Image View and Image Button are two Android widgets that allow embedding of images in your applications. Both are image-based widgets analogue to TextView and Button, respectively. Each widget takes an android:src or android:background attribute (in an XML layout) to specify what picture to use. Pictures are usually reference a drawable resource. You can also set the image content based on a URI from a content provider via setImageURI(). ImageButton, is a subclass of Image View. It adds the standard Button behavior for responding to click events. ... <ImageButton android:id="@+id/myImageBtn1" android:background="@drawable/defa ult_wallpaper" android:layout_width="125px" android:layout_height="131px“ > </ImageButton> <ImageView android:id="@+id/myImageView1" android:background="@drawable/ic_l auncher_android" android:layout_width="108px" android:layout_height="90px“> </ImageView>
  • 8. Basic Widgets: Edit Text The EditText(or textBox) widget is an extension of TextView that allows updates. The control configures itself to be editable. Important Java methods are: txtBox.setText(“someValue”) and txtBox.getText().toString() In addition to the standard TextView properties EditText has many others features such as: • android:autoText, (true/false) provides automatic spelling assistance • android:capitalize, (words/sentences) automatic capitalization • android:digits, to configure the field to accept only certain digits • android:singleLine, is the field for single-line / multiple-line input • android:password, (true/false) controls field’s visibility • android:numeric, (integer, decimal, signed) controls numeric format • android:phonenumber, (true/false) Formatting phone numbers
  • 10. Edit Text  <EditText android:id="@+id/edittext" android:layout_width="fill_parent" android:layout_height="wrap_content"/>  final EditText edittext = (EditText) findViewById(R.id.edittext); edittext.setOnKeyListener(new OnKeyListener() { public boolean onKey(View v, int keyCode, KeyEvent event) { // If the event is a key-down event on the "enter" button if ((event.getAction() == KeyEvent.ACTION_DOWN) && (KeyEvent.KEYCODE_ENTER)) { // Perform action keyCode == on key press Toast.makeText(HelloFormStuff.this, edittext.getText(), Toast.LENGTH_SHORT).show(); return true; } return false; } });
  • 11. Basic Widgets: Check Box A checkbox is a specific type of two-states button that can be either checked or unchecked. A example usage of a checkbox inside your activity would be the following <CheckBox android:id="@+id/chkCream" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cream" android:textStyle="bold" > </CheckBox> <CheckBox android:id="@+id/chkSugar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sugar" android:textStyle="bold" > </CheckBox>
  • 12. Check Box  <CheckBox android:id="@+id/checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="check it out" />  final CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox); checkbox.setOnClickListener(new OnClickListener() { public void onClick(View v) { // Perform action on clicks, depending on whether it's now checked if (((CheckBox) v).isChecked()) { Toast.makeText(HelloFormStuff.this, "Selected", Toast.LENGTH_SHORT).show(); } else { Toast.makeText(HelloFormStuff.this, "Not selected", Toast.LENGTH_SHORT).show(); } } });
  • 13. Basic Widgets: Spinner [listbox] A view that displays one child at a time and lets the user pick among them. The items in the Spinner come from the Adapter associated with this view. <Spinner android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/State"/>
  • 14. Basic Widgets: RadioGroup A view that displays one child at a time and lets the user pick among them. The items in the Spinner come from the Adapter associated with this view. <RadioGroup android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="vertical"> <RadioButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Veg" android:id="@+id/radio_veg"/> <RadioButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Non-Veg" android:id="@+id/radio_nonveg"/> </RadioGroup>
  • 15. Basic Widgets: Radio Buttons  A radio button is a two-states button that can be either checked or unchecked.  When the radio button is unchecked, the user can press or click it to check it.  Radio buttons are normally used together in a RadioGroup.  When several radio buttons live inside a radio group, checking one radio button unchecks all the others.  RadioButton inherits from … TextView. Hence, all the standard TextView properties for font face, style, color, etc. are available for controlling the look of radio buttons.  Similarly, you can call isChecked() on a RadioButton to see if it is selected, toggle() to select it, and so on, like you can with a CheckBox.
  • 17. UI –Other Features  All widgets extend View therefore they acquire a number of useful View properties and methods including:  XML Controls the focus sequence:  android:visibility  Android:background  Java methods  myButton.requestFocus()  myTextBox.isFocused()  myWidget.setEnabled()  myWidget.isEnabled()