How to Use FadingActionBar Library in Android App?
FadingActionBar is a library that implements a nice fading action bar effect. ActionBar fades gradually as we start scrolling down and turns completely opaque when scrolled above. It also supports the three most commonly used action bar implementations: stock (API 11+), ActionBarSherlock, and ActionBarCompat. 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.
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 the Gradle Scripts > build.gradle(Module:app), add the library in the dependencies section, and sync the project.
dependencies { implementation 'com.github.manuelpeinado.fadingactionbar:fadingactionbar:3.1.2' }
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
<? xml version = "1.0" encoding = "utf-8" ?> <!--activity_main contains the layout below action bar--> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:background = "?android:attr/windowBackground" android:orientation = "vertical" > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:padding = "22dp" android:textSize = "18sp" android:text = "@string/gfg" android:textAppearance = "@android:style/TextAppearance.Medium" /> </ LinearLayout > |
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. --> < style name = "Widget" /> < style name = "Widget.ActionBar" parent = "@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse" /> < style name = "Widget.Light" /> < style name = "Widget.Light.ActionBar" parent = "@android:style/Widget.Holo.Light.ActionBar.Solid" /> <!--Transparent background--> < style name = "Widget.ActionBar.Transparent" > < item name = "android:background" >@android:color/transparent</ item > </ style > < style name = "Widget.Light.ActionBar.Transparent" > < item name = "android:background" >@android:color/transparent</ item > </ style > </ resources > |
Step 5: Working with the themes.xml file
- Navigate to the app > res > values
- Right-click on values and select New > Values Resource File
- A dialog box will appear now, then add the File Name as themes and press OK.
- Below is the code for the themes.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < resources > < style name = "AppTheme" parent = "@android:style/Theme.Holo.Light.DarkActionBar" > < item name = "android:actionBarStyle" >@style/Widget.ActionBar</ item > </ style > <!-- Making the ActionBar Translucent--> < style name = "AppTheme.TranslucentActionBar" > < item name = "android:actionBarStyle" >@style/Widget.ActionBar.Transparent</ item > < item name = "android:windowActionBarOverlay" >true</ item > < item name = "android:windowContentOverlay" >@null</ item > </ style > < style name = "AppTheme.Light.TranslucentActionBar" parent = "@android:style/Theme.Holo.Light" > < item name = "android:actionBarStyle" > @style/Widget.Light.ActionBar.Transparent</ item > < item name = "android:windowActionBarOverlay" >true</ item > < item name = "android:windowContentOverlay" >@null</ item > </ style > </ resources > |
Step 6: Working with the 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 header and press OK.
- Below is the code for the header.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?> <!-- Header image --> < ImageView xmlns:android = "http://schemas.android.com/apk/res/android" android:id = "@+id/image_header" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:padding = "34dp" android:adjustViewBounds = "true" android:background = "#ffffff" android:scaleType = "centerCrop" android:src = "@drawable/gfglongpng" /> <!--Add header image source in android:src--> |
Step 7: Working with the AndroidManifest.xml file
Navigate to app > manifests > AndroidManifests.xml and add the Translucent Theme inside the MainActivity tag.
android:theme="@style/AppTheme.TranslucentActionBar"
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.manuelpeinado.fadingactionbar.FadingActionBarHelper; // extend the MainActivity to Activity // instead of AppCompatActivity public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); // Adding FadingActionBar in the Activity FadingActionBarHelper helper = new FadingActionBarHelper() .actionBarBackground(R.drawable.ab_background) // actionBarBackground sets the background // of actionBar in collapsed form .headerLayout(R.layout.header) // headerLayout sets the header layout of // actionBar in expanded form .contentLayout(R.layout.activity_main); // contentLayout sets the main // content below action bar setContentView(helper.createView( this )); helper.initActionBar( this ); } } |
Output:
GitHub Repository: Fading Action Bar Library