How to create responsive layouts for your Power Apps Canvas apps and adjust to Device rotations?

Responsive layouts. They are everywhere. If you are designing a modern app, responsive layout is kind of taken for granted.

Power Apps Canvas apps allow you to create enterprise grade B2B apps for mobile platform. And quite obviously, it must have responsive layout capabilities.

As surprising it is, I have seen developers doing all the complex things right but missing out on this one. Enabling the app for a responsive layout. So if you are building a mobile app in Portrait, what happen when the user rotate their device? Will the app continue to maintain it’s original layout or whether it shall adjust to fit in the new screen area?

All the questions shall be answered once we start designing the app for responsive design. Without wasting any more words, let’s get started.

The first and foremost thing here is to Disable the scaling option of the app. For that Navigate to File -> Settings -> Display. And set Scale to Fit option to unchecked.

As you can see from the above screenshot, Scale to fit is off. Once we disable scaling, it will make sure that your app is not distorted while trying to scale and fit to the screen. On top of that, you can no longer select Aspect Ratio. This makes sure you are not designing the application for specific screen size.

Also make sure “Lock Orientation” is Off if you want that your app adjusts to screen rotation.

That’s on the setting part. Now the next stuff is to make sure your screen is responsive. For this, set the height and width properties of all the screens to the below formula.

Height: Max(App.Height, App.MinScreenHeight)
Width: Max(App.Width, App.MinScreenWidth)

The app is taken care of. The screen is taken care of. Now it’s time to take care of the controls on the screen.

And below is a simple screen for my demo. I have a label and a gallery.

The trick for a responsive layout is to make sure try to set the height and the width of the controls as formula instead of absolute height and width. Basically you need to focus on the following properties of the control.

• X
• Y
• Height
• Width

For example, for the label control I set

X = 0
Y = 0
Width = Parent.Width

For the Gallery accordingly I set the Dynamic height, width, Y property.

Height = Parent.Height - Label1.Height 
Width = Parent.Width
Y = Label1.Height

The trick here is to set the properties as calculated relative to other controls on the form and not absolute.

Now when you publish, you will you see your app adjusting wonderfully to device rotation.

Hope this helped!

You might also like the below posts.

Debajit Dutta
Business Solutions MVP