Ramotion/paper-onboarding-android

:octocat: PaperOnboarding is a material design slider made by @Ramotion https://www.ramotion.com/paper-onboarding-android/

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.Ramotion:paper-onboarding-android:'
	}

	dependencies {
		implementation("com.github.Ramotion:paper-onboarding-android:")
	}

	<dependency>
	    <groupId>com.github.Ramotion</groupId>
	    <artifactId>paper-onboarding-android</artifactId>
	    <version></version>
	</dependency>


                            
    libraryDependencies += "com.github.Ramotion" % "paper-onboarding-android" % ""


                            
    :dependencies [[com.github.Ramotion/paper-onboarding-android ""]]

Readme

<a href="https://github.com/Ramotion/paper-onboarding-android"> <img align="left" src="https://github.com/Ramotion/paper-onboarding-android/blob/master/onboarding_preview.gif" width="480" height="360" /></a> <p><h1 align="left">PAPER ONBOARDING</h1></p> <h4>Android library Paper Onboarding is a material design UI slider written on Java</h4>

<p><h6>We specialize in the designing and coding of custom UI for Mobile Apps and Websites.</h6> <a href="https://www.ramotion.com/agency/app-development/?utm_source=gthb&utm_medium=repo&utm_campaign=paper-onboarding-android"> <img src="https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png" width="187" height="34"></a> </p> <p><h6>Stay tuned for the latest updates:</h6> <a href="https://goo.gl/rPFpid" > <img src="https://i.imgur.com/ziSqeSo.png/" width="156" height="28"></a></p> </br>

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.

<br>

🗂 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 <a href="https://github.com/Ramotion/android-ui-animation-components-and-libraries"><b>selection of our best UI open-source projects</b></a>

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.