UI Best Practices for Android
Designing a UI, which is attractive for users requires adhering to certain best practices imposed by android platform, devices manufactured by various vendor hardwares and users. Such UI should be intuitive, consistent across various screen sizes, orientation and device hardwares. Furthermore, it should be accessible for various users including those with disabilities, maintainable for various platform updates, scalable and properly reflect the app branding.
Wrap_content and Match_parentWhenever possible, use 'fill_parent' and 'wrap_content' values for android:layout_width and android:layout_height in layout files. This allows the views to adapt to fill the maximum available space (fill_parent) or the minimum required space (wrap_content), resulting in a more flexible and responsive layout.
Relative Layout and Constraint LayoutBoth 'RelativeLayout' and 'ConstraintLayout' allow to specify the spatial relationships between components, which can be mostly preserved even when their size changes. ConstraintLayout is generally considered better for performance and display due to its flat view hierarchy and powerful constraint-based layout system which also allows more flexibility and complexity in design.
Layout AliasesUse size qualifiers to create alternative layouts for different screen sizes, resolutions and orientation. Android app automatically selects the appropriate layout based on the device's configuration.
Example Layouts:
- res/layout (Default Layout):
- res/layout-small (Small Screens):
- res/layout-normal (Normal Screens):
- res/layout-large (Large Screens):
- res/layout-xlarge (Extra Large Screens):
- res/layout-sw
dp (Smallest Width): - res/layout-w
dp (Width): - res/layout-h
dp (Height): - res/layout-screen-size> - <screen-density> (Combining Screen Size and Density):
-
res/layout-large-land (Large Landscape Mode):
Specific Density Buckets layouts - res/layout-ldpi: Layouts optimized for low-density screens.
- res/layout-mdpi: Layouts optimized for medium-density screens.
- res/layout-hdpi: Layouts optimized for high-density screens.
- res/layout-xhdpi: Layouts optimized for extra-high-density screens.
- res/layout-xxhdpi: Layouts optimized for extra-extra-high-density screens.
- res/layout-xxxhdpi: Layouts optimized for extra-extra-extra-high-density screens.
-
res/layout-
: Layouts optimized for specific languages, allowing for language-specific UI adjustments. - res/layout-night: Layouts optimized for dark mode or night mode.
-
res/layout-v
: Layouts specific to certain API levels, allowing for adjustments based on available features or compatibility requirements.
Language Specific layouts
Dark mode or night mode layouts
Use nine-patch bitmaps to create scalable and flexible UI elements. This is a special type of image format to create resizable and scalable images for UI elements like buttons, backgrounds, and other visual elements without losing image quality. These images maintain correct aspect ratios of elements across different screen sizes and densities. Android Studio provides the Draw 9-patch tool for creating and editing nine-patch images. This tool offers a graphical interface for defining stretchable areas and previewing how the image will scale on different screen sizes. It is important to test them on different screen sizes and resolutions before deployment, to ensure the expected display.
FragmentsUtilize fragments to encapsulate portions of UI within an activity. They break down the UI into smaller, reusable independent components, making the code more modeular and easy to maintain and test in particular for complex UIs. Once defined, they can be reused across multiple activities or layouts, reducing redundancy in code and promote code reusability. By defining different layouts for different fragments, allows to adapt the UI to various screen sizes, orientations, and resolutions.
Providing Alternate Bitmaps (multi-resolution support)Provide different versions of bitmap resources tailored to each generalized density bucket (ldpi, mdpi, hdpi, xhdpi, etc.). This ensures good graphical quality and performance on devices with different screen densities. Android app will automatically choose the appropriate bitmap based on the device's screen density.
Create Image Resources:
Following the naming convention to create different density-specific resource directories, add them as:
-
res/drawable-ldpi (low density)
-
res/drawable-mdpi (medium density)
-
res/drawable-hdpi (high density)
-
res/drawable-xhdpi (extra high density)
-
res/drawable-xxhdpi (extra extra high density)
-
res/drawable-xxxhdpi (extra extra extra high density)
When specifying dimensions, use density-independent pixels (dp) or scalable pixels (sp) instead of pixels (px). Dp is a unit that corresponds to the physical size of a pixel at 160 dpi (dots per inch), while sp is a scale-independent pixel that adjusts to remain consistent for text across different screen sizes for user's preferred text.
Backward CompatibilityUse UI components and APIs available in newer versions of Android in a backward-compatible way. This ensures that application can still run on previous versions of the platform by checking the device's API level and using alternative methods or libraries when necessary.