StickyScrollView for Xamarin Android

ScrollViews are pretty useful when there is more content than space to display it. But through scrolling chances are high that the user loses track of context or title of the section, so it’s nice to have a sticky header/title that always stays at the top of the ScrollView.

Emil Sjölander created such a control (https://github.com/emilsjolander/StickyScrollViewItems/) for Java Android projects so I decided to port the control to C#. https://github.com/maltegoetz/StickyScrollViewXamarinAndroid

sticky22

The repository contains an example project with a simple StickyScrollView that has a LinearLayout with a few colored FrameLayouts children. One on the FrameLayouts is sticky.

Usage

Usage is pretty easy, you just need to copy the StickyScrollView.cs file to your project and the Attrs.xml file to the values folder of your project.

Replace the ScrollView with a StickyScrollview. From this:

<ScrollView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_height="match_parent"
  android:layout_width="match_parent">
    <!-- scroll view child goes here -->
</ScrollView>

to

<namespacelowercase.StickyScrollView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_height="match_parent"
  android:layout_width="match_parent">
    <!-- scroll view child goes here -->
</namespacelowercase.StickyScrollView>

The StickyScrollView inherits from ScrollView so you can only add one child but the child can have some more children. In this example I used a LinearLayout with a few views. One or more children can have an android:tag attribute with the value sticky, these will stick at the top of the ScrollView.

<namespacelowercase.StickyScrollView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/sticky_scroll"
  android:layout_height="match_parent"
  android:layout_width="match_parent">
    <LinearLayout
      android:layout_height="match_parent"
      android:layout_width="match_parent"
      android:orientation="horizontal">
        <!-- other children -->
        <View
          android:layout_height="300dp"
          android:layout_width="match_parent"
          android:tag="sticky"/>
        <!-- other children -->
    </LinearLayout>
</namespacelowercase.StickyScrollView>

There are also two additional flags that can be set on views that were added to optimize performance for the most usual cases. If the view you want to stick either has transparency or does not have a constant representation than you must supply one or both of the following flags. -hastransparancy for views that have transparancy and -nonconstant for views that will change appearance during there sticky time (examples are buttons with pressed states as well as progress spinners).

So this ends up with 4 different ways to tag a view as sticky resulting is slightly different behaviour android:tag=“sticky“android:tag=“sticky-hastransparancy“ android:tag=“sticky-nonconstant“ and android:tag=“sticky-hastransparancy-nonconstant“.

Advertisements
StickyScrollView for Xamarin Android

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s