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
