Lab 7

🖥 Lab 7: Building a Complex User Interface

📝 Objectives

1. Update styling of Toolbar

   1. In activity_main.xml change androidx.appcompat.widget.Toolbar to com.google.android.material.appbar.MaterialToolbar
   2. Set style="@style/Widget.MaterialComponents.Toolbar.Primary"

2. Add an overflow menu to the Toolbar that includes an option for showing TwitterActivity

   1. Create a new Menu resource named main_toolbar.xml
   2. Add a menu item with id="@+id/shareOnTwitter and title="Share on Twitter
   3. Within activity_main.xml add app:menu="@menu/main_toolbar" to your MaterialToolbar
   4. Remove the call to setSupportActionBar() from MainActivity. We can remove this now that we are taking full control over our Toolbar.
      1. If we don't remove this line, the Activity will clear the menu we have inflated.
   5. In MainActivity, implement Toolbar.setOnMenuItemClickListener() to respond to clicking the menu item by showing TwitterActivity

3. Prepare MyNotesFragment for future interactions

   1. Change the createNoteButton to be a FloatingActionButton
   2. Reconstrain the FloatingActionButton to the bottom, and end, of the screen

4. Add dimension resources for spacing values

   1. Create a resources file named dimens.xml
   2. Create a dimen named spacing_1x with a value of 8dp
   3. Create a dimen named spacing_2x with a value of 16dp
   4. Use either (or both) these dimension resources to add margin to a view inside fragment_create_note.xml
      1. ex android:layout_marginEnd="@dimen/spacing_2x"

5. Setup basic note creation UI for CreateNoteFragment

   1. Add a TextInputLayout for collecting a note title from the user
   2. Add a Spinner for selecting note category
   3. Add a TextInputLayout for collecting the note content from the user
   4. Add a FloatingActionButton for saving a note
   5. Convert CreateNoteFragment to use ViewBinding and create a class property storing a reference to the binding object
   6. Create a class CategorySpinnerAdapter that extends ArrayAdapter and populates the adapter with a List<String>
   7. Create a list of Strings you want to represent your note categories,
   8. Populate the spinner by creating an instance of CategorySpinnerAdapter and assigning it to binding.categorySpinner.adpater
      1. Instantiating your spinner should look something like this CategorySpinnerAdapter(requireContext(), CATEGORIES)
      2. The call to requireContext() will get a non-null reference to the parent Context for the Fragment. Any Context will work here. We use requireContext() specifically because it returns a non-null value, or it will throw an exception. You could replace requireContext() with requireActivity() because Activity is a valid Context.

 

✨ Challenges

Setup basic note detail UI for NoteDetailFragment

1. Add a `TextView` for displaying the note title
2. Add a `TextView` for displaying the note category
3. Add a `TextView` for displaying the note content

TextInput Styling

Update your TextInputLayouts to use the Outlined theme so they look a nicer.

 

🖥 Lab 7 Hints: Building a Complex User Interface

 

💡 Helpful Resources

• BottomNavigationView Documentation
• Set Up the App Bar Documentation
• Toolbar.inflateMenu()
• Populating a Dropdown Spinner
• TextInputLayout Documentation
• MaterialDesign Text Fields Guidance

 

💡 Why is my Toolbar not showing the menu?

There are a few things you can check:

• Did you add app:menu="@menu/main_toolbar" to your Toolbar declaration in activity_main.xml?
• Did you remove the call to setSupportActionBar() from MainActivity?

 

💡 How to create the Spinner adapter?

ArrayAdapter will enabled us to take a collection of items, String in this case, and turn that collection into Views that can then be used to populate our Spinner. Because our Spinner is very simple in this case, we don't have to create a custom layout and can instead use a built-in layout of android.R.layout.simple_spinner_dropdown_item.

class CategorySpinnerAdapter(
  context: Context, items: List<String>) :
  ArrayAdapter<String>(context, android.R.layout.simple_spinner_dropdown_item
  ) {
  init {
    addAll(items)
  }
}

 

💡 How to use TextInputLayout and EditText together?

TextInputLayout is meant to wrap an EditText. So, when using them, we want to declare first the TextInputLayout in our layout file, and then add an EditText as a child view.

<com.google.android.material.textfield.TextInputLayout
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
      >

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="Enter your note"
        />
  </com.google.android.material.textfield.TextInputLayout>

 

💡 How to define a dimension resource?

First, you'll need to create an Android resource file within the res/values directory. By convention, this file is typically named dimens.xml. Within this file, we can define individual dimension resources and their values.

<resources>
  <dimen name="spacing_1x">8dp</dimen>
  <dimen name="spacing_2x">16dp</dimen>
</resources> 

 

💡 Setting Toolbar title

The title of a Toolbar can be set programmatically or in xml.

Via XML

app:title="Android Study Guide"

Via Code

binding.toolbar.title = "Your Title"

 

💡 View is not constrained properly

Do you have a view that doesn't seem to respect the constraints you've applied to it?

Is your view filling the screen in some axis instead of restricting itself to some barrie/alignment?

This can happen if you've applied constraints, but told the view to match_parent along some axis. Double check that your height/width is using 0dp size along whichever axis it should be constrained.

 

💡 Theming TextInputLayout

TextInputLayout comes in 2 styles:

1. Filled
2. Outlined

To change the style to Outline apply the following to your XML style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"