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. Lets understand it with an Android Horizontal ScrollView Example.
Lets 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:
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.
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.
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 ScrollView Android example in a better way and if you have any questions you can ask below in 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
Pingback: Android Alert Dialog Example | Alert Dialog in Android Studio Example
Pingback: Android ListView Example in Java: ListView in Android Studio
Pingback: How To Display Text in TextView Using Kotlin: Android Studio Kotlin
Pingback: RecyclerView With Data Binding in Android Kotlin: Example With Kotlin