Android ScrollView

Android ScrollView

ScrollView can be defined as below –

"Android ScrollView can hold only one direct child. Android supports vertical scroll views as the default scroll view. Note that ScrollView supports only vertical scrolling."

Android uses HorizontalScrollView for horizontal ScrollView.

Some of the popular attributes of android ScrollView are –

 

 

 

 

S. No. XML Attributes Description
1 android: id This is unique id of the ScrollView to uniquely identify the ScrollView.
2 android: height Height of the ScrollView.
3 android: width Width of the ScrollView.
4 android: alpha Specifies the alpha of the ScrollView.
5 android: background Specifies the background of the ScrollView.
6 android: padding Specifies padding of the ScrollView for all edges.
7 android: tooltipText Specifies text displayed in a small popup window on hover or long press.
8 android: clickable Specifies whether ScrollView is clickable or not.
9 android: theme Specifies a theme override for ScrollView.
10 android: padding Specifies padding of the ScrollView.
11 android: fillViewport Determines whether scrollView should stretch it’s content to fill the viewport.

Some of the popular attributes of ScrollView inherited from ViewGroup are –

S. No. XML Attributes Description
1 android: animateLayoutChanges Specifies whether Layout Transition should run whenever there is any changes in layout.
2 android: animationCache Specifies whether layout animations should create a drawing cache for their children.
3 android: clipToPadding Specifies whether the ViewGroup will clip its children and resize (but not clip) any EdgeEffect to its padding, if padding is not zero.
4 android: layoutAnimation Specifies the layout animation to use the first time the ViewGroup is laid out.
5 android: layoutMode Specifies the layout mode of this ViewGroup.

Some of the popular attributes of android ScrollView inherited from FrameLayout are –

 

 

 

 

S. No. XML Attributes Description
1 android: foregroundGravity Specifies the gravity of the foreground drawable.
2 android: measureAllChildren Specifies whether to measure all children or only those in VISIBLE or INVISIBLE state when measuring.

At first, we will create android application. Then, we will use ImageButton  in the application.

Follow steps below to create new project. Please ignore the steps if you've already created a new application.

S. No. Steps
1 Open Android Studio.
2 Click on Start a new Android Studio Project Write application name as ScrollView. Then, click next button.
3 Select minimum SDK you need. However, we have selected 14 as minimum SDK. Then, click next button.
4 Then, select Empty Activity => click next => click finish.
5 If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit tutorial  to Create a New Project to know steps in detail.

Now, we will modify xml and java file to use ScrollView in the application.

 

 

 

 

Open res/values/strings.xml file. Then, add below code into it.

<resources>
<string name="app_name">ScrollView</string>
<string name="no_image">No Image</string>
</resources> 

You will need some images, to be used in the application store in the res/drawable folder. So drawable images are being used by imageViews inside ScrollView to create view.

Open res/layout/activity_main.xml file. Then, add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
android:id="@+id/image1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/almora" />

<ImageView
android:id="@+id/image2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/dehradun" />

<ImageView
android:id="@+id/image3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/dehradun" />

<ImageView
android:id="@+id/image4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/badrinath" />

<ImageView
android:id="@+id/image5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/gangotri" />

<ImageView
android:id="@+id/image6"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/kedarnath" />
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>

In activity_main.xml file, we have defined ScrollView. Note that there are only one direct child of scrollView i.e. LinearLayout. Inside linearLayout, we have defines some imageViews and added drawable images in it.

Open src/main/java/com.ukacademe.scrollview/MainActivity.java file. Then, add below code into it.

package com.ukacademe.scrollview;

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);
    }
}

 

 

 

 

We have not modified anything in MainActivity.ja file. So, it is as it was after creating application. Since the file of AndroidManifest.xml is very important in any android application, we are also going to see the content inside this file.

Code inside src/main/AndroidManifest.xml file is as below –

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.ukacademe.scrollview">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

When we run the application, we will get output as shown below.

UK Academe-ScrollView-Output