Adding custom view to a toolbar

Question

I am trying to add a custom view to the new toolbar (Lollipop) . But somehow the view gets added below the toolbar. It was working fine when I used actionBar.setCustomView but now after migrating to toolbar, it doesn't work. Below is the code. What changes should be done?

Fragment :

    toolbar = (Toolbar) getView().findViewById(R.id.toolbar);
    ((ActionBarActivity) getActivity()).setSupportActionBar(toolbar);

    toolbar.setTitle(getString(R.string.app));



    ActionBar actionBar = ((ActionBarActivity) getActivity())
            .getSupportActionBar();

    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); 

    LayoutInflater inflater = (LayoutInflater) getActivity()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    // inflate the view
    final View view = inflater.inflate(R.layout.actionbar_search, null);
    final ImageView searchIcon = (ImageView) view
            .findViewById(R.id.search_icon);
    final ClearableAutoCompleteTextView searchBox = (ClearableAutoCompleteTextView) view
            .findViewById(R.id.search_box);

    // start with the text view hidden in the action bar
    searchBox.setVisibility(View.INVISIBLE);
    searchIcon.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            toggleSearch(false, view);
        }
    });

    searchBox.setOnClearListener(new OnClearListener() {

        @Override
        public void onClear() {
            toggleSearch(true, view);
        }
    });

    searchBox.setOnItemClickListener(new AdapterView.OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {


        }

    });

toolbar.addView(view);              
// actionBar.setCustomView(view); // This worked previously 
//((ActionBarActivity)getActivity()).getSupportActionBar().setCustomView(view); //doesnt work with toolbar

score 49 · Accepted Answer · edited Jul 18 '19 at 11:07

49

With toolbar I've managed to achieve that like this:

setSupportActionBar(toolbar);
View logo = getLayoutInflater().inflate(R.layout.view_logo, null);
toolbar.addView(logo);

Or you can also just add your view to the toolbar xml, as it's just a ViewGroup. This way you'll have the preview in layout editor. No java code required.

edited Jul 18 '19 at 11:07

Vadim Kotov

8,084
8
48
62

answered Jan 09 '15 at 11:52

Jacek Kwiecień

12,397
20
85
157

7

I tried using the appcompat `Toolbar.addView()` but doesn't work. – patrickjason91 Apr 28 '15 at 03:02
^ try removing the setSupportActionBar() – Clocker Dec 09 '15 at 04:51
1

addView is not working for me either. @patrickjason91, did you find a solution? – Mark13426 Nov 03 '16 at 08:07

score 10 · Answer 2 · answered Aug 20 '15 at 14:03

10

Works great for me.

LayoutInflater mInflater=LayoutInflater.from(context);
View mCustomView = mInflater.inflate(R.layout.toolbar_custom_view, null);
toolbar.addView(mCustomView);

answered Aug 20 '15 at 14:03

DoronK

4,837
2
32
37

score 3 · Answer 3 · answered Aug 04 '17 at 13:21

Just inflate the view that you want to add passing the toolbar view as second parameter of the inflate method; In this way the call to "addView" is not necessary:

setSupportActionBar(toolbar);
View logo = getLayoutInflater().inflate(R.layout.view_logo, toolbar);

Adding custom view to a toolbar

3 Answers3

Linked