Android #11 - ScrollView | Adding Relative Layout to ScrollView | Calendar #3

Hello friend's, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know about the ScrollView. We will add relative layout ( Contains buttons of every month, and on click, open certain calendar ) to the ScrollView in our calendar app, which will show all the buttons on scroll. So friend's, let's begin.....

P.I. Highlighted :- Above is the video of the whole tutorial in hindi.

ScrollView

It is a viewgroup ( an invisible container, which contains another views, called child views. It includes layouts and views containers. e.g. Relative Layout, ScrollView is a view container, which contains another viewgroup or view ) which allows it's content to scroll, when the inner content is not fully displayed on the screen, due to small screen size.

The content of a ScrollView is always a single child, and it contains another child UI elements i.e. ScrollView is a view container, so, it only contains a single child view or view group. For adding multiple UI elements, we had to arrange it within a single Layout or view container, and then add that single UI view or view group to the ScrollView.

ScrollView property

• It only supports vertical scrolling i.e. top and bottom scrolling, same as that of, this webpage. For horizontal scrolling, there is an another UI element, called, Horizontal ScrollView.
• It is adviced, not to add any another scrollable view or view group in the ScrollView. If added, inner content will never scroll and get stucked, and will start acting as a stationary layout, which gives poor UI performance leads to bad user experience, and will tends the user to uninstall the app.

Basic Structure

<ScrollView

android:id ="@+id/ScrollView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scrollbars="none"

>

Content......

</ScrollView>

The ScrollView is added using <ScrollView> tag, which is a predefined tag by android. It is a container element, which has a starting and ending tag, and contains some content ( view or view group ) in it.

It has 3 required attributes, namely, id, layout_width and layout_height, which is an android based attribute, provides basic property to the ScrollView.  There are some more attributes related to ScrollView, which we will know in the upcoming tutorials. 

Here, we will only know about a single android based attribute, scrollbars, along with the 3 required attributes.

1. android:id :- It is an android based attribute, which is used to specify the id to any UI element. This ID is used by the android for, showing it to the user, adding specified functions to it and customizing design at the runtime. In the above code, ScrollView is specified as the ID.
2. android:layout_width :- It is an android based attribute, which specify the width for any UI element. In the above code, match_parent is specified as its width, which means that, the width of the UI element will be just enough to fill the available space via width.
3. android:layout_height :- It is an android based attribute, which specify the height for any UI element.
4. android:scrollbars :- It is an android based attribute, which specifies the type of scrollbars to show. It takes value as horizontal ( shows only the horizontal scroll bar; left-to-right or right-to-left ), vertical ( shows only the vertical scroll bar; top-to-bottom or bottom-to-top ) and none ( hides all the scrollbars ). By default, all the scrollbars is visible to the user.

The layout_width and layout_height is specified as match_parent, which means all the space available on the screen will be covered. For our calendar app, it is required as we had not added any other UI element except buttons. You can change the width and height according to your needs.

Adding Relative Layout ( Buttons Container ) to 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=".IndiCalendar">

<Button 

android:id="@+id/january"

android:layout_width="match_parent"

android:layout_height="80dp" android:text="@string/january"

android:textColor="@color/colorAccent"

android:textSize="18sp"/>

<Button 

android:id="@+id/february"

android:layout_width="match_parent"

android:layout_height="80dp" android:text="@string/february"

android:textColor="@color/colorAccent"

android:textSize="18sp"

android:layout_below="@+id/january"/>

</RelativeLayout>

The default code, for showing the buttons in the relative layout is given above. We had to only add all the buttons like this. For detailed information of this, please read the last topic of the previous tutorial.

Now, we will add the relative layout ( container for buttons ) to the ScrollView. As we know, that the ScrollView always contains only a single child element. So, for adding the buttons, we will first group it in the relative layout, and then show it to the ScrollView. Below is the code for showing the Relative layout in the ScrollView.

<ScrollView

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" 

android:scrollbars ="none"

tools:context=".IndiCalendar">

<RelativeLayout

android:id="@+id/MonthsContainer"

android:layout_width="match_parent"

android:layout_height="match_parent"

>

<Button 

android:id="@+id/january"

android:layout_width="match_parent"

android:layout_height="80dp" android:text="@string/january"

android:textColor="@color/colorAccent"

android:textSize="18sp"/>

<Button 

android:id="@+id/february"

android:layout_width="match_parent"

android:layout_height="80dp" android:text="@string/february"

android:textColor="@color/colorAccent"

android:textSize="18sp"

android:layout_below="@+id/january"/>

</RelativeLayout>
</ScrollView>

In the above code, all the buttons is first grouped and added to the Relative Layout, and then the Relative layout is added to the ScrollView. 

So friend's, that's all for this tutorial. Hope u enjoyed it.

Thanks

Programming Infinity ( Samridh Sharma )