FIT2081 Lecture Notes - Lecture 5: Master Sergeant, Hamburger Button, Xml
12 Jun 2018
School
Department
Course
Professor
Snackbar
="provide"lightweight"feedback"abt"an"op"by"showing"a"brief"msg"at"bottom"of"
screen"that"automatically"disappears"after"a"timeout/user"interaction"
elsewhere"OR"swiped"off"the"screen
Methods:
make(View v, CharSequence text, int duration)
○
setAction(CharSequence text,
View.OnClickListener listener)
○
setText(CharSequence message)
○
•
Appear"above"all"other"elems"on"screen•
DrawerLayout
Position"primary"content"View as"first"child
layout_width/height="match_parent"
○
No"layout_gravity
○
1.
Add"drawers"as"child"Views
layout_width fixed
○
layout_height="match_parent"
○
layout_gravity set"appropriately
○
2.
Helps"to"use"an"include for"the"primary"context
Keeps"layout"complexity"downa.
Allows"focus"on"editing"at"a"given"layout"in"View hierarchyb.
3.
isDrawerOpen, closeDrawer
•
NavigationView
="a"subclass"of"DrawerLayout
○
="provides"a"standard"navigation"menu
○
app:headerLayout="@layout/nav_header_main"
○
app:menu="@menu/activity_main_drawer"
○
•
NavigationDrawer
="for"navigating"around"the"app•
Spans"height"of"screen,"with"everything"behind"it"visible"but"behind"a"
scrim
•
Can't"contain"action"buttons•
onNavigationItemSelected(MenuItem menuItem)
To"set"onClick"to"handle"each"event
○
•
For"a"Drawer,"you"need:
An"instance"of"DrawerLayout in"Activity's"launch"layout"
(activity_main)"-actually"the"top"View
Coordinates"visual"interaction"btwn"drawer"and"UI"(w/o"
drawer"open)
▪
Not"in"Palette,"has"to"be"coded
▪
○
An"instance"of"NavigationView component
Represents"the"drawer"itself!
▪
Not"in"Palette,"has"to"be"coded
▪
Attributes"point"to:
A"layout"describing"the"header"section"of"drawer
Optional,"since"headerLayout attribute"of"
NavigationView"points"to"this
®
□
A"menu"layout"specifying"options"to"be"displayed
Same"XML"vocab"as"options"menu
®
□
A"listener"obj"containing"event-handling"code"to"
respond"to"user"selection"of"code"of"menu"items
Assigned"to"NavigationView using"its"
setNavigationItemSelectedListener
method"in"launch"Activity's"onCreate
lifecycle"callback
App"promises"to"implement"appropriate"
interface"to"set"Activity"instance"as"
listener"by:
Coding"interface's"only"method"
onNavigationItemSelected
}
Handle"possible"selections"using"
conditional"structure,"after"which"
drawer"is"closed"using"
closeDrawer(View v)
}
◊
®
NOT"SIMILAR"TO"OPTIONS"MENU"in"that"
Activity"doesn't"automatically"listen"for"menu"
to"be"opened"by"user"and"for"item"to"be"
selected
®
□
▪
○
•
android:layout_gravity
Eg.""bottom|end" ==>"right"side.•
ListView
Get"a"reference"to"the"ListView•
Instantiate"an"adapter"(specifying"its"data"source)•
Plug"adapter"into"ListView using"ListView's setAdapter(adapter)•
ArrayList<String> listItems = newArrayList<String>();
="a"dynamic"array
ArrayAdapter
Constructor
Grabs"element"from"data"source"ListItems and"create"View for"it
○
Needs"TextView layout"files"to"display"stuff
○
•
Params"for"ArrayAdapter<String>
Current"context"(Context)1.
Resource"ID"for"a"layout"file"containing"a"TextView to"use"when"
instantiating"views"(R.id.___)
2.
Data"source/set"(ListView)3.
•
setAdapter(adapter)
Adding"TextView to"ListView using"adapter"-connecting"adapter"
to"display"component
○
•
notifyDataSetChanged()
Manually"triggered"to"notify"the"adapter"and"attached"observers"that"
underlying"data"has"been"changed,"and"any"View that"reflects"the"
data"should"refresh"itself
○
Called"every"time"the"list"is"updated/an"action"has"been"executed"
(and"a"Snackbar,"if"any,"pops"up"to"notify"the"user)
Ensures"adapter's"connected"display"component"is"refreshed"to"
allow"for"the"addition/removal"of"items
§
○
•
ActionBarDrawerToggle
="provides"a"handy"way"to"tie"together"the"functionaility"of"DrawerLayout and"
the"framework"ActionBar to"implment"the"recommended"design"for"navigation"
drawers
(i.e."rotating"hamburger"icon)
syncState
Called"from"onPostCreate() in"your"Activity"to"set"the"state"of"the"
indicator"(usually"hamburger)"based"on"whether"the"DrawerLayout
is"in"open"or"closed"state,"once"the"Activity"has"been"restored"using"
onRestoreInstanceState
○
Without"this,"the"indicator"icon"will"disappear"too
○
•
drawer.addDrawerListener(DrawerLayout.DrawerListener
listener)
•
Fab2081Student
NavDrawer2081Student
onBackPressed()
="called"when"the"Activity"has"detected"the"user's"press"of"the"back"key
super.onBackPressed simply"finishes"current"activity
But"can"be"overridden
○
•
GravityCompat
What%is%the%task%of%"undoOnClickListener"?
It"removes"the"last"item"from"the"list"and"updates"the"adapter.
What%is%the%role%of%the%adapter?
It"acts"as"an"intermediary"between"data"and"display"component"
(AdapterView)."It"provides"access"to"the"data"items"and"is"responsible"for"
making"a"View for"each"item"in"the"data"set.
Write%code%for%onOptionsItemSelected (MenuItem item) that%
invokes%selected%methods%based%on%selected%items.
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.item1Id) {
m1();
}else if (id == R.id.item2Id) {
m2();
} else if (id == R.id.item3Id) {
m3();
}
return super.onOptionsItemSelected(item);
Given%the%last%statement%
navigationView.setNavigationItemSelectedListener(this),%
what%needs%to%be%done?
We"need"to"build"a"method"onNavigationItemSelected(MenuItem
item) to"set"each"onClick events.
FAB button
="a"circular"button"that"triggers"the"primary"action"in"app's"UI
Layout
<android.support.design.widget.
FloatingActionButton
android:id="@+id/fab"
layout_width/height/gravity
src="@drawable…"
layout_margin="16dp" />
•
Listener
FloatingActionButton fab = findViewById(R.id.fab)
fab.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
Snackbar
.make(view, "Snackbar text",
Snackbar.LENGTH_LONG)
.setAction("Action, null)
.show()
}
});
•
Week$5
Tuesday," 29"May"2018
10:53
Snackbar
="provide"lightweight"feedback"abt"an"op"by"showing"a"brief"msg"at"bottom"of"
screen"that"automatically"disappears"after"a"timeout/user"interaction"
elsewhere"OR"swiped"off"the"screen
Methods:
make(View v, CharSequence text, int duration)
○
setAction(CharSequence text,
View.OnClickListener listener)
○
setText(CharSequence message)
○
•
Appear"above"all"other"elems"on"screen
•
DrawerLayout
Position"primary"content"View as"first"child
layout_width/height="match_parent"
○
No"layout_gravity
○
1.
Add"drawers"as"child"Views
layout_width fixed
○
layout_height="match_parent"
○
layout_gravity set"appropriately
○
2.
Helps"to"use"an"include for"the"primary"context
Keeps"layout"complexity"downa.
Allows"focus"on"editing"at"a"given"layout"in"View hierarchyb.
3.
isDrawerOpen, closeDrawer
•
NavigationView
="a"subclass"of"DrawerLayout
○
="provides"a"standard"navigation"menu
○
app:headerLayout="@layout/nav_header_main"
○
app:menu="@menu/activity_main_drawer"
○
•
NavigationDrawer
="for"navigating"around"the"app•
Spans"height"of"screen,"with"everything"behind"it"visible"but"behind"a"
scrim
•
Can't"contain"action"buttons•
onNavigationItemSelected(MenuItem menuItem)
To"set"onClick"to"handle"each"event
○
•
For"a"Drawer,"you"need:
An"instance"of"DrawerLayout in"Activity's"launch"layout"
(activity_main)"-actually"the"top"View
Coordinates"visual"interaction"btwn"drawer"and"UI"(w/o"
drawer"open)
▪
Not"in"Palette,"has"to"be"coded
▪
○
An"instance"of"NavigationView component
Represents"the"drawer"itself!
▪
Not"in"Palette,"has"to"be"coded
▪
Attributes"point"to:
A"layout"describing"the"header"section"of"drawer
Optional,"since"headerLayout attribute"of"
NavigationView"points"to"this
®
□
A"menu"layout"specifying"options"to"be"displayed
Same"XML"vocab"as"options"menu
®
□
A"listener"obj"containing"event-handling"code"to"
respond"to"user"selection"of"code"of"menu"items
Assigned"to"NavigationView using"its"
setNavigationItemSelectedListener
method"in"launch"Activity's"onCreate
lifecycle"callback
App"promises"to"implement"appropriate"
interface"to"set"Activity"instance"as"
listener"by:
Coding"interface's"only"method"
onNavigationItemSelected
}
Handle"possible"selections"using"
conditional"structure,"after"which"
drawer"is"closed"using"
closeDrawer(View v)
}
◊
®
NOT"SIMILAR"TO"OPTIONS"MENU"in"that"
Activity"doesn't"automatically"listen"for"menu"
to"be"opened"by"user"and"for"item"to"be"
selected
®
□
▪
○
•
android:layout_gravity
Eg.""bottom|end" ==>"right"side.
•
ListView
Get"a"reference"to"the"ListView
•
Instantiate"an"adapter"(specifying"its"data"source)
•
Plug"adapter"into"ListView using"ListView's setAdapter(adapter)
•
ArrayList<String> listItems = newArrayList<String>();
="a"dynamic"array
ArrayAdapter
Constructor
Grabs"element"from"data"source"ListItems and"create"View for"it
○
Needs"TextView layout"files"to"display"stuff
○
•
Params"for"ArrayAdapter<String>
Current"context"(Context)
1.
Resource"ID"for"a"layout"file"containing"a"TextView to"use"when"
instantiating"views"(R.id.___)
2.
Data"source/set"(ListView)
3.
•
setAdapter(adapter)
Adding"TextView to"ListView using"adapter"-connecting"adapter"
to"display"component
○
•
notifyDataSetChanged()
Manually"triggered"to"notify"the"adapter"and"attached"observers"that"
underlying"data"has"been"changed,"and"any"View that"reflects"the"
data"should"refresh"itself
○
Called"every"time"the"list"is"updated/an"action"has"been"executed"
(and"a"Snackbar,"if"any,"pops"up"to"notify"the"user)
Ensures"adapter's"connected"display"component"is"refreshed"to"
allow"for"the"addition/removal"of"items
§
○
•
ActionBarDrawerToggle
="provides"a"handy"way"to"tie"together"the"functionaility"of"DrawerLayout and"
the"framework"ActionBar to"implment"the"recommended"design"for"navigation"
drawers
(i.e."rotating"hamburger"icon)
syncState
Called"from"onPostCreate() in"your"Activity"to"set"the"state"of"the"
indicator"(usually"hamburger)"based"on"whether"the"DrawerLayout
is"in"open"or"closed"state,"once"the"Activity"has"been"restored"using"
onRestoreInstanceState
○
Without"this,"the"indicator"icon"will"disappear"too
○
•
drawer.addDrawerListener(DrawerLayout.DrawerListener
listener)
•
Fab2081Student
NavDrawer2081Student
onBackPressed()
="called"when"the"Activity"has"detected"the"user's"press"of"the"back"key
super.onBackPressed simply"finishes"current"activity
But"can"be"overridden
○
•
GravityCompat
What%is%the%task%of%"undoOnClickListener"?
It"removes"the"last"item"from"the"list"and"updates"the"adapter.
What%is%the%role%of%the%adapter?
It"acts"as"an"intermediary"between"data"and"display"component"
(AdapterView)."It"provides"access"to"the"data"items"and"is"responsible"for"
making"a"View for"each"item"in"the"data"set.
Write%code%for%onOptionsItemSelected (MenuItem item) that%
invokes%selected%methods%based%on%selected%items.
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.item1Id) {
m1();
}else if (id == R.id.item2Id) {
m2();
} else if (id == R.id.item3Id) {
m3();
}
return super.onOptionsItemSelected(item);
Given%the%last%statement%
navigationView.setNavigationItemSelectedListener(this),%
what%needs%to%be%done?
We"need"to"build"a"method"onNavigationItemSelected(MenuItem
item) to"set"each"onClick events.
FAB button
="a"circular"button"that"triggers"the"primary"action"in"app's"UI
Layout
<android.support.design.widget.
FloatingActionButton
android:id="@+id/fab"
layout_width/height/gravity
src="@drawable…"
layout_margin="16dp" />
•
Listener
FloatingActionButton fab = findViewById(R.id.fab)
fab.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
Snackbar
.make(view, "Snackbar text",
Snackbar.LENGTH_LONG)
.setAction("Action, null)
.show()
}
});
•
Week$5
Tuesday," 29"May"2018 10:53
Document Summary
= a circular button that triggers the primary action in app"s ui. = called when the activity has detected the user"s press of the back key super. onbackpressed simply finishes current activity. = provide lightweight feedback abt an op by showing a brief msg at bottom of screen that automatically disappears after a timeout/user interaction elsewhere or swiped off the screen. Methods: make(view v, charsequence text, int duration) setaction(charsequence text, Appear above all other elems on screen android:layout_gravity. Grabs element from data source listitems and create view for it. Resource id for a layout file containing a textview to use when instantiating views (r. id. ___) Adding textview to listview using adapter - connecting adapter to display component notifydatasetchanged() Manually triggered to notify the adapter and attached observers that underlying data has been changed, and any view that reflects the data should refresh itself.
