DesigningLayouts

Designing layouts – 3

We can use Linear and Relative Layouts for defining few set of views under it. When it comes to show many number of views inside the layout, the layout should have scrolling capability to show all the views. ScrollView is such type of layout that helps in defining such functionality. Unlike other layouts, ScrollView helps user to scroll across all the views present inside it.

Below code will show it as parent layout inside the XML file

ScrollView has a rule to be followed. “ScrollView should have only one child View/Layout.” Hence, ScrollView will have Linear/ RelativeLayout as the only child. You can declare all other views inside Linear/ RelativeLayout.

In android, TextView is the View that helps us in showing the text inside any layout. The xml code of the TextView will look as below:

<TextView
          android:layout_width="match_parent"
          android:layout_height=“wrap_content”
          android:text=“@string/helloWorld”>
</TextView>

3_TextView

Let us declare a LinearLayout inside our ScrollView. As we need a scroll functionality for our screen, let us declare some TextViews inside the LinearLayout.

The Complete Code :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

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

              <TextView
                        android:layout_width="match_parent"
                        android:layout_height=“wrap_content”
                        android:text=“@string/helloWorld”>
              </TextView>

              <TextView
                        android:layout_width="match_parent"
                        android:layout_height=“wrap_content”
                        android:text=“@string/helloWorld”>
              </TextView>

              <TextView
                        android:layout_width="match_parent"
                        android:layout_height=“wrap_content”
                        android:text=“@string/helloWorld”>
               </TextView>

<!— Continue declaring few more TextViews —>

              <TextView
                        android:layout_width="match_parent"
                        android:layout_height=“wrap_content”
                        android:text=“@string/helloWorld”>
              </TextView>

       </LinearLayout>

</ScrollView>

So as the you can observe in the code, ScrollView will having only one direct child. Hence all other views which you need in the screen should be declared inside the direct child. The screen will get the scroll capability to traverse through all the views.

The Complete Preview :

3_scrollview

These are number of ways to design ScrollView. ScrollView can also be placed inside any layout to manage the screen arrangement. As we see, the scroll now here is vertical, we can have horizontal scroll using HorizontalScrollView.

HorizontalScrollView helps in arranging elements horizontally and then gives them scroll capability. As specified for ScrollView, HorizontalScrollView should also have only one direct child.

<HorizontalScrollView
                     android:layout_width="match_parent"
                     android:layout_height=“wrap_content">
</HorizontalScrollView>

Place one direct child LinearLayout inside the HorizontalScrollView. Also place TextViews repeatedly to check the scroll capability.

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
                     xmlns:android="http://schemas.android.com/apk/res/android"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent">

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

                   <TextView
                             android:layout_width="match_parent"
                             android:layout_height=“wrap_content”
                             android:text=“@string/helloWorld”>
                   </TextView>

                   <TextView
                             android:layout_width="match_parent"
                             android:layout_height=“wrap_content”
                             android:text=“@string/helloWorld”>
                   </TextView>
        
                   <TextView
                             android:layout_width="match_parent"
                             android:layout_height=“wrap_content”
                             android:text=“@string/helloWorld”>
                    </TextView>

<!— Continue declaring few more TextViews —>

                    <TextView
                              android:layout_width="match_parent"
                              android:layout_height=“wrap_content”
                              android:text=“@string/helloWorld”>
                    </TextView>
        
            </LinearLayout>

</HorizontalScrollView>

After acquiring the scroll capability horizontally, the screen looks like below:

3_HorizontalScrollView

Download this tutorial

291 total views, 1 views today

Leave a Reply