Layouts in Android Studio
Last week, we explored Screen Metrics that affect the design decisions for responsiveness. This week, we’re looking at the layouts and tools used in designing a responsive UI.
Tools for Fluidity
A Layout is the skeletal structure of all the visual elements and spaces in your design. A fluid layout that adjusts itself to the available screen real estate is the most fundamental idea behind responsiveness.
How does it work?
To make a layout adjust to the screen size, we have to first know the width of the device. Responsive designs respond to changes in width by adjusting the placement of design elements to fit in the available space. Media Queries are a feature of CSS that enable the app/website to gather information about the width of the device screen or browser window.
All app/web development frameworks provide the ability to design a suitable layout for a range of screen sizes among the spectrum of screen sizes. So after a particular screen size (called breakpoints), we can choose to have a different layout. There are commonly used breakpoints that we can use to make our work easier. However, we can also set breakpoints according to our requirements.
Commonly used Breakpoints
To plan out how our layout should adapt with the change in width, we take the mobile-first approach. This simply means that we design the layout for mobile first, then add or change the layout according to the space available on bigger screens. It allows the designer to identify the most essential features of the product. Breakpoints are mainly used to optimize the website design and content to the huge variations in the screen sizes.
Since the size variation among Android phones is considerably lesser than the size variation from a phone to desktop, most phones have the same Layout Design. Since we cannot design layouts for all Android phones (which have hundreds of minute variations in screens), we scale our UI and set rules on how to scale and what to scale.
How do we instruct the app what ratio to scale with?
Instead of using a dp or pt we define the measurements in percentages. This allows the app to scale the UI in relation to the screen size i.e. the available height or width is considered as 100% and we define the positions, sizes, thickness etc. of the UI and content in smaller percentages.
Percentage based fluid layout
Another useful tool is the Relative Length Units which are units relative to something else, perhaps the size of the parent element’s font, or scaling a button size relative to the space available between two texts.
While a percentage-based layout is fluid, many designers and developers felt it was not dynamic or flexible enough. Flexbox is a library module designed as a more efficient way to layout multiple elements, even when the size of the contents inside the container is unknown.
A Flexbox has a Flex Container and a Flex Item inside the container. The flex container expands items to fill available free space or shrinks them to prevent overflow or overlapping of UI elements. It can be used in combination with other tools we have mentioned. Apart from enabling designers to have control over layouts, the codes for flexbox are very short, making it a developer friendly tool for making your design responsive.
Scalar Vector Graphics
Apart from UI, your layout will also have content in the form of Images, animations or texts. As seen in the image below, using Scalar Vector Graphics (SVGs) for 2D graphics is a great way to make your images and animations support responsiveness.
Typography Scale
Text content makes up a huge proportion of any website. An important aspect of Responsive typography is designing a Typography Scale for your Project. This scale will fix the relative sizes between each type of text content.
If your app/website has multiple languages to support, it is important to note that the same font size for different languages will occupy dissimilar screen space. The font size, font weight, line spacing, text box area and readability should be considered while creating a Typography Scale.
Note for designer: There are many tools and methods that are available and newer ones being released every year to help you design responsive products much more efficiently. Your goal should be to understand your product and choose the best suited tools and methods.
Types of Fluid Layouts
Fluid layout is an umbrella term for making the design responsive. There are several ways to achieve this fluidity using the tools we discussed in the previous section.
Linear Layouts are layouts in which your content is laid out unidirectionally. The page is scrollable and all the content scales equally with the screen.
Relative Layout uses Relative length units. It can be used to design the responsiveness of a child element (content or UI) which needs to scale proportionally to its parent element.
Grid Layout consists of Columns, Gutters and Margins and the content is laid out in this Columns. When the screen sizes change, the Grids change proportionally and the content and UI inside are ensured to be consistent while scaling across all the devices.
There are more varieties of layouts you can find on the internet. These can be used in combinations to create a more intricate responsive layout for websites.
But if you are not familiar with them, it requires a lot of time to understand these layouts and design a combination layout from the types mentioned above. It is suited to making less complicated products like websites, while making a really complicated product like a mobile app will be difficult with this method.
Is there a one-stop-shop layout which can be used for a digital product like an Android app with multiple complicated interactive functions to its elements?
Constraint Layout
Constraint Layout allows you to create large and complex layouts with a flat view hierarchy. It’s similar to Relative Layout in that all views are laid out according to relationships between sibling views and the parent layout, but it’s more flexible than Relative Layout.
A layout defines the structure for a user interface in your app, such as in an activity. All elements in the layout are built using a hierarchy of View and ViewGroup objects. A View usually draws something the user can see and interact with. Whereas a ViewGroup is an invisible container that defines the layout structure for View and other ViewGroup objects, as shown in figure
Using a Constraint Layout as base layout helps the UI to be responsive to even small variations in screen size. It allows you to specify the position and size for each view according to spatial relationships with other views in the layout. This way, all the views can move and stretch together as the screen size changes.
Conclusion
In this article we have mentioned techniques and tools for building websites and Android Apps together. Innovations such as Web-apps(PWAs) and Single Page Apps have really thinned the borders between developing a website and an app. So for almost all the features and tools available for developing a website using CSS there is an equivalent feature available for developing an app in Android studio and vice-versa. It might not have the same terminologies or be readily available on different development frameworks but you will find it online as plugin modules and add-on libraries.
Like any other technology, Responsive design’s scope is expanding. There are more methods invented and making the process of designing responsiveness more efficient and faster. As designers, it is recommended that we keep ourselves updated with these developments in this field so that we can learn to create more beautiful experiences for our users.
