GlassActionBar is an Android library that adds a glassy look to the action bar. It makes the view behind the action bar translucent, giving it a beautiful aesthetic. It also works with the three most popular action bar implementations: stock (API 11+), ActionBarCompat, and ActionBarSherlock. In this article, we will use the Java programming language to integrate this library into an Android app. A sample GIF is provided below to give you an idea of what we will 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.glassactionbar:glassactionbar:0.3.0' }
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
< com.cyrilmottier.android.translucentactionbar.NotifyingScrollView     android:layout_width = "match_parent"     android:layout_height = "match_parent" >       <!--This layout contains the main layout below action bar-->     <!--This LinearLayout contains children in vertical order-->         < LinearLayout         android:layout_width = "match_parent"         android:layout_height = "wrap_content"         android:orientation = "vertical" >           < ImageView             android:layout_width = "match_parent"             android:layout_height = "wrap_content"             android:layout_gravity = "top"             android:scaleType = "centerCrop"             android:src = "@drawable/gfgicon" />           < TextView             android:layout_width = "match_parent"             android:layout_height = "wrap_content"             android:background = "#fff"             android:padding = "15dp"             android:text = "@string/gfg"             android:textAppearance = "@android:style/TextAppearance.Medium" />       </ LinearLayout >     </ com.cyrilmottier.android.translucentactionbar.NotifyingScrollView > |
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 > Â Â Â Â Â Â Â Â <!--Adding background for GlassActionBar--> Â Â Â Â < style name = "TranslucentActionBar" parent = "android:Widget.ActionBar" > Â Â Â Â Â Â Â Â < item name = "android:background" >@drawable/ab_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:Theme.Holo.Light" > Â Â Â Â </ style > Â Â Â Â Â Â <!--Adding translucent theme for glassy effect --> Â Â Â Â < style name = "AppTheme.TranslucentActionBar" > Â Â Â Â Â Â Â Â < item name = "android:windowActionBarOverlay" >true</ item > Â Â Â Â Â Â Â Â < item name = "android:actionBarStyle" >@style/TranslucentActionBar</ item > Â Â Â Â </ style > Â Â </ resources > |
Step 6: Working with the AndroidManifest.xml file
Navigate to app > manifests > AndroidManifests.xml  and add Translucent Theme for action bar in the activity.Â
android:theme="@style/AppTheme.TranslucentActionBar"
Step 7: 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.Â
Java
import android.app.Activity; import android.os.Bundle;   import com.manuelpeinado.glassactionbar.GlassActionBarHelper;   public class MainActivity extends Activity {     private GlassActionBarHelper helper;       @Override     protected void onCreate(Bundle savedInstanceState) {         super .onCreate(savedInstanceState);           // Adding glass action bar view to the activity         helper = new GlassActionBarHelper().contentLayout(R.layout.activity_main);         setContentView(helper.createView( this ));     } } |
Output:Â
Github Repository for the following project can be found here.