Open In App

How to Use Header2ActionBar Library in Android App?

Improve
Improve
Like Article
Like
Save
Share
Report

Header2ActionBar is a library that implements a nice fade-in/fade-out animation effect to the action bar. It also gives the ability to add the header image, title, and subtitle in the ActionBar. 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. Note that we are going to implement this project using the Java language. 

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 Project > Project Name > app > src > main
  • Right-click on main and Select New > Directory
  • Type libs as the directory name
  • Download the library from here and paste it inside the libs directory.
  • Navigate to the Gradle Scripts > build.gradle(Module:app), add the library in the dependencies section, and sync the project.
dependencies {
    implementation files('src/main/libs/Header2ActionBar-0.2.1.jar')
}

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




<FrameLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="MergeRootFrame" />


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. -->
  
    <!--Change the appTheme for activity-->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
  
</resources>


Step 5: Working with the main_content.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 main_content and press OK.
  • Below is the code for the main_content.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbarStyle="outsideOverlay">
  
    <!--Main content below Action Bar-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:lineSpacingExtra="1.2dp"
        android:text="@string/gfg"
        android:textSize="18sp" />
  
</ScrollView>


Step 6: Working with the fragment_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 fragment_header and press OK.
  • Below is the code for the fragment_header.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    android:layout_width="match_parent"
    android:layout_height="220dp">
  
    <!--Setting the header image -->
    <ImageView
        android:id="@android:id/background"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:background="#ffffff"
        android:scaleType="centerInside"
        android:src="@drawable/gfglongpng" />
  
    <!--Adding title and subtitle in a 
        vertical order inside LinearLayout-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|end"
        android:orientation="vertical">
  
        <!--Setting the title -->
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TITLE" />
  
        <!--Setting the subtitle-->
        <TextView
            android:id="@+id/subtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SUBTITLE" />
  
    </LinearLayout>
  
</FrameLayout>


Step 7: Working with the Fragment.java file

  • Navigate to the app > java> package_name
  • Right-click on package_name and select New > Java Class
  • A dialog box will appear now, then add the File Name as Fragment and press OK.
  • Below is the code for the Fragment.java file.

Java




import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
  
import com.achep.header2actionbar.HeaderFragment;
  
// extending to HeaderFragment
public class Fragment extends HeaderFragment {
  
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
  
        // Handles the fading action of actionbar
        setHeaderBackgroundScrollMode(HEADER_BACKGROUND_SCROLL_PARALLAX);
        setOnHeaderScrollChangedListener(new OnHeaderScrollChangedListener() {
            @Override
            public void onHeaderScrollChanged(float progress, int height, int scroll) {
                  
                height -= getActivity().getActionBar().getHeight();
  
                progress = (float) scroll / height;
                if (progress > 1f) progress = 1f;
  
                progress = (1 - (float) Math.cos(progress * Math.PI)) * 0.5f;
  
                ((MainActivity) getActivity())
                        .getFadingActionBarHelper()
                        .setActionBarAlpha((int) (255 * progress));
            }
        });
    }
  
    @Override
    public View onCreateHeaderView(LayoutInflater inflater, ViewGroup container) {
        // sets the header background of actionbar in expanded form
        return inflater.inflate(R.layout.fragment_header, container, false);
    }
  
    @Override
    public View onCreateContentView(LayoutInflater inflater, ViewGroup container) {
        // sets the main content below actionbar
        return inflater.inflate(R.layout.main_content, container, false);
    }
  
    @Override
    public View onCreateContentOverlayView(LayoutInflater inflater, ViewGroup container) {
        return null;
    }
}


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.achep.header2actionbar.FadingActionBarHelper;
  
public class MainActivity extends Activity {
  
    private FadingActionBarHelper mFadingActionBarHelper;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Initializing the header2actionbar FadingActionBarHelper
        mFadingActionBarHelper = new FadingActionBarHelper(getActionBar(),
                getResources().getDrawable(R.drawable.ab_background));
        // drawable sets the background of action bar in collapsed form
  
        if (savedInstanceState == null) {
            getFragmentManager().beginTransaction()
                    .add(R.id.container, new Fragment())
                    .commit();
        }
    }
  
    // getter for FadingActionBarHelper
    public FadingActionBarHelper getFadingActionBarHelper() {
        return mFadingActionBarHelper;
    }
}


Output:  

GitHub Repository: Click Here to Download the ZIP file



Last Updated : 18 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads