Android styles and themes

themes, android, styles, colors, apps

1. ANDROID STYLES AND DESIGNS Sourabh Sahu

2. Android Activity Designs

3. Android Activity Designs

4. STYLES A resource that defines format and look for a UI. Can be applied to individual entities or to activities as a whole. It is a .XML file.

5. Defining Styles The XML file resides under  res/values/  directory of your project and will have  <resources>  as the root node which is mandatory for the style file. <style> tag is used to define a style. Each style is uniquely identified by it’s name. Style attributes can be set using the <item> tag.

6. Sample code to create a style <resources> < stylename =" GreenText"parent =" TextAppearance.AppCompat ”>  <item name=" android:textColor ">#00FF00</item>  </style> </resources>

7. Extending a Style To create your own style, you should always extend it from the framework or support library. This is to maintain compatibility with platform UI styles. Use the ‘parent’ attribute to extend a style. You can also inherit styles by extending a style's name with a dot notation, instead of using the parent attribute.

8. Sample code to extend an existing style <style name=" GreenText " parent="@ android:style / TextAppearance ">     <item name=" android:textColor ">#00FF00</item> </style>

9. THEME A theme is similar to style, but it is applied to a layout or an activity as a whole. It is applied to child views of each component as well.  Use the android:theme  attribute on either the <application>tag or an <activity> tag in the  AndroidManifest.xml  file.

10. Sample Code-Applying a theme < manifest ... >     <application android:theme ="@style/ Theme.AppCompat " ... >     </application> </ manifest >

11. Customizing the Default Theme By default the theme is defined in the   styles.xml  file. You may change this as per your desire. The colors may be changed from the colors.xml file under res/values/ colors.xml .

12. STYLE HIERARCHY While styling an app, you must be mindful of Android’s style hierarchy. Use themes in general, for consistency. If you've specified the same attributes in multiple places, the list below determines which attributes are ultimately applied.  

13. STYLE HIERARCHY Applying character- or paragraph-level styling via text spans to  TextView -derived classes Applying attributes programmatically Applying individual attributes directly to a View Applying a style to a View Default styling Applying a theme to a collection of Views, an activity, or your entire app Applying certain View-specific styling, such as setting a TextAppearance on a  TextView

14. Changing Styles < resources > < style name=" AppTheme " parent=" Theme.AppCompat.Light.DarkActionBar " > < item name=" colorPrimary " >@ color / colorPrimary </ item > < item name=" colorPrimaryDark " >@ color / colorPrimaryDark </ item > < item name=" colorAccent " >@ color / colorAccent </ item > </ style > </ resources >

15. Changing Styles < resources > < style name=" AppTheme " parent=" Theme.AppCompat.Light.NoActionBar " > < item name=" colorPrimary " >@ color / colorPrimary </ item > < item name=" colorPrimaryDark " >@ color / colorPrimaryDark </ item > < item name=" colorAccent " >@ color / colorAccent </ item > </ style > </ resources > Used When No Action Bar at the top is required.

16. Changing Styles < resources > < style name=" AppTheme " parent=" Theme.AppCompat.Light.Dialog.Alert " > < item name=" colorPrimary " >@ color / colorPrimary </ item > < item name=" colorPrimaryDark " >@ color / colorPrimaryDark </ item > < item name=" colorAccent " >@ color / colorAccent </ item > </ style > </ resources > Used when an Alert Messages is required.

17. Changing Styles < resources > < style name=" AppTheme " parent=" Theme.AppCompat.Dark.ActionBar " > < item name=" colorPrimary " >@ color / colorPrimary </ item > < item name=" colorPrimaryDark " >@ color / colorPrimaryDark </ item > < item name=" colorAccent " >@ color / colorAccent </ item > </ style > </ resources > Used when a Dark theme is required.

18. Changing Styles < resources > < style name=" AppTheme " parent=" Theme.AppCompat.Dark.ActionBar " > < item name=" colorPrimary " >@ color / colorPrimary </ item > < item name=" colorPrimaryDark " >@ color / colorPrimaryDark </ item > < item name=" colorAccent " >@ color / colorAccent </ item > </ style > </ resources > Used when a Dark theme is required.