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     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 HeaderFragmentpublic 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
