Search code examples
androidmenuandroid-actionbar

How to create custom actionbar in android?


I want to create custom actionbar in android, this is my simple code :

public class MainActivity extends Activity {

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

    public void menubar(){

        ActionBar mActionBar = getActionBar();
        LayoutInflater inflater = getLayoutInflater();

        View mCustomView    = inflater.inflate(R.layout.menu_bar, null);
        ImageButton button  = (ImageButton) mCustomView.findViewById(R.id.bt_menu);
        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Clicked!",Toast.LENGTH_LONG).show();
            }
        });

        mActionBar.setCustomView(mCustomView);
        mActionBar.setDisplayShowCustomEnabled(true);

    }

}

but when running it displays error like this :

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.app.ActionBar.setCustomView(android.view.View)' on a null object reference
        at dot.com.coba.MainActivity.menubar(MainActivity.java:39)
        at dot.com.coba.MainActivity.onCreate(MainActivity.java:21)
    

Solution

  • Firstly, please read this Android Developers Blog post.
    Note, that now, you should use Toolbar instead of ActionBar.

    In this release, Android introduces a new Toolbar widget. This is a generalization of the Action Bar pattern that gives you much more control and flexibility. Toolbar is a view in your hierarchy just like any other, making it easier to interleave with the rest of your views, animate it, and react to scroll events. You can also set it as your Activity’s action bar, meaning that your standard options menu actions will be display within it.

    In other words, the ActionBar now became a special kind of Toolbar. This is an excerpt from Google's official Material Design spec document.

    The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.


    How to setup Toolbar in your project?
    1). In your build.gradle file:

    compile 'com.android.support:appcompat-v7:22.2.0'
    

    2). Extend your Activity from AppCompatActivity:

    public class MyActivity extends AppCompatActivity{
    

    3). Create link to your Toolbar as class member of Activity or use ViewHolder pattern:

    public class MyActivity extends AppCompatActivity{
        //Some code
    
        private Toolbar mActionBarToolbar;
    
        //Some code
    }
    

    4). Create new method getActionBarToolbar() in MyActivity

    protected Toolbar getActionBarToolbar() {
        if (mActionBarToolbar == null) {
            mActionBarToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
            if (mActionBarToolbar != null) {
                setSupportActionBar(mActionBarToolbar);
            }
        }
        return mActionBarToolbar;
    }
    

    5). Override method setContentView of MyActivity:

    @Override
    public void setContentView(int layoutResID) {
        super.setContentView(layoutResID);
        getActionBarToolbar();
    }
    

    6). Create file res/layout/toolbar_actionbar.xml:

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:myapp="http://schemas.android.com/apk/res-auto"
        myapp:theme="@style/ActionBarThemeOverlay"
        myapp:popupTheme="@style/ActionBarPopupThemeOverlay"
        android:id="@+id/toolbar_actionbar"
        android:background="@null"
        myapp:titleTextAppearance="@style/ActionBar.TitleText"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize" />
    

    And set your values to properties myapp:theme, myapp:popupTheme, myapp:titleTextAppearance or remove it.

    7). Include in layout of your activity(for me it layout_my_activity.xml):

    <include layout="@layout/toolbar_actionbar" />
    

    8). Run your project.