Flexbox for Android Developers
Hello friends, it’s been a while since the last time I wrote here. I have actually been waiting for Google I/O event to be held so that I would have a lot to write on.
Google ended its presentation on Thursday, May 9, and to be quite frankly I haven’t seen all of the videos from the event.
Lately, I have been putting my hands on React Native and I have been loving it. The thing that struck the most is how easily you could build views in React Native and how unfair is the world to Android developers, in that they have to put too much work in building a view. What made the process of building view easy in React Native was Flexbox. And of course, the immediate thought was “what a better place would be this world to live in if Android had Flexbox”.
Watching the videos from the conference I encountered the word “Flow”, and I realized that Flow has a lot of similar qualities with Flexbox.
Recently Google has released Flow beta version.
Being that we are gonna talk about ConstrantLayout, I’ve lately written an article about that.
Take a look over there because it is really interesting: LINK
Today we are talking about one of ConstraintLayout 2.0 beta1 features that Google released on this Google I/O.
Let's start by introducing some new terms, shall we?
What is a Virtual Layout?
Virtua Layout is a helper that would come in hand to do things that we would need to do manually, such as to set some constraints.
What is Flow?
Flow is a Virtual Layout that allows us to maintain a flat hierarchy on our views and it helps us to position widgets.
In other words, Flow is a Virtual Layout that will help us to automate some work.
How to use Flow?
First of all, we should import the library:
implementation ‘com.android.support.constraint:constraint-layout:2.0.0-beta1’Let’s take a look at this example:
<android.support.constraint.helper.Flow
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#F8BA00"
app:constraint_referenced_ids=”btn1, btn2, btn3"
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent”></android.support.constraint.helper.Flow>If we look into it, it’s like a normal widget. It has a width, height, color as a background and all the constraints with parent view, so it is a familiar pattern. The only difference is this row:
app:constraint_referenced_ids=”btn1, btn2, btn3"
It determines which IDs will be chained.
What is new is the wrap behavior editor akin to flexbox layout where you know if you do not have the space before you can offer another space you come to anything else but now we will create an extra chain for you by default we are using the same type of chain for all the different chains but you can actually specify the front chain between your first chain and the rest of chains.
In the gif below we see the line:
app:flow_wrapMode="aligned"
If the screen width is not enough a new row gets to build and the elements get set in the order that has been previously defined as referenced id.a
If we take a look in the gif above, there are devices with different screen sizes and notice how well the elements get positioned on the screen on their own.
If that’s not amazing, I don’t know what is.
If we were to chose :
app:flow_wrapMode=”chain”
Then the elements would get symmetrically positioned on the interface. (see image below)
Imagine how long it would take us only to build the layout for different screen sizes to get to this.
Is there a way to connect this button with other widgets?
Yes, absolutely. All the buttons can be connected to other widgets via constraints without any problem.
In fact here is a code that does exactly this:
<TextView
android:id=”@+id/textView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Eljo Prifti”
app:layout_constraintBottom_toTopOf=”@+id/btn1"
app:layout_constraintEnd_toStartOf=”@+id/btn3"
app:layout_constraintHorizontal_bias=”0.117"
app:layout_constraintStart_toStartOf=”@+id/btn1"
app:layout_constraintTop_toTopOf=”parent”
app:layout_constraintVertical_bias=”0.938" />Conclusion:
Even though the flow is still in beta version, being that it has been out there only a couple of days, I hope that very soon we will be able to have a more stable version of it. And when that moment arrives this feature will be a valuable asset in the hands of an Android Engineer that for sure would have to use.
