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