How can I change the size of a menu item in the android toolbar? Currently the menus have a very small size and I want to increase the size. If anyone knows please help me to find a solution.
app_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/primaryColor"
android:minHeight="?attr/actionBarSize"
android:paddingTop="#dimen/app_bar_top_padding"
android:theme="#style/ToolBarStyle"/>
Styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="AppTheme.Base"> </style>
<!-- Application theme. -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
<item name="colorControlHighlight">#color/primary_high_light</item>
<!-- <item name="textColorPrimary">#color/ColorPrimaryText</item> -->
</style>
<style name="ToolBarStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColorPrimary">#ffffff</item>
</style>
<style name="option" parent="Theme.AppCompat.Light">
</style>
<style name="Dialog" parent="Base.Theme.AppCompat.Light.Dialog">
</style>
menu_option.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/homes"
android:title="homes"
android:icon="#drawable/ic_action_home1"
app:showAsAction="always"/>
<item android:id="#+id/profilepreview"
android:title="ProfilePreview"
android:icon="#drawable/profile"
app:showAsAction="always"/>
<item android:id="#+id/findPeople"
android:title="findPeople"
android:icon="#drawable/ic_action_search1"
app:showAsAction="always"/>
<item android:id="#+id/log"
android:title="log"
android:icon="#drawable/ic_action_logout1"
app:showAsAction="always"/>
</menu>
MainActivity.java
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_option, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.profilepreview:
startActivity(new Intent(this, ProfilePreview.class));
return true;
case R.id.homes:
mFragment = new HomeFragment();
break;
case R.id.findPeople:
mFragment = new FindFriendsFragment();
break;
case R.id.log:
M.logOut(this);
mIntent = new Intent(this, LoginActivity.class);
finish();
}
if (mFragment != null && mIntent == null) {
mFragmentManager = getFragmentManager();
mFragmentManager.beginTransaction()
.replace(R.id.frameContainer, mFragment).commit();
} else {
startActivity(mIntent);
mIntent = null;
}return super.onOptionsItemSelected(item);
}
You may design a custom layout and add it as your actionlayout. ALso make sure you do not add any icon in menu.xml file.
<item android:id="#+id/homes"
android:title="homes"
app:actionLayout="#layout/your_custom_layout"
app:showAsAction="always"/>
Then give min_height in your custom layout.
I ran into this problem too and the only workaround I was able to have was to use smaller images. A size of 24dp from the icons here (https://design.google.com/icons) fits nicely into my toolbar.
I suggest you to read this blog for custom toolbar.
https://stablekernel.com/using-custom-views-as-menu-items/
instead of adding drawable_icon to your menu-xml file, you can use "app:actionLayout" in that menu-xml file to specify the other xml-file(where you are going to create custom toolbar icon).
Just increase the size of the vector image(in the right) from the default 24x24 to a different size but after a certain size it won't scale up. The size might seem odd if it is put beside a view inflated(with orange background in the left) in the custom toolbar as shown in the image, only way to fix this is to inflate another view in the toolbar with the vector as the background.
Related
I want to change the color of the text of an item that groups a menu.
The xml file:
<?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_mi_cuenta"
android:icon="#mipmap/ic_mi_cuenta"
android:title="#string/mi_cuenta" />
</group>
<item android:title="#string/herramientas">
<menu>
<item
android:id="#+id/nav_configuracion"
android:icon="#mipmap/ic_config"
android:title="#string/configuraci_n" />
</menu>
</item>
</menu>
I wnat to change text color of:
<item android:title="#string/herramientas">
As you can see, Herramientas comes out in black and as the background is also black it barely looks. I can not find any property to change it. The color of the item 'Mis datos' and 'Configuración' change it programmatically as follows from an external json file of a server:
colorElegido = getParseColor(json.getString("colorMenuLateral"));
navigationView.setBackgroundColor(colorElegido);
colorElegido = getParseColor(json.getString("colorFuenteMenuLateral"));
ColorStateList colorList = getColorList(colorElegido);
navigationView.setItemTextColor(colorList);
The following code will workout,
menu.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/nav_mi_cuenta"
android:icon="#mipmap/ic_mi_cuenta"
android:title="#string/mi_cuenta" />
</group>
<item
android:id="#+id/herramientas"
android:title="#string/herramientas">
<menu>
<item
android:id="#+id/nav_configuracion"
android:icon="#mipmap/ic_config"
android:title="#string/configuraci_n" />
</menu>
</item>
</menu>
Add this in your styles,
<style name="TextAppearance44">
<item name="android:textColor">#FF0000</item>
<item name="android:textSize">20sp</item>
</style>
<style name="NavigationDrawerStyle">
<item name="android:textSize">16sp</item><!-- text size in menu-->
<item name="android:textColor">#880ACE0A</item>
<item name="itemTextColor">#880ACE0A</item>
</style>
And in your activity,
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
Menu menu = navigationView.getMenu();
MenuItem tools= menu.findItem(R.id.herramientas);
SpannableString s = new SpannableString(tools.getTitle());
s.setSpan(new TextAppearanceSpan(this, R.style.TextAppearance44), 0, s.length(), 0);
tools.setTitle(s);
navigationView.setNavigationItemSelectedListener(this);
Change according to you,
And other text color change you can use like in your xml file,
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
style="#style/NavigationDrawerStyle"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
to make a custom popup make an ImageView in toolbar
private ImageView setting;
public void menuOptions() {
PopupMenu popup = new PopupMenu(MainActivity.this, setting);
// Inflating the Popup using xml file
popup.getMenuInflater()
.inflate(R.menu.menu_main, popup.getMenu());
//registering popup with OnMenuItemClickListener
popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.button1:
return (true);
case R.id.button2:
// block contacts
return (true);
}
return true;
}
});
popup.show(); //showing popup menu
}
on Button click call above function
menuOptions();
in the layout you inflate menu_main.xml, make your desired view.
I am using the appcompat-v7 toolbar and added some menu with icons.
My menu_items.xml
<item
android:id="#+id/quit"
android:title="Quit"
android:icon="#drawable/ic_power"
android:orderInCategory="700"
app:showAsAction="never"/>
<item
android:id="#+id/app_settings"
android:orderInCategory="600"
android:icon="#drawable/ic_cog"
app:showAsAction="never"
android:title="Settings"/>
<item
android:id="#+id/help"
android:orderInCategory="500"
android:title="Help"
android:icon="#drawable/ic_help"
app:showAsAction="always" />
<item
android:id="#+id/logout"
android:orderInCategory="400"
android:title="Logout"
android:icon="#drawable/ic_logout"
app:showAsAction="ifRoom" />
<item
android:id="#+id/tip"
android:orderInCategory="300"
android:title="Give Tip"
android:icon="#drawable/ic_coffee"
app:showAsAction="ifRoom" />
<item
android:id="#+id/withdraw"
android:orderInCategory="200"
android:title="Withdraw"
android:icon="#drawable/ic_bank"
app:showAsAction="ifRoom" />
<item
android:id="#+id/deposit"
android:orderInCategory="100"
android:title="Deposit"
android:icon="#drawable/ic_cash_multiple"
app:showAsAction="ifRoom" />
The icons are originally black but i was expecting it to appear as white on the toolbar if I use the
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Instead it shows black icons.
My toolbar.xml
<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_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary"/>
How can I make the icons appear white?
Edit:
The icons shown on the toolbar are the only icons i want to change color.. Not all the icons, including the overflowed item's icon...
you can set manually like this
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
for(int i = 0; i < menu.size(); i++){
Drawable drawable = menu.getItem(i).getIcon();
if(drawable != null) {
drawable.mutate();
drawable.setColorFilter(getResources().getColor(R.color.whiteColor), PorterDuff.Mode.SRC_ATOP);
}
}
return true;
}
for particular icon:
MenuItem favoriteItem = menu.findItem(R.id.action_favorite);
Drawable newIcon = (Drawable)favoriteItem.getIcon();
newIcon.mutate().setColorFilter(Color.argb(255, 200, 200, 200), PorterDuff.Mode.SRC_IN);
favoriteItem.setIcon(newIcon);
if your orientation changing runtime then you can check orientation using condition and set menu color in this condition.
like this:
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Checks the orientation of the screen
if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
// here you can set menu item color if it landScape
} else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
}
}
or if you dont want to rotate your screen, you can simply set in manifest file like this:
<activity android:name=".activities.MainActivity"
android:screenOrientation="portrait">
or you can use itemIconTint for particular items:
<item
android:id="#+id/quit"
android:title="Quit"
android:icon="#drawable/ic_power"
android:orderInCategory="700"
**app:itemIconTint="#color/black"**
app:showAsAction="never"/>
<item
android:id="#+id/app_settings"
android:orderInCategory="600"
android:icon="#drawable/ic_cog"
app:showAsAction="never"
**app:itemIconTint="#color/black"**
android:title="Settings"/>
Your Main theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
</style>
PopUp or menu item theme also if you want some more like background of popup ,size and popupmenu you can add if you want otherwise remove
<style name="PopupMenu" parent="android:Theme.Holo.Light">
<item name="android:popupBackground">#android:color/white</item>
<item name="android:textColor">#color/white</item>
<item name="android:textSize">9sp</item>
<item name="textAppearanceLargePopupMenu">#style/TextAppearance.AppCompat.Light.Widget.PopupMenu.Large</item>
<item name="textAppearanceSmallPopupMenu">#style/TextAppearance.AppCompat.Light.Widget.PopupMenu.Small</item>
</style>
Color
<color name="white">#ffffffff</color>
I want to make an action bar with a button on the right with a margin_right. like this
And I use the action button to do it. But the button was on the right without margin_right.
android:layout_marginRight doesn't work here.
here is my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarSize">50dp</item>
<item name="android:actionBarStyle">#style/my_actionbar_style</item>
<item name="android:actionButtonStyle">#style/my_action_button</item>
</style>
<style name="my_actionbar_style" parent="android:Widget.ActionBar">
<item name="android:background">#color/actionbar_backgroud</item>
<item name="android:titleTextStyle">#style/myTitleStyle</item>
<item name="android:displayOptions">showTitle</item>
</style>
<style name="myTitleStyle">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">20sp</item>
</style>
<style name="my_action_button">
<item name="android:background">#drawable/button_selector</item>
<item name="android:width">70dp</item>
<item name="android:textSize">13sp</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginRight">10dp</item>
</style>
and this is my menu.xml:
<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:ignore="AppCompatResource">
<item
android:id="#+id/action_search"
android:title="submit"
android:showAsAction="always" /></menu>
Another quick and clean way to go about this is specifying your own layout for that menu button. 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.MainActivity">
<item
android:id="#+id/action_custom_button"
android:title="Custom Button"
android:icon="#drawable/ic_custom_button"
app:actionLayout="#layout/layout_to_custom_button"
app:showAsAction="always" />
</menu>
there should be
layout_to_custom_button.xml
layout file which contains the padding and style you wanted.
and also do this in your activity for the click event
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_product_detail, menu);
final Menu mMenu = menu;
final MenuItem item = menu.findItem(R.id.action_custom_button);
item.getActionView().setOnClickListener(new View.OnClickListener(){
#Override
public void onClick(View v) {
mMenu.performIdentifierAction(item.getItemId(), 0);
}
});
return true;
}
I found the easiest way to do this was to just create your own action bar in a layout file. You can then use it by having your activities inherit from a common activity that overrides setContentView, where you just stick the view you're given into a parent view containing that and your action bar. You can mimick the overflowing menu behavior by using ActionMenuView (5.0+).
For example, assume you have an action_bar.xml with an ActionMenuView in it named menuView:
class BaseActivity extends Activity {
...
ActionMenuView mMenuView;
...
#Override
protected void setContentView(int resId) {
LayoutInflater inflater = getLayoutInflater();
View actionBar = inflater.inflate(R.layout.action_bar, null);
View contentView = inflater.inflate(resId);
mMenuView = (ActionMenuView)actionBar.findViewById(R.id.menuView);
RelativeLayout parentLayout = new RelativeLayout(this);
LayoutParams actionBarLayout = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
actionBar.setLayoutParams(actionBarLayout);
parentLayout.addView(actionBar);
actionBar.setId(R.id.actionBar);
LayoutParams contentLayout = new LayoutParams(LayoutParams.MATCH_PARENT, 0);
contentLayout.addRule(RelativeLayout.BELOW, actionBar.getId());
contentLayout.addRule(RelativeLayout.ALIGN_WITH_PARENT_BOTTOM);
contentView.setLayoutParams(contentLayout);
parentLayout.addView(contentView);
setContentView(parentLayout);
}
}
Hello i have to create a PopUp Menu and i know how to do that.
Here is my code to create default PopUp Menu ..
popup_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/item"
android:showAsAction="ifRoom|withText"
android:title="item1"
android:visible="true"/>
<item
android:id="#+id/item2"
android:showAsAction="ifRoom|withText"
android:title="item2"
android:visible="true"/>
<item
android:id="#+id/item3"
android:showAsAction="ifRoom|withText"
android:title="item3"
android:visible="true"/>
PopUpMenu_Activity.java
findViewById(R.id.btn_click).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
PopupMenu popupMenu = new PopupMenu(PopMenuActivity.this, view);
popupMenu.setOnMenuItemClickListener(PopMenuActivity.this);
popupMenu.inflate(R.menu.popup_menu);
popupMenu.show();
}
});
and
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.item1:
Toast.makeText(this, "item1 clicked", Toast.LENGTH_SHORT).show();
return true;
case R.id.item2:
Toast.makeText(this, "item2 clicked", Toast.LENGTH_SHORT).show();
return true;
case R.id.item3:
Toast.makeText(this, "item3 clicked", Toast.LENGTH_SHORT).show();
return true;
default:
return false;
}
}
My Question is how can i customize it? I want to add custom fonts in PopUp menu with semi transparent background as shown in figure.
Please help...!!!
You can use ListPopupWindow. You can submit your custom Adapter to the ListPopupWindow's object, and customize its appearance into getView
You can use android:actionViewClass property in the menu xml to define you own custom class
Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.
final custom style is:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.myapp" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/myapp_DropDownNav</item>
<item name="android:actionBarWidgetTheme">#style/myapp.actionBarWidgetTheme</item>
</style>
<style name="myapp.actionBarWidgetTheme" parent="#style/Theme.">
<item name="android:spinnerDropDownItemStyle">#style/myapp.Widget.DropDownItem.Spinner</item>
</style>
<style name="myapp_DropDownNav" parent="#style/Widget.Spinner.DropDown.ActionBar">
<item name="background">#drawable/spinner_background_ab_myapp</item>
<item name="android:background">#drawable/spinner_background_ab_myapp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myapp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myapp</item>
</style>
<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
<item name="android:textAppearance">#style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>
<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
<item name="android:textColor">#color/black</item>
</style>
I am using simple menu items in action bar by using following code in main activity:
package com.kaasib.ftpclient;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.app.ActionBar;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item){
boolean ret;
if(item.getItemId() == R.id.connection_manager){
ret = true;
}else{
ret = super.onOptionsItemSelected(item);
}
return ret;
}
}
Here is menu xml in main.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/connection_manager"
android:orderInCategory="100"
android:showAsAction="collapseActionView"
android:title="#string/connection_manager"
android:textSize="2sp"
/>
</menu>
It is working except it is not making any change to text size. Right now text size for menu item is bigger while I want font size to be smaller. So what am I doing wrong? Shouldn't android:textSize attributute work? Or is there some other way to do so? I believe that text size should be set from XML not from java as it is design related thing. Any suggestion?
Ok, so this is my solution, you can actually use the SpannableString for fetching the text and then changing the font via RelativeSizeSpan (if you want text size relative to the default one) or via AbsoluteSizeSpan (if you want to manually input the text size):
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
MenuInflater awesome = getMenuInflater();
awesome.inflate(R.menu.menu_main, menu);
for(int i = 0; i < menu.size(); i++) {
MenuItem item = menu.getItem(i);
SpannableString spanString = new SpannableString(menu.getItem(i).getTitle().toString());
int end = spanString.length();
spanString.setSpan(new RelativeSizeSpan(1.5f), 0, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
item.setTitle(spanString);
}
return true;
}
This example increases the size of menu item texts by 50%.
add into style xml file like this bottom code line your custom font size,,
after this
<style name="menu_text_style" parent="#android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Menu">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/tab_default_color</item>
<item name="android:textAllCaps">false</item>
</style>
after have to "menu_text_style" add to your NavigationView
app:itemTextAppearance="#style/menu_text_style"
Add the "android:actionMenuTextAppearance" item for your activities in your styles.xml :
<style name="AppThemeActivity" parent="Theme.AppCompat.Light">
<item name="android:actionMenuTextAppearance">#style/yourstyle</item>
...
</style>
Apply this style to your activity in your Manifest :
<activity
android:theme="#style/AppThemeActivity"
.../>
So it's been a long time since this was asked but I like this solution as steven smiths answer changes every view:
Add this line to NavigationView:
app:itemTextAppearance="#style/MenuItems"
And this to the styles :
<style name="MenuItems" parent="AppTheme">
<item name="android:textSize">18sp</item>
<item name="android:fontFamily">sans-serif-light</item>
</style>
Works well, on old API also:
In your style.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="actionMenuTextAppearance">#style/ActionMenuTextAppearance</item>
<item name="android:actionMenuTextAppearance">#style/ActionMenuTextAppearance</item>
</style>
<style name="ActionMenuTextAppearance" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Menu">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#1a1a1a</item>
</style>
In your manifest:
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme"
/>
Or you can set the font size in the values/styles item for the theme you are using. In my case the style indicated in the AndroidManifest.xml file is:
android:theme="#style/AppTheme"
And so my style for the AppTheme is now:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:textSize">20sp</item>
</style>
Seems strange it doesn't work for the item though...
<style name="RobotoTextViewStyleEn" parent="android:Widget.TextView">
<item name="android:textSize">15sp</item>
<item name="android:textColor">#868784</item>
</style>
navigationView.setItemTextAppearance(R.style.RobotoTextViewStyle);