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.

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.

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.

Flexbox

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.

Scalar Vector Graphics

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.

Typography Scale

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.

Types of Fluid Layout
1. Column, 2.Gutter, 3.Margin

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.

Hierarchy of View and ViewGroup object
Constraint Layout design window from Android Studio

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.

BRND Studio uses an integrated framework of Design Thinking and Human-Centred Design to build innovative solutions and solve complex, ambiguous problems.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store