Android Snippets: ActionBar

Hey, fellow Android Developers and especially the junior ones! In this article as like in the following ones, I will share with you useful snippets of code. 🙃

This article will be on-going or simply - it will be updated frequently, so you could review it from time to time.

Snippet 1: ActionBar without shadow and with custom background color

1. Create a new styles.xml file in a new directory: app/res/values/styles-v21
2. Open the newly created styles.xml located in the new styles-v21 directory and update it to:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <style name="AppTheme" parent="Theme.AppCompat.Light">
           <item name="colorPrimary">@color/colorPrimary</item>
           <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
           <item name="colorAccent">@color/colorAccent</item>
       </style>
   
       <style name="AppTheme.ActionBar.Custom" parent="AppTheme">
           <item name="android:windowContentOverlay">@null</item>
           <item name="colorPrimary">[YOUR_BACKGROUND_COLOR]</item>
       </style>
   </resources>
   

3. Open the styles.xml in the styles directory and update it to:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <style name="AppTheme" parent="Theme.AppCompat.Light">
           <item name="colorPrimary">@color/colorPrimary</item>
           <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
           <item name="colorAccent">@color/colorAccent</item>
       </style>
   
       <style name="AppTheme.ActionBar.Custom" parent="AppTheme">
           <item name="android:windowContentOverlay">@null</item>
           <item name="windowActionBarOverlay">true</item>
           <item name="colorPrimary">[YOUR_BACKGROUND_COLOR]</item>
       </style>
   </resources>
   

4. Go to your AndroidManifest.xml file and set the theme of the selected activity to use our newly created theme AppTheme.ActionBar.Custom:

   <?xml version="1.0" encoding="utf-8"?>
   <manifest ...>
       <application
               ...>
           <activity 
                   ...
                   android:theme="@style/AppTheme.ActionBar.Custom">
               ...
           </activity>
       </application>
   </manifest>
   

5. Open your Activity's class and set the following ActionBar param in the onCreate() method:

   supportActionBar?.elevation = 0f
   

Now you will have a custom colored ActionBar without a bottom shadow! 👌

Snippet 2: ActionBar with a custom view

1. Create a new layout file in the app/res/layout dir like: ab_custom.xml
2. Define your custom UI in the ab_custom.xml file. For exercise purposes, we will have only on child TextView defined:

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout 
       ...>
   
       <androidx.appcompat.widget.AppCompatTextView
               android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="match_parent"
               android:textColor="@android:color/white"
               android:text="Custom ActionBar Title"
               android:gravity="center_vertical"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintHorizontal_bias="0.5"
               app:layout_constraintEnd_toEndOf="parent"/>
   </androidx.constraintlayout.widget.ConstraintLayout>
   

3. Go to your activity's class and set the following ActionBar params in the onCreate() method:

   supportActionBar?.displayOptions = DISPLAY_SHOW_CUSTOM
   supportActionBar?.setCustomView(R.layout.actionbar)
   

Now you will have an ActionBar with a custom UI! 👌