HorizontalScrollview Android Kotlin

HorizontalScrollView Android Kotlin | Step By Step Example

In this tutorial I will tell you how to use HorizontalScrollView in your Android Applications. This is a step by step guide of HorizontalScrollview in Kotlin language. So, let’s start making HorizontalScrollView In Android Kotlin

 

HorizontalScrollView Android Kotlin

HorizontalScrollView Android Kotlin:

I assume you have some KOTLIN skills.

 

1- Start a new Android Studio Project. Name it “KotlinHorizontalScrollView” or any name of your choice.

2- After your project starts you will have two files. MainActivity.kt file and activity_main_xml file.

 

activity_main .xml

 

3- Come to the activity_main.xml file and change the default Layout from Constraint Layout to RelativeLayout.

4- Give android:gravity=”center” to the parent RelativeLayout. Then, add a HorizontalScrollView and a Linear Layout into your RelativeLayout like this.

 

 

5- The LinearLayout must be inside the HorizontalScrollView. So, the final activity_main.xml file will be like this.

 

 

6- Now, go to the res folder in your Android Studio list on the left and then click new and select Layout Resource File. Give name “test” to your new Layout XML file. In this file we will design the view of our single item in the HorizontalScrollView.

 

HorizontalScrollView Android Kotlin ( test.xml file )

 

test.xml 

7- Change the default Layout from Constraint Layout to Relative Layout. Then, add an ImageView and a TextView. We give some properties to our Views like this.

 

 

8- First change the gravity of the Parent RelativeLayout to android:gravity=”center”. So, the final text.xml file will be like this.

 

 

MainActivity.kt file

 

9- In your MainActivity.kt file you need to add some images first. Add some random images into your “drawable” folder. In my case I have used 10 Vector Images. To create a Vector image Right Click on your “drawable” folder then click “New” and then click “Vector Asset”

10- In Vector Asset window you will see a small Clip Art image under Name. Click on that image and after that you will see a list of icons. So, select the icon of your choice and change its name then save it . Then repeat the same procedure to add as many icons in your drawable folder.

11- Define an array for Names and another array for Images. Also we will use a LinearLayout to display our View in. Take these variables on the class level like this.

 

 

12- Attach the LinearLayout in the XML with linearLayout variable in onCreate method. Add a LayoutInflater to inflate the view.

 

 

13- Now in onCreate method we will use a for Loop. The loop will set the values from our arrays into the ImageView and the TextView. We define the Layout to display with its parent Layout. In our case the the Layout we want to display is the RelativeLayout inside our “test.xml” file. And we will show this Layout inside the LinearLayout in our “activity_main.xml” file. We inflate the Layout with help of our LayoutInflater and hold it inside a view variable of type View. Finally we add this view into our LinearLayout. With the help of addView() method.

 

 

14- Here we complete our code, The final MainActivity.kt code will be like this.

 

 

So, you can make any type of view as par your need. Just don’t forget to inflate that view into your Layout. I hope you understand this example. Have fun 

 

OUTPUT

 

HorizontalScrollView Android Kotlin
HorizontalScrollView Android Kotlin

 

HorizontalScrollview Android Kotlin
HorizontalScrollView. Android Kotlin

 

 

HorizontalScrollview Android Kotlin
HorizontalScrollView. Android Kotlin

 

HorizontalScrollview Android Kotlin
The HorizontalScrollView in Android Kotlin

 

 

 

 

 

 

Most Popular Pages

 

Check Internet Connection Programmatically in Kotlin

Custom Toolbar in Kotlin

How to Disable Wifi in Kotlin

Android Login Screen With Kotlin

 

 

Leave a Comment

Your email address will not be published. Required fields are marked *