1. Android design Principles
Enchant me. Simplify my life. Make me amazing.
Those are the 3 key principles underlying the Android team’s creative vision for any app platform. Our goal is to empower our users by amazing design and friendly UI.
Users judge the quality of an app within the first 30 seconds, most of it based on the visual aesthetics. User Experience (UX) is also really important. It should be fun to use and customize for our users.
One common way to go from a starting concept to a polished final app is to have a visual model in mind.
We can do so by creating a model of what we want our final app to look like. In companies that mostly the job of the designers team, and they refer as mockups.
A mockup is a model of an app used for design evaluation. It’s usually a picture or animation of the final app. Detail mockups include specific colors to use and marking called keylines.
Keylines specify the exact size and spacing of app components in the layout. For every detail that’s provided in a mockup it’s our job as developers to develop it in the code.
Designers follow the android material design, which is a set of principles for creating useful and beautiful visuals and interactions across different devices and platforms.
2. Colors and Fonts
Colors are a big part of app design both for branding and visual consistency.
Most apps use a few colors and use contrast to highlight different components within the app. Colors should always work together and help to distinguish between views and interactive components.
Android material design guidelines recommend having a primary color and an accent color. The primary color is the main color base for our app. Views and components like the menu bar will generally include this color. Accent color is typically brighter and use to draw attention to key elements like buttons in an app.
It’s common to choose 3 slightly different shades of the primary color to use and one near opposite accent color. It gives the interactive components a high contrast that’s important for visibility. Always keep in mind which colors will add clarity and consistency.
Another way to add consistency and distinguish different views in our app is by using different fonts and text sizes.
The default font for android is a Roboto, which designed to work across a range of different sized platforms, and with a variety of font families.
Font families are groups of fonts that share similar design characteristics, like serif and sans-serif. Sans-serif is the default in android.
The android material design site has recommendations for sizes and font families to use for reliability.
It’s good to stick with one font family in our app and change the color, weight or size when text need to stand out. It’s also good to have only a few consistent styles for different text components and not just change the style at random (like enlarge text size of titles).
Text size is measured in units of sp, which are Scale-Independent Pixels. They keep the same physical size across different resolution screens.
Scale-Independent Pixels will stay the same physical size in different resolutions.
Unlike dp, sp are also used for accessibility purposes. If someone changes their text size settings to be larger for visibility, then android will enlarge any view whose size is in sp.
Using units of sp for text makes sure that the text in our app will respond to accessibility settings and will be readable across devices.
3. Styles and Themes
Most views in android will stick to a few simple text styles and colors that will repeat throughout the code.
Android gives as a way to group properties like the color and size of a view, as a style or theme.
A style is an xml resource file, separate from the layouts, where you can set all these properties in one place. Then later, we can apply that style to any view we want.
Theme is created in the same way, and is just a style that’s applied to an entire activity or application and not just one view.
Different styles can inheritance from one another using the parent attribute. Styles and themes use inheritance similar to classes. If a style has a parent, it will inherit all the properties that the parent style includes. Then it can define only the properties that we want to add to that style or override in the parent class.
Android comes with both light and dark themes we can choose from. To change the theme of our app or for individual activity, we just need to set its theme attribute in our android manifest file.
4. Responsive Layouts
It is important to design our app to look good across different devices. Same layout in one device will most likely look different on another screen size.
There are tools to optimize the user experience across different devices. It calls responsive design.
Responsive design is the act of creating designs that respond to and work well on a variety of screen sizes, shapes and orientations.
Android categorizes the device screen using two general properties:
(1) Size
(2) Pixel density
We have to take both into consideration when we design our app’s layouts and include image resources.
Density is the number of pixels in the physical area of the screen, and it’s often measured in dots per inch — dpi.
There are 5 density rangers in android known as density buckets which most android devices fall into:
(1) mdpi (medium) — 160dpi
(2) hdpi (high) — 240dpi
(3) xhdpi (extra-high) — 320dpi
(4) xxhdpi (extra-extra-high) — 480dpi
(5) xxxhdpi (extra-extra-extra-high) — 640dpi
A greater number of smaller pixels allow for a sharper and better image quality on those high density displays.
The same physical area on one of those high density devices will take up more pixels than that same area on a smaller density screen.
We have to use Density-Independent pixels (dp) to show same physical size views on different devices.
We want to use dp for spacing and images so we can design for size and not by pixels.
If we include images in our app, we should provide multiple image resources that are appropriately scaled for each of the generalized density buckets. If we only provide one size of image android might have to scale that image for each device. This takes processing power and might distort the image. Providing multiple image resources help achieve good graphical quality and performance across different devices.
We need to create layouts and assets optimized for different screen pixel densities and sizes.
All externalized android resources, from Strings to layouts, are all stored within our project’s res folder.
Android allows us to create alternative versions of every resource by placing them into folders with different qualifiers, separated by ‘-’. We can add those qualifiers based on anything, from language, dialect, pixel density, orientation, type of touch screen or if the devices is docked. Most importantly, for a responsive design, the smallest available screen width which we can support with that layout.
Android will check the current device configuration at runtime and load the right layouts.
We can chain these qualifiers together, like a combination of screen size and device configuration. These values can change in runtime, the most common change is the orientation. For this reason activities are destroyed and recreated whenever the device configuration changes.
To optimize our user experience on different screen sizes, probably the most useful resource would be the smallest width or sw qualifier. -sw<size in dp>
This allows us to create different resources for devices based on the smallest dimension.
By using the smallest width qualifier on new layout folders,android let’s us create alternate layout resources for different devices based on their size and it’s let’s us pick which default layout resources to override. We can also use the smallest width qualifier to create alternate values resource folders.
5. Touch Selectors
Touch selectors can be added to list items in recyclerview, so when we click them, they turn different color and react to our touch.
By responding to a user’s touch selectors provide important interactive feedback, which enhances the overall user experience.
To build a touch selector we need to create a new drawable resource, which is basically something that can be drawn on screen, like a colored background.
The root element for our new drawable have to be a selector. Inside the selector we will add 4 items: 3 items with attributes for both the drawable color and for state pressed, activated and selected which should be set to true. By including all 3 of these states we cover all scenarios when a user has clicked on a list item. Then we also need to include a default item for unselected state with the drawable color of the default background.
Next we need to apply it to the list item layout, by adding it as a background attribute to the root element of this xml.
REFERENCES:
You can find much more at the free course Developing Android Apps by Google on the Udacity website over here: (check it out!)
https://www.udacity.com/course/new-android-fundamentals--ud851
