Android FlexLayout spacing between views

Question

I used a flex layout which has two button. The reason I am using flex layout is because there is a change that the text of the button might increase and if that happens I want to button to be stacked vertically.

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    >

    <Button
        android:id="@+id/clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Clear"
        app:layout_flexGrow="1"
        style="?attr/materialButtonOutlinedStyle"
        />

    <Button
        android:id="@+id/apply"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Apply"
        app:layout_flexGrow="1"
        />

</com.google.android.flexbox.FlexboxLayout>

The current issue I am facing is :

1. I wanted to give some margin between the two buttons when they are shown horizontally in a single line. I tried giving margin to clear button but when the text is changed to a large text in both the button that margin still exists. So the button width will look uneven. I also tried adding justifyContent, since I am using flexGrow I think it was not working.

2. Is there any option to change the positioning of the button if they are being stacked vertically. I wanted to show the Apply button first if it's in vertically stacked.

Answer 1

For issue 1: I added padding left for the flexbox layout and added right padding for both buttons. So even if they are stacked horizontally they would have same left and right padding.

For issue 2 : Just use app:flexWrap="wrap_reverse"

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="16dp"
    app:flexWrap="wrap_reverse">


    <Button
        android:id="@+id/clear"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:text="Clear"
        app:layout_flexGrow="1"

        />

    <Button
        android:id="@+id/apply"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:text="Apply"
        app:layout_flexGrow="1" />

</com.google.android.flexbox.FlexboxLayout>