This change should not affect the old way of responsiveness, and all settings should be handled seamlessly. However, we would like to verify with you whether all your important projects will correctly represent the design in the mobile application.

It would be great if you could try out all the important customizations in the latest preview version of the mobile application.

Why the change?

Users sometimes experienced overlaps of cells in rows, making the content unreadable due to misconfigured anchoring. The anchoring tool was quite complicated, with some options having zero effect on the final layout, contributing to the confusion.

How we’re fixing it

Newly added cells are now set to responsive by default. This means that as the row width increases, the cells will proportionally increase as well, maintaining gaps between individual cells, but also distances from the row edges.

In the case of inserting images, such as avatars in contacts, you do not want them to be responsive, as they have a static size. In such a case, it is necessary to turn off the responsiveness and set the anchoring either on the right or left side. The new algorithm for cell responsiveness within the row will take care of everything else.

What you’ll see

In the design editor, when selecting a row, you will see not only cell boundaries but also an arrow either to the right or left according to the activated anchoring in the properties pane.

How does responsiveness work?

If responsiveness is set to “On,” a cell will stretch as the screen expands to avoid leaving empty space. If it is the only element in a row, it maintains consistent margins from its parent row, behaving as though its right and left sides are anchored to the edges.

If two responsive cells are adjacent, they keep a distance from both sides.

However, if an overlap occurs that wasn’t originally designed, it gets corrected according to the template pattern, preserving the proportion of widths and their mutual indentation.

Responsive is set to “Off”

When responsiveness is disabled, the cell will have a fixed width and will be anchored on the selected side. Consequently, when the width changes, the cell will maintain its fixed width and distance from the marked side of the row.

Tips for designing

Make sure your row width fits the smallest screen you’re designing for. This helps avoid overlaps and makes scaling smoother.

This means that if you want to use a view as part of a tree view, you must take into account the width of the row in this component. Otherwise, overlaps may occur.

Scaling works best from the proposed width upwards.

Font size matters

In the latest version, font sizes now look the same on the canvas as they do on devices. So you’ll see exactly how your text will look. We recommend setting cell height a bit bigger than the font size to avoid cutting off text.

Starting from version 17.1, the font size has been standardized to match the actual size on devices. As a result, the canvas preview will reflect the true appearance. This allows you to see, for instance, if text is getting cut off due to insufficient cell height. We recommend setting the cell height to about 15 to 20% greater than the font size. For example, for a font size of 15 dp, the minimum cell height should be 17 dp.

Give it a try

Before the official release in the end of May, we’d love for you to test out these changes in the preview version. Try your important customizations and let us know what you think!

Let us know if you have any questions or feedback.

Príspevok Test-drive new cell resizing feature before launch zobrazený najskôr Resco.

We have organized these images into folders based on their specific purpose within the application. For instance, if you are looking for icons used on the home screen (menu), you can find them in the Home folder.

It is important to note that all icons should be in PNG format, and a size of 24x24dp. Also, if you want to recolor the icons in the Theme editor, keep all icons monochrome and transparent.

When adding images to the project, it is crucial to keep in mind that all files are synchronized on the device, even if they are not actively used. Therefore, we highly recommend maintaining content without any redundant images.

In default mobile projects, we use a combination of Resco’s default icons, which we have developed internally, and icons from the Material Design library, which is an open-source project. If you need an icon, we strongly recommend selecting one from this extensive database.

To export Material icons, you will need to set the density to 2x and the size to 24dp in the properties panel. These icons can then be downloaded in PNG format.

Once downloaded, the file will be in a zip format and will need to be extracted. Inside the extracted folder, you will find two versions of each icon: 1x and 2x. For our project, we utilize double-sized icons (2x).

Importing these icons into Woodford can be accomplished by either using the “Add new icon” button or the icon located in the main toolbar “Add”.

Once the dialog window appears, clicking on the placeholder will provide you with the option to select an icon. Simply choose the desired icon from your computer and insert it into your project.

Additionally, remember to include the icon’s name and ensure its colorization. Complete the process by pressing the “Add” button. After uploading the images, it is important to save your progress.

Now you can freely utilize the newly added images within your project. For example, if you have added an icon to the Home folder, it will now be available as an additional option in the “Images” panel.

To get started, you can download a zip file with default icons set. You can directly import this zip file into your project.

Príspevok How to upgrade your business app’s look: Easy steps to import and organize Material Design icons in Resco zobrazený najskôr Resco.