I have three custom views (I'll call them boxes), first two boxes needs to be side by side. Each one to utilize 50% of the width with a certain space between them and the third one needs to be on second row(or below these two boxes) utilizing full width. Now if any of the boxes that doesn't have data, needs to be hidden and the rest of the boxes need to be adjusted. In short, these boxes needs to be adjusted based on other boxes' visibility. e.g if box 1 is hidden then we only show box2 and box3 side by side, if box2 is hidden we show box1 and box3 side by side and if two boxes are hidden the remaining box should utilize full width of the screen. This should work for both phone and tablet. Right now I have a solution that only works if I have three boxes with data, if I hide one of those, it wouldn't work as expected. Any suggestions?
I achieved it with this lines of code (although without spacing):
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap">
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="@color/red"
app:layout_flexBasisPercent="50%"
app:layout_flexGrow="1"/>
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="@color/green_dark"
app:layout_flexBasisPercent="50%"
app:layout_flexGrow="1" />
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="@color/dark_blue_800"
app:layout_flexBasisPercent="50%"
app:layout_flexGrow="1"/>
</com.google.android.flexbox.FlexboxLayout>