This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information

VisionX App 3.4.0 is available

Our VisionX App v3.4.0 has officially landed in the app stores. Over the past few weeks and months, we have poured a ton of energy into feature development, and it has truly paid off. With the new release, building sleek, custom applications is easier than ever. We put together a quick video to show you what we mean.

In the video, you will see a password management app built with 3 core screens: Secrets, Security Protocol, and Feedback.
The entire application was built and deployed with VisionX in just 20 minutes.

The first 30 seconds of the video show the menu and Secrets screen in their raw, out-of-the-box state. The app is fully functional right away, but there is plenty of room for visual polish - and that is where the magic happens starting at second 31.





First, we drop the header background color and hide the menu grouping, since small apps do not really need category groups anyway. Next, we update the global application color, which instantly propagates across all screens including Secrets.

Since the Secrets screen has its own header background, we clear that as well. By default, it features a search field, a button, and a data table. To save screen real estate, we convert the label into a sleek placeholder text with a magnifying glass icon, then align the search button directly beside the field. While tables are useful, a card-style list fits sparse data much better, so we swap the table for a list, color-code alternate rows for readability, and add dynamic icons.

The result is a clean, modern aesthetic that looks infinitely better.


Next up: the input form. Originally, it takes a traditional approach with standalone labels, input fields, and standard action buttons. Works fine, but with room for visual improvement. To modernize it, we integrate labels directly into the fields as placeholders, remove full button borders for a subtle look, and add a live password strength meter. We also tweak the required field color so it blends seamlessly with the new theme, and finish off with a clean border frame around the image.

The application now feels completely redesigned, fresh, and polished.

The absolute best part?

No rebuilding or new app deployment was required - just pure styling updates. The app dynamically adapts to whatever configuration you define.


For instance, switching from a table to a customized list is done in a single line:

tableSecrets.setStyle(new Style("f_as_list", "f_as_card_flat",
                                "f_with_arrow", "f_list_columncount_1_1",
                                "f_list_columnseparator___"));

With just three simple calls:

layoutSearch.setResponsive(Boolean.FALSE);
layoutSearch.setLabelPosition(LabelPosition.Placeholder);

searchEditor.setStyle(new Style("f_icon_prefix_search"));

you refine the search bar by adding an inline search icon, setting placeholder labels, and docking the button inline.

To activate the dynamic password strength bar:

passwordEditor.addStyleNames("f_passwordstrength");

And to frame images cleanly:

imageViewer.getImageEditor().addStyleNames("f_standard_border");

Menu adjustments are handled directly in mobile_styles.xml:

<menu>
  <mode>grid</mode>
  <titleColor>#FAFAFA</titleColor>
</menu>
<screen>
  <titleColor>#FAFAFA</titleColor>
</screen>

And the list styling comes together with:

<theme>
  <color>#6B858E</color>
  <data>
    <list>
      <image>
        <noBackground>true</noBackground>
      </image>
      <card>
        <borderRadius>10</borderRadius>
        <backgroundOdd>#e0e9edaa</backgroundOdd>
        <backgroundEven>#d3dbdfaa</backgroundEven>
      </card>
      <arrow>
        <color>#a0a0a0</color>
        <size>18</size>
      </arrow>
    </list>
  </data>
</theme>


In just 10 extra minutes of styling, you can transform any application to match your exact brand vision and deliver tailored user experiences.

We rely on these features every single day.

More styling options are available in our documentation.