A horizontal ScrollView is a layout container that can be scrolled Horizontally by a user. So it can scroll both left to right, or right to left. Let’s understand it with an Android Horizontal ScrollView Example.
Let’s build a custom app with Android Horizontal Scrollview Example
1- So open your Android Studio and build a new Android Studio Project.
2- Name your Project as Horizontal ScrollView. Also, you can give whatever name you like.
3- Then, first of all we are going to make a separate Layout file for a single Item in our Horizontal Scroll View. We make a separate Layout file and name it as text.xml.
4- So in your text.xml file first thing here is that you change your default Layout file from Constraint Layout to Linear Layout.
5- After changing to Linear Layout then we will take an ImageView with a 100dp height and width. ImageView will display our images and TextView will show the name of each item in the scrollable list.
6- In your text.xml file add the code given below. Then the final text.xml is like this:
Android Scrollview Horizontal
text.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv" android:layout_width="100dp" android:layout_height="100dp" android:src="@color/colorPrimaryDark" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" /> <TextView android:id="@+id/greeting_tv1" android:layout_width="100dp" android:layout_height="100dp" android:gravity="center" android:textSize="20dp" android:textColor="#000000" android:textStyle="bold" android:layout_marginLeft="5dp" android:layout_marginRight="5dp"/> </LinearLayout> |
7- Here, we complete the Custom appearance of the single Item in our Horizontal Scroll View.
8- In our activity_main.xml file we will design our Horizontal Scroll View with a Linear Layout to display our Items. We will set the orientation of out HorizontalScrollView and LinearLayout to horizontal. After that, the final activity_main.xml file will look like this.
Android Horizontal Scrollview
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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" tools:context=".MainActivity"> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="horizontal" android:layout_marginTop="20dp"> <LinearLayout android:id="@+id/linear1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_gravity="left" /> </HorizontalScrollView> </RelativeLayout> |
9- Now, We are done with our Single Item’s appearance and Horizontal ScrollView Part.
10- We will now take two arrays, one for the texts and then one for the images because we have to bind our view in our Linear Layout inside the Horizontal Scroll View.
11- With the help of a for loop we will set the name and image of each item in our list.
12- Finally, our MainActivity.java code would be like this.
Android Horizontal Scrollview
MainActivity.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
package com.example.horizontalscrollview; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class MainActivity extends AppCompatActivity { private LinearLayout linearLayout; private String[] brands = {"apple","blackberry","Nokia","samsung", "windows","infinix","lenovo","HTC"}; private int[] images = {R.color.colorAccent,R.color.colorPrimary, R.color.colorPrimaryDark,R.color.colorAccent,R.color.colorPrimary, R.color.colorPrimaryDark,R.color.colorAccent,R.color.colorPrimary}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); linearLayout = findViewById(R.id.linear1); LayoutInflater layoutInflater = LayoutInflater.from(this); for (int i=0; i<brands.length; i++) { View view = layoutInflater.inflate(R.layout.text, linearLayout, false); ImageView imageView = view.findViewById(R.id.iv); imageView.setImageResource(images[i]); TextView tv = view.findViewById(R.id.greeting_tv1); tv.setText(brands[i]); linearLayout.addView(view); } } } |
So, this is it for our Horizontal Scrollview in Android. I hope now you understand the ScrollView Android example in a better way and if you have any questions you can ask below in the comments.
OUTPUT


People Also Read
- Differences Between JavaScript And Python
- The benefits of using Kotlin
- RecyclerView With Data Binding in Android Kotlin
- Android Alert Dialog Box
- Progress Bar in Android