Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tangoagency/material-intro-screen

Inspired by Heinrich Reimer Material Intro and developed with love from scratch
https://github.com/tangoagency/material-intro-screen

android android-library material-design onboarding

Last synced: about 1 month ago
JSON representation

Inspired by Heinrich Reimer Material Intro and developed with love from scratch

Awesome Lists containing this project

README

        

# Android Material Intro Screen
[ ![Download](https://api.bintray.com/packages/tangoagency/maven/material-intro-screen/images/download.svg) ](https://bintray.com/tangoagency/maven/material-intro-screen/_latestVersion)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/753f46972d8740d1984f8beb7d04fb9d)](https://www.codacy.com/app/TangoAgency/material-intro-screen?utm_source=github.com&utm_medium=referral&utm_content=TangoAgency/material-intro-screen&utm_campaign=badger)
[![Build Status](https://travis-ci.org/TangoAgency/material-intro-screen.svg?branch=master)](https://travis-ci.org/TangoAgency/material-intro-screen)
[![Android Arsenal Material Intro Screen](https://img.shields.io/badge/Android%20Arsenal-Material--Intro--Screen-green.svg?style=true)](http://android-arsenal.com/details/1/4368)

Material intro screen is inspired by [Material Intro] and developed with love from scratch. I decided to rewrite completely almost all features in order to make Android intro screen easy to use for everyone and extensible as possible.
## Features
- [Easily add new slides][Intro Activity]
- [Custom slides][Custom Slide]
- [Parallax slides][Parallax Slide]
- Easy extensible api
- Android TV support!
- Material design at it's best!!!

| [Simple slide][SimpleSlide] | [Custom slide][Custom Slide] | [Permission slide][PermissionSlide] | [Finish slide][FinishSlide]
|:-:|:-:|:-:|:-:|
| ![Simple slide] | ![Customslide] | ![Permission slide] | ![Finish slide] |

## Usage
### Step 1:
#### Add gradle dependecy
```
dependencies {
compile 'agency.tango.android:material-intro-screen:{latest_release}'
}
```
### Step 2:
#### First, your [intro activity][Intro Activity] class needs to extend MaterialIntroActivity:
```java
public class IntroActivity extends MaterialIntroActivity
```
### Step 3:
#### Add activity to [manifest][Manifest] with defined theme:
```xml

```
### Step 4:
#### [Add slides:][Intro Activity]
```java
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

addSlide(new SlideFragmentBuilder()
.backgroundColor(R.color.colorPrimary)
.buttonsColor(R.color.colorAccent)
.possiblePermissions(new String[]{Manifest.permission.CALL_PHONE, Manifest.permission.READ_SMS})
.neededPermissions(new String[]{Manifest.permission.CAMERA, Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.ACCESS_COARSE_LOCATION})
.image(agency.tango.materialintroscreen.R.drawable.ic_next)
.title("title 3")
.description("Description 3")
.build(),
new MessageButtonBehaviour(new View.OnClickListener() {
@Override
public void onClick(View v) {
showMessage("We provide solutions to make you love your work");
}
}, "Work with love"));
}
```
#### Explanation of SlideFragment usage:
- ```possiblePermissions``` ⇾ permissions which are not necessary to be granted
- ```neededPersmissions``` ⇾ permission which are needed to be granted to move further from that slide
- ```MessageButtonBehaviour``` ⇾ create a new instance only if you want to have a custom action or text on a message button

### Step 5:
#### Customize Intro Activity:
- ```setSkipButtonVisible()``` ⇾ show skip button instead of back button on the left bottom of screen
- ```hideBackButton()``` ⇾ hides any button on the left bottom of screen
- ```enableLastSlideAlphaExitTransition()``` ⇾ set if the last slide should disapear with alpha hiding effect

#### Customizing view animations:

You can set enter, default and exit translation for every view in intro activity. To achive this you need to get translation wrapper for chosen view (for example: ```getNextButtonTranslationWrapper()```) and set there new class which will implement ```IViewTranslation```
```java
getBackButtonTranslationWrapper()
.setEnterTranslation(new IViewTranslation() {
@Override
public void translate(View view, @FloatRange(from = 0, to = 1.0) float percentage) {
view.setAlpha(percentage);
}
});
```
#### Available [translation wrappers][TranslationWrapper]:
- ```getNextButtonTranslationWrapper()```
- ```getBackButtonTranslationWrapper()```
- ```getPageIndicatorTranslationWrapper()```
- ```getViewPagerTranslationWrapper()```
- ```getSkipButtonTranslationWrapper()```

## Custom slides
#### Of course you are able to implement completely custom slides. You only need to extend SlideFragment and override following functions:
- ```backgroundColor()```
- ```buttonsColor()```
- ```canMoveFurther()``` (only if you want to stop user from being able to move further before he will do some action)
- ```cantMoveFurtherErrorMessage()``` (as above)

#### If you want to use parallax in a fragment please use one of the below views:
- [```ParallaxFrameLayout```][ParallaxFrame]
- [```ParallaxLinearLayout```][ParallaxLinear]
- [```ParallaxRelativeLayout```][ParallaxRelative]

#### And set there the [app:layout_parallaxFactor][ParallaxFactor] attribute:
```xml


```

All features which are not available in simple Slide Fragment are shown here: [Custom Slide]

## Things I have used to create this
- For parallax I have used files from [Material Intro] by [@HeinrichReimer]
- [InkPageIndicator.java] by [@NickButcher]
- Images used to create sample app are from [freepik]
- For over scroll effect on last slide I have partially used [Android-Overscroll-ViewPager]

## Getting Help

To report a specific problem or feature request, [open a new issue on Github](https://github.com/TangoAgency/material-intro-screen/issues/new).

## Company

[![Facebook](https://github.com/TangoAgency/material-intro-screen/blob/master/images/facebook.png)](https://www.facebook.com/TangoDigitalAgency)     [![Twitter](https://github.com/TangoAgency/material-intro-screen/blob/master/images/twitter.png)](https://twitter.com/Tango_Agency)     [![LinkedIn](https://github.com/TangoAgency/material-intro-screen/blob/master/images/linkedin.png)](https://www.linkedin.com/company/tango-digital-agency)

[Here](https://github.com/TangoAgency/) you can see open source work developed by Tango Agency.

Whether you're searching for a new partner or trusted team for creating your new great product we are always ready to start work with you.

You can contact us via [email protected].
Thanks in advance.

[Custom Slide]:
[Material Intro]:
[@HeinrichReimer]:
[InkPageIndicator.java]:
[@NickButcher]:
[freepik]:
[Simple slide]:
[Customslide]:
[Permission slide]:
[Finish slide]:
[Intro Activity]:
[Parallax Slide]:
[PermissionSlide]:
[FinishSlide]:
[SimpleSlide]:
[ParallaxFrame]:
[ParallaxLinear]:
[ParallaxRelative]:
[ParallaxFactor]:
[Manifest]:
[TranslationWrapper]:
[Android-Overscroll-ViewPager]: