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
- Create a new styles.xml file in a new directory:
app/res/values/styles-v21
- 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>
- 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>
- 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>
- 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
- Create a new layout file in the app/res/layout dir like: ab_custom.xml
- 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>
- 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! 👌