Designing in Android for Everyone.

 Changing things like colors, fonts and text size is fundamental things and this is called styling. Android provides a rich styling system. 

Styling Pyramid: 


Themes: 

  • Themes can be used to style every view of your app at once. 
  • Android has light theme and dark theme. 
  • Define the core colors of your app. 
  • We can set default font for your app 
  • Theme is a universal style for everyview. 

Styles :

  • Re-usable styling information 
  • Apply to single view 
  • Great for consistent font size, colors, etc 
  • Style will override anything specified in a theme. 

Attributes: 

  • Attributes are not reusable like styles. 
  • Apply to a single view 
  • Great for custom designs 
  • use for margins, padding, constraints 
  • Attributes will always override anything specified in a style or a theme. 
  • eg: android:textSize= "", android:textColor="" .... 

Some Design Concepts : 
  • Information Architecture 
  • Use case design or UX (User Experience)design 

UX Design 

  1. Define use cases (use case is a task in your app like : eg. composing a email and sending it)
  2. Implement design 
  3. Get feedback 
  4. Refine! 

Other Design Concerns 

  1. Handles rotation?
  2. Uses offline cache?
  3. Responds to touch?
  4. Show correct data? 

Accessibility 

  • Design for everyone 
  • Vision impairment 
  • Other input devices 
Color Note : 
  • argb : alpha is optional 
  • # (alpha) (red) (green) (blue)
  • # (00-FF) (00-FF) (00-FF) (00-FF)
  • values in hex 
  • 00 hex = 00 decimal 
  • 10 hex = 16 decimal 
  • FF hex = 255 decimal 
example : android:textColor= "#55AA33BB" 
55 is 2/3 of transparency 

Note : use  android:textSize= "24sp" but don't use android:layout_width="24sp", use "24dp"


Download Fonts with 
  1. Google Play Services 
  2. Programatically (custom code)
  3. Support Library

Changing a default font of text in our app 

  1. We use the font wizard built in android studio 
  2. Select any text 
  3. Go to Attributes 
  4. Select fontFamily 
  5. In Values: check MoreFonts 
  6. Select : eg: lobster-two 
  7. Now the font download wizard will then offer the option to generate xml files for you. 
  8. Note* there is auto change in manifest file too.. 
  9. There is a meta tag that is added for you : <meta-data android:name"preloaded_fonts" android:resources="@array/preloaded_fonts" />

Applying Font to entire App : called Theme 

  1. style.xml file 
  2. Every style tag has ability to specify its parent 
  3. It inherits all the attributes from it's parent. eg. parent ="Theme.MaterialComponents.Light.NoActionBar"
  4. Specify your font in the style 
<resources>

<!-- 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="fontFamily">@font/combo</item>
<item name="android:fontFamily">@font/combo</item>
</style>

</resources>


Comments

Popular Posts