PaperOnboarding is a material design slider made by @Ramotion

Overview

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.paperonboardinggroupId>
    <artifactId>paper-onboardingartifactId>
    <version>1.1.3version>
    <type>aartype>
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:

elements = new ArrayList<>(); elements.add(scr1); elements.add(scr2); elements.add(scr3); ">
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.

Comments
  • Cannot resolve method 'add(int, com.ramotion.paperonboarding.PaperOnboardingFragment)'

    Cannot resolve method 'add(int, com.ramotion.paperonboarding.PaperOnboardingFragment)'

    Error occurs on the .add() I tried casting onBoardingFragment to a regular Fragment, but it wouldn't take.

    PaperOnboardingFragment onBoardingFragment = PaperOnboardingFragment.newInstance(elements); FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction(); fragmentTransaction.add(R.id.fragment_container, onBoardingFragment); fragmentTransaction.commit();

    Any ideas for a fix?

    bug 
    opened by dsemelianov 8
  • Changed library to use Activity context instead of using the application context

    Changed library to use Activity context instead of using the application context

    This was causing activity theme to have no effect on the textviews and made the onboarding fragment's theme uncustomizable. Sometime we don't want to change the whole app theme and only want to change the activity theme and this was impossible if we used application context.

    opened by krazykira 7
  • Updating Paper-onboarding features for Android

    Updating Paper-onboarding features for Android

    Since Paper-onboarding iOS version is different to Android in terms of features:

     ("BIG_IMAGE1", "Title", "Description text", "IconName1", "BackgroundColor", textColor, DescriptionColor, textFont, DescriptionFont)
    

    I have added TypeFace and Color features to text and description. This will make the Android version look consistent.

    opened by StreethawkNick 5
  • Google Play Store - Pre launch report problem

    Google Play Store - Pre launch report problem

    Hello, i used your library for my new app. However, the pre-launch report on Play Store can't proceed beyond the intro slides, so it stucks on the first slide and never makes it to the actual app. I am guessing this is because the devices won't swipe to the next slide. Any solutions?

    opened by nickstamp93 3
  • When i keep MPAndroid PieChart in FrameLayout after swipe half chart going out of screen

    When i keep MPAndroid PieChart in FrameLayout after swipe half chart going out of screen

    In PaperOnboardingEngine.java implemented PieChart to show in each screen swipe. Once i press right swipe PieChart going bottom of screen and only half chart is showing. Please help to fix this issue.

    protected ViewGroup createContentTextView(PaperOnboardingPage PaperOnboardingPage) { LayoutInflater vi = LayoutInflater.from(mAppContext); ViewGroup contentTextView = (ViewGroup) vi.inflate(R.layout.onboarding_text_content_layout, mContentTextContainer, false); ... pieChart = (PieChart) contentTextView.getChildAt(1); pieChart.setRotationEnabled(false); pieChart.setUsePercentValues(true); .. .. }

    opened by eswaraaa 3
  • Android textcolor and icon color

    Android textcolor and icon color

    Is there anyway that there could be an option for changing the android icon color's and also the text color please, I couldn't help notice that the ios version of the library has these features but the android does not.

    opened by testimonialz 2
  • Incompatible with non-androidX projects

    Incompatible with non-androidX projects

    Hi. Created a new project from scratch with Android Studio, without checking use androidx, added the implementation 'com.ramotion.paperonboarding:paper-onboarding:1.1.3' dependency.

    Result: does not compile.

    What went wrong: > Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91 is also present at [androidx.core:core:1.0.1] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).

    Note: adding 'tools:replace="android:appComponentFactory"' to element at AndroidManifest.xml does not help.

    I thought androidx libs were backward compatible with support library versions?

    opened by raphael-anydo 2
  • ERROR: Failed to resolve: com.ramotion.paperonboarding:paper-onboarding:1.1.2

    ERROR: Failed to resolve: com.ramotion.paperonboarding:paper-onboarding:1.1.2

    I am trying to add the dependency with implementation 'com.ramotion.paperonboarding:paper-onboarding:1.1.2' but showing error : ERROR: Failed to resolve: com.ramotion.paperonboarding:paper-onboarding:1.1.2

    But adding paper-onboarding:1.1.1 was successful.

    compileSdkVersion 28 minSdkVersion 23 targetSdkVersion 28

    repositories { google() jcenter() }

    opened by mevivek 2
  • It's not pretty clear that screen react on my swipe gesture

    It's not pretty clear that screen react on my swipe gesture

    In my point of view, it would be better if a user can see that something happening when he/she swiping the screen.

    the easier way to do it is to change background-color during swapping

    If you think it is a good feature I may create a pull-request

    question 
    opened by appspell 1
  • Use of specific implementation of List for onBoarding pages

    Use of specific implementation of List for onBoarding pages

    When creating the onboarding engine, we are forced to use an ArrayList to hold ou onboarding pages. This might be a design issue as using a List as constructor parameter would be better than an ArrayList.

    For my case, i wanted to take advantage of LinkedList to keep the order of screen. This order in mind would help to better manipulated the screens in bounds to implement further logic

    opened by SippingCode 1
  • NullPointerException error

    NullPointerException error

    Your code converted into Kotlin

    val engine = PaperOnboardingEngine(findViewById(R.id.onboardingRootView), getDataForOnboarding(), applicationContext) engine.setOnChangeListener { oldElementIndex, newElementIndex -> Toast.makeText(applicationContext, "Swiped from $oldElementIndex to $newElementIndex", Toast.LENGTH_SHORT).show() } engine.setOnRightOutListener { // Probably here will be your exit action Toast.makeText(applicationContext, "Swiped out right", Toast.LENGTH_SHORT).show() }

    I get error on R.id.onboardingRootView part

    Errror is : Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.View android.view.View.findViewById(int)' on a null object reference at com.ramotion.paperonboarding.PaperOnboardingEngine.(PaperOnboardingEngine.java:83) at io.insyssky.mediassistplus.activity.OnBoardActivity.onCreate(OnBoardActivity.kt:20)

    opened by subhra9326 1
  • Fix for issue #58

    Fix for issue #58

    Fix for issue #58

    • added functionality to load image from URL using Picasso.
    • added functionality to change "title text color", "description text color", "title text style", "description text style", "title text size", "description text size".
    • added TextStyle.java Enum.
    • added internet permission to the fragment example.
    • added Picasso dependency.

    Usage

    
        PaperOnboardingPage scr1 = new PaperOnboardingPage("Hotels", "All hotels and hostels are sorted by hospitality rating",
                    Color.parseColor("#678FB4"), R.drawable.hotels, R.drawable.key);
    
            scr1.setImageUrl("https://en.wikipedia.org/wiki/Pikachu#/media/File:Pok%C3%A9mon_Pikachu_art.png");
            scr1.setImageWidth(200);
            scr1.setImageHeight(100);
            scr1.setTitleTextColor(Color.parseColor("#FFFFFF"));
            scr1.setDescriptionTextColor(Color.parseColor("#FFFFFF"));
            scr1.setTitleTextSize(50);
            scr1.setDescriptionTextSize(30);
            scr1.setTitleTextStyle(TextStyle.BOLD_ITALIC);
            scr1.setDescriptionTextStyle(TextStyle.ITALIC);
    
    
    opened by OdeyFox 0
  • Ability to load images from url and other needed features

    Ability to load images from url and other needed features

    it would be great if i can load images from remote URL, not just local resources. change text color, weight, typeface, and also control the size of the image.

    i have also found an issue when the fragment is left to right (Arabic locale).

    i hope if it has these features.

    opened by OdeyFox 0
  • Could not resolve com.ramotion.paperonboarding:paper-onboarding:1.1.3

    Could not resolve com.ramotion.paperonboarding:paper-onboarding:1.1.3

    Hey, I can't resolve com.ramotion.paperonboarding:paper-onboarding:1.1.3 is there an issue with maven?

    Also I can't download the package with you're link you've posted on youre documentation: (http://central.maven.org/maven2/com/ramotion/paperonboarding/paper-onboarding/1.1.3/paper-onboarding-1.1.3.aar)

    opened by 30zeta10 2
  • Add UI buttons to the pages

    Add UI buttons to the pages

    I added 3 buttons (that can be shown or not):

    • A skip button that automatically calls the onRightOut listener
    • A previous button that goes back one page
    • A next button that goes forward one page

    The text of the skip button is customizable The next and previous buttons are ImageButtons with an arrow drawable. Its color can be changed in API 21+

    I also added a builder for readability purposes.

    These changes are compatible with the previous version of the library.

    opened by ronw98 0
  • Fix pager clipped when having a large number of pages

    Fix pager clipped when having a large number of pages

    I noticed the bottom pager icons were clipped when there were, in my case, more than 10 pages. This is due to android not allowing a layout to be larger than the screen. I put the pager layout in a HorizontalScrollView to patch the problem. The HorizontalScrollView is not scrollable and a swipe on it has the same behavior as a swipe on he rest of the screen

    opened by ronw98 0
Owner
Ramotion
UI Engineering, UI/UX Design and Front-End Development Agency
Ramotion
β˜€οΈ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Ayush Agarwal 652 Dec 30, 2022
A Flutter package for easily implementing Material Design navigation transitions.

Morpheus A Flutter package for easily implementing Material Design navigation transitions. Examples Parent-child transition You can use MorpheusPageRo

Sander R. D. Larsen 186 Jan 7, 2023
Beautiful-Login-Design - A design challenge made in flutter + custompainter

Login Design This little project was proposed in [Flutter & Dart en EspaΓ±ol] gro

Juan Suarez 10 Nov 3, 2022
Simple and configurable app introduction slider for Flutter

FLUTTER INTRO SLIDER Flutter Intro Slider is a flutter plugin that helps you make a cool intro for your app. Create intro has never been easier and fa

Duy Tran 623 Jan 7, 2023
A custom Flutter value slider that makes a wave effect when dragged.

A Flutter slider that makes a wave effect when dragged. Does a little bounce when dropped. Demo Getting Started To use this plugin, add wave_slider as

Gordon Hayes 33 Dec 21, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022
Bubbleslider - A flutter package support a slider customize UI with bubble animation

bubble_slider This package support a slider customize UI with bubble animation.

MindInventory 11 Jul 26, 2022
Domain-Driven Design + Parse Server For FlutterDomain-Driven Design + Parse Server For Flutter

Domain-Driven Design + Parse Server Install Parse SDK on Flutter project and then update .env file PARSE_APPLICATION_ID=YOUR_APP_ID_HERE PARSE_CLIENT_

Long HoΓ ng 19 Nov 18, 2022
Best 6 Flutter Login Screen Design

Flutter Login Home Animation A new open-source Flutter project that enables the developer to quickly get started with the Flutter animation and applic

GeekyAnts 1.1k Dec 28, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Adar 550 Dec 23, 2022
Cuberto is a leading digital agency with solid design and development expertise.

Cuberto's development lab: Cuberto is a leading digital agency with solid design and development expertise. We build mobile and web products for start

Cuberto 3k Dec 21, 2022
Login Page UI Design and Animation For Flutter

Flutter Beautiful Login Page UI Design and Animation - Day 14 class Afgprogramme

Behruz Hurramov 0 Dec 24, 2021
An advanced UI design implemented in Flutter

Flight search This is my second UI Challenge. I picked a Jhony Vino's Flight search design from 100 Mobile App UI Interactions and implemented it in F

Marcin SzaΕ‚ek 796 Dec 24, 2022
Flutter Animation πŸ±β€πŸ‘€ Made with algeria By DZ-TM071

Flutter Animation ??‍?? Made with algeria By DZ-TM071

Hmida 12 Oct 23, 2022
Flutter Animation πŸ±β€πŸ‘€ Made with algeria πŸ–€

Flutter-awesome-login-page-animated-fastCode ??‍?? Fast code and awesome design-ui for Login Page ! ?? Getting Started # First you need to add simple_

Hmida 11 Oct 24, 2022
3d Drawer Animated && Made with algeria heart

Cool 3D Drawer Animated With flutter part 1 ?? ?? Getting Started # You need to import this in our file import 'dart:math'; import 'package:flutter/m

Hmida 8 Sep 10, 2022
Flutter Animation liquid πŸ±β€πŸ‘€ Made with algeria By DZ-TM071

Flutter Animated Loading liquid progress ?? ?? ?? screen screen # Usage First you need to add liquid_progress_indicator 0.4.0 Or + in the dependency a

Hmida 8 Jan 10, 2022
Flutter Animation Made with algeria By DZ-TM071 πŸš€__πŸ”₯

ByDzTm071 ?? Fast code and awesome design-ui for Login Page Part 3 ! ?? image gif image Getting Started # First you need to add simple_animations 4.0.

Hmida 9 Oct 28, 2022
Inspired by Reflectly App Made in Flutter ❀️

Inspired By Reflectly App ?? Gif ?? Screenshots Download the Following App for Preview ?? Flutter Tutorial All Flutter Tutorials plus additional Code

Sagar Shende 214 Nov 16, 2022