Open In App

Dynamic Horizontal ScrollView in Kotlin

Last Updated : 25 Feb, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Android ScrollView allows multiple views that are places within the parent view group to be scrolled. Scrolling in the android application can be done in two ways either Vertically or Horizontally. In this article, we will be discussing how to programmatically create a Horizontal ScrollView in Kotlin .

Step by Step Implementation

Step 1: Create a new project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Modify activity_main.xml file

Second step is to design our layout page. Here, we will use the LinearLayout to get the Horizontal Scroll View from the Kotlin file.

activity_main.xml:

XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

</LinearLayout>


Step 3: Create Scroll View in MainActivity.kt file

Open app > src > main > java > {package-name} > MainActivity.kt. In this file, we declare a variable ScrollView to create the Scroll View widget like this:

val horizontalScrollView = HorizontalScrollView(this)
val layoutParams = LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
horizontalScrollView.layoutParams = layoutParams

then add the widget in layout using this

linearLayout.addView(horizontalScrollView)

MainActivity.kt:

Kotlin
package org.geeksforgeeks.demo

import android.os.Bundle
import android.view.ViewGroup
import android.widget.HorizontalScrollView
import android.widget.ImageView
import android.widget.LinearLayout
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val horizontalScrollView = HorizontalScrollView(this)
        val scrollParams = LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        horizontalScrollView.layoutParams = scrollParams

        val linearLayout = LinearLayout(this)
        val linearParams = LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        linearLayout.orientation = LinearLayout.HORIZONTAL
        linearLayout.layoutParams = linearParams

        horizontalScrollView.addView(linearLayout)

        val params =LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
        params.setMargins(32, 32, 32, 32)

        val imageView1 = ImageView(this)
        imageView1.setLayoutParams(params)
        imageView1.scaleType = ImageView.ScaleType.CENTER_CROP
        imageView1.setImageResource(R.drawable.k1)
        linearLayout.addView(imageView1)

        val imageView2 = ImageView(this)
        imageView2.setLayoutParams(params)
        imageView2.scaleType = ImageView.ScaleType.CENTER_CROP
        imageView2.setImageResource(R.drawable.k2)
        linearLayout.addView(imageView2)

        val imageView3 = ImageView(this)
        imageView3.setLayoutParams(params)
        imageView3.scaleType = ImageView.ScaleType.CENTER_CROP
        imageView3.setImageResource(R.drawable.k3)
        linearLayout.addView(imageView3)

        val imageView4 = ImageView(this)
        imageView4.setLayoutParams(params)
        imageView4.scaleType = ImageView.ScaleType.CENTER_CROP
        imageView4.setImageResource(R.drawable.k4)
        linearLayout.addView(imageView4)

        val root: LinearLayout = findViewById(R.id.main)
        root.addView(horizontalScrollView)
    }
}

Output:


Next Article

Similar Reads