Android: FlexBoxLayout

Aastha

21 December 2016

A FlexBoxLayout (Flexible box layout) in android is similar to the one in CSS. Its work is to make a layout flexible. As you know the android have limited screen size so sometimes the length of the data increases throwing our views out. In vertical layout it can be solved with applying a parent ScrollView but things got really weird with Horizontal Layouts. Then there comes the FlexBoxLayout to our rescue.

The FlexBoxLayout contains many properties like flex direction, flex_wrap, justifyContent and many more. But I am especially using the flex_wrap property as it let me put any number of views in horizontal layout. It wraps the horizontal content such that if there is no space it will go to next line. Isn’t it great?

for using FlexBoxlayout you have to add a dependency to your project

dependencies {
    compile 'com.google.android:flexbox:0.2.3'
}

dependencies {

compile 'com.google.android:flexbox:0.2.3'

}

And then you can use it anywhere like I used it add a address in my view such that

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="android.view.View"/>
        <variable name="address" type="com.webkul.prestashop_app.Address"/>
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{address.firstname +' '+ address.lastname}"
            android:paddingBottom="8dp"
            android:textStyle="bold"
            tools:text="John Doe"/>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="8dp"
            android:textSize="12sp"
            android:text="@{address.address}"/>

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="8dp"
            android:textSize="12sp"
            android:visibility="@{address.address_line2.equals(&quot;&quot;) ? View.GONE : View.VISIBLE}"
            android:text="@{@string/comma_space(address.address2)}"/>

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="8dp"
            android:textSize="12sp"
            android:visibility="@{address.city.equals(&quot;&quot;) ? View.GONE : View.VISIBLE}"
            android:text="@{@string/comma_space(address.city)}"/>

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="8dp"
            android:textSize="12sp"
            android:visibility="@{address.state.equals(&quot;&quot;) ? View.GONE : View.VISIBLE}"
            android:text="@{@string/comma_space(address.state)}"/>

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="8dp"
            android:textSize="12sp"
            android:visibility="@{address.zip.equals(&quot;&quot;) ? View.GONE : View.VISIBLE}"
            android:text="@{@string/hyphen_space(address.zip)}"/>

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="8dp"
            android:textSize="12sp"
            android:visibility="@{address.country.equals(&quot;&quot;) ? View.GONE : View.VISIBLE}"
            android:text="@{@string/comma_space(address.country)}"/>

        </com.google.android.flexbox.FlexboxLayout>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{address.homePh}"
            android:paddingBottom="4dp"
            android:textSize="12sp"
            android:visibility="@{address.homePh.equals(&quot;&quot;) ? View.GONE : View.VISIBLE}"
            tools:text="9999999999"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{address.mobilePh}"
            android:textSize="12sp"
            android:visibility="@{address.mobilePh.equals(&quot;&quot;) ? View.GONE : View.VISIBLE}"
            tools:text="8888888888"/>

    </LinearLayout>

</layout>

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools">

<data>

</data>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@{address.firstname +' '+ address.lastname}"

android:paddingBottom="8dp"

android:textStyle="bold"

tools:text="John Doe"/>

<com.google.android.flexbox.FlexboxLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:flexWrap="wrap">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:paddingBottom="8dp"

android:textSize="12sp"

android:text="@{address.address}"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:paddingBottom="8dp"

android:textSize="12sp"

android:visibility="@{address.address_line2.equals("") ? View.GONE : View.VISIBLE}"

android:text="@{@string/comma_space(address.address2)}"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:paddingBottom="8dp"

android:textSize="12sp"

android:visibility="@{address.city.equals("") ? View.GONE : View.VISIBLE}"

android:text="@{@string/comma_space(address.city)}"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:paddingBottom="8dp"

android:textSize="12sp"

android:visibility="@{address.state.equals("") ? View.GONE : View.VISIBLE}"

android:text="@{@string/comma_space(address.state)}"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:paddingBottom="8dp"

android:textSize="12sp"

android:visibility="@{address.zip.equals("") ? View.GONE : View.VISIBLE}"

android:text="@{@string/hyphen_space(address.zip)}"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:paddingBottom="8dp"

android:textSize="12sp"

android:visibility="@{address.country.equals("") ? View.GONE : View.VISIBLE}"

android:text="@{@string/comma_space(address.country)}"/>

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

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@{address.homePh}"

android:paddingBottom="4dp"

android:textSize="12sp"

android:visibility="@{address.homePh.equals("") ? View.GONE : View.VISIBLE}"

tools:text="9999999999"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@{address.mobilePh}"

android:textSize="12sp"

android:visibility="@{address.mobilePh.equals("") ? View.GONE : View.VISIBLE}"

tools:text="8888888888"/>

</LinearLayout>

</layout>

And with that you got what actually you wanted. As I had already said it has many more properties its just a demo. You can check more here.

Source: https://github.com/google/flexbox-layout