The Android ScrollView is an important widget in Android Studio that can help you arrange all other widgets in a layout when they can’t fit in the visible area of the screen.
Android ScrollView Types
There are two types of ScrollView that can help you arrange widgets:
- Vertical ScrollView: To scroll widgets vertically.
- Horizontal ScrollView: To scroll widgets horizontally
Here is an example project we have
Vertical ScrollView
Note: Vertical ScrollView can have one one child layout, therefore you’ll notice in the code below that inside the <ScrollView> tab, we have LinearLayout with vertical orientation having other LinearLayouts with further information.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#14000000"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarSize="0dp"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="News of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read news of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="Jokes of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read jokes of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="Toungue Twist of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read TT of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="News of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read news of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="News of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read news of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
</LinearLayout>
</ScrollView>We’ve also used ScrollBarSize attribute to determine the size of scrollBar. (Set to 0dp in the example above)
Learn more about styling your Buttons using XML Codes here.
Horizontal ScrollView
Note: Just like the Vertical ScrollView, the Horizontal ScrollView can have one one child layout, therefore you’ll notice in the code below that inside the <ScrollView> tab, we have LinearLayout with horizontal orientation having other LinearLayouts with further information.
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#14000000"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbarSize="0dp"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="News of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read news of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="Jokes of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read jokes of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="Toungue Twist of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read TT of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="News of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read news of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:background="#FFFFFF"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_margin="10dp"
android:text="News of the day"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textStyle="bold"
android:text="Updated 12 hrs ago"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_margin="10dp"
android:autoLink="web"
android:text="Read news of the Day"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visit Blog"
android:textAllCaps="false"
android:layout_gravity="end"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:layout_margin="10dp"/>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>We’ve also used ScrollBarSize attribute to determine the size of scrollBar. (Set to 0dp in example above)
