How to Use Header2ActionBar Library in Android App?
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 >
< style name = "AppTheme" parent = "android:Theme.Holo.Light.DarkActionBar" >
< item name = "android:windowActionBarOverlay" >true</ item >
< item name = "android:windowContentOverlay" >@null</ item >
< 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" >
< 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" >
< 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" />
< LinearLayout
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "bottom|right|end"
android:orientation = "vertical" >
< TextView
android:id = "@+id/title"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "TITLE" />
< 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;
public class Fragment extends HeaderFragment {
@Override
public void onAttach(Activity activity) {
super .onAttach(activity);
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) {
return inflater.inflate(R.layout.fragment_header, container, false );
}
@Override
public View onCreateContentView(LayoutInflater inflater, ViewGroup container) {
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);
mFadingActionBarHelper = new FadingActionBarHelper(getActionBar(),
getResources().getDrawable(R.drawable.ab_background));
if (savedInstanceState == null ) {
getFragmentManager().beginTransaction()
.add(R.id.container, new Fragment())
.commit();
}
}
public FadingActionBarHelper getFadingActionBarHelper() {
return mFadingActionBarHelper;
}
}
|
Output:
GitHub Repository: Click Here to Download the ZIP file
Last Updated :
18 Jul, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...