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
- Define use cases (use case is a task in your app like : eg. composing a email and sending it)
- Implement design
- Get feedback
- Refine!
Other Design Concerns
- Handles rotation?
- Uses offline cache?
- Responds to touch?
- 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
- Google Play Services
- Programatically (custom code)
- Support Library
Changing a default font of text in our app
- We use the font wizard built in android studio
- Select any text
- Go to Attributes
- Select fontFamily
- In Values: check MoreFonts
- Select : eg: lobster-two
- Now the font download wizard will then offer the option to generate xml files for you.
- Note* there is auto change in manifest file too..
- 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
- style.xml file
- Every style tag has ability to specify its parent
- It inherits all the attributes from it's parent. eg. parent ="Theme.MaterialComponents.Light.NoActionBar"
- 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
Post a Comment