I want to have this kind of selection in my Navigation Drawer. This picture shows the selection which are made initially (by default not by user).
I have implemented this by the following code
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Category">
<menu>
<group android:checkableBehavior="single">
<item
android:id="#+id/coaching"
android:icon="#drawable/coaching"
android:title="Coaching"
android:checked="true"/>
<item
android:id="#+id/training"
android:icon="#drawable/training"
android:title="Training"/>
</group>
</menu>
</item>
<group android:checkableBehavior="single">
<item
android:id="#+id/new_registrations"
android:icon="#drawable/new_registrations"
android:title="New Registrations"
android:checked="true"/>
<item
android:id="#+id/ready_certificates"
android:icon="#drawable/ready_certificates"
android:title="Certificates Ready To Collect"/>
<item
android:id="#+id/allotted_certificates"
android:icon="#drawable/allotted_certificates"
android:title="Certificates Allotted So Far"/>
</group>
But the thing is when I select any item manually then all the previously selected items from both groups get deselected. So I want to validate one selection from group one and one selection from group two. Looking for missing attributes.
Remove android:checkableBehavior="single" from both groups.
Remove android:checked="true" from both "coaching" and "new_registrations" items.
Set android:checkable="true" for each item individually.
Set unique ids for both groups ("#+id/first_group" and "#+id/second_group").
Your activity_main_drawer.xml should look like this:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Category">
<menu>
<group android:id="#+id/first_group" >
<item
android:id="#+id/coaching"
android:icon="#drawable/coaching"
android:title="Coaching"
android:checkable="true" />
<item
android:id="#+id/training"
android:icon="#drawable/training"
android:title="Training"
android:checkable="true" />
</group>
</menu>
</item>
<group android:id="#+id/second_group" >
<item
android:id="#+id/new_registrations"
android:icon="#drawable/new_registrations"
android:title="New Registrations"
android:checkable="true" />
<item
android:id="#+id/ready_certificates"
android:icon="#drawable/ready_certificates"
android:title="Certificates Ready To Collect"
android:checkable="true" />
<item
android:id="#+id/allotted_certificates"
android:icon="#drawable/allotted_certificates"
android:title="Certificates Allotted So Far"
android:checkable="true" />
</group>
</menu>
Declare two MenuItem objects in the MainActivity.java and make them checked.
Add the following logic to the onNavigationItemSelected.
Your MainActivity.java should look like this:
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
MenuItem prevItemOfFirstGroup;
MenuItem prevItemOfSecondGroup;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// ... some code
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
prevItemOfFirstGroup=navigationView.getMenu().findItem(R.id.coaching);
prevItemOfFirstGroup.setChecked(true);
prevItemOfSecondGroup=navigationView.getMenu().findItem(R.id.new_registrations);
prevItemOfSecondGroup.setChecked(true);
}
#Override
public boolean onNavigationItemSelected(MenuItem item) {
int groupId = item.getGroupId();
if (groupId == R.id.first_group) {
if (prevItemOfFirstGroup != null) {
prevItemOfFirstGroup.setChecked(false);
}
prevItemOfFirstGroup = item;
} else if (groupId == R.id.second_group) {
if (prevItemOfSecondGroup != null) {
prevItemOfSecondGroup.setChecked(false);
}
prevItemOfSecondGroup = item;
}
item.setChecked(true);
// Handle navigation view item clicks here.
int id = item.getItemId();
// ... some code
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return false; // IMPORTANT! NOT TRUE!
}
}
Related
Hi I wouldike to know when I click on my bottomnavigationView how to display my search toolbar ?
getMenuInflater().inflate(R.menu.toolbar_menu, menu);
return super.onCreateOptionsMenu(menu);
}
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
return true;
case R.id.navigation_loope:
toolbar_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:title="Search"
android:id="#+id/action_search"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>
Bottom_nav_view.xml
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_home"
android:title="#string/title_home" />
<item
android:id="#+id/navigation_loope"
android:icon="#drawable/ic_loope"
android:title="#string/title_loope"
/>
<item
android:id="#+id/navigation_take_photo"
android:icon="#drawable/ic_take_photo"
android:title="#string/title_take_photo" />
<item
android:id="#+id/navigation_public"
android:icon="#drawable/ic_public"
android:title="#string/title_public" />
</menu>
I can't actually use getMenuInflater().inflate(R.menu.toolbar_menu, menu) I don't know how to implement it for doing the same result when i click on my loope (R.id.navigation_loope)
EDIT : Bottom_nav_view it's for my bottom bar and toolbar_menu for my topbar. If I click on the item navigation_loop, I wouldike to show the search bar on the top.
I wanted to create an option menu which shows up similar to Whatsapp even if the device has its own "hardware" option button. The solution I found online worked just fine until I wanted to add another action to the Bar.
Menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:title=""
android:id="#+id/addViewedMovie"
android:icon="#mipmap/ic_add_to_queue_black_24px"
android:showAsAction="always"
></item>
<item
android:title=""
android:id="#+id/menu_overflow"
android:icon="#mipmap/ic_more_vert_white_48dp"
app:showAsAction="always">
<menu>
<item
android:id="#+id/show_settings"
app:showAsAction="never"
android:title="#string/setttings"/>
<item
android:id="#+id/show_help"
app:showAsAction="never"
android:title="#string/help"/>
<item
android:id="#+id/show_about"
app:showAsAction="never"
android:title="#string/about"/>
</menu>
</item>
</menu>
And this in my MainActivity:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_menu, menu);
return true;
}
With this the app forces the addViewedMovie Action into an Overflow-Menu. Does anyone know how to prevent this?
Try this code and tell me if its work.. you should use app:showAsAction not android:showAsAction also you do not need to use submenu to show 3 dots.. just below code works fine also show 3 dots
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:title="Movie"
android:id="#+id/addViewedMovie"
android:icon="#mipmap/ic_add_to_queue_black_24px"
app:showAsAction="always"/>
<item
android:id="#+id/show_settings"
app:showAsAction="never"
android:title="#string/setttings"/>
<item
android:id="#+id/show_help"
app:showAsAction="never"
android:title="#string/help"/>
<item
android:id="#+id/show_about"
app:showAsAction="never"
android:title="#string/about"/>
</menu>
Create a folder name Menu in your res folder.
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/search"
android:icon="#drawable/ic_launcher"
myapp:showAsAction="ifRoom" />
<item android:id="#+id/abc"
android:title="ABC" />
<item android:id="#+id/abc1"
android:title="ABC1" />
<item android:id="#+id/abc2"
android:title="ABC2" />
</menu>
In java file put this:-
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.search:
return true;
case R.id.abc:
return true;
case R.id.abc1:
return true;
case R.id.abc2;
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Simple.
use app instead of android as app is for design support library.
And so, in Gradle build in dependencies, you must have: compile com.android.support:design..... like that. But, I have seen that you already used it below. So,
Just use: app:showAsAction="never" instead of android:showAsAction="always" in your addViewedMovie item.
Remember: never means it will be on overflow menu item. always means is will show in action bar.
If you are using in a fragment, add below line in the onCreate
setHasOptionsMenu(true);
And two more functions
#Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
super.onCreateOptionsMenu(menu, inflater);
}
Inflate your views in the above method. Listen to the action in the below one.
#Override public boolean onOptionsItemSelected(MenuItem item) {
return super.onOptionsItemSelected(item);
}
enter image description here(here is a pic of my toolbar with the menu items)
I have a toolbar with 4 menu items but I cannot figure out a way to add divderlines between each item. Heres is my .xml file for the toolbar
EDITED
This is what i have so far and its still not creating the separators
<menu 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"
tools:context="com.mycompany.materialtest.MainActivity">
<group android:id="#+id/homegroup"
android:checkableBehavior="single">
<item
android:id="#+id/home"
android:title="home"
android:orderInCategory="1"
android:icon="#drawable/homeclicked"
app:showAsAction="always">
</item>
</group>
<group android:id="#+id/searchgroup"
android:checkableBehavior="single">
<item
android:id="#+id/search"
android:title="search"
android:orderInCategory="2"
android:icon="#drawable/search"
app:showAsAction="always">
</item>
</group>
<group android:id="#+id/chatgroup"
android:checkableBehavior="single">
<item
android:id="#+id/chat"
android:title="chat"
android:orderInCategory="3"
android:icon="#drawable/chat"
app:showAsAction="always">
</item>
</group>
<group android:id="#+id/profilegroup"
android:checkableBehavior="single">
<item
android:id="#+id/profile"
android:title="profile"
android:orderInCategory="4"
android:icon="#drawable/user"
app:showAsAction="always">
</item>
</group>
</menu>
I have also seperated the menu items on my mainactivity.java. Here is the code if that helps in anyway.
public void setupEvenlyDistributedToolbar(Toolbar toolbar) {
// Use Display metrics to get Screen Dimensions
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);
toolbar.inflateMenu(R.menu.menu_bottombar);
// Add 10 spacing on either side of the toolbar
toolbar.setContentInsetsAbsolute(10, 10);
// Get the ChildCount of your Toolbar, this should only be 1
int childCount = toolbar.getChildCount();
// Get the Screen Width in pixels
int screenWidth = metrics.widthPixels;
// Create the Toolbar Params based on the screenWidth
Toolbar.LayoutParams toolbarParams = new Toolbar.LayoutParams(screenWidth, Toolbar.LayoutParams.WRAP_CONTENT);
// Loop through the child Items
for (int i = 0; i < childCount; i++) {
// Get the item at the current index
View childView = toolbar.getChildAt(i);
// If its a ViewGroup
if (childView instanceof ViewGroup) {
// Set its layout params
childView.setLayoutParams(toolbarParams);
// Get the child count of this view group, and compute the item widths based on this count & screen size
int innerChildCount = ((ViewGroup) childView).getChildCount();
int itemWidth = (screenWidth / innerChildCount);
// Create layout params for the ActionMenuView
ActionMenuView.LayoutParams params = new ActionMenuView.LayoutParams(itemWidth, Toolbar.LayoutParams.WRAP_CONTENT);
// Loop through the children
for (int j = 0; j < innerChildCount; j++) {
View grandChild = ((ViewGroup) childView).getChildAt(j);
if (grandChild instanceof ActionMenuItemView) {
// set the layout parameters on each View
grandChild.setLayoutParams(params);
}
}
}
}
}
}`
Any help would be great thanks!
Try this in XML
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="#+id/home"
android:checkableBehavior="single">
<item
android:id="#+id/homegroup"
android:title="#string/next"
android:orderInCategory="1"
android:icon="#drawable/homeclicked"
app:showAsAction="always">
</item>
</group>
<group android:id="#+id/searchgroup"
android:checkableBehavior="single">
<item
android:id="#+id/search"
android:title="#string/next"
android:orderInCategory="2"
android:icon="#drawable/search"
app:showAsAction="always">
</item>
</group>
<group android:id="#+id/chatgroup"
android:checkableBehavior="single">
<item
android:id="#+id/chat"
android:title="#string/next"
android:orderInCategory="3"
android:icon="#drawable/chat"
app:showAsAction="always">
</item>
</group>
<group android:id="#+id/profilegroup"
android:checkableBehavior="single">
<item
android:id="#+id/profile"
android:title="#string/next"
android:orderInCategory="4"
android:icon="#drawable/profile"
app:showAsAction="always">
</item>
</group>
</menu>
I changed from a normal ActionBar to the new Toolbar. My problem is that my old menu doesn't work. When I click on the overflow icon nothing happens. I'm using appcompat v7 but I could not find any solution.
Can someone help me?
Menufunctions:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu
getMenuInflater().inflate(R.menu.chatmenu, menu);
return super.onCreateOptionsMenu(menu);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.onlineliste:
getOnlineList();
return true;
case R.id.settings:
showSettings();
return true;
case R.id.logout:
logout();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Chatmenu:
<?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/onlineliste"
android:title="#string/userliste"
app:showAsAction="always">
</item>
<item
android:id="#+id/settings"
android:title="#string/settings"
app:showAsAction="never">
</item>
<item
android:id="#+id/logout"
android:title="#string/logout"
app:showAsAction="never">
</item>
</menu>
Theme
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#428bca</item>
<item name="colorPrimaryDark">#428bca</item>
<item name="android:windowNoTitle">true</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark</item>
<item name="windowActionBar">false</item>
</style>
Toolbar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark" />
Oh my godness I got it. Thank you for all your help guys!
The problem was that I had a RelativeLayout which was overlapping the toolbar but I did not see this directly. THe solution was to add
android:layout_below="#+id/toolbar" to the relativ layout and now everything works fine.
Again thanks for all your help guys and sorry!
try this one:
<?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/onlineliste"
android:visible="true"
android:title="#string/userliste"
app:showAsAction="never">
</item>
<item
android:id="#+id/settings"
android:visible="true"
android:title="#string/settings"
app:showAsAction="never">
</item>
<item
android:id="#+id/logout"
android:visible="true"
android:title="#string/logout"
app:showAsAction="never">
</item>
also your theme must have a parent of Theme.AppCompat and your Activity must extends from ActionBarActivity
Probably you need to set your Toolbar as the activity ActionBar, using:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.your_toolbar);
setSupportActionBar(toolbar);
You are not returning true from the onCreateOptionMenu().
The documentation says that
You must return true for the menu to be displayed; if you return false it will not be shown.
Insead of
return super.onCreateOptionsMenu(menu);
which always return false. Return true from onCreateOptionsMenu(menu);
Check out the documentation here.
Source Link
I am trying to have a search action on my action bar. I have set an icon and have showAsAction set to always but it is still always displayed in the overflow menu. How can I make it display on the action bar itself? Thanks!
Activity
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
setTitle("Add");
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
Toast.makeText(getApplicationContext(), "Settings",
Toast.LENGTH_LONG).show();
return true;
}
if (id == R.id.action_search) {
Toast.makeText(getApplicationContext(), "Search",
Toast.LENGTH_LONG).show();
return true;
}
return super.onOptionsItemSelected(item);
}
}
Menu XML file
<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="com.example.testtabs.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:actionViewClass="android.support.v7.widget.SearchView"
android:icon="#drawable/ic_search"
android:showAsAction="always"
android:title="#string/title_search"/>
</menu>
Either remove
android:actionViewClass="android.support.v7.widget.SearchView"
or delete your case statement for action_search in onOptionsItemSelected. Doing either of those will display the icon.
If you want to use SearchView the callback is handled differently than onOptionsItemSelected.
Documentation here: http://developer.android.com/guide/topics/ui/actionbar.html#ActionView
Just change app:showAsAction instead of android:showAsAction
<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="com.example.testtabs.MainActivity" >
<item
android:id="#+id/action_settings"
android:orderInCategory="100"`enter code here`
android:title="#string/action_settings"
app:showAsAction="never"/>
<item
android:id="#+id/action_search"
android:actionViewClass="android.support.v7.widget.SearchView"
android:icon="#drawable/ic_search"
app:showAsAction="always"
android:title="#string/title_search"/>
</menu>