Open res > values > colors.xml and add the following line for the new icon and text color for when an item is selected:ĥ. Add a new Drawable Resource File in res > drawable with the name menu_background_color_state.xml and add the following lines to define the color states of item background color states:Ĥ. Add a new Color Resource File in res > color (Create the color directory under res if you don’t have it already and make sure to name it exactly) with the name menu_item_color_state.xml and add the following lines to define the color states for the menu item’s icon and text:ģ. Add a new attribute to res > values > attr.xml (Create the file if you don’t already have it added and make sure to name it exactly) and add the following lines:Ģ.And since each item is made of several elements (icon, text, background), you have to think about the states of each element to apply styles to. If you’ve noticed, there are a number of states for each item in the Navigation Drawer (for instance, selected, pressed, hovered, etc) and to make the app visually appealing, you have to think of all the states the item goes through when a user clicks on it. Styling: itemIconTint, itemTextColor, itemBackground To read more about themes and styles, please go to these wonderful articles by Nick Butcher: The advantage of using styles is to unify the styles for each UI element so every time you add a new UI element (for instance, a Button or a TextView), you can call a style attribute to apply all the UI changes for that particular element you’ve applied in other places to be consistent with your style/brand throughout the app.The advantage of using ?attr/ in calling colors and color states is because of reasons like making it generic so it’s easy for us to either change our brand colors in the future, so adding a new theme for our app (for instance, to support Dark/Light mode).via attributes like ?attr/ and never on the UI component directly but through styles. In addition to styling, this tutorial also provides the best practices of using colors and resources, i.e. Here’s the recap of what we’ve achieved in the first part:Īnd if you follow along, by the end of the series, you’ll have a screen looking like this: Note
0 kommentar(er)
