How to create a custom ActionBar with a navigation drawer?

Question

Hi I want to create a custom ActionBar with navigation drawer in my app. In that i want to show the face of the person who logged in my app inside a circle in right side. and the navigation bar in left side.

.

It didn't worked with navigation drawer before.

Answer 1

@Manikandan Try it:

The first thing you must to do is implement and create navigation drawer:

/res/layout/activity_main.xml

<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" >

    <!-- menu-->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- slide menu -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#111"
        android:choiceMode="singleChoice" />

</android.support.v4.widget.DrawerLayout>

MainActivity.java

public class MainActivity extends ActionBarActivity {

    private String[] optionsMenu;
    private DrawerLayout drawerLayout;
    private ListView drawerList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        opcionesMenu = new String[] {"Option 1", "Option 2", "Option 3"};
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawerList = (ListView) findViewById(R.id.left_drawer);

        drawerList.setAdapter(new ArrayAdapter<String>(
                getSupportActionBar().getThemedContext(),
            android.R.layout.simple_list_item_1, optionssMenu));
    }

    //...
}

For each item on your navigationDrawer menu you need add one Layout and one fragment.

fragment_1.xml (or others items on menu, fragment_2, fragment_3....)

<?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="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/TxtDetalle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fragment1" />

</LinearLayout>

and its associated class for each FragmentLayout

Fragment1.java (fragment2,Fragment3, Fragment4... )

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment {

    @Override
    public View onCreateView(
        LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_1, container, false);
    }
}

We have set the menu and fragments associated with each option.The following will implement the logic required to respond to events menu to change the form of fragment pressing each option.

This is done by implementing the onItemClick ListView event menu control, logic is added to the end of the onCreate () method of our core business.

@Override
protected void onCreate(Bundle savedInstanceState) {

    //...

    drawerList.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView parent, View view,
                int position, long id) {

            Fragment fragment = null;

            switch (position) {
                case 1:
                    fragment = new Fragment1();
                    break;
                case 2:
                    fragment = new Fragment2();
                    break;
                case 3:
                    fragment = new Fragment3();
                    break;
            }

            FragmentManager fragmentManager =
                getSupportFragmentManager();

            fragmentManager.beginTransaction()
                .replace(R.id.content_frame, fragment)
                .commit();

            drawerList.setItemChecked(position, true);

            tituloSeccion = opcionesMenu[position];
            getSupportActionBar().setTitle(tituloSeccion);

            drawerLayout.closeDrawer(drawerList);
        }
    });
}

Okay, we have implemented the basic functionality, now i goint to add open and close icon.

on MainActivity too.

@Override
protected void onCreate(Bundle savedInstanceState) {

    //...

    tituloApp = getTitle();

    drawerToggle = new ActionBarDrawerToggle(this,
        drawerLayout,
        R.drawable.ic_navigation_drawer,
        R.string.drawer_open,
        R.string.drawer_close) {

        public void onDrawerClosed(View view) {
            getSupportActionBar().setTitle(tituloSeccion);
            ActivityCompat.invalidateOptionsMenu(MainActivity.this);
        }

        public void onDrawerOpened(View drawerView) {
            getSupportActionBar().setTitle(tituloApp);
            ActivityCompat.invalidateOptionsMenu(MainActivity.this);
        }
    };

    drawerLayout.setDrawerListener(drawerToggle);
}

Now we going to add buttons on ActionBar (on your way user image)*

on your MainActivity too

@Override
public boolean onPrepareOptionsMenu(Menu menu) {

    boolean menuAbierto = drawerLayout.isDrawerOpen(drawerList);

    if(menuAbierto)
        menu.findItem(R.id.action_search).setVisible(false);
    else
        menu.findItem(R.id.action_search).setVisible(true);

    return super.onPrepareOptionsMenu(menu);
}

With this we meet most of the recommendations of the design guide, but we still have we allow the user to open by clicking on the application icon from the action bar menu.

To do this, at the end of onCreate () method will qualify pulsation calling setDisplayHomeAsUpEnabled icon () and setHomeButtonEnabled (), and add the event onOptionsItemSelected () (in charge of processing the keystrokes on the action bar, an initial call to onOptionsItemSelected method () of ActionBarDrawerToggle object created above, so if it returns true (mean who has managed a click on the application icon) directly come out of this method.

MainActivity too

public void onCreate(Bundle savedInstanceState) {

    //...

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }

    //...
}

Last for finish add this method:

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    drawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    drawerToggle.onConfigurationChanged(newConfig);
}

EDIT ALL PROJECT:

https://github.com/sgolivernet/curso-android-src/tree/develop/android-navigationdrawer

Answer 2

You can add a custom view to the action bar

final ActionBar actionBar = getActionBar();
actionBar.setCustomView(R.layout.actionbar_custom_view_home);

add put your imageView and the title you'd like

Answer 3

getSupportActionBar().setDisplayShowHomeEnabled(false); getSupportActionBar().setDisplayShowTitleEnabled(false);

    LayoutInflater mInflater = LayoutInflater.from(this);

    View mCustomView = mInflater.inflate(R.layout.custom_action_bar_back, null);


    getSupportActionBar().setCustomView(mCustomView);
    getSupportActionBar().setDisplayShowCustomEnabled(true);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);