How to Build a CRUD App With Kotlin and Android Studio

Chapter 7 Main Menu and Toolbar Menu

Problems covered in this chapter
  • •

    Show/hide menu items

In this chapter we dive into the user interface of our tutorial app for the first time and create a main menu (menu_main.xml) and a toolbar menu (menu_toolbar.xml). For the main menu we need some vector graphics, so we add the standard icons Home (baseline_home_24.xml), Edit Note (baseline_edit_note_24.xml), Groups (baseline_groups_24.xml), Tag (baseline_tag_24.xml) and WC (baseline_wc_24.xml) in the drawables folder via the Android Studio menu ”New → Vector Asset”.

7.1 menu_toolbar.xml

Listing 18: menu_toolbar.xml
⬇
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/updatePreferencesFragment"
        android:icon="@android:drawable/ic_menu_preferences"
        android:title="@string/preferences_menu_title"
        android:visible="false"
        app:showAsAction="collapseActionView" />
    <item
        android:id="@+id/importExportFragment"
        android:icon="@android:drawable/ic_menu_save"
        android:title="@string/import_export_menu_title"
        android:visible="false"
        app:showAsAction="collapseActionView" />
    <item
        android:id="@+id/helpFragment"
        android:icon="@android:drawable/ic_menu_help"
        android:title="@string/help_menu_title"
        app:showAsAction="collapseActionView" />
    <item
        android:id="@+id/action_search"
        android:title="@string/search_view_hint"
        android:visible="false"
        android:icon="@android:drawable/ic_menu_search"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="ifRoom|withText" />
</menu>

As can be seen from the XML file, we have added four menu items to our tools menu:

  • •

    Settings

  • •

    Import/Export

  • •

    Help

  • •

    Search

Except for Help, the remaining three menu items are set to invisible by setting the attribute android:visible=”false”: This is because we will only show these menu items at certain navigation points in the app, e.g. the search only when we display a list of entries (for example, all diary entries), or the settings and import/export only on the app’s home page.

Since we want our two menus to be language-specific, we need to extend our two string.xml files accordingly:

7.2 string.xml (English)

Listing 19: string.xml (English)
⬇
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CrudDiary</string>
    <string name="nothing_selected" translatable="false">---</string>
    <string name="male_gender">male</string>
    <string name="female_gender">female</string>
    <string name="diverse_gender">diverse</string>
    <string name="main_menu_title">Home</string>
    <string name="persons_list_menu_title">Persons</string>
    <string name="tags_list_menu_title">Tags</string>
    <string name="diary_entries_list_menu_title">Diary entries</string>
    <string name="genders_list_menu_title">Genders</string>
    <string name="help_menu_title">Help</string>
    <string name="support_section">Support</string>
    <string name="preferences_menu_title">Preferences</string>
    <string name="import_export_menu_title">Import/Export</string>
    <string name="search_view_hint">Search entries</string>
</resources>

7.3 string.xml (German)

Listing 20: string.xml (German)
⬇
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CrudDiary</string>
    <string name="male_gender">m\"annlich</string>
    <string name="female_gender">weiblich</string>
    <string name="diverse_gender">divers</string>
    <string name="main_menu_title">\"Ubersicht</string>
    <string name="persons_list_menu_title">Personen</string>
    <string name="tags_list_menu_title">Schlagw\"orter</string>
    <string name="diary_entries_list_menu_title">Tagebucheintr\"age</string>
    <string name="genders_list_menu_title">Geschlechter</string>
    <string name="help_menu_title">Hilfe</string>
    <string name="support_section">Support</string>
    <string name="preferences_menu_title">Einstellungen</string>
    <string name="import_export_menu_title">Import/Export</string>
    <string name="search_view_hint">Eintr\"age durchsuchen</string>
</resources>"

7.4 menu_main.xml

Listing 21: menu_main.xml
⬇
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/homeFragment"
            android:icon="@drawable/baseline_home_24"
            android:title="@string/main_menu_title" />
        <item
            android:id="@+id/diaryEntriesListFragment"
            android:icon="@drawable/baseline_edit_note_24"
            android:title="@string/diary_entries_list_menu_title" />
        <item
            android:id="@+id/personsListFragment"
            android:icon="@drawable/baseline_groups_24"
            android:title="@string/persons_list_menu_title" />
        <item
            android:id="@+id/tagsListFragment"
            android:icon="@drawable/baseline_tag_24"
            android:title="@string/tags_list_menu_title" />
        <item
            android:id="@+id/gendersListFragment"
            android:icon="@drawable/baseline_wc_24"
            android:title="@string/genders_list_menu_title" />
    </group>
    <item android:title="@string/support_section">
        <menu>
            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/helpFragment"
                    android:icon="@android:drawable/ic_menu_help"
                    android:title="@string/help_menu_title" />
            </group>
        </menu>
    </item>
</menu>

The following menu items are defined in the main menu:

  • •

    Overview (start page),

  • •

    Diary entries,

  • •

    Persons,

  • •

    Keywords,

  • •

    Genders and

  • •

    Help.