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

Answer 1

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.

Answer 2

Works great for me.

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

Answer 3

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