Vertical Scrollview in Android

Introduction

Android provides various UI components which we can use to create different UI components within our android application such as image view, text view and many more. Among this UI component a vertical scroll view is a powerful UI component which is used to create dynamic and interactive applications. A vertical scroll view is a view group which is used to display large amounts of data within a single view. It allows users to scroll vertically through the list of items while providing the ability to interact with individual items within the list. In this article we will take a look at Implementing Vertical Scroll View in Android.

Implementation

We will be creating a simple application in which we will be creating a scroll view in which we will display a text view in which we will be displaying the heading of our application. After that we will be creating multiple text views in a similar scroll view to display the different programming languages within our application. Now let’s 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 Kotlin.

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.kt file.

Step 2 : 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"?>
<ScrollView 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">
   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <!-- text view to displaying heading of application -->
       <TextView
           android:id="@+id/idTVHeading"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_marginTop="150dp"
           android:padding="8dp"
           android:text="Vertical ScrollView in Android"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="20sp"
           android:textStyle="bold" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng1"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVHeading"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="Java"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng2"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng1"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="C++"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng3"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng2"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="C"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng4"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng3"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="Kotlin"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng5"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng4"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="Xml"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng6"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng5"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="C#"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng7"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng6"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="Dart"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng8"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng7"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="PHP"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng9"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng8"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="Python"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
       <!-- on below line creating a text view for displaying the programming language -->
       <TextView
           android:id="@+id/idTVLng10"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/idTVLng9"
           android:layout_centerHorizontal="true"
           android:layout_margin="20dp"
           android:padding="4dp"
           android:text="Swift"
           android:textAlignment="center"
           android:textColor="@color/black"
           android:textSize="18sp" />
   </RelativeLayout>
</ScrollView>

Explanation - In the above code we are creating a root layout as Scroll View. In this scroll view we are creating a relative layout. Inside this relative layout we are firstly creating a text view in which we are displaying the heading of our application. After that we are creating multiple text views for different programming languages. Then we are adding a closing tag for Relative Layout and lastly adding a closing tag for a Scroll View.

After adding the above code simply run your application to see the output of your application.

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

Output

Conclusion

In this article we have taken a look on What is Vertical Scroll View and How we can implement that within our android application.