ScrollView in Android
In Android, a ScrollView is a view group that is used to make vertically scrollable views. A scroll view
contains a single direct child only. In order to place multiple views in the scroll view, one needs to
make a view group(like LinearLayout) as a direct child and then we can define many views inside it. A
ScrollView supports Vertical scrolling only, so in order to create a horizontally scrollable
view, HorizontalScrollView is used.
Some Important XML attributes of ScrollView
Attribute Description
Defines whether the ScrollView should stretch its content
android:fillViewport
to fill the viewport.
Determines whether to measure all children or just those
android:measureAllChildren in the VISIBLE or INVISIBLE state when measuring.
Defaults to false.
alpha property of the view, as a value between 0
android:alpha
(completely transparent) and 1 (completely opaque).
android:background A drawable to use as the background.
Set this if the view will serve as a scrolling container,
android:isScrollContainer meaning that it can be resized to shrink its overall window
so that there will be space for an input method.
android:minHeight Defines the minimum height of the view.
android:minWidth Defines the minimum width of the view.
Defines which scrollbars should be displayed on scrolling
android:scrollbars
or not
Horizontal ScrollView:
In android, You can scroll the elements or views in both vertical and horizontal directions. To scroll in
Vertical we simply use ScrollView and to scroll in horizontal direction we need to use
HorizontalScrollview.
<HorizontalScrollView
android:id="@+id/horizontalscrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<-- add child view’s here -->
</HorizontalScrollView >
ScrollView and HorizontalScrollView has same attributes, the only difference is scrollView scroll the
child items in vertical direction while horizontal scroll view scroll the child items in horizontal
direction.
Some of the most important attributes with ScrollView include:
1. id: In android, id attribute is used to uniquely identify a ScrollView.
Below is id attribute’s example code with explanation included.
<ScrollView
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
2. scrollbars: In android, scrollbars attribute is used to show the scrollbars in horizontal or vertical
direction. The possible Value of scrollbars is vertical, horizontal or none. By default scrollbars is
shown in vertical direction in scrollView and in horizontal direction in HorizontalScrollView.
Below is scrollbars attribute’s example code in which we set the scrollbars in vertical direction.
< HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical"/><!--scrollbars in vertical direction-->
Example of ScrollView In Android Studio:
Example 1: In this example we will use 10 button and scroll them using ScrollView in vertical
direction. Below is the code and final Output we will create:
Download Code ?
ScrollView can hold only one direct child. So we have to jointly put 10 buttons inside Linear Layout to
make it one child. And then we put it inside ScrollView.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="20dp"
android:orientation="vertical">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#f00"
android:text="Button 1"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#0f0"
android:text="Button 2"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#00f"
android:text="Button 3"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#ff0"
android:text="Button 4"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#f0f"
android:text="Button 5"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#f90"
android:text="Button 6"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#f00"
android:text="Button 7"
android:textColor="#ff9"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#444"
android:text="Button 8"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#ff002211"
android:text="Button 9"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#0f0"
android:text="Button 10"
android:textColor="#fff"
android:textSize="20sp" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
MainActivity.java
package com.example.gourav.scrollviewExample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity
{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
manifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/
android"
package="com.example.gourav.scrollviewExample" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
open res ->values -> strings.xml and paste the below
code
<resources>
<string
name="app_name">ScrollViewExample</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
</resources>
