Android BottomNavBar Item Titles Dissappear After Adding New Item - android

I'm trying to add a new item to the bottom navigation bar of one of my apps, but for some reason when i add the XML for the new item the titles of all un-clicked items dissapear.
Here is the XML before adding the new item
<item
android:id="#+id/navigation_lessons"
android:icon="#drawable/ic_nav_lessons"
android:title="#string/lessons" />
<item
android:id="#+id/navigation_simulator"
android:icon="#drawable/ic_nav_simulator"
android:title="#string/simulator" />
<item
android:id="#+id/navigation_quiz"
android:icon="#drawable/ic_nav_quiz"
android:title="#string/quiz" />
this looks like this
but after adding the new item to the XML
<item
android:id="#+id/navigation_lessons"
android:icon="#drawable/ic_nav_lessons"
android:title="#string/lessons" />
<item
android:id="#+id/navigation_simulator"
android:icon="#drawable/ic_nav_simulator"
android:title="#string/simulator" />
<item
android:id="#+id/navigation_quiz"
android:icon="#drawable/ic_nav_quiz"
android:title="#string/quiz" />
<item
android:id="#+id/navigation_settings"
android:icon="#drawable/ic_nav_settings"
android:title="#string/settings" />
The bottom nav bar looks like this
I am using some custom colors & styles but i don't change anything in those before & after adding a new item. im going to share my style & colors anyway though
This is the style
<style name="ThemeOverlay.Custom.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
<item name="itemTextColor">#color/bottom_nav_light</item>
<item name="itemIconTint">#color/bottom_nav_light</item>
<item name="itemBackground">#color/colorPrimary</item>
</style>
And here is the color
<item android:state_checked="true" android:color="#000000" />
<item android:state_checked="false" android:color="#595959"/>
I tries changing the title color programmatically but couldn't get anywhere, does anyone have an idea of what could be causing this?

Related

Colorstatelist for button background not working

Reference: How to specify background color in Color State List Resources?
I have followed the popular answer in the link above.
I have the following drawable;
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:drawable="#color/KeyActionPrimary"/> <!-- enabled -->
<item android:state_enabled="false"
android:drawable="#color/KeyActionButtonDeactivated"/> <!-- disabled -->
<item android:state_pressed="true"
android:drawable="#color/KeyActionPrimary"/> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#color/KeyActionPrimary"/> <!-- focused -->
<item android:drawable="#color/KeyActionPrimary"/> <!-- default -->
</selector>
I understand that it will always follow order of precedence and therefore in the current order only activated and deactivated likely to be triggered. Currently however I am not getting any results at all
My button;
<Button
android:id="#+id/buttonSTART"
android:layout_width="#dimen/btn_width"
android:layout_height="#dimen/btn_height"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="16dp"
android:background="#drawable/state_controlled_key_action_button"
android:padding="#dimen/btn_padding"
android:text="#string/btn_start"
android:textColor="#color/key_action_button_text_color"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnSCORES"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
The button comes out as white which in my material theme is the ColorPrimary attribute
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Home" parent="Theme.MaterialComponents">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/Primary</item>
<item name="colorPrimaryVariant">#color/PrimaryVariant</item>
<item name="colorSecondary">#color/Secondary</item>
<item name="colorSecondaryVariant">#color/SecondaryVariant</item>
<!--colorBackground appears behind scrollable content and is used for the default window-->
<!--background. colorSurface is mapped to the surface of components such as cards, sheets-->
<!--and menus. colorError is used to indicate an error state for components such as-->
<!--text fields.-->
<item name="android:colorBackground">#color/Background</item>
<item name="colorSurface">#color/Surface</item>
<item name="colorError">#color/Error</item>
<!--"On" colors define how text, icons and strokes are colored in relation to the surface-->
<!--on which they appear.-->
<item name="colorOnPrimary">#color/ColorOnPrimary</item>
<item name="colorOnSecondary">#color/ColorOnSecondary</item>
<item name="colorOnBackground">#color/ColorOnBackground</item>
<item name="colorOnSurface">#color/ColorOnSurface</item>
<item name="colorOnError">#color/ColorOnError</item>
<item name="android:fontFamily">#font/atma_medium</item>
<item name="android:textColor">#color/PrimaryTextColor</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">#color/StatusBar</item>
<!-- Customize your theme here. -->
<item name="actionBarSize">36dip</item>
</style>
</resources>
Firstly I am assuming that a theme covers the entire app but if you explicitly specify a background to a specific button it should override the theme value, please correct me if I am wrong.
I started this journey with a colorstatelist under res/colors. Read the link at the top which confirmed you need to use drawable. As I already had a color state list initially followed the advice of the answer which had 0 votes...
shape
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#color/primary_button_color" />
<stroke android:width="#dimen/btn_stroke" android:color="#color/primary_button_stroke_color"/>
<corners android:radius="#dimen/btn_radius"/>
</shape>
colorstatelist
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:color="#color/Primary"/> <!-- pressed -->
<item android:state_enabled="false"
android:color="#color/PrimaryButtonDeactivated"/> <!-- pressed -->
<item android:state_pressed="true"
android:color="#color/Primary"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#color/Primary"/> <!-- focused -->
<item android:color="#color/Primary"/> <!-- default -->
</selector>
Neither of these approaches is amending my button color. I am still always seeing a white button. I purposely chose horrid colors to ensure the change was obvious
What am I doing wrong? What else do you need to see?
UPDATE...........
Following discussion with #rcs I used my original colorstatelist from res/color with the backgroundtint property on the button and it works as intended
My final code:
For each button that requires a different style i have a button color or text color file in res/colors as per below
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/KeyActionColorOnPrimary"/>
<item android:state_enabled="true"
android:color="#color/KeyActionPrimary"/>
<item android:state_enabled="false"
android:color="#color/lime"/>
<item android:state_focused="true"
android:color="#color/KeyActionPrimary"/>
<item android:color="#color/KeyActionPrimary"/>
</selector>
Then within my button xml
android:backgroundTint="#color/key_action_button_color" // for button color
android:textColor="#color/key_action_button_text_color" // for text color
e.g.
<Button
android:id="#+id/buttonSTART"
android:layout_width="#dimen/btn_width"
android:layout_height="#dimen/btn_height"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="16dp"
android:backgroundTint="#color/key_action_button_color"
android:padding="#dimen/btn_padding"
android:text="#string/btn_start"
android:textColor="#color/key_action_button_text_color"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnSCORES"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
This works with no additional styles. I can keep my material design theme without the button style being set to apt compat style. I am only using the above attributes in the layout xml for the button i want to have these styles
Since the first condition in your color_state is `android:state_enabled="true", which is always the case, thereby resulting in the same color. Get rid of it to notice the color changes
Refer the official docs for more info and try to use a color file resource instead of drawable as the docs says,
ColorStateLists are created from XML resource files defined in the "color" subdirectory directory of an application's resource directory
Edit:
As mentioned in this answer, applying the colorstate as a style to the Button tag should solve the issue
create a new style
<style name="AppTheme.CustomButtonStyle" parent="#style/Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/state_controlled_key_action_button</item>
</style>
Activity
<Button
android:id="#+id/your_button_id"
style="#style/AppTheme.CustomButtonStyle"/>

How to add custom images with color to menu items?

I Have Following Menu Items In My Navigation Drawer
<item
android:id="#+id/nav_home"
android:icon="#drawable/home"
android:title="Home" />
<item
android:id="#+id/nav_gallery"
android:icon="#drawable/gallery"
android:title="Gallery" />
<item
android:id="#+id/logout"
android:icon="#drawable/logout"
android:title="Slideshow" />
I have images(.png) of the icons
I tried putting it in the menu item but it comes in grayscale.
How do I put the exact image (with color) as the icon of menu item ?
You can add custom layout to the navigation drawer menu item. Place the image in ImageView of custom_layout and check it:
<item
android:id="#+id/nav_custom_layout"
app:actionLayout="#layout/custom_layout"
app:showAsAction="always"
tools:ignore="MenuTitle"/>

Change Switch color in Navigation Drawer menu item

I'm having trouble changing the color of my Navigation drawer switch items. I want each one to have a custom color associated with it's action.
I've defined my nav drawer with a menu like this:
<item
android:title="#string/nav_drawer_services_title">
<menu>
<group android:checkableBehavior="none">
<item
android:id="#+id/Red_selector"
android:title="#string/nav_drawer_red_title"
app:actionLayout="#layout/switch_layout"/>
<item
android:id="#+id/Blue_selector"
android:title="#string/nav_drawer_blue_title"
app:actionLayout="#layout/switch_layout"/>
</group>
</menu>
</item>
My switch_layout.xml is like this:
<Switch
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:onClick="toggleService"
android:checkable="true"
android:checked="true"
style="#style/MyCustomSwitchTheme"
/>
I've tried changing MyCustomSwitchTheme as suggessted here: Change "on" color of a Switch, yet the switch items remain the same color.
Why doesn't my custom theme style override the default? I can't seem to change these switches from the colorAccent defined in my colors.xml and AppTheme.
Anyone know a way around this?
Edit: Here is the styles code, sorry about not including that with the OP.
<style name="MyCustomSwitchTheme">
<!-- active thumb & track color (30% transparency) -->
<item name="colorControlActivated">#46bdbf</item>
<!-- inactive thumb color -->
<item name="colorSwitchThumbNormal">#color/light_gray_color</item>
<!-- inactive track color (30% transparency) -->
<item name="android:colorForeground">#42221f1f</item>
</style>
just use android:theme="#style/MyCustomSwitchTheme"
instead style="#style/MyCustomSwitchTheme"

Android - how to change the background color of the selected item in a dropdown

I have the following dropdown:
<style name="SpinnerDropdown" parent="android:style/Widget.ListView.DropDown">
<item name="android:background">#04384f</item>
<item name="android:divider">#000000</item>
<item name="android:dividerHeight">1dp</item>
</style>
I want to change the color of the currently pressed item. This color is currently orange (#feba21) and I want it to be something else. I haven't set it anywhere so I assume it's inherited from Widget.ListView.Dropdown
How can I change it, and more importantly where can I find Windget.ListView.Dropdown in the SDK so I can see what properties it has?
I tried adding the selector_spinner_option:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/bright_positive" />
<item android:drawable="#color/dimmer_positive" />
</selector>
as the background of SpinnerDropdown, but what it does is change all the other items when one item is pressed - while that item remains orange!!
Orange is not the background of dropdown item. It is a color of selector. It is easy to change it by the attribute listSelector
The following code will change orange to green
<style name="SpinnerDropdown" parent="android:style/Widget.ListView.DropDown">
<item name="android:background">#04384f</item>
<item name="android:divider">#000000</item>
<item name="android:listSelector">#00ff00</item>
<item name="android:dividerHeight">1dp</item>
</style>
Hope it help.

Android Honeycomb: How to style right corner arrow in spinner on an ActionBar

This is a pretty specific question. I have a spinner on an ActionBar that is added in the onCreate() method. I have been able to style the text white, but I can't get the underline and the triangle/arrow at the bottom right to appear as white. Here is my styling:
<item name="android:actionDropDownStyle">#style/customActionBarDropDownStyle</item>
<style name="customActionBarDropDownStyle" parent="android:style/Widget.Holo.Light.Spinner">
<item name="android:textColor">#FFFFFF</item>
</style>
I can't find a style item/property that makes the underline and triangle white. Does one exists?
Here's an example. I have highlighted in red the triangle and underline that I want to make white.
A bit late answer, but better than never :)
You should create a new 9 patch drawable and set it as a background to android:actionDropDownStyle.
here is an example:
<item name="android:actionDropDownStyle">#style/customActionBarDropDownStyle</item>
<style name="customActionBarDropDownStyle"parent="android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/custom_spinner_dropdown</item>
</style>
You can't set a color to almost every native component, as their backgrounds are (in most cases) 9-patch pngs.
The actionDropDownStyle can not used to change the style of spinner you added on actionbar; its for one of the actionbar mode ActionBar.NAVIGATION_MODE_LIST;
As for your problem, you can define a selector for your spinner in the layout file,just like this:
enter code here
<Spinner
android:dropDownWidth="200dp"
android:background="#drawable/actionbar_spinner"
android:id="#+id/action_spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="10dp" />
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/spinner_ab_disabled" />
<item android:state_pressed="true"
android:drawable="#drawable/spinner_ab_pressed" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/spinner_ab_focused" />
<item android:drawable="#drawable/spinner_ab_default" />
</selector>
Try this : android:background="#null"

Categories

Resources