How to add spinner to subtitle - as in the Play Music app for Android?

Question

Please refer to the attached image.

setListNavigationCallbacks(mSpinnerAdapter, mNavigationCallback) adds a spinner pivoted under "My Library", and I cannot add a sub-list under it. I am unable to find a method which adds a spinner for "ALL MUSIC", not messing up with the main title of the action bar.

Any help is appreciated !

Answer 1

It appears like a customised ArrayAdapter You need to implement getDropDownView and return the view that you would like to see.

Feel free to modify the code. This is just a proof of concept. In your activity:

getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
    getActionBar().setTitle("");

    getActionBar().setListNavigationCallbacks(new MySpinnerAdapter(this, R.layout.customspinneritem, items), new OnNavigationListener() {

        @Override
        public boolean onNavigationItemSelected(int itemPosition, long itemId) {

            return false;
        }
    });

MySpinnerAdapter:

 public class MySpinnerAdapter extends ArrayAdapter<String>{

// CUSTOM SPINNER ADAPTER
private Context mContext;
public MySpinnerAdapter(Context context, int textViewResourceId,
        String[] objects) {
    super(context, textViewResourceId, objects);

    mContext = context;
    // TODO Auto-generated constructor stub
}

@Override
public View getDropDownView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    return getCustomView(position, convertView, parent);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    return getCustomView(position, convertView, parent);
}

public View getCustomView(int position, View convertView,ViewGroup parent) {
// TODO Auto-generated method stub
// return super.getView(position, convertView, parent);


LayoutInflater inflater =  
    ( LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);


ViewHolder holder;
if (convertView == null) {
convertView = inflater.inflate(R.layout.customspinneritem, null);
holder = new ViewHolder();
holder.txt01 = (TextView) convertView.findViewById(R.id.TextView01);
holder.txt02 = (TextView) convertView.findViewById(R.id.TextView02);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();
}

holder.txt01.setText("My Library");
holder.txt02.setText("ALL MUSIC");

return convertView;
}

class ViewHolder {
    TextView txt01;
    TextView txt02;
}



} // end custom adapter

Answer 2

I can't comment on answers quite yet because of my reputation, but to implement this the same way as the Google Music app I think you would want to use a different method for getDropDownView() because the dropdown on Google Music is just like a regular dropdown.

Replacing prijupaul's method with the following is the idea for which you'd be looking.

Like this:

@Override
public View getDropDownView(int position, View convertView, ViewGroup parent) {
    DropDownViewHolder holder = null;

    if (convertView == null) {
        LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
        convertView = inflater.inflate(R.layout.dropdown_list_item, parent, false);

        holder = new DropDownViewHolder();
        holder.mTitle = (TextView) convertView.findViewById(R.id.textView_dropdown_title);

        convertView.setTag(holder);
    } else {
        holder = (DropDownViewHolder) convertView.getTag();
    }

    // Should have some sort of data set to go off of, we'll assume
    // there is a some array called mData.
    holder.mTitle.setText(mData[position]);

    return convertView;
}

public class DropDownViewHolder {
    TextView mTitle;
}

I figured I should put the code in to be explicit.

Answer 3

Here is the solution. We need to create a different method for getView(...) and also need to keep track on the item selected from drop down. Once the item from navigation drawer is clicked call a new method (create new method in spinner adapter as update title) llike

public void setHeaderTitle(String str) { titleTxt = str; }

Different method called from get view

@Override
     public View getView(int position, View convertView, ViewGroup parent) {

        return getBarView(position);
    }

private View getBarView(int position) {
        if (displayHolder == null) {
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView1 = inflater.inflate(R.layout.actionbar_spinner_item, null);
            displayHolder = new ViewHolder();
        }

        displayHolder.txt01 = (TextView) convertView1.findViewById(R.id.actionBarTitle123);
        displayHolder.txt02 = (TextView) convertView1.findViewById(R.id.actionBarSubTitle123);
        displayHolder.txt01.setText(titleTxt);
        displayHolder.txt02.setText(items[curPos]);

        return convertView1;
    }

And when drop down item is selected call below method

public void setHeaderSubTitle(int pos) {

        // update display of sub title
        curPos = pos;
        getBarView(pos);
    }

Let me know anything more is needed