I'm using android NavigationView I want after location touched from user expand something like a submenu and display the current location of user. Location is not my problem, my real problem is that I don't know how to implement ExpandableListView inside drawer for this simple example. Maybe you could suggest me an informative step by step tutorial for this one since I'm new android developer and I want to learn more.
Here is my menu.xml
<?xml version="1.0" encoding="utf-8"?>
<group android:checkableBehavior="single">
<item android:id="#+id/location" android:icon="#drawable/mylocation" android:title="#string/My_Location" android:animateLayoutChanges="true"/>
</group>
<item android:title="#string/action_settings">
<menu>
<group android:checkableBehavior="single">
<item android:id="#+id/profile" android:icon="#drawable/settings"
android:title="#string/Edit_Profile" android:animateLayoutChanges="true" />
<item android:id="#+id/logout" android:icon="#drawable/logout"
android:title="#string/Log_Out" android:animateLayoutChanges="true"/>
</group>
</menu>
</item>
#SuppressWarnings("StatementWithEmptyBody")
#Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.location) {
//todo
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
Related
I implemented the Navigation View (Support Library 24.0.0):
But a strange behavior occurred in which i have been trying to control since.
Here is my drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Categories">
<menu>
<group android:checkableBehavior="single">
<item
android:id="#+id/navigation_item_1"
android:icon="#drawable/ic_news"
android:title="Top Stories" />
<item
android:id="#+id/navigation_item_2"
android:icon="#drawable/ic_music"
android:title="Entertainment" />
<item
android:id="#+id/navigation_item_3"
android:icon="#drawable/ic_sport"
android:title="Sport" />
<item
android:id="#+id/navigation_item_4"
android:icon="#drawable/ic_lifestyle"
android:title="Lifestyle" />
<item
android:id="#+id/navigation_item_5"
android:icon="#drawable/ic_tech"
android:title="Technology" />
<item
android:id="#+id/navigation_item_6"
android:icon="#drawable/ic_world"
android:title="International" />
</group>
</menu>
</item>
</menu>
But the result is :
in which only one should be selected.
I solved it using :
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem item) {
for (int i = 0; i < 6; i++) {
MenuItem top = navigationView.getMenu().getItem(0).getSubMenu().getItem(i);
if (top.isChecked()) top.setChecked(false);
}
return true;
}
});
Unchecking all items in the menu
return true, that checks the clicked item.
I'm building an Android app for the local bus system and I'm trying to use the navigation drawer to act as a filter for the routes that appear on the map. The functionality is there, but I'm struggling with the UI. Whenever I click on an item, everything else is set as unchecked, which is not what I want. I've been trying to find a solution for this issue, but didn't come up with anything. Here is the code for the navigation drawer:
MainActivity:
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// listen for navigation events
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
// set up the hamburger icon to open and close the drawer
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.navigation_drawer_open,
R.string.navigation_drawer_close);
mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();
#Override
public boolean onNavigationItemSelected(final MenuItem menuItem) {
final boolean enable;
//update highlighted item in the navigation menu
//menuItem.setChecked(!menuItem.isChecked());
if(menuItem.isChecked()){
menuItem.setChecked(false);
enable = false;
}
else{
menuItem.setChecked(true);
enable=true;
}
//menuItem.setChecked(true);
mNavItemId = menuItem.getItemId();
// allow some time after closing the drawer before performing real navigation
// so the user can see what is happening
// mDrawerLayout.closeDrawer(GravityCompat.START);
mDrawerActionHandler.postDelayed(new Runnable() {
#Override
public void run() {
navigate(menuItem.getItemId(),enable);
}
}, DRAWER_CLOSE_DELAY_MS);
return true;
}
and the layout file:
<item
android:id="#+id/filter_routes"
android:title="#string/filter">
<menu>
<group android:checkableBehavior="all">
<item
android:id="#+id/red_route"
android:title="#string/red_route"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:icon="#drawable/abc_btn_check_material"
android:checked="true"
android:checkable="true"/>
<item
android:id="#+id/blue_route"
android:title="#string/blue_route"
android:icon="#drawable/abc_btn_check_material"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:checked="true"
android:checkable="true"/>
<item
android:id="#+id/green_route"
android:title="#string/green_route"
android:icon="#drawable/abc_btn_check_material"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:checked="true"
android:checkable="true"/>
<item
android:id="#+id/orange_route"
android:title="#string/orange_route"
android:icon="#drawable/abc_btn_check_material"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:checked="true"
android:checkable="true"/>
<item
android:id="#+id/brown_route"
android:title="#string/brown_route"
android:icon="#drawable/abc_btn_check_material"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:checked="true"
android:checkable="true"/>
</group>
</menu>
</item>
I got multiple selections to work by returning false from onNavigationItemSelected(). From the Google docs for this return value of onNavigationItemSelected():
boolean true to display the item as the selected item
Apparently, this means that returning false leaves item selection in your control.
Here's an example.
XML:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="All">
<menu>
<group
android:checkableBehavior="all"
android:id="#+id/checkable_group"
>
<item
android:id="#+id/checkable_item_1"
android:title="A" />
<item
android:id="#+id/checkable_item_2"
android:title="B" />
<item
android:id="#+id/checkable_item_3"
android:title="C" />
<item
android:id="#+id/checkable_item_4"
android:title="D" />
</group>
</menu>
</item>
</menu>
Code:
#Override
public boolean onNavigationItemSelected(MenuItem item) {
if (item.isChecked()) {
item.setChecked(false);
}
else {
item.setChecked(true);
}
return false; // VERY Important to return false here
}
I submitted a bug report about this and it was closed as working as intended. Google apparently made NavigationView use menu XML with no intention of having it work like a menu.
In my NavigationView, I have most of my items divided into sections with subheaders. I'm achieving this by putting a menu inside an item:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/drawer_top"
android:title="#string/top"/>
<item
android:id="#+id/drawer_header"
android:title="#string/header1">
<menu>
<item
android:id="#+id/drawer_item1"
android:title="#string/item1"/>
<item
android:id="#+id/drawer_item2"
android:title="#string/item2"/>
</menu>
</item>
</group>
</menu>
However, this leads to the first item, drawer_top, being eternally checked. Other items are not checkable. My onNavigationItemSelected-Code looks like this:
#Override
public boolean onNavigationItemSelected(final MenuItem menuItem) {
menuItem.setChecked(true);
... (navigate)
return true;
}
It seems that submenus are not checkable by design.
Here is a workaround:
mNavigationView.getMenu().clear();
mNavigationView.inflateMenu(R.menu.menu_drawer);
mNavigationView.getMenu().findItem(mNavItemId).setChecked(true);
When I click on the NavigationView item its selection color changes. But I don't know how to check the first element by default.
private void setupDrawerContent(NavigationView navigationView) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
mDrawerLayout.closeDrawers();
return true;
}
});
}
add this
android:checked="true"
to your first item in the drawer menu. For example take a look at mine:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:checkableBehavior="single">
<item
android:id="#+id/drawer_home"
android:checked="true" //default set to check
android:icon="#drawable/ic_action_home"
android:title="#string/home"/>
<item
android:id="#+id/drawer_favourite"
android:icon="#drawable/ic_action_favorite_black"
android:title="#string/favourite"/>
<item
android:id="#+id/drawer_recent"
android:icon="#drawable/ic_action_recent"
android:title="#string/recent"/>
<item
android:id="#+id/drawer_settings"
android:icon="#drawable/ic_action_settings"
android:title="#string/settings"/>
</group>
I've switched to the official Google Design Support Library. Now, I want to use a secondary menu with a divider like this:
But as Android is using the Menu Inflater I have no idea what to do now. I can add a second group, but then the items have the same size and there is no divider.
drawer.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/overview"
android:checked="true"
android:icon="#drawable/ic_action_dashboard"
android:title="#string/drawer_overview" />
<item
android:id="#+id/social_evening"
android:checked="false"
android:icon="#drawable/ic_action_brightness_3"
android:title="#string/drawer_social_evening" />
<item
android:id="#+id/scouting_games"
android:checked="false"
android:icon="#drawable/ic_action_landscape"
android:title="#string/drawer_scouting_games" />
<item
android:id="#+id/olympics"
android:checked="false"
android:icon="#drawable/ic_action_stars"
android:title="#string/drawer_olympics" />
<item
android:id="#+id/quizzes"
android:checked="false"
android:icon="#drawable/ic_action_school"
android:title="#string/drawer_quizzes" />
</group>
</menu>
MainActivity.java:
package net.sutomaji.freizeitspiele;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* Created by Tom Schneider on 18.06.15
*/
public class MainActivity extends AppCompatActivity {
//Defining Variables
private Toolbar toolbar;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initializing Toolbar and setting it as the actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Initializing NavigationView
navigationView = (NavigationView) findViewById(R.id.navigation_view);
//Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
// This method will trigger on item Click of navigation menu
#Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
//Checking if the item is in checked state or not, if not make it in checked state
if(menuItem.isChecked()) menuItem.setChecked(false);
else menuItem.setChecked(true);Q
//Closing drawer on item click
drawerLayout.closeDrawers();
//Check to see which item was being clicked and perform appropriate action
switch (menuItem.getItemId()){
//Replacing the main content with ContentFragment Which is our Inbox View;
case R.id.overview:
Toast.makeText(getApplicationContext(), "Overview Selected", Toast.LENGTH_SHORT).show();
ContentFragment fragment = new ContentFragment();
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.frame,fragment);
fragmentTransaction.commit();
return true;
// For rest of the options we just show a toast on click
case R.id.social_evening:
Toast.makeText(getApplicationContext(),"SE Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.scouting_games:
Toast.makeText(getApplicationContext(),"SG Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.olympics:
Toast.makeText(getApplicationContext(),"OL Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.quizzes:
Toast.makeText(getApplicationContext(),"QZ Selected",Toast.LENGTH_SHORT).show();
return true;
default:
Toast.makeText(getApplicationContext(),"Somethings Wrong",Toast.LENGTH_SHORT).show();
return true;
}
}
});
// Initializing Drawer Layout and ActionBarToggle
drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.openDrawer, R.string.closeDrawer){
#Override
public void onDrawerClosed(View drawerView) {
// Code here will be triggered once the drawer closes as we dont want anything to happen so we leave this blank
super.onDrawerClosed(drawerView);
}
#Override
public void onDrawerOpened(View drawerView) {
// Code here will be triggered once the drawer open as we dont want anything to happen so we leave this blank
super.onDrawerOpened(drawerView);
}
};
//Setting the actionbarToggle to drawer layout
drawerLayout.setDrawerListener(actionBarDrawerToggle);
//calling sync state is necessay or else your hamburger icon wont show up
actionBarDrawerToggle.syncState();
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
So, how can I create a menu like this, or how can I add dividers (with category headers) to my navigation drawer?
You can use the standard NavigationView defining a menu like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="#+id/group1" android:checkableBehavior="single" id>
//items of group1
</group>
<group android:id="#+id/group2" android:checkableBehavior="single" id>
//items of group2
</group>
It is important to give an unique id to each group.
Tutorial: Navigation View Design Support Library
Menu Items:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/navigation_item_attachment"
android:checked="true"
android:icon="#drawable/ic_attachment"
android:title="#string/nav_item_attachment" />
<item
android:id="#+id/navigation_item_images"
android:icon="#drawable/ic_image"
android:title="#string/nav_item_images" />
<item
android:id="#+id/navigation_item_location"
android:icon="#drawable/ic_place"
android:title="#string/nav_item_location" />
</group>
<item android:title="#string/nav_sub_menu">
<menu>
<item
android:icon="#drawable/ic_emoticon"
android:title="#string/nav_sub_menu_item01" />
<item
android:icon="#drawable/ic_emoticon"
android:title="#string/nav_sub_menu_item02" />
</menu>
</item>
</menu>
Here is what you exactly looking for:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/Home"
android:checked="false"
android:icon="#drawable/ic_home"
android:title="#string/homestr" />
<item
android:id="#+id/myacc"
android:checked="false"
android:icon="#drawable/ic_account"
android:title="#string/myaccstr" />
<item
android:id="#+id/popular"
android:checked="false"
android:icon="#drawable/ic_star"
android:title="#string/Popularstr" />
<item
android:id="#+id/newsit"
android:checked="false"
android:icon="#drawable/ic_news"
android:title="#string/newsstr" />
<item android:title="#string/gn">
<menu>
<item
android:id="#+id/settings"
android:checked="false"
android:icon="#drawable/ic_setting"
android:title="#string/action_settings" />
<item
android:id="#+id/help"
android:checked="false"
android:icon="#drawable/ic_help"
android:title="#string/helpstr" />
</menu>
</item>
</group>
</menu>
You can use any ViewGroup like a LinearLayout for your Drawer. It is not limited to a ListView and a FrameLayout. Because of this you can style your Drawer View like any other layout of an Activity for example. The only thing you should keep in mind is that the NavigationDrawer can have only two childs. The first is your layout for the Activity and the second is the Drawer. Feel free to style them as you like!
<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">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- YOUR DRAWER -->
<LinearLayout
android:id="#+id/drawer_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start">
<!-- Use any Views you like -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#ffffff"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
for the divider
android:divider="#FFFFFF"
android:dividerHeight="1dp"