Dynamic Buttons in ChatBot — FlexBoxLayoutManager — Android

When we were chatting with any customer service like eCommerce company or Finance company, then we can observe the dynamic buttons list to show the options that we want to chat with them about. For example, If we take eCommerce company, We can see options like “Refund”, “Chat with Agent” , “Offer” etc. You want to build the same as shown in the below image. What are you waiting for? Go through this article.

https://www.chatbot.com/integrations/livechat/

When ever you see this, you can think of GridView/StaggeredGridView, but if you clearly observe those components, you need to mention fixed number of columns/ rows that you want to have that list for. Suppose if you want

Are you React/React Native developer? Do you ever heard about FelxBox?
Then it would be easy for you to understand.

Google has implemented an open source library to support this kind of functionality. This will work with recyclerView as we have support for LinearLayoutManager, GridLayoutManager and StaggeredGridLayoutManager.

Topics to learn from this?

1. FlexBoxLayoutManager
2. Button Styles
3. How to import .aar module?

Dependency

implementation 'com.google.android:flexbox:2.0.1'

If you are not able to integrate with this, you can download and import .aar file to use this as a library instead of dependency. Follow this article to the end to know how to import .aar file and use it in your android project.

FlexBoxLayoutManager

Instead of LinearLayoutManager, you can just use FlexBoxLayoutManager as in below code.

Here,

flexDirection -> In which direction you would like to arrange the list of items. In Row/ Reverse Manner (ROW_REVERSE)/ COLUMN etc.

justifyContent -> How you would like to arrange those list of items.

I will consider FlexDirection as ROW and JustifyContent as FLEX_START in this project for the explanation.

It will start rendering first item and place it based on flex direction and justifyContent.

If FlexDirection.ROW, then it will fill complete row until the end, then. will come to the next line and so on.

Creating Adapter, Layout, ViewHolder all are same as per the RecyclerView Implementation.

To understand RecyclerView implementation and other concepts in Android go through below articles.

Line Chart Implementation —with MPAndroidChart

MVVM -Kotlin -Dagger2 -RxJava2 -Retrofit in Android

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        binding.recyclerView.apply {

            val layoutManage:FlexboxLayoutManager = FlexboxLayoutManager(context)
            layoutManage.flexDirection = FlexDirection.ROW
            layoutManage.justifyContent = JustifyContent.FLEX_START

            val btnsAdapter:BtnsAdapter = BtnsAdapter()
            layoutManager = layoutManage
            adapter = btnsAdapter

        }

    }
}

As per the above FlexDirection and JustifyContent

If those changed as below,

layoutManage.flexDirection = FlexDirection.ROW
layoutManage.justifyContent = JustifyContent.FLEX_END

Button styles

If you want rounded button styling like above, based on the radius you give, it will look more rounded corners.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
    <stroke android:color="#03A9F4" android:width="2dp"/> 
    <corners
        android:bottomRightRadius="30dp"
        android:bottomLeftRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp"/>
</shape>

If you want to change styles based on the action like when focused/clicked/unfocused we can do that as below.

button_background.xml

You can apply these drawables as a background to the button like,

<Button android:background=”@drawable/button_background”/>

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  Non focused states
     -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_unfocused" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_unfocused" />
    <!--  Focused states
     -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_focus" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_focus" />
    <!--  Pressed
     -->
    <item android:state_pressed="true" android:drawable="@drawable/button_press" />
</selector>

button_focus.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="1dp" android:color="#FF404040" />
    <corners android:radius="6dp" />
    <gradient android:startColor="#F8BB02" android:centerColor="#FF8000" android:endColor="#E0A652" android:angle="90" />
</shape>

How to import .aar file?

I will consider FlexBox .aar module as an example here. You can find this Google’s Flexbox module here.

https://google.bintray.com/flexbox-layout/com/google/android/flexbox/

1. Create libs folder in src/main path

2. Add this path to the Project build.gradle file so that when you try to build the project, it will be able to find that library in that path.

allprojects{
    repositories{
        google()
        flatDir{
           dirs 'src/main/libs'
        }
    }
}

3. add below dependency.

dependencies{
    implementation(name:’flexbox-2.0.1', ext:’aar’)
}

4. Clean build and Rebuild

Please find out the full project here.

SrinivasaRaoMakkena/ChatBot

There are many features that we can implement using FlexBox like if we want to show all photos in the screen and based on width and height, we can display them. Please refer to below project for more information.

google/flexbox-layout

Thanks for reading!

“Sharing is Caring, So, Share with your loved One’s”