I have a navigationView in my app and after add two lines in app style :
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
The Navigation icon color changed to black and for this problem i added this line in style :
<item name="android:textColorSecondary">#android:color/white</item>
Now navigation icon is white again but now i have a new problem . With above code , the title of navigation items is change color too.
I didn't find a solution to this Interference
Style :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
Navigation Menu :
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group
android:id="#+id/testGRP"
android:checkableBehavior="single"
>
<item android:title="جلسه : انتخاب نشده"
android:id="#+id/menuItem_StudentList11"
android:icon="#drawable/ic_arrow_drop_up"
/>
<item android:title="مرتب سازی"
android:id="#+id/menuItem_StudentList_Quize1"
android:icon="#drawable/all_exam_icon"
/>
<item android:title="#string/Navigation_StudentList3"
android:id="#+id/menuItem_StudentList_Quize"
android:icon="#drawable/all_exam_icon"
/>
</group>
<item android:title="رویدادها:"> //this line is title
<menu>
<item android:title="#string/Navigation_StudentList4"
android:id="#+id/menuItem_StudentList_MidTerm"
android:icon="#drawable/all_exam_icon"
/>
<item android:title="#string/Navigation_StudentList5"
android:id="#+id/menuItem_StudentList_EndTerm"
android:icon="#drawable/all_exam_icon"
/>
<item android:title="امتحان عملی"
android:id="#+id/menuItem_StudentList_Practical"
android:icon="#drawable/all_exam_icon"
/>
<item android:title="#string/Navigation_StudentList6"
android:id="#+id/menuItem_StudentList_Project"
android:icon="#drawable/all_projcet_icon"
/>
<item android:title="#string/Navigation_StudentList2"
android:id="#+id/menuItem_StudentList_Conference"
android:icon="#drawable/all_conference_icon"
/>
</menu>
</item>
<item android:title="#string/Navigation_StudentList1"
android:id="#+id/menuItem_StudentList1"
android:icon="#drawable/all_notifiicon_icon"
/>
<item android:title="#string/Navigation_StudentList7"
android:id="#+id/menuItem_StudentList7"
android:icon="#drawable/main_newclass_icon"
/>
</menu>
enter image description here
enter image description here
Using a Toolbar, to change the navigation icon color you can use:
With a MaterialToolbar or (androidx and a Material theme):
<com.google.android.material.appbar.MaterialToolbar
android:theme="#style/MyThemeOverlay_Toolbar"
...>
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- color used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/secondaryColor</item>
</style>
With the support Library:
<android.support.v7.widget.Toolbar
app:theme="#style/ThemeToolbar" />
<style name="ThemeToolbar" parent="Theme.AppCompat.Light">
<!-- navigation icon color -->
<item name="colorControlNormal">#color/my_color</item>
</style>
If you are looking to change text colors/appearance in the NavigationView Items, you should use the attribs
app:itemTextColor
app:itemIconTint
app:itemTextAppearance
Otherwise, Specify which view's color you want to change. Setting android:textColorSeconday is a bad idea according to me.
Related
What I am trying to achieve:
Ripple effect(native), when a user clicks on menu item
Currently it is not happening
ToolBar in xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:theme="#style/ToolBarStyle">
<com.caring2u.organizer.utils.fonts.CustomCaringTextView
android:id="#+id/toolbar_title"
style="#style/style_toolbar_textView" />
</android.support.v7.widget.Toolbar>
menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menuEventsTodayId"
android:title="#string/menu_events_today" />
<item android:id="#+id/menuUpcomingEventsId"
android:title="#string/menu_upcoming_events" />
<item android:id="#+id/menuSignOutId"
android:title="#string/menu_sign_out" />
</menu>
In Manifest
<activity android:name=".ui.activities.screen.ActEventsToday"
android:windowSoftInputMode="stateHidden"
android:screenOrientation="portrait"
android:theme="#style/AppTheme.NoActionBar"/>
Style
<style name="AppTheme.NoActionBar" parent="MyAppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">false</item>
</style>
<style name="ToolBarStyle" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#color/primaryTextColor</item>
<item name="android:textColorSecondary">#color/primaryTextColor</item>
<item name="actionMenuTextColor">#color/primaryTextColor</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<item name="selectableItemBackground">?android:selectableItemBackground</item>
<item name="android:colorControlHighlight">#color/ripple_material_dark</item>
</style>
{Edit}
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 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:itemBackground">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/black</item>
<item name="colorControlNormal">#color/very_light_pink</item>
<item name="colorControlActivated">#color/warm_grey</item>
<!-- ********************** Click effect ********************** -->
<item name="colorControlHighlight">#color/warm_grey</item>
</style>
I get this warning when I use #color/ripple_material_dark
The resource #color/ripple_material_dark is marked as private in
com.google.android.material:material less... (⌘F1) Inspection
info:Private resources should not be referenced; the may not be
present everywhere, and even where they are they may disappear without
notice.
But I can see the ripple effect with my phone (Android 8.0)... try setting another color like #android:color/darker_gray instead of #color/ripple_material_dark
Ripple effect will see only Android API >= 21.
I'm building a navigation drawer using the android's support design lib. I would like to customize the colors of the text showed in that navigation drawer, so I've used a style to do that.
My Navigation Drawer.
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:theme="#style/NavigationViewTheme"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/menu_navigation" />
My style
<style name="NavigationViewTheme" parent="AppTheme">
<item name="textAppearanceListItem">#style/TextAppearance.AppCompat.Body2</item>
<!--CHANGE TEXT COLOR -->
<item name="android:textColorPrimary">#android:color/white</item>
<!-- CHANGE ICON COLOR -->
<item name="android:textColorSecondary">#android:color/white</item>
</style>
What I want to change now, is the color of the highlighted text and icon. I've tried with so many items but nothing changes.
I've tried with all of these
<item name="textColorPrimary">#color/primary_text_dark</item>
<item name="textColorSecondary">#color/secondary_text_dark</item>
<item name="textColorTertiary">#color/tertiary_text_dark</item>
<item name="textColorPrimaryInverse">#color/primary_text_light</item>
<item name="textColorSecondaryInverse">#color/secondary_text_light</item>
<item name="textColorTertiaryInverse">#color/tertiary_text_light</item>
<item name="textColorPrimaryActivated">#color/primary_text_dark</item>
<item name="textColorSecondaryActivated">#color/secondary_text_dark</item>
<item name="textColorPrimaryDisableOnly">#color/primary_text_dark_disable_only</item>
<item name="textColorPrimaryInverseDisableOnly">#color/primary_text_light_disable_only</item>
<item name="textColorPrimaryNoDisable">#color/primary_text_dark_nodisable</item>
<item name="textColorSecondaryNoDisable">#color/secondary_text_dark_nodisable</item>
<item name="textColorPrimaryInverseNoDisable">#color/primary_text_light_nodisable</item>
<item name="textColorSecondaryInverseNoDisable">#color/secondary_text_light_nodisable</item>
<item name="textColorHint">#color/hint_foreground_dark</item>
<item name="textColorHintInverse">#color/hint_foreground_light</item>
<item name="textColorSearchUrl">#color/search_url_text</item>
<item name="textColorHighlight">#color/highlighted_text_dark</item>
<item name="textColorHighlightInverse">#color/highlighted_text_light</item>
<item name="textColorLink">#color/link_text_dark</item>
<item name="textColorLinkInverse">#color/link_text_light</item>
<item name="textColorAlertDialogListItem">#color/primary_text_light_disable_only</item>
Alternatively, set app:itemTextColor="#color/navigation_view_color" to your NavigationView.
navigation_view_color:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:color="#color/highlighted_color" />
<item android:color="#color/black" />
</selector>
I've found the solution. I only need to add
<item name="colorPrimary">#android:color/holo_red_dark</item>
to my navigation drawer style.
I am trying to use a SearchView in my layout (not inside of a ToolBar or ActionBar).
<FrameLayout android:layout_width="0dp" android:layout_weight="50" android:layout_height="wrap_content" >
<android.support.v7.widget.SearchView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|left" style="#style/MySearchViewStyle" />
</FrameLayout>
I am using AppCompat, but it looks different on pre-lollipop. The EditText is missing the bottom border in pre-lollipop devices.
Lollipop Search displays border correctly:
Pre-lollipop Search displays NO border:
My theme is basic:
<style name="Theme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- TOOLBAR -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Search -->
<item name="searchViewStyle">#style/MySearchViewStyle</item>
<item name="android:searchViewStyle">#style/MySearchViewStyle</item>
<!-- COLOURS -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="android:editTextStyle">#style/EditText</item>
<item name="editTextStyle">#style/EditText</item>
</style>
<style name="EditText">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:inputType">text</item>
<item name="android:cursorVisible">true</item>
<item name="android:maxLength">1000</item>
<item name="android:selectAllOnFocus">true</item>
<item name="android:paddingTop">4dp</item>
</style>
Any help to get my styles consistent would be great thanks.
As per Source code at https://github.com/android/platform_frameworks_support/blob/master/v7/appcompat/res/layout/abc_search_view.xml
search_src_text view has background set to #null
To get bottom line i used
searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text).setBackgroundResource(R.drawable.abc_textfield_search_default_mtrl_alpha);
UPDATE: For Kotlin + Androidx
searchView.findViewById<EditText>(androidx.appcompat.R.id.search_src_text).setBackgroundResource(R.drawable.abc_textfield_search_default_mtrl_alpha)
I would like to set my spinner drop down color to white, whilst keeping the other elements in my theme the default color. Here is the situation:
<android.support.v7.widget.Toolbar
android:layout_height="#dimen/action_bar_height"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarTheme.Base"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"/>
</android.support.v7.widget.Toolbar>
And the style is:
<!-- My base app theme -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/theme_tint</item>
<!-- <item name="colorControlNormal">#FFFFFF</item> -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:typeface">sans</item>
<item name="android:windowBackground">#color/background_primary</item>
</style>
<!-- My Toolbar theme -->
<style name="ToolbarTheme.Base" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#FFFFFF</item>
</style>
If I was to put <item name="colorControlNormal">#FFFFFF</item> in the App theme (commented out above) then the spinner drop down will do to white BUT the checkbox will also turn white. So how can I get the spinner ONLY to go white?
Finally, I have found a solution on how to change arrow color of Spinner to white.
1) In styles.xml, add the following style:
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlHighlight">#ff33b5e5</item>
</style>
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:theme">#style/ActionBarThemeOverlay</item>
</style>
2) In the layout, where you use the Spinner (in your case with Toolbar), add the style to your spinner:
<Spinner
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_spinner"
style="#style/Widget.MyTheme.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Just stumbled across this questions. Even though it has been asked some time ago I just wanted to leave an answer that should work:
Toolbar *.xml
<android.support.v7.widget.Toolbar
<!-- leave the theme stuff out of here -->
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Styles / Themes
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- your other attributes -->
<!-- following is used to tint the checkbox - purple for demo purpose -->
<item name="colorControlNormal">#2196F3</item>
</style>
<style name="MyToolbarStyle">
<item name="android:minHeight">?actionBarSize</item>
<item name="android:background">?colorPrimary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
Result
Note: I made the checkbox purple for demo purpose
I am using a .png for both my logo and action Bar menu items. I am using the android.Holo.light theme.
Even though I've made the background transparent for both the logo and the menu items, a grey shaded area is still showing behind the .png. How do I change this?
Take a look at my menu XML and my style override XML below.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="android:Theme.Holo.Light">
<item name="android:selectableItemBackground">#color/transparent</item>
<item name="android:background">#00000000</item>
</style>
<style name="ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar" >
<item name="android:selectableItemBackground">#color/transparent</item>
<item name="android:background">#00000000</item>
</style>
<style name="textTitle"
parent="#android:style/TextAppearance">
<item name="android:textSize">20dp</item>
<item name="android:textColor">#DC0451</item>
<item name="android:textStyle">bold</item>
</style>
<style name="textDescription"
parent="#android:style/TextAppearance">
<item name="android:textSize">15dp</item>
<item name="android:textColor">#666666</item>
</style>
</resources>
Menu xml
<item
android:id="#+id/Category"
android:title="Category"
android:showAsAction="always|withText"
android:icon="#drawable/menuitemselect"
style="#style/ActionBar"
>
<menu>
<item
android:id="#+id/catalog"
android:title="Main Catalog"
android:icon="#drawable/menuitemselect"
android:onClick="catalogClick"
/>
<item android:id="#+id/newvideos"
android:title="New"
android:icon="#drawable/menuitemselect"
android:onClick="newVideoClick"
style="#style/ActionBar"
/>
<item
android:id="#+id/popularvideos"
android:title="Popular"
android:icon="#drawable/menuitemselect"
android:onClick="popularVideoClick"
style="#style/ActionBar"
/>
</menu>
</item>
<item android:id="#+id/backButton"
android:title="Back"
android:showAsAction="ifRoom"
android:icon="#drawable/ic_launcher"
/>
</menu>
Thank you
I found that the issue was with :
<item name="android:selectableItemBackground">#color/transparent</item>.
I added it in an attempt to get rid of default highlight feature. It seems when I have this set, the grey background shows up. When I remove it, it acts as it should.