I am trying to achieve the Menu Item design as shown in the YouTube application screen below. The menu item I am interested in is the action menu item. In this case the (G)
Currently, my application Looks like the image below:
My style and Background xml are as follows:
<resources>
// The themes are structured as follows :
// Theme 1 (One) : Application Theme
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/color_accent</item>
<item name="otpViewStyle">#style/OtpWidget.OtpView</item>
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="actionMenuTextAppearance">#style/home_menu_style</item>
<item name="android:actionMenuTextAppearance" >#style/home_menu_style</item>
</style>
// Theme 2 (two) : Splash Screen Theme
<style name="SplashScreenTheme" parent="AppTheme.NoActionBar">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
// Theme 3 (three) : No ActionBar Theme
<style name="AppTheme.NoActionbar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
// Theme 4 (four) : AppBarOverlay and PopupOverlay
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Light" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light" />
// Menu Style
<style name="home_menu_style" parent="AppTheme">
<item name="android:textSize">22sp</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#drawable/menu_drawable</item>
<item name="android:backgroundTint">#drawable/menu_drawable</item>
<item name="backgroundTint">#drawable/menu_drawable</item>
</style>
</resources>
The menu_drawable is as follows:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#48b3ff">
</solid>
</shape>
The home_menu.xml menu item is as follows:
<?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/menu_name"
android:actionLayout="#layout/custom_layout"
android:title=""
app:showAsAction="always" />
<item
android:id="#+id/action_search"
android:icon="#drawable/sharp_search_white_24"
android:title="Search"
app:actionViewClass="androidx.appcompat.widget.SearchView"
app:showAsAction="collapseActionView|always" />
</menu>
Code to inflate the menu:
override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater)
{
super.onCreateOptionsMenu(menu, inflater)
menu.clear()
this.menu = menu
inflater.inflate(R.menu.home_menu, menu)
}
My code to change the menu item title is as follows:
var menu: Menu
menu.findItem(R.id.menu_name).setTitle(name)
The menu preview looks as follows:
Firstly, you need to create a custom_menu.xml like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/profile"
<!-- this is the magic !!! -->
android:actionLayout="#layout/custom_layout"
android:icon="#drawable/ic_action_profile"
android:title="#string/profile_update"
app:showAsAction="always" />
</menu>
After this, you create a layout file custom_layout.xml like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="#dimen/margin_extra_small"
android:background="#drawable/drawable_circle_solid_accent"
android:gravity="center"
android:padding="#dimen/padding_small"
android:text="G"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_normal"
android:textStyle="bold" />
</LinearLayout>
and set this custom_menu.xml in your activity.
Output:
Add this in your activity:
override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
// getting action layout menu item
val menuItemName = menu?.findItem(R.id.menu_name)
// getting Linear Layout from custom layout
val linearLayout = menuItemName?.actionView as LinearLayout
// getting TextView from Linear Layout, i.e., parent of custom layout
val yourTextView = linearLayout.findViewById<TextView>(R.id.your_text_view_id)
// setting the first char of the String name
yourTextView.text = name.substring(0, 1)
return super.onPrepareOptionsMenu(menu)
}
Related
Lets say I have a menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="#string/menu_title">
<menu>
<item
android:id="#+id/nav_menu_item_1"
android:icon="#drawable/nav_menu_item_1"
android:title="#string/nav_menu_item_1" />
</menu>
</item>
</menu>
I can easily change color of "nav_menu_item_1" title like this:
<android.support.design.widget.NavigationView
...
app:itemTextColor="#color/colorCustom"
... />
However this doesn't change color of
<item android:title="#string/menu_title">
How can I change color of first level menu item?
You need add android:textColorSecondary into your style.xml
<item name="android:textColorSecondary">#color/colorPrimary</item>
it works for me
Ouptput
Set in Your theme... android:actionMenuTextColor
<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:actionMenuTextColor">#color/colorAccent</item>
</style>
Or By Code
MenuItem settingsMenuItem = menu.findItem(R.id.action_settings);
SpannableString s = new SpannableString(settingsMenuItem.getTitle());
s.setSpan(new ForegroundColorSpan(Color.BLACK), 0, s.length(), 0);
settingsMenuItem.setTitle(s);
You can change it set theme to your NavigationView
Create in style.xml
<style name="NavigationView">
<item name="android:background">?attr/clPrimary</item>
<item name="android:textColorSecondary">#color/textSecond</item>
</style>
Set theme in layout
<com.google.android.material.navigation.NavigationView
android:id="#+id/sheetAdd_nv_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/NavigationView"
app:itemTextColor="?attr/clText"
app:menu="#menu/menu_sheet_add" />
I want change background of menu and set it to blue. Now background of my menu is black.How to change this?
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.nabege.AboutUsActivity" >
<item
android:id="#+id/help"
android:title="#string/help" />
<item
android:id="#+id/setting"
android:title="#string/setting"/>
Java codes :
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.about_us, menu);
return super.onCreateOptionsMenu(menu);
}
Put the following styles in your styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary_color</item>
<!--<item name="colorPrimaryDark">#color/primary_color</item>-->
<item name="colorAccent">#color/primary_color</item>
<item name="actionBarStyle">#style/AppThemeActionBarStyle</item>
</style>
<style name="AppThemeActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="background">#color/your_background_color</item>
</style>
Hope this helps.
I am trying to style the items of my popup so they look like a list of buttons below eachother. The only problem is that I can't get to change anything of the popup items. I have tried to set a global popupMenuStyle in my app style but that didn't to anything. I tried to set an actionLayout on the menu items but still no change.
How can I change the styling of my popup menu items?
My menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/test1"
android:title="Test" />
<item android:id="#+id/test2"
android:title="Test 2" />
</menu>
How I open the popup menu:
PopupMenu popupMenu = new PopupMenu(getContext(), mButton);
popupMenu.getMenuInflater().inflate(R.menu.popup_menu, popupMenu.getMenu());
popupMenu.show();
Try this as part of your styles.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">#style/myPopupMenuTextAppearanceLarge</item>
<item name="android:textAppearanceSmallPopupMenu">#style/myPopupMenuTextAppearanceSmall</item>
</style>
<style name="PopupMenu" parent="#android:style/Widget.PopupMenu">
<item name="android:popupBackground">#FFFFFF</item>
<item name="android:divider">#444444</item>
<item name="android:dividerHeight">1px</item>
<item name="android:background">#FFFFFF</item>
</style>
<style name="myPopupMenuTextAppearanceSmall" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Small">
<item name="android:textColor">#000000</item>
<item name="android:textSize">12sp</item>
<item name="android:background">#FFFFFF</item>
</style>
<style name="myPopupMenuTextAppearanceLarge" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Large">
<item name="android:textColor">#000000</item>
<item name="android:textSize">18sp</item>
<item name="android:background">#FFFFFF</item>
</style>
</resources>
and then in your xml layout file for the activity add this line:
style="#style/AppTheme"
or in your AndroidManifest.xml file, add this to the application tag:
android:theme="#style/AppTheme"
This will affect how Android renders a popup menu in your app.
Say I have a menu (options_menu.xml) similar to the following:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item android:id="#+id/action_login"
android:title="Login"
app:showAsAction="always"/>
</menu>
which I inflate into the new Toolbar item
mToolbar.inflateMenu(R.menu.options_home);
This results in something like
Is there a way to change this text color without using an image, changing the rest of the Toolbar text color, or by adding a custom view to the toolbar? Looking for an answer for minSdk 15 (appcompat).
Update:
My relevant style:
<style name="AppTheme" parent="AppTheme.Base">
<item name="actionMenuTextColor">#color/ww_red</item>
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/red</item>
<item name="colorAccent">#color/theme_accent</item>
<item name="android:textColor">#color/text_dark</item>
<item name="android:colorEdgeEffect">#color/gray</item>
</style>
In your theme file you have to put this :
<style name="AppTheme.ActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="actionMenuTextColor">#color/text_color</item>
...
</style>
and apply this theme to your Toolbar view like this :
<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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/AppTheme.ActionBar"/>
android:theme="#style/AppTheme.ActionBar" don't forget this line in your toolbar
in your style file, place the following:
<style name="MyAppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:titleTextStyle">#style/MyActionBar.TitleTextStyle
<item name="android:actionMenuTextAppearance">#style/MyActionBar.MenuTextStyle</item>
<item name="android:actionMenuTextColor">#color/action_bar_red</item>
</style>
<style name="MyActionBar.TitleTextStyle"
parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#F0F</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">24dip</item>
</style>
<style name="MyActionBar.MenuTextStyle"
parent="android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
<item name="android:textColor">#F0F</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">24dip</item>
</style>
You can make changes in the above style items to suit your requirements. I have not added separate styling for color though. As you might observe, I am just assigning red color (which I have declared in my colors file) to it. You may change as required.
For me, this worked: Setting the "android:textColor"
<style name="AppTheme.ActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
...
<!--This would set the menu item color-->
<item name="android:textColor">#000</item>
...
</style>
Not sure if you can set specific backgrounds to separate MenuItems just through styling but you could just setActionView for your MenuItem.
First create a layout like item_av.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:padding="5dp">
<TextView
android:text="LOGIN"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="12sp"
android:gravity="center"/>
</LinearLayout>
Then set it to your MenuItem in onCreateOptionsMenu:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
MenuItem item = menu.findItem(R.id.action_login);
item.setActionView(R.layout.item_av);
return true;
}
to change menu item text color use below code
<style name="AppToolbar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:itemTextAppearance">#style/menu_item_color</item>
</style>
where
<style name="menu_item_color">
<item name="android:textColor">#color/app_font_color</item>
</style>
You can do it programmatically like that:
private AppCompatButton menuTextView;
void initToolbar(){
toolbar.inflateMenu(R.menu.your_menu);
menuTextView = AppCompatButton(context);
menuTextView.setTextColor(ContextCompat.getColor(
getContext(), R.color.your_color));
TypedValue outValue = new TypedValue();
getContext().getTheme().resolveAttribute(
R.attr.selectableItemBackgroundBorderless,
outValue,
true
)
toolbar.getMenu().getItem(0).setActionView(menuTextView);
I cannot figure out how to change the action bar items "onPressed" color on Android. I'm not talking about the action bar background color but about the blue over state. How can I change the color of this or at least get rid of it? For instance the App Icon with the homeAsUpIndicator.
I tried to change the action bar style and also the menu item style but nothing worked.
Thanks
EDIT
Here is my implementation so far:
My style xml:
<style name="Theme.AppTheme" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:selectableItemBackground">#android:color/transparent</item>
<item name="android:windowEnterAnimation">#anim/fadein</item>
<item name="android:windowExitAnimation">#anim/fadeout</item>
<item name="android:actionBarItemBackground">#android:color/transparent</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/actionbarheader</item>
<item name="android:backgroundStacked">#drawable/actionbarheader</item>
<item name="android:backgroundSplit">#drawable/actionbarheader</item>
<item name="android:titleTextStyle">#style/ActionBarTitle</item>
<item name="android:actionBarItemBackground">#android:color/transparent</item>
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
<item name="android:homeAsUpIndicator">#drawable/actionbarlogo</item>
<item name="android:icon">#drawable/app_icon</item>>
</style>
<style name="ActionBarTitle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textSize">20sp</item>
</style>
<style name="MyActionButtonStyle" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#android:color/transparent</item>
</style>
Then I have a drawable for the actionbarogo:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/actionbarlogo_on" android:state_pressed="true"/>
<item android:drawable="#drawable/actionbarlogo_on" android:state_focused="true"/>
<item android:drawable="#drawable/actionbarlogo_off"/>
</selector>
My menu xml for the action bar items:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/ContactsMode"
android:icon="#drawable/actionbarcontacts"
android:title="#string/contacts"
android:orderInCategory="100"
android:showAsAction="always"
android:background="#android:color/transparent" />
</menu>
and finally, the item's drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/actionbarcontacts_on" android:state_pressed="true"/>
<item android:drawable="#drawable/actionbarcontacts_on" android:state_focused="true"/>
<item android:drawable="#drawable/actionbarcontacts_off"/>
</selector>
Here is how I create the Menu Items for the ActionBar:
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_menu, menu);
actionBar.setIcon(R.drawable.actionbarlogo);
return true;
}
public boolean onPrepareOptionsMenu(Menu menu) {
MenuItem item= menu.findItem(R.id.ContactsMode);
if(ContactsButton)
item.setVisible(true);
else
item.setVisible(false);
return true;
}
To set the background for app icon together with the homeAsUpIndicator (there is a common background for these two icons) you have to set android:actionBarItemBackground item in the theme. The theme has to contain something like this (I assume that you use ActionBarSherlock):
<style name="MyTheme" parent="#style/Theme.Sherlock">
<!-- for ActionBarSherlock -->
<item name="actionBarItemBackground">#drawable/my_background</item>
<!-- for native ActionBar -->
<item name="android:actionBarItemBackground">#drawable/my_background</item>
</style>
Where the drawable drawable/my_background.xml would be a StaleListDrawable, containing something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/my_background_pressed" />
<item
android:drawable="#drawable/my_background_normal" />
</selector>
To disable the background completely, you can set a transparent background, or value #null in the theme might also work.
The theme item android:actionBarItemBackground sets the background for app icon and homeAsUpIndicator. But it also sets the default background for menu items, overflow icon and background for title. These backgrounds can be overridden.
Menu items
To change the menu item background set a proper (android:)actionButtonStyle in the theme like this:
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="actionButtonStyle">#style/MyActionButtonStyle</item>
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
And MyActionButtonStyle will contain something like this:
<style name="MyActionButtonStyle" parent="#style/Widget.Sherlock.ActionButton">
<item name="android:background">#drawable/my_background</item>
</style>
Overflow icon
And finally, to change the overflow icon background set a properandroid:actionOverflowButtonStyle in the theme like this:
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="actionOverflowButtonStyle">#style/MyOverflowButtonStyle</item>
<item name="android:actionOverflowButtonStyle">#style/MyOverflowButtonStyle</item>
</style>
And MyOverflowButtonStyle will contain something like this:
<style name="MyOverflowButtonStyle" parent="#style/Widget.Sherlock.ActionButton.Overflow">
<item name="android:background">#drawable/my_background</item>
</style>
Fixed it. There was a parent activity changing the theme in the onCreate method...
I didn't know that you could set the theme programmatically within the activity with:
setTheme(R.style.MyTheme);