Android Dersleri 26 - ScrollView & NestedScrollView

26 - ScrollView & NestedScrollView

26.1 ScrollView

ScrollView  is a layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display. A ScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects. A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through. ( Scrollview, scroll edilebilen bir layout container'dır. Dolayısıyla ekrandan gözüktüğünden daha fazla eleman içerebilir, scroll ederek scrollview içindeki elemenları görebiliriz. Genellikle ScrolView içerisine çok sayıda elemanı olan LinearLayout element'i koyarız, eğer root element olarak linear layout kullanırsak linearlayout'daki bazı elemanlar ekrana sığmaz ve linearlayout da scroll edilemez, dolayısıyla linearlayout'u scrollview içerisine koymalıyız. )

You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by ScrollView. ( ListView kendi scrolling'ini otomatik olarak yapar. Dolayısıyla ListView element zaten scrollable'dır ScrollView element ile birlikte kullanılmasına gerek yoktur. ListView bunu effective bir şekilde yapar. )

The TextView class also takes care of its own scrolling, so does not require a ScrollView, but using the two together is possible to achieve the effect of a text view within a larger container. ( TextView class'ı da kendi scrolling'ini yapar dolayısıyla ScrollView ,le brlikte kullanmaya gerek yoktur. Ancak ikisini birlikte kullanırsak daha büyük bir container içerisinde bir text view gösterilmesini sağlarız. )

ScrollView only supports vertical scrolling. For horizontal scrolling, use HorizontalScrollView. ( ScrollView sadece dikey scrolling'i destekler. Yatay scrolling yapmak istiyorsak HorizontalScrollView kullanmalıyız. )

Source code (30_ScrollView ) :

MainActivity.java

public class MainActivity extends AppCompatActivity {

   @Override

   protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.activity_main);

   }

}

activity_main.java : Layout xml dosyasında root element olarak ScrollView element kullanırız. Dolayısıyla ScrollView element'in altındaki her şey scrollable bir alan içerisindedir. Bu örnekte ScrollView element'in içinde LinearLayout element vardır. LinearLayout element'in içerisinde ise Button, ProgressBar , RadioButton gibi farklı element'ler vardır.

<?xml version="1.0" encoding="utf-8"?>

   <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

       android:layout_width="fill_parent"

       android:layout_height="wrap_content">

       <LinearLayout

           android:layout_width="fill_parent"

           android:layout_height="fill_parent"

           android:orientation="vertical" >

           <Button

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Button 1" />

           <Button

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Button 2" />

           <Button

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Button 3" />

           <Button

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Button 4" />

           <Button

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Button 5" />

           <ProgressBar

               android:id="@+id/progressBar1"

               style="?android:attr/progressBarStyleHorizontal"

               android:layout_width="match_parent"

               android:layout_height="wrap_content" />

           <RadioButton

               android:id="@+id/radioButton2"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:text="RadioButton 1" />

           <RadioButton

               android:id="@+id/radioButton1"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:text="RadioButton 2" />

           <ToggleButton

               android:id="@+id/toggleButton1"

               android:layout_width="match_parent"

               android:layout_height="wrap_content"

               android:text="ToggleButton" />

           <Button

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Button 6" />

           <SeekBar

               android:id="@+id/seekBar1"

               android:layout_width="match_parent"

               android:layout_height="wrap_content" />

           <Button

               android:id="@+id/button3"

               android:layout_width="match_parent"

               android:layout_height="wrap_content"

               android:text="Button 7" />

           <Button

               android:id="@+id/button4"

               android:layout_width="match_parent"

               android:layout_height="wrap_content"

               android:text="Button 8" />

           <CheckBox

               android:id="@+id/checkBox1"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:text="CheckBox" />

           <Button

               android:id="@+id/button2"

               android:layout_width="match_parent"

               android:layout_height="wrap_content"

               android:text="Button 9" />

           <Button

               android:id="@+id/button1"

               android:layout_width="match_parent"

               android:layout_height="wrap_content"

               android:text="Button 10" />

           <Button

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Button 11" />

       </LinearLayout>

   </ScrollView>

    

There are two options. You can make your entire layout to be scrollable or only the EditText to be scrollable.  ( Layout'un tamamını veya sadece br element'i mesela EditText'i scrollable yapabiliriz. Örneğin yukarıdaki örnekte layout'un tamamını scrollable yaptık. Eğer sadece EditText'i scrollable yapmak istiyorsak ScrollView içerisinde sadece EditText element'i yazarız. )

Aşağıda, layout xml'de yazılabilecek örnek bir ScrollView element gösterilmiştir. Yukarıdaki örnekten farklı layout attribute'ler gösterilmiştir.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:fillViewport="true"

    android:scrollbars = "vertical"

    android:scrollbarStyle="insideInset" >

ScrollView  element'in android:fillViewport attribute'ü ne işe yarar?

It defines whether the scrollview should stretch its content to fill the viewport. May be a boolean value, such as "true" or "false". ( Scrollview'in içeriğini genişletip scrollview'i kaplamasını sağlar. )

Vertically Scrolling

To make any content vertically scrollable, simply wrap that content in a ScrollView:

<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" >   

       

         <TextView

             android:id="@+id/tv_long"

             android:layout_width="wrap_content"

             android:layout_height="match_parent"

             android:text="@string/really_long_string" >

         </TextView>

 

         <Button

             android:id="@+id/btn_act"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:text="View" >

         </Button>

   </LinearLayout>

</ScrollView>

Note that a ScrollView can only contain a single child element so if you need multiple things to be scrollable, you need to wrap that content into a layout as shown above.

Scrollable TextView

Note that a TextView doesn't require a ScrollView and if you just need a scrolling TextView simply set the scrollbars property and apply the correct MovementMethod:

<TextView

   android:id="@+id/tv_long"

   android:layout_width="wrap_content"

   android:layout_height="match_parent"

   android:scrollbars = "vertical"

   android:text="@string/really_long_string" >

</TextView>

and then in the activity:

TextView tv = (TextView) findViewById(R.id.tv_long);

tv.setMovementMethod(new ScrollingMovementMethod());

Now the TextView will automatically scroll vertically.

Horizontally Scrolling

In other cases, we want content to horizontally scroll in which case we need to use the HorizontalScrollView instead like this:

<HorizontalScrollView

 android:layout_width="match_parent"

 android:layout_height="match_parent">

   <LinearLayout

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:orientation="horizontal" >   

       <!-- child views in here -->

   </LinearLayout>

</HorizontalScrollView>

and now you have a horizontally scrolling view.

Nested ScrollViews

Adding a ScrollView within another ScrollView can be difficult. Most of the times it won’t end well. You will end up adding few workarounds. Instead, use the NestedScrollView as outlined here. A working sample can be found here as this is very useful when working with CoordinatorLayout

6.2 NestedScrollView

NestedScrollView as the name suggests is used when there is a need for a scrolling view inside another scrolling view. Normally this would be difficult to accomplish since the system would be unable to decide which view to scroll. This is where NestedScrollView comes in. ( Scroll edilebilen bir alan içerisinden başka bir scroll edilebilen bir alan olmasını istiyorsanız nestedscrollview kullanmalısınız. Normalde bunu başarmak zordur çünkü sistem hangi alanı scroll edeceğine karar veremez. NestedScrollView sayesinde sistem hangi alanı scroll edeceğini bilir. )

NestedScrollView

NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default. ( ScrollView yerine NestedScrollView kullanabiliriz ama tersi olmaz. Çünkü NestedScrollView hem parent scroll view gibi hem de child scroll view gibi davranabilir. )

ScrollView

Layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display. A ScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects. ( ScrollView, kullanıcının scroll edebileceği bir layout container'dır. ScrollView, bir FrameLayout'dur, yani bu şu anlama gelir, FrameLayout içerisine sadece bir eleman koyabildiğimiz için ScrollView içerisine de sadece bir eleman koyabiliriz bu eleman scroll edilebilir olur.  )

ScrollView'in içerisine ScrollView koyamayız. ScrollView'in veya NestedScrollView'in içerisine NestedScrollView koyabiliriz.

Most of the time you probably do not need two ScrollViews on the same screen, but if you ever need it NestedScrollView is a great solution. This class has a set of useful methods so you can disable nested scrolling, check if your nested scroll view has nested scrolling parent and so on. (Genellikle aynı ekranda birden fazla ScrollView'e ihtiyaçımız olmaz ama ihtiyacımız olursa NestedScrollView kullanarak bunu gerçekleştirebiliriz. NestedScrollView class'ının sahip olduğu method'ları kullanarak nested scrolling'i disable edebiliriz, parent'ı nested scrolling view mi diye bakabiliriz, vs.  )

NestedScrollView can be used as both parent or child ScrollView.

Source code ( 30_NestedScrollView ) :

MainActivity.java

public class MainActivity extends AppCompatActivity {

   @Override

   protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.activity_main);

   }

}

activity_main.xml

Bir scrolling view içerisinde 3 tane scroll edilebilir alan göstereceğiz. Root element'imiz'i ScrollView yaptık, bunun içerisinde LinearLayout element yazdık, zaten ScrollView içerisinde sadece bir tane layout element olabilir demiştik daha önce. Ayrıca ScrollView yerine NestedScrollView de kullanabilirdik root layout element olarak NestedScrollView de kullanabilirdik, daha önce de söylediğimiz giib ScrollView yazan her yere NestedScrollView yazabiliriz çünkü NestedScrollView hem parent hem child scroll view gibi davranabilir.

Yani bu örnekte LinearLayout element'i scrollable yaptık. LinearLayout içerisinde 3 farklı NestedScrollView yazdık, bunu support library'yi kullanarak yaptığımıza dikkat et. Herbir NestedScrollView içerisinde bir TextView yazdık.

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

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

       <android.support.v4.widget.NestedScrollView
           android:layout_width="match_parent"
           android:layout_height="140dp"
           android:padding="@dimen/activity_horizontal_margin">

           <TextView
               android:id="@+id/text_view"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:gravity="left|center"
               android:padding="10dp"
               android:textColor="@android:color/white"
               android:background="#008080"
               android:text="@string/tv1" />

       </android.support.v4.widget.NestedScrollView>

       <android.support.v4.widget.NestedScrollView
           android:layout_width="match_parent"
           android:layout_height="140dp"
           android:padding="@dimen/activity_horizontal_margin">

           <TextView
               android:id="@+id/text_view"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:gravity="left|center"
               android:padding="10dp"
               android:textColor="@android:color/white"
               android:background="#008080"
               android:text="@string/tv2"/>

       </android.support.v4.widget.NestedScrollView>

       <android.support.v4.widget.NestedScrollView
           android:layout_width="match_parent"
           android:layout_height="140dp"
           android:padding="@dimen/activity_horizontal_margin">

           <TextView
               android:id="@+id/text_view"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:gravity="left|center"
               android:padding="10dp"
               android:textColor="@android:color/white"
               android:background="#008080"
               android:text="@string/tv3"/>

       </android.support.v4.widget.NestedScrollView>

   </LinearLayout>
</ScrollView>

Output :