I have a huge vertical ScrollView which contains many TextViews and ShapableImageViews. The standard ScrollView allows a smooth scrolling. But I want to have it like this in my app:
As soon as the user scrolls, there should be no smooth scrolling, but it should automatically scroll from TextView1 to TextView2. When the user scrolls down again, it should automatically scroll to TextView3. And when user scrolls up, it should go back from TextView3 to TextView2.
How do I achieve that custom scrolling behavior? I use Kolin, but also a help with Java code would be very appreciated.
This is my XML:
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="isData"
type="com.example.ezworkshop.TutorialData" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".view.TutorialActivity"
android:background="#25261D">
<ScrollView
android:id="@+id/scrollView_activityTutorial"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/linearLayout"
android:orientation="vertical"
android:gravity="start"
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="15dp">
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image"
android:scaleType="fitXY"
android:layout_marginTop="11dp"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:imageUrl="@{isData.image}"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/iv_playButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/playbutton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="@+id/tutorialHeading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@{isData.tutorialHeading}"
android:textColor="@color/standardTextColor"
android:textSize="26sp"
android:textStyle="bold" />
<TextView
android:id="@+id/tutorialText"
android:text="@{isData.tutorialText}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tutorialText2"
android:text="@{isData.tutorialText2}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText3"
android:text="@{isData.tutorialText3}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage2"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage2}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText4"
android:text="@{isData.tutorialText4}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage3"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage3}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText5"
android:text="@{isData.tutorialText5}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage4"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage4}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText6"
android:text="@{isData.tutorialText6}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage5"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage5}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText7"
android:text="@{isData.tutorialText7}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage6"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage6}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText8"
android:text="@{isData.tutorialText8}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage7"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage7}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText9"
android:text="@{isData.tutorialText9}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage8"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage8}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText10"
android:text="@{isData.tutorialText10}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage9"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage9}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText11"
android:text="@{isData.tutorialText11}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage10"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage10}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText12"
android:text="@{isData.tutorialText12}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage11"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage11}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText13"
android:text="@{isData.tutorialText13}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage12"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage12}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText14"
android:text="@{isData.tutorialText14}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage13"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage13}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText15"
android:text="@{isData.tutorialText15}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage14"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage14}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText16"
android:text="@{isData.tutorialText16}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage15"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage15}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText17"
android:text="@{isData.tutorialText17}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage16"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage16}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText18"
android:text="@{isData.tutorialText18}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage17"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage17}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText19"
android:text="@{isData.tutorialText19}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage18"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage18}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
<TextView
android:id="@+id/tutorialText20"
android:text="@{isData.tutorialText20}"
android:textSize="22sp"
android:gravity="start"
android:layout_gravity="start"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="@color/standardTextColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/tutorialTextImage19"
android:scaleType="fitXY"
android:imageUrl="@{isData.tutorialTextImage19}"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_width="match_parent"
android:layout_height="220dp"
app:shapeAppearanceOverlay="@style/RoundCornerForImageView"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
</layout>
