Showing results for 
Search instead for 
Did you mean: 

Are there any plans to make responsive UI on TouchGFX?

Associate III

I've been using LVGL for a while and I must say, their implementation (much based on CSS styles) is good to make responsive designs that scale based on screen size. Their concept is very simple, every object have a flex property that can be enabled. Objects put inside flex containers, for example, are automatically arranged inside the container in rows or columns. If the container size change, the objects are rearranged. There is also the grid option. This make possible the implementation of responsive designs very easily. So far, so good. But there is a problem: LVGL dropped their support for DMA2D acceleration on their latest major version. They expect to have some kind of official partnership with ST for bringing this feature back. I'm totally against this kind of behavior on a project that take benefit from community sent code. It's a total bummer!

It's been a while since I have used TouchGFX for the last time. Some of my projects makes use of displays of different resolutions. Is there anything like this? Any plans to implement it?

ST Employee

Hello @Dolence,

Unfortunately, there is no plans of having a responsive UI in TouchGFX. The projects are created with a strict specification in mind, so everything is fixed (positions,sizes,etc).

The closest "responsiveness" you can get is by using FlexButton and ScallableImage, but for TextAreas you will need to have multiple ones for the same text for the different sizes. Using the VectorFont feature in TextAreas may allow you to use less memory than regular bitmap fonts.


For setting positions and sizes depending on the screen size, you can use:

#include <touchgfx/hal/HAL.hpp>


Use both the framebuffer width and height to set different positions and sizes
uint16_t framebuffer_width = HAL::FRAME_BUFFER_WIDTH;
uint16_t framebuffer_height = HAL::FRAME_BUFFER_HEIGHT;


For TextAreas you'll need to play the different typographies that have different sizes, there's a tutorial here : Part 1 – Typography and Language | TouchGFX Documentation

I hope that answers your question.


ST Software Developer | TouchGFX