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! 👌