Can you please tell me how can I create an android menu item using android setting icon?
Here is a list of the standard icons. I don't see a "settings" icon. Perhaps you mean "Preferences" (ic_menu_preferences)?
You can set the icon programmatically like this:
menu.add(0, MENU_QUIT, 0, "Quit").setIcon(R.drawable.menu_quit_icon);
You can also set it in your xml layout like this:
<item android:id="#+id/save_button"
android:icon="#android:drawable/ic_menu_save"
android:title="Save Image"/>
Creating Menus in Android
You can see all the icons in the android SDK forder:
_your_install_path_\android-sdk\platforms\android-10\data\res\drawable-hdpi\
and then get a reference to them with:
android.R.drawable.ic_menu_preferences
just like it was your drawable.
Add a new Vector Asset.
File -> New -> Vector Asset.
Click on the icon to change it.
Select the icon you want (e.g. search for "setting").
Adjust other settings.
Use that new Vector Asset in your xml.
android:logo="#drawable/ic_settings_white_24dp"
Party!
If you want to handle the event, just try this on your activity
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
// action with ID action_refresh was selected
case android.R.drawable.ic_popup_sync:
Toast.makeText(this, "ic_popup_sync selected", Toast.LENGTH_SHORT)
.show();
break;
default:
break;
}
return true;
}
And in your menu folder use something like this:
<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.test.app.MainActivity"
>
<item android:id="#+id/action_settings1"
android:icon="#drawable/abc_ic_search"
android:title="Find Location"
android:orderInCategory="100"
app:showAsAction="ifRoom" />
<item android:id="#+id/save_button"
android:icon="#android:drawable/ic_menu_save"
android:title="Save Image"/>
<item android:id="#+id/refresh"
android:icon="#android:drawable/ic_popup_sync"
android:title="Refresh"/>
</menu>
Related
I have added BottomNavigationView in my application like.
main.xml
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/bottom_navigation_main" />
bottom_navigation_main.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/action_favorites"
android:enabled="true"
android:icon="#drawable/ic_favorite_white_24dp"
android:title="#string/text_favorites"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_schedules"
android:enabled="true"
android:icon="#drawable/ic_access_time_white_24dp"
android:title="#string/text_schedules"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_music"
android:enabled="true"
android:icon="#drawable/ic_audiotrack_white_24dp"
android:title="#string/text_music"
app:showAsAction="ifRoom" />
</menu>
MainActivity click
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_favorites:
//need change icon of favotites here.
case R.id.action_schedules:
case R.id.action_music:
}
return true;
}
});
I want to change the icon of the bottom navigation of selected position. How can we achieve this feature when user click one item?
(if user clicked one item then the icon change to another one)
You can simply create drawable selector in drawable folder and image can be change according to the state of the widget used in view
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/calender_green" android:state_checked="true"/>
<item android:drawable="#drawable/calender_black" android:state_checked="false"/>
</selector>
I found this is better approach to use selector drawable:
At first create an xml file in your drawable folder.
For example, xml file name is child_selector.xml at drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/child" android:state_checked="false"/>
<item android:drawable="#drawable/child_fill" android:state_checked="true"/>
</selector>
Simply add child_selector in menu item of your bottom_navigation_main.xml:
Like: android:icon="#drawable/child_selector"
Example:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_child"
android:icon="#drawable/child_selector"
android:title="#string/title_child" />
</menu>
And must add following line in your activity-
bottomNavigationView.setItemIconTintList(null);
If above solutions are not working for you to change selected item icon then add below line to your code:
bottomNavigationView.setItemIconTintList(null);
This will disable tint effect of selected item icon.
I had the same problem. I have added selector drawable for changing icon of BottomNavigationView item when its checked/selected.
You need to reset the icon onclick, and then on the switch case you need to set only the one you need to change, so only when selected the icon change.
Menu menu = bottomNavigationView.getMenu();
menu.findItem(R.id.action_favorites).setIcon(favDrawable);
switch (item.getItemId()) {
case R.id.action_favorites:
item.setIcon(favDrawableSelected);
case R.id.action_schedules:
case R.id.action_music:
}
Okay I wanted to understand how to have each item have their own image, and with some confusion in the comments on where it should go, I wanted to type up this answer.
First create your menu and its items. Your selector will go inside those items in the ICON value. Here we have 2 selectors, each made for its menu item.
item
android:id="#+id/navigation_home"
android:icon="#drawable/navigation_home_selector"
android:title="#string/title_home" />
item
android:id="#+id/navigation_profile"
android:icon="#drawable/navigation_profile_selector"
android:title="#string/title_profile" />
Now here is your selector file that will be housed in your drawable folder.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/menu_selected" android:state_checked="true"/>
<item android:drawable="#drawable/menu" android:state_checked="false"/>
</selector>
Final step was provided by #
KishanSolanki124
Add this line of code to your BottomNavigationView.
BottomNavigationView.setItemIconTintList(null);
There you have it. All works like a charm.
The above answer from ajay singh https://stackoverflow.com/a/57248961/9793057 helped me out, as well as employing answers from above.
The following code within res->drawable folder (selector_stock_bottom_nav_view.xml)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/button_and_tab_color" android:state_checked="true" />
<item android:color="#android:color/darker_gray" android:state_checked="false" />
</selector>
These are the attributes in my bottom navigation view
<com.google.android.material.bottomnavigation.BottomNavigationView
app:itemIconTint="#drawable/selector_stock_bottom_nav_view" //To change icon color
app:itemTextColor="#drawable/selector_stock_bottom_nav_view" //To change text color
app:itemTextAppearanceActive="#style/stockBottomNavigationView.Active" //To change size of text during active state
app:itemTextAppearanceInactive="#style/stockBottomNavigationView.InActive"
app:menu="#menu/bottom_navigation_menu"
app:labelVisibilityMode="labeled"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:selectedBackgroundVisible="false"
android:id="#+id/stock_bottom_navigation"/>
I DID-NOT use "BottomNavigationView.setItemIconTintList(null)" anywhere in my code.
Now here comes the most important piece of code, make sure to return "TRUE" in bottom navigation view's listener, i.e,
private BottomNavigationView.OnNavigationItemSelectedListener stockBottomNavListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
return true;
}
};
Bonus: To change size of text active/inactive state
Place the following code in styles.xml file
<style name="stockBottomNavigationView.InActive" parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">7sp</item>
</style>
<style name="stockBottomNavigationView.Active" parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">8sp</item>
</style>
The above answer is a compilation of answers from various answers in stackoverflow related to bottom navigation views, icon & text color/size change.
Thanks for the selector method, that works for me (api v26)
For those who wondering how to set it back to origin unselected icon programmatically, consider add this to your OnNavigationItemSelectedListener before your switch(Java) or when(Kotlin) :
private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
navigation.menu.getItem(0).setIcon(R.drawable.ic_tab_home)
navigation.menu.getItem(1).setIcon(R.drawable.ic_tab_account)
navigation.menu.getItem(2).setIcon(R.drawable.ic_tab_trading)
navigation.menu.getItem(3).setIcon(R.drawable.ic_tab_wallet)
when (item.itemId) {
R.id.navigation_home -> {
message.setText(R.string.title_home)
item.setIcon(R.drawable.ic_tab_home_active)
return#OnNavigationItemSelectedListener true
}
R.id.navigation_account -> {
message.setText(R.string.title_account)
item.setIcon(R.drawable.ic_tab_account_active)
return#OnNavigationItemSelectedListener true
}
R.id.navigation_trading -> {
message.setText(R.string.title_trading)
item.setIcon(R.drawable.ic_tab_trading_active)
return#OnNavigationItemSelectedListener true
}
R.id.navigation_wallet-> {
message.setText(R.string.title_wallet)
item.setIcon(R.drawable.ic_tab_wallet_active)
return#OnNavigationItemSelectedListener true
}
}
false
}
Found the answer. we can use
item.setIcon(R.drawable.icon_name)
to change the icon .. will try to imporve answer
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_favorites:
//change the icon
item.setIcon(R.drawable.icon_name);
case R.id.action_schedules:
case R.id.action_music:
}
return true;
}
});
You can dynamically set your icon using this method.
R.id.navigation_menu is your item id in your R.menu.menu_bottom_navigation.
val menuItem = bottomNavigationView.menu.findItem(R.id.navigation_menu)
menuItem.setIcon(R.drawable.ic_icon)
On Material 3
You need to create a style and put your colors on:
<style name="BottomNavigationView">
<item name="colorSecondaryContainer">#color/background_dark</item>
<item name="colorSurface">?attr/colorPrimaryVariant</item>
<!-- Icon color Active -->
<item name="colorOnSecondaryContainer">#color/yellow</item>
<!-- Text Color Active -->
<item name="colorOnSurface">#color/yellow</item>
</style>
To see inactive colors, check the documentation.
In the Latest material Design library default behavior of BottomNavigation is provided where you don't need to provide property itemIconTint it will manage it automatically.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:itemBackground="#color/white"
app:itemTextColor="#color/textBlue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_navigation"
app:labelVisibilityMode="labeled"
app:itemTextAppearanceActive="#color/colorPrimary"
/>
I have a situation in which there are different layouts and each layout has a menu. How do I do it? For reference, you may visit Youtube Mobile App and on the right side of the video, there appears 3 dots, on clicking them, a menu will be opened. I have the screen shot but inadequate credits stop me from uploading it.Please help me out. Thanks in Advance.!
As mentioned by user1632209 you can use android's menu but if you want to create your own pop menu you can do it as follows:
PopupMenu popup = new PopupMenu(context, btnSettings); //you can use image button
// as btnSettings on your GUI after
//clicking this button pop up menu will be shown
popup.getMenuInflater().inflate(R.menu.settings_menu, popup.getMenu());
popup.setOnMenuItemClickListener(this);
popup.show();
you can add listener to your menu option like:
#Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.option1:
//Code for option 1
break;
case R.id.option2:
//Code for option 2
break;
default:
break;
}
return false;
}
Create settings_menu.xml in res->menu directory like:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/option1"
android:icon="#drawable/icon_for_option1"
android:orderInCategory="100"
android:showAsAction="never"
android:title="Option 1"/>
<item
android:id="#+id/option2"
android:icon="#drawable/icon_for_option1"
android:orderInCategory="200"
android:showAsAction="never"
android:title="Option 2"/>
</menu>
I want to provide a image button in place of action bar and on clicking that I want to display list of options and again on clicking any particular option I want to pass Intent.
How can I achieve this?Does anybody know
If so help me out.
Thank you...
In order to display the imagebutton in Actionbar. First add an item in main.xml.Which is Under MENU Folder.
for ex:
main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/stopwatch"
android:orderInCategory="50"
android:icon="#drawable/ic_action_alarms"
android:showAsAction="always|withText"
android:title="Stopwatch"/>
</menu>
then add the following code in your mainActivity.java
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// TODO Auto-generated method stub
switch(item.getItemId())
{
case (R.id.stopwatch):
Toast.makeText(getApplicationContext(), "Stopwatch", Toast.LENGTH_SHORT).show();
Intent i=new Intent(getApplicationContext(), Stopwatch.class);
startActivity(i);
break;
return super.onOptionsItemSelected(item);
}
and Don't forget to create another java class as Stopwatch.java
Go through the following link it will help you
https://developer.android.com/training/basics/actionbar/adding-buttons.html
You can set a custom view on your action bar, here is the link
How to display custom view in ActionBar?
It can be done in two ways
Options 1: Create an layout XML with your image button, and set that layout to action bar.
For example: In you activity copy the following lines.
ActionBar actionBar = getSupportActionBar();
LayoutInflater inflator = (LayoutInflater) this .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflator.inflate(R.layout.search, null);
actionBar.setCustomView(v);
Now display a PopUp menu when the user clicks a ImageButton.
Option 2:
Instead of setting the view for the ActionBar , you can use sub-Menu's in the action bar. For this you need to create sub-Menu.
for example:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/file"
android:icon="#drawable/ic_new_game"
android:title="#string/file" >
<!-- "file" submenu -->
<menu>
<item android:id="#+id/create_new"
android:title="#string/create_new" />
<item android:id="#+id/open"
android:title="#string/open" />
</menu>
</item>
</menu>
Set an icon for the main `MenuItem` so it looks like an `ImageButton`, when the user click the first MenuItem it displays the its sub-`Menu`
I am developing an Android app with ActionBarCompat (released by google). In tablets,it shows more menu items as a dropdown menu at top right (Image 1) but in small devices (handsets) you should hit menu button to see more items (Image 2).
Is there any way to have top right dropdown menu like tablets in handset devices? If yes, how?
Thank you.
Sure you can !
First of all, make a menu.xml in res > menu.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:technicachat="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<item
android:id="#+id/dropdown_menu"
android:showAsAction="ifRoom"
technicachat:showAsAction="ifRoom"
android:title="Options"
android:icon="#drawable/ic_menu_moreoverflow_normal_holo_light">
<menu>
<item
android:id="#+id/item1"
android:showAsAction="ifRoom"
technicachat:showAsAction="ifRoom"
android:title="Refresh"
android:icon="#drawable/ic_menu_refresh"/>
</menu>
</item>
</menu>
All items under the second menu will appear when you click on the dropdown menu button.
You don't even need to use onOptionsItemSelected to drop it.
Just proceed as usual to handle item selection.
#Override
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId())
{
case R.id.item1:
/*DO STUFF*/
}
return super.onOptionsItemSelected(item);
}
In case you want pngs for your apk, they are under /your sdk path/platforms/android-xx/data/res/ and you got drawable-hdpi, mdpi etc. For example the one you need is ic_menu_moreoverflow_normal_holo_light.
Here you are ! ;)
I have an ActionBar that should display the action buttons in a custom way. For this I created a custom view and attached it to the ActionBar.
One thing to mention is that I am using a menu.xml resoure file to load the options menu and display them on a smartphone, but do not display them on tablet, instead use a custom view. For this I market every menu item in the xml as: android:showAsAction="never"
Everything looks fine, except one little thing that still remains on the right of the ActionBar - the "More" button.
How can I remove it?
I tried this:
ActionBar bar = activity.getActionBar();
bar.removeAllTabs();
but the "more" button still remains there.
EDIT:
This is my menu.xml file:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/menu_username"
android:icon="#drawable/menu_username"
android:orderInCategory="0"
android:showAsAction="never"
android:title="#string/menu_username">
<menu>
<item
android:id="#+id/menu_logout"
android:title="#string/menu_logout"/>
</menu>
</item>
<item
android:id="#+id/menu_settings"
android:icon="#drawable/menu_settings"
android:orderInCategory="1"
android:showAsAction="never"
android:title="#string/menu_settings"/>
<item
android:id="#+id/menu_search"
android:icon="#drawable/menu_search"
android:orderInCategory="1"
android:showAsAction="never"
android:title="#string/menu_search"/>
</menu>
Please note I still want to inflate this menu on a smartphone, but don't want to use it on a tablet.
Setting showAsAction="never" will force an menu item into the overflow. Why not check in onCreateOptionsMenu(...) that the device is a tablet, and if it is just not inflate the menu? Something like this:
public boolean onCreateOptionsMenu(Menu menu) {
if (getResources().getConfiguration().smallestScreenWidthDp >= 600) {
//It's a tablet, don't inflate, only create the manual view
manualMenuCreation();
} else {
getMenuInflater().inflate(R.menu.menu, menu);
}
return true;
}
Don't forget smallestScreenWidthDp is only available in 3.2 or above, so you'll have to take that into consideration.