How can I do something like a FlowLayout in Android?


Many times in android applications we have to explain to the user about the step by step guide for performing a certain task within an application such as How to book a service which is being provided within our application. For that we have to display a detailed guide on this in the form of flow layout.

In this article we will take a look on How to create something like a Flow Layout in Android.

Implementation

We will be creating a simple application in which we will be displaying a simple text view. After creating this text view we will be creating a step view in which we will be displaying the basic steps which are to be followed for the application development lifecycle. Now we will move towards android studio for creating a new project.

Step 1: Creating a new project in Android Studio

Navigate to Android studio as shown in below screen. In the below screen click on New Project to create a new Android Studio Project.

After clicking on New Project you will get to see the below screen.

Inside this screen we have to simply select Empty Activity and click on Next. After clicking on next you will get to see the screen below.

Inside this screen we have to simply specify the project name. Then the package name will be generated automatically.

Note − Make sure to select the Language as Java.

After specifying all the details click on Finish to create a new Android studio project.

Once our project has been created we will get to see 2 files which are open i.e activity_main.xml and MainActivity.java file.

Step 2: Adding dependency for Step View in build.gradle file

Navigate to Gradle Scripts> build.gradle file and add below dependency to it in the dependencies section.

implementation 'com.github.shuhart:stepview:1.5.1'

After adding the above dependency simply sync your project to install it.

Step 3: Working with activity_main.xml

Navigate to activity_main.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_main.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?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"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layoutDirection="ltr"
   android:paddingTop="8dp"
   android:paddingBottom="8dp"
   tools:context=".MainActivity">
   <!--     creating a text view on below line-->
   <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_above="@id/step_view"
       android:layout_centerInParent="true"
       android:layout_marginStart="20dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="20dp"
       android:layout_marginBottom="20dp"
       android:padding="4dp"
       android:text="Flow Layout in Android"
       android:textAlignment="center"
       android:textColor="@color/black"
       android:textSize="20sp"
       android:textStyle="bold" />
   <!--     creating a step view on below line-->
   <com.shuhart.stepview.StepView
       android:id="@+id/step_view"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:background="@color/purple_500"
       android:backgroundTint="@color/purple_500"
       android:layoutDirection="ltr"
       android:padding="16dp"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:sv_animationType="All"
       app:sv_doneTextColor="@color/purple_500"
       app:sv_nextTextColor="@color/white"
       app:sv_selectedCircleColor="@color/white"
       app:sv_selectedCircleRadius="18dp"
       app:sv_selectedTextColor="@color/white"
       app:sv_stepNumberTextSize="18sp"
       app:sv_stepPadding="12dp"
       app:sv_textSize="12sp"
       tools:ignore="MissingConstraints" />
   <!-- creating linear layout for buttons on below line -->
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_below="@id/step_view"
       android:orientation="horizontal"
       android:weightSum="2">
       <!-- creating a button for next on below line -->
       <Button
           android:id="@+id/idBtnNxt"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_margin="16dp"
           android:layout_weight="1"
           android:backgroundTint="@color/purple_500"
           android:text="Next"
           android:textAllCaps="false" />
       <!-- creating a button for back on below line -->
       <Button
           android:id="@+id/idBtnBack"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_margin="16dp"
           android:layout_weight="1"
           android:backgroundTint="@color/purple_500"
           android:text="Back"
           android:textAllCaps="false" />
   </LinearLayout>
</RelativeLayout>

Explanation: In the above code we are creating a root layout as a Relative Layout. Inside this layout we are creating a text view which is used to display the heading of our application. After that we are creating a StepView which we will be using to display the steps of building android applications in the form of flow. After that we are creating a horizontal linear layout. Inside this linear layout we will be creating two buttons: the next button and a back button. After clicking on next we will move towards the next step and clicking on back we will move towards back step.

Step 4: Working with MainActivity.java file

Navigate to MainActivity.java. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>MainActivity.java to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

package com.example.java_test_application;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.core.content.res.ResourcesCompat;
import com.shuhart.stepview.StepView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

   // creating variables on below line for current number of steps.
   private int currentStep = 0;
   // creating variables for buttons and step view on below line
   private Button nextBtn, backBtn;
   private StepView stepView;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       //initializing variable for steps view on below line.
       stepView = findViewById(R.id.step_view);
       nextBtn = findViewById(R.id.idBtnNxt);
       backBtn = findViewById(R.id.idBtnBack);
       // creating an array list for the steps to be displayed in steps view.
       List<String> steps = new ArrayList<String>() {{
           add("App
Strategy"); add("Analysis &
Planning"); add("UI/UX
Design"); add("App
Development"); add("Application
Testing"); }}; // adding click listner for each step in step view. stepView.setOnStepClickListener(new StepView.OnStepClickListener() { @Override public void onStepClick(int step) { // displaying action for each step in the form of toast message. Toast.makeText(MainActivity.this, steps.get(step), Toast.LENGTH_SHORT).show(); } }); // on below line adding click listner for our next button. nextBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // on below line checking if current step is < step view. if (currentStep < stepView.getStepCount() - 1) { // increasing current steps. currentStep++; // on below line going forward on step view. stepView.go(currentStep, true); } else { // on below line setting step view to true. stepView.done(true); } // on below line checking for last step. if (currentStep == stepView.getStepCount() - 1) { // if last step is reach displaying below toast message. Toast.makeText(MainActivity.this, "Application ready for release..", Toast.LENGTH_SHORT).show(); } } }); // adding click listener for back button backBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // on below line checking for the steps. if (currentStep > 0) { // decreasing current step. currentStep--; } // on below line adding step view to done. stepView.done(false); // on below line setting step view to go. stepView.go(currentStep, true); } }); // on below line setting steps for step view. stepView.setSteps(steps); } }

Explanation − In the above code firstly we are creating variables for buttons, step view and a variable which will store on which step user is currently present. Now we will get to see the onCreate method. This is the default method of every android application. This method is called when the application view is created. Inside this method we are setting the content view i.e the layout file named activity_main.xml to set the UI from that file. Inside the onCreate method we are initializing the step view, buttons with the ids which we have given inside our activity_main.xml file. After that we are creating an array list of strings in which we are specifying the steps which we have shown inside our step view or flow layout.

After that we are adding an on click listener for our step view so that when a user clicks on any of the steps inside our step view. We will be displaying a toast message for that specific step. After that we are adding an on click listener for our next button. Inside the on click listener for this method we are firstly checking for the current step variable and then moving our step view to the next step and increasing our current step variable. After that we are checking if the current step has reached the last step. In that case we are again displaying a toast message as the last step has been reached and app ready for deployment.

After this we are adding an on click listener for our back button. Inside the on click method we are checking if the current step is greater than 0 then we are decreasing the current step variable and we are going with the step view. At last we are adding the steps array list to our step view.

After adding the above code now we have to simply click on the green icon in the top bar to run our application on a mobile device.

Note − Make sure you are connected to your real device or emulator.

Output

Conclusion

In the above article we have taken a look on How can we create something like a Flow Layout in Android application.

Updated on: 08-May-2023

372 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements