Understanding Android App UI Design
To build an App with a excellent user experience(UX) we need to understand the building blocks of Android UI Design.
Android Styling System
This styling system helps us to control the apperance of all the views in our app. With styling system we can achieve a consistent look across our app. We can inherit from parent styles and override only the attributes we want.
Themes
Collection of named attributes or resources which is used across the app.
We reference the theme attributes in layouts, styles, etc.
We use theme to define primary & secondary colors in the app, also to set the default font for all text within an activity. A number of UI widgets (ex. Button, TextView) depend on the primary color theme.
The styling system is hierarchical so if you specify a parent theme, you inherit all the attribute values from it, and then you just need to override the ones that you want to be different.
Apply a theme
By default when you create a project a theme is already applied we don’t need to apply it manually. If you want to personalise your theme you can create your custom theme and apply them. You can apply theme on components that have a Context. ex. Activity or ViewAttributes(View/ViewGroups)
Applying theme on application level will applies to all the Activity, Views & ViewGroups within its hierarchy.
Applying theme on activity level will applies to all the Views & ViewGroups within its hierarchy.
Applying theme on ViewGroup level will applies to all the Views within its hierarchy.
Refer to theme attribute in a layout and a style.
Styles
A style is a collection of view attributes like font color, font size, font family.. that are specific to a type of a View. If you have several views with a similar visual apperance, you can extract the common attributes into a style and reuse it. By defining the style in one place with make code clean and improves app consistency and maintainability.
N.B. Themes and Styles are both defined with <style> syntax but their purpose is different.
Applying a Style
View Attributes
For styling a single View, we set the attributes specific to the View. This will override any styling that gets inherited from the style or theme.
As you can see the example the minHeight & textAppearance will be overridden by the attributes specified to the View.
You can provide alternative resources customised for different device configurations
N.B. When the device locale is set to Italian uses values-b+it
N.B. When the night mode is turned on uses the values-night
Colors
Dimensions
Dimensions Units : dp and sp
dp : Density-independent pixels
sp : Scale-independente pixels
dp is only affected by screen density.
sp is mostly used for Text Sizes
sp depends on the font and display size selected by the user in their app Settings.
Type Scale
A set of resusable text styles for different purposes like Headlines, Subtitle, Body, BUTTON, Caption, OVERLINE, etc..
You can also customize the TextApperance as you need.
Code Examples : https://github.com/niranjk/android_tutorial
I tried my best to make you understand Android App Ui Design. If it really helped you, please leave some claps and if I miss something or you have any questions please leave in the comment below!!
Finally, if you became my fan after reading this post, please follow me ;)
ºThanks ;)
