• Stars
    star
    2,557
  • Rank 17,262 (Top 0.4 %)
  • Language
    Java
  • License
    MIT License
  • Created about 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

:octocat: PaperOnboarding is a material design slider made by @Ramotion

PAPER ONBOARDING

Android library Paper Onboarding is a material design UI slider written on Java


We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:


CircleCI Codacy Badge Twitter Donate

Requirements

  • Android 4.0.3 IceCreamSandwich (API lvl 15) or greater
  • Your favorite IDE

Installation

​ Just download the package from here and add it to your project classpath, or just use the maven repo: ​ Gradle:

'com.ramotion.paperonboarding:paper-onboarding:1.1.3'

SBT:

libraryDependencies += "com.ramotion.paperonboarding" % "paper-onboarding" % "1.1.3"

Maven:

<dependency>
    <groupId>com.ramotion.paperonboarding</groupId>
    <artifactId>paper-onboarding</artifactId>
    <version>1.1.3</version>
    <type>aar</type>
</dependency>

Basic usage

Paper Onboarding is a simple and easy to use onboarding slider for your app. You just need to provide content for each slider page - a main icon, text, and small round icon for the bottom.

1 Use PaperOnboardingPage to prepare your data for slider:

PaperOnboardingPage scr1 = new PaperOnboardingPage("Hotels",
	"All hotels and hostels are sorted by hospitality rating",
        Color.parseColor("#678FB4"), R.drawable.hotels, R.drawable.key);
PaperOnboardingPage scr2 = new PaperOnboardingPage("Banks",
	"We carefully verify all banks before add them into the app",
        Color.parseColor("#65B0B4"), R.drawable.banks, R.drawable.wallet);
PaperOnboardingPage scr3 = new PaperOnboardingPage("Stores",
	"All local stores are categorized for your convenience",
        Color.parseColor("#9B90BC"), R.drawable.stores, R.drawable.shopping_cart);

ArrayList<PaperOnboardingPage> elements = new ArrayList<>();
elements.add(scr1);
elements.add(scr2);
elements.add(scr3);

2 Create a fragment from PaperOnboardingFragment and provide your data.

PaperOnboardingFragment onBoardingFragment = PaperOnboardingFragment.newInstance(elements);

3 Done! Now you can use this fragment as you want in your activity, for example :

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.fragment_container, onBoardingFragment);
fragmentTransaction.commit();

4 Extra step : You can add event listeners to fragments with your logic, like replacing this fragment to another when the user swipes next from the last screen:

onBoardingFragment.setOnRightOutListener(new PaperOnboardingOnRightOutListener() {
    @Override
    public void onRightOut() {
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        Fragment bf = new BlankFragment();
        fragmentTransaction.replace(R.id.fragment_container, bf);
        fragmentTransaction.commit();
    }
});

Currently, there are three listeners that cover all events - onRightOut, onLeftOut and onChange; see code examples and usage in the repo.


🗂 Check this library on other language:

📄 License

Paper Onboarding Android is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for Android to give it a try

Try this UI component and more like this in our Android app. Contact us if interested.

More Repositories

1

animated-tab-bar

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
Swift
11,108
star
2

folding-cell

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
Swift
10,211
star
3

expanding-collection

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion
Swift
5,550
star
4

folding-cell-android

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion
Java
4,887
star
5

swift-ui-animation-components-and-libraries

Swift UI libraries, iOS components and animations by @Ramotion
Swift
3,663
star
6

circle-menu

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion
Swift
3,424
star
7

paper-onboarding

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion
Swift
3,300
star
8

paper-switch

:octocat: 🎚 RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion
Swift
2,940
star
9

reel-search

:octocat: 🔍 RAMReel is a UI controller that allows you to choose options from a list. Swift UI library made by @Ramotion
Swift
2,541
star
10

cardslider-android

:octocat: 🃏 Cardslider is a material design UI controller that allows you to swipe through cards with pictures and accompanying descriptions.
Java
2,349
star
11

navigation-stack

:octocat: NavigationStack is a stack-modeled UI navigation controller. Swift UI library made by @Ramotion
Swift
2,314
star
12

preview-transition

:octocat: PreviewTransition is a simple preview gallery UI controller with animated tranisitions. Swift UI library made by @Ramotion
Swift
2,085
star
13

android-ui-animation-components-and-libraries

Android UI libraries, components and animations by @ramotion
Java
2,059
star
14

adaptive-tab-bar

:octocat: AdaptiveController is a 'Progressive Reduction' Swift UI module for adding custom states to Native or Custom iOS UI elements. Swift UI component by @Ramotion
Swift
2,035
star
15

expanding-collection-android

:octocat: ExpandingCollection is a material design card peek/pop controller. Android UI Library made by @Ramotion
Java
2,028
star
16

fluid-slider

:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion
Swift
1,961
star
17

circle-menu-android

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Android UI library made by @Ramotion
Java
1,889
star
18

garland-view-android

:octocat: ≡ GarlandView seamlessly transitions between multiple lists of content. Made by @Ramotion
Java
1,839
star
19

aquarelle

:octocat: 🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion
JavaScript
1,799
star
20

gliding-collection

:octocat: Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller. iOS library made by @Ramotion
Swift
1,529
star
21

fluid-slider-android

:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Android library made by @Ramotion
Kotlin
1,418
star
22

cardslider

:octocat: 🃏 Cardslider is a design UI controller that allows you to swipe through cards with pictures and accompanying descriptions.
Swift
1,265
star
23

elongation-preview

:octocat: ElongationPreview is an elegant UI push-pop style view controller. iOS library made by @Ramotion
Swift
897
star
24

navigation-toolbar-android

:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Kotlin
820
star
25

navigation-toolbar

:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Swift
595
star
26

react-native-circle-menu

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion
JavaScript
588
star
27

circular-carousel

List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.
Swift
577
star
28

direct-select-android

:octocat: ≡ DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with.
Java
533
star
29

garland-view

:octocat: ≡ GarlandView seamlessly transitions between multiple lists of content. Swift UI library made by @Ramotion
Swift
503
star
30

showroom

Swift
167
star
31

vr-menu-demo

Prototype of a menu system in Virtual Reality. Javascript VR library made by @Ramotion
JavaScript
124
star
32

iOS-design-tips

Simple iOS design guidelines that will assist you in selecting the dimensions for your AppStore assets:
HTML
78
star
33

blob-menu

Swift
45
star
34

react-native-expanding-collection

JavaScript
37
star
35

showroom-android

Java
28
star
36

utopia

Swift
15
star
37

animations-web

JavaScript
9
star
38

react-native-fluid-slider

5
star
39

distorsion-blur

Swift
2
star