App bar

• ActionBar
• Toolbar

Preview :

summary :

ActionBar :

• some themes set up action bar as an app bar by default.

• App bar features have gradually been added to the native ActionBar over various Android releases.

  -> The native ActionBar behaves differently depending on what version of the Android system a device may be using.

Toolbar :

• The widest range covering widget.

• Easy customizability.

• The most recent features are added to the support library’s version of Toolbar.

  ->It helps ensure that app will have consistent behavior across the widest range of devices.

e.g. Diff on providing material design experience

Material design providing versions :

• Toolbar : Android2.1(API level 7) or later

• Native action bar : Android 5.0(API level 21) or later

Add Toolbar as app bar

1. Add the v7 appcompat support library to your project.

   ~~dependencies {...implementation "com.android.support:support-core-utils:28.0.0"}~~
   //deprecated
   

   dependencies {
   	...
   	implementation 'androidx.appcompat:appcompat:1.3.1'
   }
   

2. Make sure the activity extends AppCompatActivity.

   class MyActivity : AppCompatActivity() {
     // ...
   }
   

3. Set element to use one of appcompat's [NoActionBar](https://developer.android.com/reference/androidx/appcompat/R.style#Theme_AppCompat_NoActionBar) themes.

   <application
       android:theme="@style/Theme.AppCompat.Light.NoActionBar"
       />
   

4. Add a Toolbar to the activity’s layout.

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="@color/design_default_color_primary"
       android:elevation="4dp"
       android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
       bind:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       />
   

5. Call the activity’s setSupportActionBar() method.

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       setSupportActionBar(findViewById(R.id.app_bar))
   }
      
   //pass the activity's toolbar.
   //It makes accessable with a reference to and appcompat ActionBar object.
   

Use app bar utility methods

val appBar = appcompatActivity.supportActionBar()

//getSupportActionBar() method returns a reference of an ActionBar object.

Add an up action

Preview : Focus on the arrow to the left.

1. Declare a parent activity

<application ... >
    ...

    <!-- The main/home activity (it has no parent activity) -->

    <activity
        android:name="com.example.myfirstapp.MainActivity" ...>
        ...
    </activity>

    <!-- A child of the main activity -->
    <activity
        android:name="com.example.myfirstapp.MyChildActivity"
        android:label="@string/title_activity_child"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >

        <!-- Parent activity meta-data to support 4.0 and lower -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    </activity>
</application>

//Set attribute 'parentActivityName' for to navigate target activity.
//Declare '<meta-data>' element to support Android 4.0 and lower. 

2. Enable the Up Button

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_my_child)
    setSupportActionBar(findViewById(R.id.my_child_toolbar))
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
}

//call the app bar's setDisplayHomeAsUpEnabled() method to enable the up button.

Respond to actions

override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
    R.id.action_settings -> {
        // User chose the "Settings" item, show the app settings UI...
        true
    }

    R.id.action_favorite -> {
        // User chose the "Favorite" action, mark the current item
        // as a favorite...
        true
    }

    else -> {
        // If we got here, the user's action was not recognized.
        // Invoke the superclass to handle it.
        super.onOptionsItemSelected(item)
    }
}

Case: Fragment navigation hierarch

Consider to handle it:

• navigateUp()

or

• popBackStack()