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.
