ScrollView is a very essential part of Android App Development and can be seen in almost every Application. One of the most popular areas where its implementation can be seen is in the stories bar at the top of Instagram. In this article, we will learn how we can implement a Horizontal ScrollView in Android.
HorizontalScrollView
Horizontal ScrollView is a FrameLayout, used to provide the child View element horizontal scrolling property. The ChildView in itself can be a layout manager like the linear layout. The TextView class takes care of its own scrolling, But it can be placed inside a HorizontalScrollView to create more complex UI designs.
Note: HorizontalScrollView only provides horizontal scrolling, for vertical scrolling ScrollView can be used
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Project just refer to this article on How to Create New Project in Android Studio. The code can be implemented in both Java and Kotlin Programming Language for Android.
Step 2: Working with the activity_main.xml File
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?> android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" tools:context=".MainActivity"> <!-- syntax for HorizontalScrollView --> <HorizontalScrollView android:id="@+id/horizontalScrollView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginStart="1dp" android:layout_marginTop="1dp" android:layout_marginEnd="1dp" android:layout_marginBottom="1dp" android:foregroundGravity="center_vertical"> <!-- child view --> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:foregroundGravity="center" android:gravity="center" android:orientation="horizontal"> <!-- LinearLayout children --> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:padding="15dp" android:text="GEEKS" android:textColor="#0F9D58" android:textSize="70sp" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:padding="15dp" android:text="FOR" android:textColor="#0F9D58" android:textSize="70sp" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:padding="15dp" android:text="GEEKS" android:textColor="#0F9D58" android:textSize="70sp" /> </LinearLayout> </HorizontalScrollView></LinearLayout> |
Since there is no change in the Java/Kotlin MainActivity File, we’ve only provided the XML File Code.
