How To Add Custom Imageview To Actionbardrawertoggle

In this tutorial we'll implement a Navigation Drawer in our android application. Android navigation drawer is a sliding menu and information technology's an important UI component. You will see navigation drawer in about of the android applications, it's like navigation menu bars in the websites.

Android Navigation Drawer

Android Navigation Drawer is a sliding left menu that is used to display the important links in the awarding. Navigation drawer makes it piece of cake to navigate to and fro between those links. It'southward not visible by default and it needs to opened either past sliding from left or clicking its icon in the ActionBar.

In broader term, Navigation Drawer is an overlay console, which is a replacement of an activity screen which was specifically dedicated to show all the options and links in the application.

In this android navigation drawer tutorial we'll implement the navigation drawer using the Drawer Layout API present in Android Support Library. We'll show three fragment views that can be opened from the drawer items.

Android Navigation Drawer Projection Structure

android navigation drawer

Android Navigation Drawer Example

To implement the Navigation Drawer we get-go need to add android.support.v4.widget.DrawerLayout as the root of the activity layout as shown below.

activity_main.xml

                          <android.support.v4.widget.DrawerLayout      xmlns:android="https://schemas.android.com/apk/res/android"     android:id="@+id/drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent" >       <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical">      <LinearLayout         android:id="@+id/container_toolbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical">          <include             android:id="@+id/toolbar"             layout="@layout/toolbar" />     </LinearLayout>       <FrameLayout         android:id="@+id/content_frame"         android:layout_width="match_parent"         android:layout_height="match_parent" />      </LinearLayout>      <ListView         android:id="@+id/left_drawer"         android:layout_width="240dp"         android:layout_height="match_parent"         android:layout_gravity="outset"         android:background="#FFFFFF"         android:choiceMode="singleChoice"         android:divider="@android:color/darker_gray"         android:dividerHeight="1dp" />  </android.support.v4.widget.DrawerLayout>

The card options in the navigation drawer are stored in the form of a ListView. Each option opens in the FrameLayout.

We've used a ToolBar in identify of an ActionBar here. ToolBar has been introduced since Android five.0 every bit a generalisation of ActionBar. Information technology gives united states of america more than control and flexibility to modify and its easier to interleave with other views in the hierarchy.

The layout ToolBar is defined in the xml layout given below.

toolbar.xml

                          <android.back up.v7.widget.Toolbar xmlns:android="https://schemas.android.com/apk/res/android"     xmlns:local="https://schemas.android.com/apk/res-auto"     android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:minHeight="?attr/actionBarSize"     android:background="?attr/colorPrimary"     local:theme="@way/ThemeOverlay.AppCompat.Dark.ActionBar"     local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Nosotros need to use the Theme Theme.AppCompat.NoActionBar in the styles.xml when using Toolbars.

The layout for the ListView rows in the Navigation Drawer is given below.

list_view_item_row.xml

                          <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:background="?android:attr/activatedBackgroundIndicator"     android:minHeight="?android:attr/listPreferredItemHeightSmall"     android:padding="10dp" >      <ImageView         android:id="@+id/imageViewIcon"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentLeft="true"         android:layout_alignParentTop="truthful"         android:paddingRight="10dp" />      <TextView         android:id="@+id/textViewName"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_centerVertical="true"         android:layout_toRightOf="@+id/imageViewIcon"         android:paddingRight="10dp"         android:text="Item Proper name"         android:textColor="@android:color/blackness"         android:textAppearance="?android:attr/textAppearanceListItemSmall"         />  </RelativeLayout>

The navigation drawer items are put in a cord assortment in the strings.xml file as shown below.

strings.xml

                          <string-array name="navigation_drawer_items_array">         <item>Connect</item>         <item>Fixtures</particular>         <item>Table</detail>     </string-assortment>

The DataModel.coffee course is used to define the objects for the drawer list items.

DataModel.java

                          packet com.journaldev.navigationdrawer;  public class DataModel {      public int icon;     public String name;      // Constructor.     public DataModel(int icon, String name) {          this.icon = icon;         this.proper noun = name;     } }

The drawer items are stored in the course of a ListView. Hence we need to use an Adapter Class to provide that data to the activity class.

DrawerItemCustomAdapter.java

                          package com.journaldev.navigationdrawer;  import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView;  public course DrawerItemCustomAdapter extends ArrayAdapter<DataModel> {      Context mContext;     int layoutResourceId;     DataModel data[] = null;      public DrawerItemCustomAdapter(Context mContext, int layoutResourceId, DataModel[] data) {          super(mContext, layoutResourceId, information);         this.layoutResourceId = layoutResourceId;         this.mContext = mContext;         this.data = data;     }      @Override     public View getView(int position, View convertView, ViewGroup parent) {          View listItem = convertView;          LayoutInflater inflater = ((Activeness) mContext).getLayoutInflater();         listItem = inflater.inflate(layoutResourceId, parent, false);          ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon);         TextView textViewName = (TextView) listItem.findViewById(R.id.textViewName);          DataModel binder = data[position];           imageViewIcon.setImageResource(folder.icon);         textViewName.setText(folder.proper name);          return listItem;     } }

The MainActivity.java source code is given below.

MainActivity.coffee

                          parcel com.journaldev.navigationdrawer;  import android.back up.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.back up.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.bone.Bundle; import android.support.v7.widget.Toolbar; import android.util.Log; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import android.widget.ListView;  public class MainActivity extends AppCompatActivity {      private Cord[] mNavigationDrawerItemTitles;     private DrawerLayout mDrawerLayout;     private ListView mDrawerList;     Toolbar toolbar;     individual CharSequence mDrawerTitle;     private CharSequence mTitle;     android.support.v7.app.ActionBarDrawerToggle mDrawerToggle;      @Override     protected void onCreate(Parcel savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         mTitle = mDrawerTitle = getTitle();         mNavigationDrawerItemTitles= getResources().getStringArray(R.array.navigation_drawer_items_array);         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);         mDrawerList = (ListView) findViewById(R.id.left_drawer);          setupToolbar();          DataModel[] drawerItem = new DataModel[3];          drawerItem[0] = new DataModel(R.drawable.connect, "Connect");         drawerItem[1] = new DataModel(R.drawable.fixtures, "Fixtures");         drawerItem[ii] = new DataModel(R.drawable.table, "Table");         getSupportActionBar().setDisplayHomeAsUpEnabled(false);         getSupportActionBar().setHomeButtonEnabled(truthful);          DrawerItemCustomAdapter adapter = new DrawerItemCustomAdapter(this, R.layout.list_view_item_row, drawerItem);         mDrawerList.setAdapter(adapter);         mDrawerList.setOnItemClickListener(new DrawerItemClickListener());         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);         mDrawerLayout.setDrawerListener(mDrawerToggle);         setupDrawerToggle();      }      private class DrawerItemClickListener implements ListView.OnItemClickListener {          @Override         public void onItemClick(AdapterView<?> parent, View view, int position, long id) {             selectItem(position);         }      }      private void selectItem(int position) {          Fragment fragment = nil;          switch (position) {             case 0:                 fragment = new ConnectFragment();                 pause;             instance 1:                 fragment = new FixturesFragment();                 break;             case 2:                 fragment = new TableFragment();                 break;              default:                 break;         }          if (fragment != zippo) {             FragmentManager fragmentManager = getSupportFragmentManager();             fragmentManager.beginTransaction().supervene upon(R.id.content_frame, fragment).commit();              mDrawerList.setItemChecked(position, truthful);             mDrawerList.setSelection(position);             setTitle(mNavigationDrawerItemTitles[position]);             mDrawerLayout.closeDrawer(mDrawerList);          } else {             Log.e("MainActivity", "Error in creating fragment");         }     }      @Override     public boolean onOptionsItemSelected(MenuItem item) {          if (mDrawerToggle.onOptionsItemSelected(particular)) {             return truthful;         }          return super.onOptionsItemSelected(item);     }      @Override     public void setTitle(CharSequence title) {         mTitle = title;         getSupportActionBar().setTitle(mTitle);     }      @Override     protected void onPostCreate(Bundle savedInstanceState) {         super.onPostCreate(savedInstanceState);         mDrawerToggle.syncState();     }      void setupToolbar(){         toolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(toolbar);         getSupportActionBar().setDisplayShowHomeEnabled(true);     }      void setupDrawerToggle(){         mDrawerToggle = new android.support.v7.app.ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.cord.app_name, R.string.app_name);         //This is necessary to modify the icon of the Drawer Toggle upon country change.         mDrawerToggle.syncState();     } }

In the above code getSupportActionBar().setDisplayHomeAsUpEnabled(false); is used to hide the default back button.

In this lawmaking nosotros've used a DrawerItemClickListener Grade that loads the respective fragment of the listing detail clicked using a FragmentManager. Also the the title of the ToolBar is changed to the list item clicked using setTitle(mNavigationDrawerItemTitles[position]);.

The fragment classes and their respective layouts are given below.

ConnectFragment.java

                          package com.journaldev.navigationdrawer;  import android.bone.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  public course ConnectFragment extends Fragment {      public ConnectFragment() {     }      @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {          View rootView = inflater.inflate(R.layout.fragment_connect, container, false);          return rootView;     }  }

The layout of the above fragment is defined below.

fragment_connect.xml

                          <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"     xmlns:tools="https://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical">       <TextView         android:id="@+id/characterization"         android:layout_alignParentTop="true"         android:layout_marginTop="100dp"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:gravity="center_horizontal"         android:textSize="45dp"         android:text="Connect"         android:textStyle="bold"/>      <TextView         android:layout_below="@id/characterization"         android:layout_centerInParent="true"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:textSize="12dp"         android:layout_marginTop="10dp"         android:gravity="center_horizontal"         android:text="Edit fragment_connect.xml to alter the advent"         android:id="@+id/textView2" />  </RelativeLayout>

The other two items are defined in exactly the same way as above hence we're skipping it hither.

Navigation Drawer Android Example Output

Below is the output produced by our navigation drawer android example application.

android navigation drawer example

This brings an end to android navigation drawer example tutorial. You tin download the final Android Navigation Drawer Projection from the beneath link.