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"
Related
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;
}
I have a drawer layout that needs to have two navigation views in it, because there's a couple of options that need to be aligned on top and another on the bottom, with a divider separating them.
I've managed to make it work, but now I have two different problems with my setup.
1) The first one, I can't change the selected items text color (the background color works as intented via a drawer selector, but for some reason, the selected item's text color is always colorPrimary)
2) The second one is trickier, since there's two navigation views, it can happen that there's a selected row on the first and on the second one, even though they all work loading fragments in the same container. Is there a way to manage that, when an item for the first navigation view is selected, the second navigation view's selected item gets deselected?
This is the drawer's layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- 1º Layout de la activity -->
<include layout="#layout/activity_main"/>
<!-- 2º Layout del drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/container_navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemBackground="#drawable/drawer_list_selector"
android:nestedScrollingEnabled="true"
android:scrollIndicators="none">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/divider_height"
android:background="#color/colorAccent"
android:layout_above="#+id/navigation_view"
android:id="#+id/top_separator"/>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_above="#+id/bottom_separator"
app:itemBackground="#drawable/drawer_list_selector"
app:menu="#menu/menu_navigation" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/divider_height"
android:background="#color/colorAccent"
android:layout_above="#+id/navigation_bottom"
android:id="#+id/bottom_separator"/>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:menu="#menu/menu_navigation_bottom"
app:itemBackground="#drawable/drawer_list_selector"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
This is the top navigation view's layout:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_tus_ofertas"
android:title="#string/tus_ofertas"
android:icon="#drawable/ic_offer" />
<item
android:id="#+id/nav_movimiento_puntos"
android:title="#string/movimiento_puntos"
android:icon="#drawable/ic_points"/>
<item
android:id="#+id/nav_asociaciones"
android:title="#string/asociaciones"
android:icon="#drawable/ic_flag"/>
</group>
</menu>
Bottom navigation view's layout:
<?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/nav_terminos"
android:title="#string/terminos"
android:icon="#drawable/ic_document" />
<item
android:id="#+id/nav_contacto"
android:title="#string/contacto"
android:icon="#drawable/ic_email"/>
<item
android:id="#+id/nav_valorar"
android:title="#string/valorar"
android:icon="#drawable/ic_rate_review"/>
<item
android:id="#+id/nav_exit"
android:title="#string/exit"
android:icon="#drawable/ic_shutdown"/>
</group>
</menu>
Selected item's background selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/colorAccent" />
<item android:state_activated="true" android:drawable="#color/colorAccent" />
<item android:state_selected="true" android:drawable="#color/colorAccent" />
<item android:state_checked="true" android:drawable="#color/colorAccent" />
<item android:state_pressed="false" android:drawable="#android:color/transparent" />
<item android:state_activated="false" android:drawable="#android:color/transparent" />
<item android:state_selected="false" android:drawable="#android:color/transparent" />
<item android:state_checked="false" android:drawable="#android:color/transparent" />
</selector>
The activity that calls the drawer and handles the events:
public class MainActivity extends AppCompatActivity {
#Bind(R.id.toolbar) Toolbar toolbar;
#Bind(R.id.tabs) TabLayout tabs;
#Bind(R.id.drawer_layout) DrawerLayout drawerLayout;
#Bind(R.id.container_navigation) NavigationView containerNavigator;
#Bind(R.id.navigation_view) NavigationView navigationView;
#Bind(R.id.navigation_bottom) NavigationView navigationBottom;
#Bind(R.id.vsFooter) ViewStubCompat stub;
ImageView userPicture;
TextView userMail;
ViewPager viewPager;
Menu menu;
ActionBar actionBar;
ViewPagerFragment viewPagerFragment;
Usuario currentUser;
public Usuario getCurrentUser() {
return currentUser;
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawer);
ButterKnife.bind(this);
currentUser = UserApiManager.getInstance(getApplicationContext()).getCurrentUser();
viewPagerFragment = ViewPagerFragment.newInstance();
setupToolbar();
setupNavigationDrawer();
ApiManager.getInstance(getApplicationContext()).setupFooter(stub, currentUser.getIdLocalidad(), this);
getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout,viewPagerFragment).commit();
}
public void setupViewPager(ViewPager viewPager) {
tabs.setupWithViewPager(viewPager);
}
private void setupToolbar() {
setSupportActionBar(toolbar);
actionBar = getSupportActionBar();
if (actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_black);
actionBar.setTitle(getString(R.string.app_title));
}
}
private void setupNavigationDrawer() {
View headerView = navigationView.inflateHeaderView(R.layout.navigation_header);
userPicture = (ImageView) headerView.findViewById(R.id.user_picture);
userMail = (TextView) headerView.findViewById(R.id.user_mail);
userMail.setText(currentUser.getEmail());
Picasso.with(this).load(currentUser.getImagenURL()).transform(new CircleTransformation()).into(userPicture);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_tus_ofertas:
showTabLayout();
actionBar.setTitle(getString(R.string.app_title));
getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout,viewPagerFragment).commit();
break;
case R.id.nav_movimiento_puntos:
hideTabLayout();
Bundle bundle = new Bundle();
bundle.putString("idcliente", currentUser.getId());
MovimientoPuntosFragment movimientoPuntosFragment = MovimientoPuntosFragment.newInstance();
movimientoPuntosFragment.setArguments(bundle);
actionBar.setTitle(getString(R.string.movimiento_puntos));
getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, movimientoPuntosFragment).commit();
break;
case R.id.nav_asociaciones:
hideTabLayout();
actionBar.setTitle(getString(R.string.asociaciones));
getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, AsociacionFragment.newInstance()).commit();
break;
}
drawerLayout.closeDrawers();
return true;
}
});
navigationBottom.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_terminos:
hideTabLayout();
actionBar.setTitle(getString(R.string.terminos));
getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, LegalesFragment.newInstance()).commit();
break;
case R.id.nav_contacto:
Intent intent = new Intent(Intent.ACTION_VIEW);
Uri data = Uri.parse("mailto:?subject=" + getString(R.string.contacto_email));
intent.setData(data);
startActivity(intent);
break;
case R.id.nav_valorar:
final String appPackageName = BuildConfig.APPLICATION_ID;
try {
Log.i("url", "market://details?id=" + appPackageName);
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + appPackageName)));
} catch (android.content.ActivityNotFoundException anfe) {
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("https://play.google.com/store/apps/details?id=" + appPackageName)));
}
break;
case R.id.nav_exit:
break;
}
drawerLayout.closeDrawers();
return true;
}
});
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_over, menu);
this.menu = menu;
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.action_user:
Intent intent = new Intent(this, PerfilUsuarioActivity.class);
startActivity(intent);
break;
}
return super.onOptionsItemSelected(item);
}
public void hideTabLayout(){
tabs.setVisibility(View.GONE);
}
public void showTabLayout(){
tabs.setVisibility(View.VISIBLE);
}
}
Any help would be appreciated!
Thanks in advance!
Solved!
The problem with the color I solved it with a selector, it didn't work before because I had a syntax error (selector tag inside the main selector tag).
This is the color selector's code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FFFFFFFF" android:state_checked="true" />
<item android:color="#E6000000" android:state_checked="false"/>
</selector>
The second problem I solved it by programmatically deselecting the other navigationview's items onNavigationItemSelected.
This is the function I call:
public void deselectItems(NavigationView view){
int size = view.getMenu().size();
for (int i = 0; i < size; i++) {
view.getMenu().getItem(i).setChecked(false);
}
}
I know there must be a better way to solve the second problem, but this one worked.
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.
I am creating a navigationview in android.I have added items under draweritems under menu folder.Whenever I clicked a menuitem a toast appeared before,but now it is unresponsive.Below is the code.Help me please...
draweritems.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/motel"
android:title="Motel"
android:icon="#drawable/motel"
>
</item>
<item
android:id="#+id/packages"
android:title="Packages"
android:icon="#drawable/packages">
</item>
<item
android:id="#+id/ayurveda"
android:title="Ayurveda"
android:icon="#drawable/ayurveda">
</item>
<item
android:id="#+id/marketing"
android:title="Marketing"
android:icon="#drawable/marketing">
</item>
<item
android:id="#+id/Tours"
android:title="ConductedTours"
android:icon="#drawable/tours">
</item>
<item
android:id="#+id/Locate"
android:title="Locate"
android:icon="#drawable/locate">
</item>
<item
android:id="#+id/News"
android:title="News"
android:icon="#drawable/news">
</item>
<item
android:id="#+id/Login"
android:title="Login"
android:icon="#drawable/login">
</item>
</group>
</menu>
MainActivity.java:
import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
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.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private Context context=this;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
navigationView=(NavigationView) findViewById(R.id.navigation_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
Log.i("Clicked", "Clicked motel");
if (menuItem.isChecked()) {
menuItem.setChecked(false);
} else menuItem.setChecked(true);
drawerLayout.closeDrawers();
switch (menuItem.getItemId()) {
case R.id.motel:
Toast.makeText(getApplicationContext(), "Motels", Toast.LENGTH_LONG).show();
return true;
case R.id.packages:
Toast.makeText(getApplicationContext(), "Packages", Toast.LENGTH_LONG).show();
return true;
case R.id.ayurveda:
Toast.makeText(getApplicationContext(), "Ayurveda", Toast.LENGTH_LONG).show();
return true;
}
return true;
}
});
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
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();
if(id==R.id.ayurveda){
Toast.makeText(getApplicationContext(),"Clicked Ayurveda",Toast.LENGTH_LONG).show();
return true;
}
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawerLayout"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/draweritems"
app:theme="#style/NavigationViewStyle">
</android.support.design.widget.NavigationView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relative"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
styles.xml:
<!-- Base application theme. -->
<!-- Customize your theme here. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
<style name="NavigationViewStyle">
<item name="android:textSize">20sp</item>
<!-- menu item text size-->
<item name="android:listPreferredItemHeightSmall">80dp</item><!-- menu item height-->
</style>
This code change
public class MainActivity extends AppCompatActivity
The following code
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener
I'm not sure, but I hope you make it.
How can I create a button inside Android's Toolbar that looks like this iOS example?
ToolBar with Button Tutorial
1 - Add library compatibility inside build.gradle
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:21.0.3'
}
2 - Create a file name color.xml to define the Toolbar colors
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ColorPrimary">#FF5722</color>
<color name="ColorPrimaryDark">#E64A19</color>
</resources>
3 - Modify your style.xml file
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
4 - Create a xml file like tool_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="4dp" />
5 - Include the Toolbar into your main_activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar" />
<TextView
android:layout_below="#+id/tool_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/TextDimTop"
android:text="#string/hello_world" />
</RelativeLayout>
6 - Then, put it inside your MainActivity class
package com.example.hp1.materialtoolbar;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
/* When using AppCompat support library
* (you need to extend Main Activity to
* ActionBarActivity)
* ActionBarActivity has deprecated, use AppCompatActivity
*/
public class MainActivity extends ActionBarActivity {
// Declaring the Toolbar Object
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
// Attaching the layout to the toolbar object
toolbar = (Toolbar) findViewById(R.id.tool_bar);
// Setting toolbar as the ActionBar with setSupportActionBar() call
setSupportActionBar(toolbar);
}
#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);
}
}
7 - And finally, add your "Button Items" to the menu_main.xml inside of /res/menu/ directory
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
<item
android:id="#+id/action_search"
android:orderInCategory="200"
android:title="Search"
android:icon="#drawable/ic_search"
app:showAsAction="ifRoom"/>
<item
android:id="#+id/action_user"
android:orderInCategory="300"
android:title="User"
android:icon="#drawable/ic_user"
app:showAsAction="ifRoom" />
</menu>
Toolbar customization can done by following ways
write button and textViews code inside toolbar as shown below
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="wrap_content"
android:layout_height="#dimen/btn_height_small"
android:text="Departure"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
Other way is to use item menu as shown below
#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;
}
Another possibility is to set the app:actionViewClass attribute in your menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/get_item"
android:orderInCategory="1"
android:text="Get"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.AppCompatButton"/>
</menu>
In your code you can access this button after the menu was inflated:
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.sample, menu);
MenuItem getItem = menu.findItem(R.id.get_item);
if (getItem != null) {
AppCompatButton button = (AppCompatButton) getItem.getActionView();
//Set a ClickListener, the text,
//the background color or something like that
}
return super.onCreateOptionsMenu(menu);
}
I have added text in ToolBar :
menu_skip.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="#+id/action_settings"
android:title="#string/text_skip"
app:showAsAction="never" />
</menu>
MainActivity.java
#Override
boolean onCreateOptionsMenu(Menu menu) {
inflater = getMenuInflater();
inflater.inflate(R.menu.menu_otp_skip, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
// action with ID action_refresh was selected
case R.id.menu_item_skip:
Toast.makeText(this, "Skip selected", Toast.LENGTH_SHORT)
.show();
break;
default:
break;
}
return true;
}
They are called menu items or action buttons in toolbar/actionbar. Here you have Google tutorial how it works and how to add them
https://developer.android.com/training/basics/actionbar/adding-buttons.html
You can actually put anything inside a toolbar. See the below code.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
Between the above toolbar tag you can put almost anything. That is the benefit of using a Toolbar.
Source: Android Toolbar Example
You could use actionLayout from the support library.
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/button_item"
android:title=""
app:actionLayout="#layout/button_layout"
app:showAsAction="always"
/>
</menu>
button_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
Activity.java
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
MenuItem item = menu.findItem(R.id.button_item);
Button btn = item.getActionView().findViewById(R.id.button);
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "Toolbar Button Clicked!", Toast.LENGTH_SHORT).show();
}
});
return true;
}
I was able to achieve that by wrapping Button with ConstraintLayout:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/top_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white_color">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cancel"
android:layout_marginStart="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_publish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/publish"
android:background="#drawable/button_publish_rounded"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintLeft_toRightOf="#id/cancel"
tools:layout_editor_absoluteY="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You may create a drawable resourcebutton_publish_rounded, define the button properties and assign this file to button's android:background property:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/green" />
<corners android:radius="100dp" />
</shape>