An example of using large screen to display dashboards

Free Download


Normally, developers would insert an image as the border of components in dashboards.

But in the case where significant differences exist between the aspect ratios of components and border assets, the border will be incorrectly displayed.

The border is distorted

There’s no doubt that the management won’t be satisfied to see such things on the large screen dashboards, and it seems that there’s nothing can be done with it.

Here it comes! With a complete upgrade for dashboard development:

  • Component background filling and border can be configured individually.
  • With the image inserted via “Border”, you can further set the “9-Patch Image Setting” to keep the pattern exfactly the same.
You can set background and border individually

But, what is a “9-Patch”? And how does it save our day by keeping intact the border pattern?

You can find the answer here.

First, select a component and insert an image in “Border” on the attribute pane, then click on “9-Patch Image Setting”.

How to set 9-Patch

An interactive panel will show.

Here you can drag the lines to set protected areas.

The protected areas on the 4 corners will be kept the same when adjusting the size of components, while the 4 sides stretched.

How every patches are processed

In cases where the aspect ratio of components is nearly the same as image materials, the filling effect of “Body BG” and “9-Patch” will look the same.

When the component is displayed in normal aspect ratio

But when the aspect ratios differ greatly, “9-Patch” will have its benefit shown.

For example, the vertical sides of image-filled borders will look unusually thick (as you can see in the red box below) when the component is relatively wide.

“9-Patch” will help you avoid such issues:

When the component is wide

And it works better when the component is higher.

As you can see, the pattern on the top right corner distorted and blurred significantly, which impacted the overall feel of the component.

“9-Patch”, on the other hand, presented the patterns perfectly.

When the component is high

Generally speaking, “9-Patch” is a simple but effective solution to boost your productivity.

It is a small step for dashboards, but a giant leap for taking off the burden from developers.

Simple and easy-to-use “9-Patch” can help developers keep the border intact, even with the same image material for component borders with various aspect ratios.

The development of this feature shows that at FanRuan, users always come first despite our continuous leading position on large screens. We will keep advancing on improving the user experience.

Explore Other Resources

Dashboard Tools | 6 min read
Add Opening Effect to enhance visual impact of dashboards and reduce loading time.
12-20-2021
Dashboard Tools | 9 min read
The manufacturing dashboard helps companies track and optimize production quality. Click to check more information about the manufacturing dashboard.
12-02-2021
Dashboard Tools | 5 min read
Nowadays, Java dashboard application, like Grafana, Dashbuilder, Freeboard, plays an essential role in business. Click here to explore more.
11-06-2021