How to use the Toolbar widget?

5

I've already seen the android's own documentation already done all the steps of other forums and still could not use toolbar in my screen layout.

  

How should I proceed step-by-step with regard to implementation and use in my   layout or toobar?

    
asked by anonymous 01.11.2014 / 16:54

1 answer

16

To use Toolbar , you have two options: / p>

  • If your application needs to support versions then you should use android.support.v7.widget.Toolbar in your layouts;
  • Otherwise just use android.widget.Toolbar .
  • To begin with, unfortunately, Toolbar must be in all layouts. For issues of theme and position attribute settings. If you instantiate Toolbar and manually add it to the layout it can be tricky to have to set up your position and add all the attributes to stylize it.

    Remembering that in this response, you need to import the library from appcompat v7 21 , or adding the jar if it is in Eclipse, or importing the dependency if it is in Android Studio. And since appcompat depends on support library v4 , it needs to be added as well.

    Since I'm using Android Studio, I use these two dependencies:

     compile 'com.android.support:appcompat-v7:21.+'
     compile 'com.android.support:support-v4:21.+'
    

    Warning , if you are using the Toolbar as a substitute for the Action Bar , you must use a theme without ActionBar . To do this, use the final themes NoActionBar , both appcompat and version 21. One of the themes I use appcompat for this purpose is Theme.AppCompat.Light.NoActionBar .

    An example layout using Toolbar is:

    <?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">
    
        <include android:id="@+id/toolbar" layout="@layout/toolbar_support" />
    
        <FrameLayout
            android:id="@+id/am_frame_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </LinearLayout>
    

    In this case, I used include for reuse ( DRY ), assuming that Toolbar will always have the same attributes in all layouts, it does not make sense to repeat everywhere.

    His position may vary in layout, and this is one of the advantages of using Toolbar .

    Definition of Toolbar in include :

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_height="@dimen/ab_height"
        android:layout_width="match_parent"
        android:minHeight="@dimen/ab_height"
        android:background="?attr/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    

    If you are using android.widget.Toolbar , the definition would be:

    <android.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_height="@dimen/ab_height"
        android:layout_width="match_parent"
        android:minHeight="@dimen/ab_height"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.Material.ActionBar"
        android:popupTheme="@style/ThemeOverlay.Material.Light" />
    

    In Activity , some things need to be done.

    If you want to use Toolbar as a substitute for ActionBar , simply use the setSupportActionBar (appcompat) or setActionBar (Android 21) method after setContentView . If you are using appcompat , it is primordial that your Activity is a subclass of ActionBarActivity .

    Example:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    
        setContentView(R.layout.activity_main);
    
        // Dando a responsabilidade de Action Bar para o Toolbar
        Toolbar tlb = findViewById(R.id.toolbar);
    
        setSupportActionBar(tlb);
        // ou
        //setActionBar(tlb);
    
        // Apos isso, podera configurar sua Action Bar normalmente
        // Por exemplo:
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
    

    To use setSupportActionBar or setActionBar , you must use a theme that does not have Action Bar , otherwise you will have problems. Because you are adding a Action Bar to a Window that already has one. To do this use one of the themes with suffix *.NoActionBar (eg: Theme.AppCompat.NoActionBar , Theme.Material.NoActionBar and etc ...)

    Regarding menu construction, using setSupportActionBar or setActionBar , the other callbacks ( onCreateOptionsMenu , onOptionsItemSelected and etc ...) continue to be called equally. So you do not need to make any changes to the code.

    If you are not setting Toolbar to ActionBar , you must use Toolbar.inflateMenu method to add menu items to Toolbar .

    Some important remarks

  • If you use one of the themes without Action Bar (eg: Theme.AppCompat.Light.NoActionBar ), and do not set Toolbar using setSupportActionBar or setActionBar , NullPointerException in calls of getSupportActionBar or getActionBar .

  • If you are using Action Mode with Toolbar at the top of the screen, Toolbar is not superimposed by the Action Mode bar , like% pattern. The Action Mode bar is above Action Bar . To avoid this problem I recommend that you hide Toolbar during Action Mode .

    An example would be:

    @Override
    public boolean onCreateActionMode(ActionMode actionMode, Menu menu) {
        MenuInflater inflater = actionMode.getMenuInflater();
    
        inflater.inflate(R.menu.custom_deck_cab, menu);
    
        Toolbar tlb = findViewById(R.id.toolbar);        
        tlb.setVisibility(View.GONE);
    
        return true;
    }
    
    @Override
    public void onDestroyActionMode(ActionMode actionMode) {
        Toolbar tlb = findViewById(R.id.toolbar);        
        tlb.setVisibility(View.VISIBLE);
    }
    
  • In this new version, methods related to navigation modes of Toolbar (eg: Action Bar , setNavigationMode and setSelectedNavigationItem ) have been deprecated, so if you use tabbed browsing or list ( setListNavigationCallbacks or NAVIGATION_MODE_LIST ), you should migrate to NAVIGATION_MODE_TABS .

    This migration can be done by adding Toolbar to View's , since it is a Toolbar . For tabbed browsing, you can add a ViewGroup , or similar, in the PagerTabStrip . If you're using list browsing, you can add a Toolbar to Spinner , and you'll be able to the same effect.

  • References:

  • link
  • link
  • 01.11.2014 / 18:45