Adjust Screen Size with Mobile Screen

Hi,
How can we design screen which will automatically adjusted to screen size of different mobile devices? I am currently using 4 different mobile models (iphone / MotoG / POCO / OPPO) where screen sizes of all these mobile are different. The problem I face with length of app, the bottom of screen remains blank.

Any views ?

Regards

Hi @Dine-733a,

Thanks for the question. Our mobile app is built for all standard phone sizes and there should not be any extra empty space at the bottom. Could you check the following things in your workbook & app?

  1. does the empty space in your app have thick grey line at the end? Something like this:

If yes, this is happening because there is no data in the table rows displayed the list here. Please add data to your table rows.

  1. If it looks like plain white space, there might be additional objects in your app that are not displaying data in the app. Please check if the data sources behind those objects have data.

If these two solutions do not solve the issue, could you share some more details about the issue?

  1. where is the white space appearing? Is there any content after the white space?
  2. Is it displaying accurately on some devices and not on the others? If yes, could you list the devices?
  3. Any other information that might be relevant to helping us solve the issue?

Looking forward to knowing more.

Hi Rucha,

Thanks for reply,
The screenshot you have shared is iPhone screenshot, iPhone screen design is different. its shows back / app with < in the left top corner and screen name is displayed in the center.
image

Andriod screen are different - it do not show <Apps , it will move the heading of screen name to left corner after <- .

When I activate app navigation that section come proper on any Android phone at bottom but i need to add minimum 2 screens. There is white gap between the application screen and app navigation bar.

When I do not activate the app navigation ,then there is blank screen with different Android models.

I am sharing 3 screenshots taken on Moto, Oppo-F11 and POCO-F1.

I will test on iPhone -6 and will send that screenshot also.

Regards

Hi Rucha,

Can we autohide the app navigation bar which is comes @ the bottom of the mobile screen? and can we list only once screen there ? for e.g main menu or help ?

Regards

Hi @Dine-733a,

Thanks for looking into this further.
The app name being left aligned instead of center and the extra white space in some devices look like bugs. Thanks for bringing this up, we will look into resolving it.

The navigation bar in mobile apps is displayed only when there is more than one screen in the app. You can choose to hide/show screens from the app navigation by configuring it in the builder. Simply select the app navigation bar and configure in the properties panel which can be accessed from the toolbar.

Let me know if this helped solve the app navigation issue.

Hi Rucha,

Application Navigation issue is resolved, I wanted to keep only one screen as I have almost 20+ screens developed. I am planning to keep home screen and help screen if we need one or more screen for app navigation. Once you release picture icons with buttons, i may be able to reduce multiple screens :slightly_smiling_face:

Regards

1 Like