1. CS 240 – Advanced Programming Concepts
Views and ViewGroups
CS 240 – Advanced Programming Concepts

2. Views and ViewGroups View = Widget = Control ViewGroup = Container
Examples: Button, Switch, Spinner, TextView, EditText
ViewGroup = Container
Views that contain other views
Examples: LinearLayout, TableLayout, ScrollView
Common Attributes
id (i.e.
Layout_width, layout_height
Values: match_parent, wrap_content, 16dp

3. Views (Attributes and Listeners)
TextView (text labels)
text, textAppearance
.setClickable(boolean) – make clickable
.setOnClickListener(View.OnClickListener)
EditText (text fields)
inputType
.addTextChangedListener(TextWatcher)
Button
text
ImageView (display image)
.setImageDrawable(IconDrawable) – set icon to display

4. Views (Attributes and Listeners)
Switch (on/off)
.setChecked(boolean) – set check state
.setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener)
Spinner (dropdown list)
entries or .setAdapter(ArrayAdapter) – specify list values
.setSelection(int) – specify selected item
onItemSelectedListener(AdapterView.OnItemSelectedListener)
SearchView
queryHint – Background text displayed when the field is empty
iconifiedByDefault – Display the field or just an icon until clicked
.setIconified(boolean) – make always visible
.setOnQueryTextListener(SearchView.OnQueryTextListener)
Space (blank space)
set layout_width and layout_height to specific values (e.g., 30dp)

5. Advanced Views (covered later)
RecyclerView
Dynamic list of items
ExpandableListView
MapView

6. View Groups ScrollView LinearLayout FrameLayout
Wraps around any one View to make it scrollable
The one View can be a ViewGroup/layout
Example: GridLayoutExampleWithScrollView
LinearLayout
orientation: vertical or horizontal
Example: GeoQuiz/QuizActivity
FrameLayout
Used as a placeholder for dynamically created fragments
Example: FragmentExample

7. View Groups: TableLayout
Contains multiple TableRow objects and/or other layouts
Columns determined by row with most views
Useful Attributes:
gravity
Attribute of any widget
Use to position the widget in it’s column
Example: android:gravity=“end” will right justify the widget in it’s column
stretchColumns
Attribute of the TableLayout
Specify which if any column should take up empty space
Example: android:stretchColumns="3” (4th column will take space)
layout_span
Attribute of a widget inside a TableRow
Specify that the widget should span multiple columns
Example: android:layout_span="3” (declaring item will span 3 columns)
Example: TableLayoutExample

8. View Groups: GridLayout
Very similar to TableLayout
No need to use TableRow or any other indicator of rows
Specify columns with columnCount attribute
Grid filled row-by-row from left to right
Useful Attributes:
columnCount
Attribute of GridLayout
layout_gravity (use layout_gravity, instead of gravity)
Attribute of any widget
Use to position the widget in it’s column(s) or row(s)
Example: android:layout_gravity=“end” will right justify the widget in it’s column or columns
Example: android:layout_gravity=“fill-horizontal” will fill the entire column or columns if using layout_columnSpan
layout_columnSpan
Use to span multiple columns
Example: android:layout_columnSpan="3” (declaring item will span 3 columns)
layout_rowSpan
Attribute of and widget
Use to span multiple rows
Example: android:layout_rowSpan=”2” (declaring item will span 2 rows)
Example: GridLayoutExample

9. View Groups: ConstraintLayout
Allows you to connect views to their parents and to each other in design or text view
Designed to allow visual layout in the design view
Useful Attributes:
layout_constraint*_to*Of (substitute Top, Bottom, Right or Left for *)
Attribute of any widget
Use to position the widget in it’s parent or relative to another View
Example: app:layout_constraintTop_toTopOf="parent”
Layout_margin*
Use to put space between views or between a view and it’s parent
Example: android:layout_marginBottom=“8dp”
Example: ConstraintLayoutExample

10. View Groups: RelativeLayout
Very similar to ConstraintLayout
Not as easily manipulated visually in the design view, but takes fewer attributes to position the views
Useful Attributes:
layout_* (many substitutions for *)
Attribute of any widget
Use to position the widget in it’s parent or relative to another View
Example: android:layout_centerInParent=”true”
Example:
Example: android:layout_centerHorizontal=“true”
Layout_margin*
Use to put space between Views or between a view and it’s parent
Example: android:layout_marginBottom=“8dp”
Example: RelativeLayoutExample

11. Family Map Client: Login Fragment
How would you create this view?
Does it need to scroll?

12. Family Map Client: Map Fragment
How would you create this view?
Does it need to scroll?

13. Family Map Client: Event Activity
How would you create this view?
Does it need to scroll?

14. Family Map Client: Person Activity
How would you create this view?
Does it need to scroll?

15. Family Map Client: Search Activity
How would you create this view?
Does it need to scroll?

16. Family Map Client: Filter Activity
How would you create this view?
Does it need to scroll?

17. Family Map Client: Settings Activity
How would you create this view?
Does it need to scroll?