How To Create Dynamic Textview Using ScrollView In Android

Introduction

In this article, we will learn one of the most beautiful and interesting android concept. We are going to learn how we can create dynamic textview in android. In Industry Projects many times we need to create dynamic textview in android. Here I discuss this topic using a simple example.

Let's Start With Android Studio

Step 1

Create a new project and select the empty activity.

 

Step 2

Go to activity_main.xml and add the following code 

<?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:layout_marginTop="50dp"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:scrollbars="none">

        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

        </LinearLayout>

    </HorizontalScrollView>

</RelativeLayout>

Step 3

Create a new drawable resource file inside the drawable folder named unselected_product_unit_layout.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp" />
    <solid android:color="@color/white" />
    <stroke
        android:width="1dp"
        android:color="#8c8c8c" />
</shape>

Step 4

Create a new drawable resource file inside the drawable folder named selected_product_unit_layout.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp" />
    <solid android:color="#2b8b0b" />
    <stroke
        android:width="1dp"
        android:color="#2b8b0b" />
</shape>

Step 5

Go to MainActivity.java and add the below code

package eu.tutorial.dynamictextviewusingscrollview;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private LinearLayout linearLayout;
    private ArrayList<String> arrayList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout = findViewById(R.id.linear_layout);

        arrayList = new ArrayList<>();
        arrayList.add("1 Kg");
        arrayList.add("2 Kg");
        arrayList.add("3 Kg");
        arrayList.add("4 Kg");
        arrayList.add("5 Kg");
        arrayList.add("6 Kg");
        arrayList.add("7 Kg");
        arrayList.add("8 Kg");
        arrayList.add("9 Kg");
        arrayList.add("10 Kg");
        arrayList.add("11 Kg");
        arrayList.add("12 Kg");
        arrayList.add("13 Kg");
        arrayList.add("14 Kg");


        for (int i = 0; i < arrayList.size(); i++) {
            TextView tv = new TextView(this);
            tv.setText(arrayList.get(i));
            tv.setTextSize(18);
            tv.setPadding(30, 10, 30, 10);
            tv.setId(i);
            tv.setTextColor(Color.BLACK);
            tv.setBackgroundResource(R.drawable.unselected_product_unit_layout);
            tv.setTypeface(tv.getTypeface(), Typeface.BOLD);
            tv.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View view) {
                    changeState(view.getId());
                }
            });


            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            lp.setMargins(15, 0, 15, 0);
            tv.setLayoutParams(lp);

            linearLayout.addView(tv);
        }
    }

    private void changeState(int selectedId) {

        for (int i = 0; i < arrayList.size(); i++) {
            TextView textView = (TextView) linearLayout.getChildAt(i);
            if (textView.getId() == selectedId) {
                textView.setTextColor(Color.WHITE);
                textView.setBackgroundResource(R.drawable.selected_product_unit_layout);
            } else {
                textView.setTextColor(Color.BLACK);
                textView.setBackgroundResource(R.drawable.unselected_product_unit_layout);
            }
        }
    }
}

Explanation

First, we created an arraylist and then used a for loop to generate dynamic text views. In activity_main.xml, we have a horizontal scroll view and inside this, there is a linear layout in which we have added all the dynamic text views. I have used two background drawable resource XML so that we can differentiate which text view is clicked. When we generated dynamic text views then we need to set all the basic attributes of the view such as size, color, text, etc.

Step 6

Press the run button and launch the application.

Conclusion

In this article, we have seen how we can create dynamic text view using scrollview in android. Thanks for reading and hope you like it. If you have any suggestions or queries about this article, please share your thoughts. You can read my other articles by clicking here.

Happy learning, friends!