How to combine Navigation Drawer and Spinner [like in Google+ App]

Question

I need your advice. In Google+ App for Android, there are two elements, that I don't know how to put together. One is "Navigation Drawer" and second is "Action Bar Navigation Spinner". Do you know how these two elements put together?

Thank you very much for your advice! P.S. I know, I'm lame :) (and I apologize for my English)

Solution 1

Add the spinner to the NavigationBar.

The basic procedure to enable drop-down navigation is:

1.Create a SpinnerAdapter that provides the list of selectable items for the drop-down and the layout to use when drawing each item in the list.

2.Implement ActionBar.OnNavigationListener to define the behavior that occurs when the user selects an item from the list.

3.During your activity's onCreate() method, enable the action bar's drop-down list by calling setNavigationMode(NAVIGATION_MODE_LIST).

4.Set the callback for the drop-down list with setListNavigationCallbacks()

http://developer.android.com/guide/topics/ui/actionbar.html

Check the topic Adding Drop-down Navigation

Example:

    public class MainActivity extends Activity implements OnNavigationListener

Then

    getActionBar().setDisplayShowTitleEnabled(false);
    getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
    SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this, R.array.planets_array,
          android.R.layout.simple_spinner_dropdown_item);

    getActionBar().setListNavigationCallbacks(mSpinnerAdapter , this);

Then

    @Override
public boolean onNavigationItemSelected(int arg0, long arg1) {
     Toast.makeText(getApplicationContext()," text",1000).show();
    return true;
}

Snap

Example:

public class MainActivity extends Activity implements ActionBar.OnNavigationListener {
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    public ActionBarDrawerToggle mDrawerToggle;

    private CharSequence mDrawerTitle;
    private CharSequence mTitle;
    private String[] mPlanetTitles;
    ActionBar actionBar;

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

        actionBar = getActionBar();


        SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this, R.array.planets_array,
                android.R.layout.simple_spinner_dropdown_item);
        actionBar.setDisplayShowTitleEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
        getActionBar().setListNavigationCallbacks(mSpinnerAdapter,this);

        //mTitle = mDrawerTitle = getTitle();
        mPlanetTitles = getResources().getStringArray(R.array.planets_array);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

       // mDrawerList.setBackgroundColor(Color.WHITE);
        // set a custom shadow that overlays the main content when the drawer opens
        mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
        // set up the drawer's list view with items and click listener

        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mPlanetTitles));

        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

        // enable ActionBar app icon to behave as action to toggle nav drawer
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);

        // ActionBarDrawerToggle ties together the the proper interactions
        // between the sliding drawer and the action bar app icon
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description for accessibility */
                R.string.drawer_close  /* "close drawer" description for accessibility */
                ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        if (savedInstanceState == null) {
            selectItem(0);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    /* Called whenever we call invalidateOptionsMenu() */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the nav drawer is open, hide action items related to the content view
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);

        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
         // The action bar home/up action should open or close the drawer.
         // ActionBarDrawerToggle will take care of this.
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle action buttons
        switch(item.getItemId()) {

        case R.id.action_websearch:
            // create intent to perform web search for this planet
            Intent intent = new Intent(Intent.ACTION_WEB_SEARCH);
            intent.putExtra(SearchManager.QUERY, getActionBar().getTitle());
            // catch event that there's no activity to handle intent
            if (intent.resolveActivity(getPackageManager()) != null) {
                startActivity(intent);
            } else {
                Toast.makeText(this, R.string.app_not_available, Toast.LENGTH_LONG).show();
            }
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }

    /* The click listner for ListView in the navigation drawer */
    private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    }

    private void selectItem(int position) {


        ActionBar actionBar =getActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        Fragment fragment = new PlanetFragment();
        Bundle args = new Bundle();
        args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
        fragment.setArguments(args);

        FragmentManager fragmentManager = getFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

        // update selected item and title, then close the drawer

        mDrawerList.setItemChecked(position, true);
      //  setTitle(mPlanetTitles[position]);
        mDrawerLayout.closeDrawer(mDrawerList);


    }

    @Override
    public void setTitle(CharSequence title) {
        mTitle = title;
        //getActionBar().setTitle(mTitle);
    }

    /**
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
     */

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggls
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

    /**
     * Fragment that appears in the "content_frame", shows a planet
     */
    public static class PlanetFragment extends Fragment {
        public static final String ARG_PLANET_NUMBER = "planet_number";
        private static WeakReference<MainActivity> mTarget;




        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);

             if(mTarget!=null)
             {
                 MainActivity target = mTarget.get();
                 ActionBar actionBar = getActivity().getActionBar();
             actionBar.setDisplayHomeAsUpEnabled(true);
             //actionBar.setTitle("Fragment");
            //target.mDrawerToggle.setDrawerIndicatorEnabled(false);
             }
             else
             {
                 Log.i("............","Null");
             }
        }

        @Override
        public void onAttach(Activity activity) {
            // TODO Auto-generated method stub
            super.onAttach(activity);
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            mTarget = new WeakReference<MainActivity>( (MainActivity) getActivity());
            View rootView = inflater.inflate(R.layout.fragment_planet, container, false);

            int i = getArguments().getInt(ARG_PLANET_NUMBER);
            String planet = getResources().getStringArray(R.array.planets_array)[i];

            int imageId = getResources().getIdentifier(planet.toLowerCase(Locale.getDefault()),
                            "drawable", getActivity().getPackageName());
            ((ImageView) rootView.findViewById(R.id.image)).setImageResource(imageId);
           // getActivity().setTitle(planet);
            return rootView;
        }
    }

    @Override
    public boolean onNavigationItemSelected(int itemPosition, long itemId) {
        // TODO Auto-generated method stub
        Toast.makeText(getApplicationContext(), "text", Toast.LENGTH_LONG).show();
        return true;
    }
}

activity_main.xml

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions. -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- android:layout_gravity="start" tells DrawerLayout to treat
         this as a sliding drawer on the left side for left-to-right
         languages and on the right side for right-to-left languages.
         The drawer is given a fixed width in dp and extends the full height of
         the container. A solid background is used for contrast
         with the content view. -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        />


</android.support.v4.widget.DrawerLayout>

drawe_list_item.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:background="@drawable/selector"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textColor="#fff"

    android:minHeight="?android:attr/listPreferredItemHeightSmall"/>

fragment_planet.xml

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:gravity="center"
    android:padding="32dp" />

Solution 2

Look these link. may be help you this?

Here is the code examples of Navigation Drawer, and the sample app:

• sample app

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

Comments

[Štěpán Víteček]

Thank you so much @Raghunandan! This is perfect and it's what I want :) SOLVED

[Raghunandan]

@ŠtěpánVíteček your welcome. the example used is the one in the sample of docs. just added the spinner to it. and the blue color is actually is bcoz i used a selector to listview

[Štěpán Víteček]

Could you send me your example, @Raghunandan? Please :)

[Raghunandan]

@ŠtěpánVíteček check this stackoverflow.com/questions/20088247/…. this using appcompact. Changes to be made. extend Activity. Use getActionBar(). I used a custom adapter for listview. Rest all is the same. add the above code (the code in the example of my post) in MainActivity and it will work

[Štěpán Víteček]

thanks, I try compile this today :) If I'll have any trouble, could I ask you for help?

[Raghunandan]

@ŠtěpánVíteček sure you can

[Štěpán Víteček]

Hi, @Raghunandan :) I tried compile this app, but it still doesn't work :( Could you please send me your example? Please :)

[Raghunandan]

@ŠtěpánVíteček sure. give me a minute

[Štěpán Víteček]

Thank you very much, @Raghunandan :)

[Raghunandan]

@ŠtěpánVíteček need to code again. lost my sample. any way i will do it

[Štěpán Víteček]

You're so generous, @Raghunandan! :)

[Raghunandan]

@ŠtěpánVíteček i use eclipe for further comments use the chat section

[Štěpán Víteček]

please, send me a .zip file to this email - svitecek[at]gmail.com Please, do that for me :)

[Štěpán Víteček]

You're awesome! Thanks :)

[Sarah Sakamoto]

How can I change the fragment and the drop-down list according the selected option???

[Raghunandan]

@SarahSakamoto you can do that using framgent transaction and by adding the fragment to the container or replacing the same. if you have a problem ask a new question

[Sarah Sakamoto]

@Raghunandan I want to update the selected value on Spinner. I created a new question for this. If you can answer me, I appreciate your help.

[Sarah Sakamoto]

@Raghunandan the code I am using on my question is based on your answer here. Please, help me. Thanks!

[Raghunandan]

@SarahSakamoto where is the question?

[Sarah Sakamoto]

@Raghunandan Here stackoverflow.com/questions/21137497/…

[Sarah Sakamoto]

@Raghunandan What kind of container in XML do I use to put a gridView fragment?! What kind of layout?

[Raghunandan]

@SarahSakamoto fragment is always hosted by a activity. So you can use a fragmelayout as a container. add or replace the fragment to it. For fragment layout you can have a gridview