How to Use FadingActionBar Library in Android App?

FadingActionBar is a library that implements a nice fading action bar effect. ActionBar fades gradually as we start scrolling down and turns completely opaque when scrolled above. It also supports the three most commonly used action bar implementations: stock (API 11+), ActionBarSherlock, and ActionBarCompat. In this article, we will be implementing this library in an Android App using Java language. A sample GIF is given below to get an idea about what we are going to do in this article. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add the library dependency 

Navigate to the Gradle Scripts > build.gradle(Module:app), add the library in the dependencies section, and sync the project.

dependencies {
    implementation 'com.github.manuelpeinado.fadingactionbar:fadingactionbar:3.1.2'
}

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and refer to the following code. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<!--activity_main contains the layout below action bar-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="22dp"
        android:textSize="18sp"
        android:text="@string/gfg"
        android:textAppearance="@android:style/TextAppearance.Medium" />

</LinearLayout>

Step 4: Working with the styles.xml file

Navigate to the app > res > values > styles.xml and refer to the following code. Below is the code for the styles.xml file. 

XML

<resources>

    <!-- Base application theme. -->
    <style name="Widget" />

    <style name="Widget.ActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse" />

    <style name="Widget.Light" />

    <style name="Widget.Light.ActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid" />

    <!--Transparent background-->
    <style name="Widget.ActionBar.Transparent">
        <item name="android:background">@android:color/transparent</item>
    </style>

    <style name="Widget.Light.ActionBar.Transparent">
        <item name="android:background">@android:color/transparent</item>
    </style>

</resources>

Step 5: Working with the themes.xml file

• Navigate to the app > res > values
• Right-click on values and select New > Values Resource File
• A dialog box will appear now, then add the File Name as themes and press OK.
• Below is the code for the themes.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/Widget.ActionBar</item>
    </style>

      <!-- Making the ActionBar Translucent-->
    <style name="AppTheme.TranslucentActionBar">
        <item name="android:actionBarStyle">@style/Widget.ActionBar.Transparent</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="AppTheme.Light.TranslucentActionBar"
           parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">
      @style/Widget.Light.ActionBar.Transparent</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

</resources>

Step 6: Working with the header.xml file

• Navigate to the app > res > layout
• Right-click on layout and select New > Layout Resource File
• A dialog box will appear now, then add the File Name as header and press OK.
• Below is the code for the header.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Header image -->
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="34dp"
    android:adjustViewBounds="true"
    android:background="#ffffff"
    android:scaleType="centerCrop"
    android:src="@drawable/gfglongpng" />
<!--Add header image source in android:src-->

Step 7: Working with the AndroidManifest.xml file

Navigate to app > manifests > AndroidManifests.xml  and add the Translucent Theme inside the MainActivity tag. 

android:theme="@style/AppTheme.TranslucentActionBar"

Step 8: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.app.Activity;
import android.os.Bundle;

import com.manuelpeinado.fadingactionbar.FadingActionBarHelper;

// extend the MainActivity to Activity
// instead of AppCompatActivity
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Adding FadingActionBar in the Activity
        FadingActionBarHelper helper = new FadingActionBarHelper()
                .actionBarBackground(R.drawable.ab_background)
                // actionBarBackground sets the background
                  // of actionBar in collapsed form
                .headerLayout(R.layout.header)
                // headerLayout sets the header layout of
                  // actionBar in expanded form
                .contentLayout(R.layout.activity_main);
                // contentLayout sets the main
                  // content below action bar
        setContentView(helper.createView(this));
        helper.initActionBar(this);
    }
}

Output: 

GitHub Repository: Fading Action Bar Library