Flexbox Layout - Android Material UI/UX

In this layout, items will “flex” to different sizes to fill the space. It helps us to make a responsive UI

FlexboxLayout extends the ViewGroup like LinearLayout and RelativeLayout. You can specify the attributes from a layout XML like

Read more: official link

Add the following dependency to your build. Gradle file:

dependencies {
    implementation 'com.google.android.flexbox:flexbox:3.0.0'
}

In the Fragment:

package com.boltuix.materialuiux.flex

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController
import com.boltuix.materialuiux.databinding.FlexLayoutBinding

class FlexLayoutFragment : Fragment() {

    private var _binding: FlexLayoutBinding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {

        _binding = FlexLayoutBinding.inflate(inflater, container, false)
        return binding.root

    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.nextButton.setOnClickListener {
            findNavController().navigateUp()
        }

    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

In the layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/md_theme_light_primary">

    <ImageView
        android:alpha=".5"
        android:background="@drawable/ic_bg_2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="35dp">

        <LinearLayout
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:textStyle="bold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Select your most favorite genres"
                android:textAlignment="center"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="You can change these later"
                android:textAlignment="center"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
                android:textColor="@color/grey_10" />

        </LinearLayout>

        <com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flex_box"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:padding="15dp"
            app:flexWrap="wrap"
            app:justifyContent="center">

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"

                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Pop"
                android:textAllCaps="false"


                android:textColor="@color/grey_20"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Alternative"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Soul"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Gospel"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Punk rock"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Electronic"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Hip-hop"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Reggae"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Jazz"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Country"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Instrument"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Hard rock"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="New wave"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Folk"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Acoustic"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

            <com.google.android.material.button.MaterialButton
                style="@style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="EDM"
                android:textAllCaps="false"


                android:textColor="@color/grey_10"
                app:backgroundTint="@color/overlay_dark_60"
                app:cornerRadius="25dp" />

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

    </LinearLayout>

    <LinearLayout
        android:id="@+id/nextButton"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        android:background="@color/overlay_dark_30"
        android:clickable="true"
        android:foreground="?attr/selectableItemBackground"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
            android:textColor="@android:color/white" />

    </LinearLayout>

</RelativeLayout>

Search This Blog

Bolt UiX

Flexbox Layout - Android Material UI/UX

Comments

Post a Comment