Dynamic Icon content in Android Compose

Question

What I need is to adjust Icon's content accordingly to the available screen space.

If the screen height is enough - I would like to display a bigger image version. If it's not enough - I want to display a smaller version.

Roughly, my screen's content is next:

Column {
   Topbar()
   Column(modifier = Modifier.weight(1f)) {
      HorizontalPager(modifier = Modifier.weight(1f)) {
          Image()  
          Text()
      }
      HorizontalPagerIndicator()
   }
   Buttons()
}

The structure is simplified.
So, Topbar and Buttons are static and located at the top and at the bottom of the screen. The middle of the screen is taken by HorizontalPager. The indicator should stay on the bottom of this part and all other available space is filled with the pager's content.
The issue is that I should have different images inside a pager depending on how much height is available.

Here is what the full image should look like:

small version:

Appreciate any tips, guys.

Answer 1

The screenshots are different from what you are asking, do you want to display bigger images or two rows of images ?

Btw, a solution can be measuring the display height with LocalConfiguration.current.screenHeightDp and adapt your HorizontalPager based on that.
Or creating multiple rows if you want the lines to scroll separately.