Spinner in action bar with only icon but not the selected option

Question

I am working on a app with action bar for navigation. Now I am trying to add a Spinner to the ActionBar.

I am able to get my custom icon on the ActionBar. But when I add entries into the spinner, the icon is hidden behind the selection box with first item selected.

I want to have only the icon in the ActionBar and the drop-down-list/spinner to appear when tapped on the icon.

This is my code :

private void initializeMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.options, menu);

    View v = (View) menu.findItem(R.id.menuSort).getActionView();
    Spinner spinner=(Spinner)v.findViewById(R.id.bookmarks_menu);

    Bookmark bookmark1 = new Bookmark();
    Bookmark bookmark2 = new Bookmark();

    List<Bookmark> list = new ArrayList<Bookmark>();
    list.add(bookmark1);
    list.add(bookmark2);

    SpinAdapter adapter = new SpinAdapter(getApplicationContext(),0, list);
    spinner.setAdapter(adapter); 
}

Read this: http://developer.android.com/guide/topics/ui/actionbar.html — SBotirov, Apr 24 '13 at 05:46

score 9 · Answer 1 · answered Mar 13 '16 at 15:25

Icon-only Spinner is achievable through a few steps.

Step 1

Put the icon you want in the xml:

<Spinner
    ...
    android:background="@drawable/ic_sort_white_24dp" />

Step 2

Then, in the adapter of the Spinner, override getView(), like this:

ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list){
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // this part is needed for hiding the original view
            View view = super.getView(position, convertView, parent);
            view.setVisibility(View.GONE);

            return view;
        }
};

Explanation

We need to understand that getView() in the adapter is the view that will be used when the Spinner is not opened. We make the visibility gone because we don't want to see it, so that what is left is the background of Spinner from the xml, which I already set to ic_sort_white_24dp in this example (Step 1).

Do not mix up with getDropDownView() which is used for the rows of options that will drop downed after the Spinner is clicked.

Bonus Screenshot!

This is how mine look like. Hope it helps!

score 1 · Answer 2 · edited May 23 '17 at 10:31

1

In your adapter, you need to override getDropDownView(). That should provide the view used in the rows of the spinner. getView() should then return an ImageView for your icon.

See these 2 answers on similar questions for more details and examples:

edited May 23 '17 at 10:31

Community

1
1

answered Jun 26 '14 at 19:21

John

1,186
10
9

score 0 · Answer 3 · answered Apr 24 '13 at 06:32

check this its working..

enter image description here

public class MainActivity extends Activity {

    final String[] choices = { "Android", "iOS", "RIM" };
    final int[] choices_img = { R.drawable.ic_launcher, R.drawable.ios,
            R.drawable.black };

    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                MainActivity.this, android.R.layout.simple_dropdown_item_1line,
                choices);
        ListViewAdapter adapter1 = new ListViewAdapter(MainActivity.this);
        actionBar.setListNavigationCallbacks(adapter1,
                new OnNavigationListener() {
                    @Override
                    public boolean onNavigationItemSelected(int itemPosition,
                            long itemId) {
                        Toast.makeText(MainActivity.this,
                                choices[itemPosition], Toast.LENGTH_SHORT)
                                .show();
                        return false;
                    }
                });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    public class ListViewAdapter extends BaseAdapter {

        private LayoutInflater mInflater;

        public ListViewAdapter(Context con) {
            // TODO Auto-generated constructor stub
            mInflater = LayoutInflater.from(con);
        }

        public int getCount() {
            // TODO Auto-generated method stub
            return choices.length;
        }

        public Object getItem(int position) {
            // TODO Auto-generated method stub
            // return product_id1.size();
            return position;
        }

        public long getItemId(int position) {
            // TODO Auto-generated method stub
            // return product_id1.get(position).hashCode();
            return position;
        }

        @SuppressLint("NewApi")
        public View getView(final int position, View convertView,
                ViewGroup parent) {
            // TODO Auto-generated method stub
            final ListContent holder;
            View v = convertView;
            if (v == null) {
                v = mInflater.inflate(R.layout.scan_row1, null);
                holder = new ListContent();

                holder.name = (TextView) v.findViewById(R.id.textView1);

                holder.img_p = (ImageView) v.findViewById(R.id.imageView1);

                // holder.total_rate.setOnClickListener(mOnTitleClickListener1);

                v.setTag(holder);
            } else {

                holder = (ListContent) v.getTag();
            }

            holder.img_p.setBackground(getResources().getDrawable(
                    choices_img[position]));
            holder.name.setText("" + choices[position]);

            return v;
        }
    }

    static class ListContent {

        ImageView img_p;
        TextView name;

    }

}

if you want only icon then just use image view in scan_row1.xml

Thanks @Dhawal. I managed to get this screen. What I am trying to achieve is to have only an icon on the action bar but not the selected item (rim_icon and the text"RIM). I want the 3 list options to appear on tapping the action bar icon. — Vijay Anant, Apr 24 '13 at 07:50

Spinner in action bar with only icon but not the selected option

3 Answers3

Linked