0

initial stateI 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?

oop
  • 124
  • 1
  • 9

1 Answers1

1

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>
mrzbn
  • 497
  • 1
  • 3
  • 15
  • but for spacing I think first you should calculate width of first red item, and then see it's width is what percentage of it's parent (e.g. 48%) and set **app:layout_flexBasisPercent** programatically. – mrzbn Jul 22 '22 at 19:16
  • I see your solution definitely works but things get messy when I try to add spacing in between. I am not sure why would it not work when I add margins to it. But thank you so much for responding. I guess I was adding unnecessary elements to FlexboxLayout tag (`app:alignContent` , `app:alignItems` , `app:justifyContent` ). I ll try to play around with your suggested solution. Thanks. – oop Jul 22 '22 at 19:17
  • also see this issue: https://github.com/google/flexbox-layout/issues/271 . though it's solution is risky in my opinion. – mrzbn Jul 22 '22 at 19:18
  • Idk if this helps but if there are atleast two boxes, then they should always utilize half of the width. now If I give them both 49% programmatically, it might work. – oop Jul 22 '22 at 19:20
  • ok. let me explain. when you set **app:layout_flexBasisPercent** to 50% you are telling that your view should fill at least (cause of app:layout_flexGrow) 50% of it's parent. so first item and it's spacing take more than 50% of your parent, right? therefore second item can't fill 50% of it's parent height in first row so it has to go to next row. – mrzbn Jul 22 '22 at 19:26
  • oh that makes sense!! why it would go to next row. – oop Jul 22 '22 at 19:33