Kata02 Toolbar - mitchwongho/GDS-Material-Kata GitHub Wiki
While not a design element, Toolbar is a new widget that was introduced in Android Lollipop 🍭to be a have a more focused feature set than ActionBar. Toolbar is available in the AppCompat support library for pre-Lollipop.
The goal of this kata is to create a header Toolbar (akin to the ActionBar) and a footer Toolbar with menu options inflated from the activity. [Source reference]
We begin by adding a header and footer android.support.v7.widget.Toolbar declarations to layout/activity_main.xml. You can delete the hello_world TextView used previously.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
...
<!-- Header Toolbar -->
<android.support.v7.widget.Toolbar
android:id="@+id/header_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="@string/app_name"
android:background="?attr/colorPrimaryDark"
android:theme="@style/ThemeOverlay.AppCompat.Dark" />
<!-- Footer Toolbar -->
<android.support.v7.widget.Toolbar
android:id="@+id/footer_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:layout_alignParentBottom="true"/>
...
</RelativeLayout>
Next, we'll update values/styles.xml to apply the textColorPrimary
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<!-- apply primary txt colour -->
<item name="android:textColorPrimary">@color/primary_text</item>
...
</style>
Let's define the menu items we'll add to the footer Toolbar by creating res/menu/menu_footer.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<item
android:title="@string/menu_footer_one"
android:icon="@drawable/abc_ic_menu_copy_mtrl_am_alpha"
android:orderInCategory="100"
app:showAsAction="always"/>
<item
android:title="@string/menu_footer_two"
android:icon="@drawable/abc_ic_menu_cut_mtrl_alpha"
android:orderInCategory="100"
app:showAsAction="always"/>
<item
android:title="@string/menu_footer_three"
android:icon="@drawable/abc_ic_voice_search_api_mtrl_alpha"
android:orderInCategory="100"
app:showAsAction="always"/>
</menu>
To conclude, let's update MainActivity to set R.id.header_toolbar as the ActionBar and inflate menu_footer into the footer toolbar.
...
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Define Header Toolbar
final Toolbar headerToolbar = (Toolbar)findViewById(R.id.header_toolbar);
setSupportActionBar(headerToolbar);
final Toolbar footerToolbar = (Toolbar)findViewById(R.id.footer_toolbar);
footerToolbar.inflateMenu(R.menu.menu_footer);
}
...