Scroll + discover = DiscrollView

Overview

Discrollview

Regularly, I am pleasantly surprised by websites using a pattern I called the discrollver pattern. I'm sure you already know what I'm talking about but if not, http://vimeo.com/player is a good example. When you scroll, widgets appear from nowhere by fade, translation or scale.

With DiscrollView, I wanted to import this pattern on Android. This is an 0.0.1 alpha version because you have to do all the transformation work (fade, translation, scale etc) yourself base on a ratio value. I'm going to add some transformation presets (translation from left to right + fade in for example) to make the library more ready to use for lazy developers.

Animated gif (on youtube)

Try out the sample APK here

Or browse the source code of the sample application for a complete example of use.

Including in your project

Just add the library to your application as a library project.

Compatibilty

API 14+

Usage

Using the library is simple, just look at the source code of the provided sample here

build.gradle

compile 'com.github.flavienlaurent.discrollview:library:0.0.2@aar'

The main layout

You must use the DiscrollViewContent view.

<com.flavienlaurent.discrollview.lib.DiscrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:discrollve="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.flavienlaurent.discrollview.lib.DiscrollViewContent
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- here you put discrollvable views -->

    </com.flavienlaurent.discrollview.lib.DiscrollViewContent>

</com.flavienlaurent.discrollview.lib.DiscrollView>

Discrollvable views

You can apply some transformation on discroll:

  • alpha
  • scale
  • translation (fromLeft, fromBottom, fromRight, fromTop) fromLeft+fromRight and fromBottom+fromTop are forbidden couples.
  • bgcolor
discrollve:discrollve_alpha="true"
discrollve:discrollve_translation="fromLeft|fromBottom"
discrollve:discrollve_scaleX="true"
discrollve:discrollve_scaleY="true"
discrollve:discrollve_fromBgColor="#88EE66"
discrollve:discrollve_toBgColor="#000000"
discrollve:discrollve_threshold="0.3"

The threshold attribute is used to trigger the discrollve at a specified ratio. For example, if threshold=0.3, the discrollve starts when the ratio >= 0.3.

A simple example

<com.flavienlaurent.discrollview.lib.DiscrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:discrollve="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.flavienlaurent.discrollview.lib.DiscrollViewContent
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="600dp"
            android:background="@android:color/white"
            android:textColor="@android:color/black"
            android:padding="25dp"
            android:textSize="72sp"
            android:gravity="center"
            android:fontFamily="serif"
            android:text="Do you love cheese?" />

        <View
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#007788"
            discrollve:discrollve_alpha="true"
            discrollve:discrollve_threshold="0.3" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="120dp"
            discrollve:discrollve_alpha="true"
            discrollve:discrollve_translation="fromLeft|fromBottom"
            android:src="@drawable/cheese1" />

        <View
            android:layout_width="match_parent"
            android:layout_height="200dp"
            discrollve:discrollve_fromColor="#88EE66"
            discrollve:discrollve_toColor="#000000" />

        <ImageView
            android:layout_width="220dp"
            android:layout_height="110dp"
            android:layout_gravity="right"
            android:src="@drawable/cheese2"
            discrollve:discrollve_translation="fromRight" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:fontFamily="serif"
            android:gravity="center"
            android:text="When the cheese comes out everybody's happy pecorino red leicester"
            android:textSize="18sp"
            discrollve:discrollve_alpha="true"
            discrollve:discrollve_translation="fromBottom" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:layout_gravity="center"
            android:src="@drawable/ilovecheese_heart"
            discrollve:discrollve_scaleX="true"
            discrollve:discrollve_scaleY="true"  />

    </com.flavienlaurent.discrollview.lib.DiscrollViewContent>
</com.flavienlaurent.discrollview.lib.DiscrollView>

License

Copyright 2013 Flavien Laurent

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • listviewscroll

    listviewscroll

    hello i tried to make it work on listview but i could not 1- i create a listview adapter 2- i create a single row layout and give the for example title textview discrollve:discrollve_translation="fromRight" but it not works you know instead of using scrolview and put the childs one by one i want it to be a listview that it can loads many data.

    my english is too poor can you please help me with this one and change my life? beg you

    opened by loveyouandroid 1
  • No mention of API compatibility

    No mention of API compatibility

    Love the feel of this library, but It'd be great to display in the readme what API versions can make use of it. For example, I want to know: can I use it in my gingerbread app?

    opened by super-cache-money 1
  • Can it used in ViewPager animation?

    Can it used in ViewPager animation?

    I found a similar project on github (https://github.com/IFTTT/JazzHands.git), but it is used in IOS platform. Can discrollview achieve the similar effect?

    opened by kylin17 1
  • Parallax Scrolling in Child layout

    Parallax Scrolling in Child layout

    Lets say I have a Child Layout that implements Discrollvable and I set a background image for that layout, Is there a way to implement a parallax scroll effect in that view similar to how this site looks for example? http://www.soyuzcoffee.com/ru/home

    opened by tyczj 1
  • Gradle sync error in android studio

    Gradle sync error in android studio

    when I put

    compile 'com.github.flavienlaurent.discrollview:library:0.0.2@aar'
    

    in my build.gradle file with my other libraries I get an error during the gradle sync saying

    "Could not find com.github.flavienlaurent.discrollview:library:0.0.2."

    any idea?

    opened by tyczj 1
  • Incorrect order

    Incorrect order

    When adding ca. 7 - 10 views to the DiscrollViewContent some views are animated after they usually should. (Instead of view A is animated before view B, view B is first animated)

    opened by 2manyvcos 0
  • discrollve_fromColor and discrollve_toColor

    discrollve_fromColor and discrollve_toColor

    My problem is : Error:(45) No resource identifier found for attribute 'discrollve_fromColor' in package 'app.test' Error:(45) No resource identifier found for attribute 'discrollve_toColor' in package 'app.test'

    opened by hamedgol 2
  • Lot of issues while importing

    Lot of issues while importing

    Lot of incompatible code and a unique way of importing from maven is totally cumbersome to understand. Please update with latest versions of build.gradle. I am trying if it works.

    opened by sud007 0
Owner
Flavien Laurent
Flavien Laurent
Android library to achieve in an easy way, the behaviour of the home page in the Expedia app, with a pair of auto-scroll circular parallax ListViews.

ListBuddies This library is not maintained anymore and there will be no further releases Android library of a pair of auto-scroll circular parallax Li

JPARDOGO 970 Dec 29, 2022
A small android library for tagging views inside a ScrollView as "sticky" making them stick to the top of the scroll container until a new sticky view comes and takes it's place

StickyScrollViewItems StickyScrollViewItems is a ScrollView subclass that allowed you to mark items inside the ScrollView as sticky. The items marked

Emil Sjölander 1k Jan 7, 2023
Android library to display a ListView whose cells are not rigid but flabby and react to ListView scroll.

FlabbyListView This library is not maintained anymore and there will be no further releases Android library to display a ListView which cells are not

JPARDOGO 762 Nov 23, 2022
Scroll + discover = DiscrollView

Discrollview Regularly, I am pleasantly surprised by websites using a pattern I called the discrollver pattern. I'm sure you already know what I'm tal

Flavien Laurent 1.5k Dec 29, 2022
🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements

Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements. With minimal configuration it generates a UI browser that helps you easily find your components, colors & typography. It also renders your components in common situations like dark mode, right-to-left layouts, and scaled fonts which help in finding issues early.

Airbnb 1.7k Jan 2, 2023
Theia - A Kotlin program used to analyze and discover backdoors in Minecraft Java 1.12.2 forge mods

Theia A Kotlin program used to analyse and discover backdoors in Minecraft Java

null 7 Jan 13, 2022
Discover the most popular and top rated movies playing. Movies data fetched using tomdbapi.com API.

Movie-App A simple news app build using MVVM architecture. Discover the most popular and top rated movies playing. Movies data fetched using tomdbapi.

Mahmudul Hasan 5 Jan 3, 2023
Android library to display a ListView whose cells are not rigid but flabby and react to ListView scroll.

FlabbyListView This library is not maintained anymore and there will be no further releases Android library to display a ListView which cells are not

JPARDOGO 762 Nov 23, 2022
Android library to achieve in an easy way, the behaviour of the home page in the Expedia app, with a pair of auto-scroll circular parallax ListViews.

ListBuddies This library is not maintained anymore and there will be no further releases Android library of a pair of auto-scroll circular parallax Li

JPARDOGO 970 Dec 29, 2022
Android library to observe scroll events on scrollable views.

Android-ObservableScrollView Android library to observe scroll events on scrollable views. It's easy to interact with the Toolbar introduced in Androi

Soichiro Kashima 9.6k Dec 29, 2022
An imageView can auto scroll with device rotating.

PanoramaImageView An imageView can auto scroll with device rotating. ScreenShots Include PanoramaImageView to Your Project With gradle: dependencies {

郭佳哲 2.2k Dec 26, 2022
An Android GridView that can be configured to scroll horizontally or vertically

TwoWayGridView An Android GridView that can be configured to scroll horizontally or vertically. I should have posted this over a year and a half ago,

Jess Anders 656 Jan 9, 2023
DMIV aims to provide a flexible and customizable instrument for automated images moving on display. It provides scroll, gyroscope or time based moving. But you can create your own evaluator.

DexMovingImageView DMIV aims to provide a flexible and customizable instrument for automated images moving on display. It provides scroll, gyroscope o

Diego Grancini 310 Feb 7, 2022
A beautiful material calendar with endless scroll, range selection and a lot more!

CrunchyCalendar A light, powerful and easy to use Calendar Widget with a number out of the box features: Infinite vertical scrolling in both direction

CleverPumpkin 483 Dec 25, 2022
Android library to observe scroll events on scrollable views.

Android-ObservableScrollView Android library to observe scroll events on scrollable views. It's easy to interact with the Toolbar introduced in Androi

Soichiro Kashima 9.6k Dec 30, 2022
Android library to achieve in an easy way, the behaviour of the home page in the Expedia app, with a pair of auto-scroll circular parallax ListViews.

ListBuddies This library is not maintained anymore and there will be no further releases Android library of a pair of auto-scroll circular parallax Li

JPARDOGO 970 Dec 29, 2022
A small android library for tagging views inside a ScrollView as "sticky" making them stick to the top of the scroll container until a new sticky view comes and takes it's place

StickyScrollViewItems StickyScrollViewItems is a ScrollView subclass that allowed you to mark items inside the ScrollView as sticky. The items marked

Emil Sjölander 1k Jan 7, 2023
Android library to display a ListView whose cells are not rigid but flabby and react to ListView scroll.

FlabbyListView This library is not maintained anymore and there will be no further releases Android library to display a ListView which cells are not

JPARDOGO 762 Nov 23, 2022
Android-ScrollBarPanel allows to attach a View to a scroll indicator like it's done in Path 2.0

Path 2.0 like ScrollBarPanel for Android Android-ScrollBarPanel allows to attach a View to a scroll indicator like it's done in Path 2.0. Features Sup

Arnaud Vallat 551 Dec 22, 2022
Android auto scroll viewpager or viewpager in viewpager

Android Auto Scroll ViewPager ViewPager which can auto scrolling, cycling, decelerating. ViewPager which can be slided normal in parent ViewPager. Att

Trinea 1.7k Dec 10, 2022