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.

Solution 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

Solution 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

Solution 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);

Comments

[Manikandan]

Do u have any sample for this?

[Manikandan]

can u pls mail me the project?

[Aspicas]

ahaha Of course!! wait a moment please, now I give you github proyect

[Aspicas]

@Manikandan I have edited up, please try it and say me if it works

[Manikandan]

project cannot be imported to eclipse

[Aspicas]

yeah you can import witout problems, only download *.zip and import.

[Aspicas]

@Manikandan just donwload here, extract and import to eclipse: mega.co.nz/…

[Manikandan]

still it cannot be imported to eclipse

[Aspicas]

I can import without problems... please say me how you import.

[Manikandan]

I importing the project by File->new->project->android project from existing code

[Manikandan]

Let us continue this discussion in chat.

[Alaeddine Zidi]

check this sample . javatechig.com/android/…

[Manikandan]

Thank u so much, but how to add navigation drawer list items?

[Basher51]

@Aspicas: Thanks for the detailed and simple explanation. In my project, in addition to the navigation drawer, I want to show view pager on click of one of the drawer elements. For this, I created the necessary files, but in the onCreate of MainActivity when I instantiate the pageAdapter of the view pager, I get error. Do we need to implement FragmentActivity while creating view pager ?

[Aspicas]

mmm can you make a new question to post all details in your project and write me here "question link" to see your errors? @Basher51

[Basher51]

@Aspicas: I'm trying different ways. If I dont succeed Ill sure do. By the way I really like your answer and simple way you described how to use fragment. They default stub of android to create drawer looks more complicated. For view pager to work does the activity need to extend FragmentActivity or can we make it work in ActionBarActivity too. (Reason I ask is because, all examples on viewpager I saw the activity extends fragmentactivity)

[Aspicas]

nono, you cannot use ActionBarActivity to ViewPager, only fragments or similar object like FragmentActivity. @Basher51

[Joe Maher]

Why is this marked as correct answer? it doesn't answer the question at all, this merely modifies the default action bar associated with a navigation drawer it does not demonstrate how to create a custom action bar for a navigation drawer

[Aspicas]

@JoeMaher yes, I explain how to implement buttons on the ActionBar, it's the same situation with an Image, I wrote it on > Now we going to add buttons on ActionBar (on your way user image)