Last updated on March 13th, 2020 at 11:55 am

In my last post i explain how to create a navigation drawer in android application now in this post i update my code and update my navigation drawer. In this i make my status bar transparent as you see in most of google aps like youtube, play store app etc. Please check the video to check what we are going to make hope it was easy to you to understand.

Code: Transparent Status bar for navigation drawer

Step 1: Create A new Project and open build.gradle , add dependencies to it


compile 'com.android.support:design:23.1.1'

view raw

design depencency

hosted with ❤ by GitHub

Step 2: Create create custom toolbar  toolbar.xml file inside res =>layout 


<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="@style/BackArrow"
android:background="?attr/colorPrimary">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:gravity="center"
android:id="@+id/titletool"
android:textSize="16sp"
android:textStyle="bold"/>
</android.support.v7.widget.Toolbar>

view raw

semi transparent navigation drawer toolbar

hosted with ❤ by GitHub

Step 3: Add some color inside color.xml file before we start


<?xml version="1.0" encoding="utf-8"?>
<resources>
<!– App color –>
<color name="colorPrimaryDark">#2f435b</color>
<color name="colorPrimary">#2d3d54</color>
<color name="navigationBar">#25364a</color>
<color name="white">#ffffff</color>
<color name="green">#00a900</color>
<color name="lightBlue">#00bcd4</color>
<color name="lightGreen">#00c7a0</color>
<color name="lightBlack">#5a7785</color>
<color name="greenLight">#36bb9e</color>
<color name="greenLightX2">#49d0b3</color>
<color name="red">#F44336</color>
<color name="textDark">#111e2d</color>
<color name="blackBg">#242424</color>
<color name="lightBg">#657790</color>
<color name="divider">#cccccc</color>
<color name="grey">#e3e3e3</color>
<color name="iconBlue">#33b5e5</color>
<color name="black">#000</color>
</resources>

view raw

Semi Transparent navigation Drawer Color

hosted with ❤ by GitHub

Step 4:  Open  your  style.xml file & add following styles to it


<resources>
<!– Base application theme. –>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!– Customize your theme here. –>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorPrimary</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@color/black</item>
</style>
<style name="BackArrow" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColorSecondary">@color/black</item>
<item name="android:textColorPrimary">@color/black</item>
<item name="colorPrimary">@color/white</item>
</style>
</resources>

view raw

Semi Transparent navigation Drawer Style

hosted with ❤ by GitHub

also in your  String.xml file & add following string to it.


<resources>
<string name="app_name">Semi Transparent Navigation Drawer</string>
<string name="action_settings">Settings</string>
<string name="drawer_open">open</string>
<string name="drawer_close">close</string>
</resources>

view raw

Semi Transparent navigation Drawer String

hosted with ❤ by GitHub

Step 5: Now create new xml file which we pass in listview to show menu on slide


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:text="a"
android:padding="8dp"
android:layout_gravity="center"/>
</LinearLayout>

view raw

Semi Transparent navigation Drawer DrawerItem

hosted with ❤ by GitHub

Step 6: Create one more  Header.xml file to show header view in drawer item.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_gravity="center"
android:background="@color/colorPrimary"
android:orientation="vertical"
android:padding="16dp"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:layout_margin="8dp"
android:src="@drawable/aaa" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_margin="5dp"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="5"
android:layout_gravity="center"
android:textSize="15sp"
android:gravity="center"
android:textColor="@color/white"
android:textStyle="bold"
android:padding="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="My Post"
android:layout_gravity="center"
android:textSize="13sp"
android:textColor="@color/white"
android:gravity="center"
android:padding="5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="50"
android:gravity="center"
android:layout_gravity="center"
android:textSize="15sp"
android:textColor="@color/white"
android:textStyle="bold"
android:padding="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Total Posts"
android:gravity="center"
android:layout_gravity="center"
android:textSize="13sp"
android:textColor="@color/white"
android:padding="5dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Shubham Mahajan"
android:layout_gravity="center"
android:textSize="16sp"
android:textColor="@color/white"
android:textStyle="bold"
android:padding="8dp"
android:layout_margin="5dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19 yrs"
android:layout_gravity="center"
android:textSize="15sp"
android:textColor="@color/white"
android:textStyle="bold"
android:padding="8dp" />
</LinearLayout>
</LinearLayout>

view raw

semi transparent navigation drawer header

hosted with ❤ by GitHub

Step 7: now open  activity_main.xml file and add following code.


<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<include layout="@layout/toolbar"
android:id="@+id/toolbar"/>
</RelativeLayout>
<ListView
android:id="@+id/left_drawer"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/white"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

view raw

Semi Transparent navigation Drawer activity_main

hosted with ❤ by GitHub

Step 8: Last but important step where we connect each and every thing.


package com.semitransparentnavigationdrawer;
import android.content.Context;
import android.content.SharedPreferences;
import android.content.res.Configuration;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;
private CharSequence mDrawerTitle;
private CharSequence mTitle;
private String[] mPlanetTitles;
Toolbar toolbar;
private ArrayAdapter arrayAdapter;
String[] Draw_item = {"Profile", "Trinity Tuts", "Trinity tips", "Logout"};
private ActionBar actionBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTitle = mDrawerTitle = getTitle();
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
actionBar = getSupportActionBar();
TextView titletool = (TextView) findViewById(R.id.titletool);
titletool.setText("Semi Transparent Navigation Drawer");
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// Set paddingTop of toolbar to height of status bar.
// Fixes statusbar covers toolbar issue
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
}
LayoutInflater inflater = getLayoutInflater();
View header = inflater.inflate(R.layout.header, mDrawerList, false);
mDrawerList.addHeaderView(header);
arrayAdapter = new ArrayAdapter(MainActivity.this, R.layout.draweritem, R.id.tvName, Draw_item);
mDrawerList.setAdapter(arrayAdapter);
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
// ActionBarDrawerToggle ties together the the proper interactions
// between the sliding drawer and the action bar app icon
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
toolbar, /* nav drawer image to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description for accessibility */
R.string.drawer_close /* "close drawer" description for accessibility */
) {
public void onDrawerClosed(View view) {
//getSupportActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
//getSupportActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
//getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//getSupportActionBar().setHomeButtonEnabled(true);
mDrawerToggle.syncState();
}
/* Called whenever we call invalidateOptionsMenu() */
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// The action bar home/up action should open or close the drawer.
// ActionBarDrawerToggle will take care of this.
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return false;
}
/* The click listner for ListView in the navigation drawer */
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Log.e("position", "——————" + position);
}
}
/**
* When using the ActionBarDrawerToggle, you must call it during
* onPostCreate() and onConfigurationChanged()…
*/
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Pass any configuration change to the drawer toggls
mDrawerToggle.onConfigurationChanged(newConfig);
}
public int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
}

view raw

Semi Transparent navigation Drawer MainActivity.java

hosted with ❤ by GitHub

Hope this post is helpfull 🙂