Convert Figma logo to code with AI

TangoAgency logomaterial-intro-screen

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

2,713
410
2,713
57

Top Related Projects

[Archived] Highlight the best bits of your app to users quickly, simply, and cool...ly

10,507

Make a cool intro for your Android app.

A simple material design app intro with cool animations and a fluent API.

A material horizontal calendar view for Android based on RecyclerView

An implementation of tap targets from the Material Design guidelines for feature discovery.

Quick Overview

Material Intro Screen is an Android library that provides a simple way to implement an attractive and customizable introduction screen for mobile applications. It follows Material Design guidelines and offers a smooth, animated user experience for onboarding new users to an app's features.

Pros

  • Easy to implement and customize
  • Follows Material Design guidelines for a modern look
  • Supports both light and dark themes
  • Offers smooth animations and transitions between slides

Cons

  • Limited to Android platform only
  • May require additional work to integrate with complex app architectures
  • Documentation could be more comprehensive
  • Not actively maintained (last update was in 2018)

Code Examples

Creating a basic intro screen:

class IntroActivity : MaterialIntroActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        addSlide(SimpleSlide.Builder()
            .title("Welcome")
            .description("This is a sample intro screen")
            .image(R.drawable.welcome_image)
            .background(R.color.background_color)
            .build())
    }
}

Adding a custom slide with a button:

addSlide(CustomSlide.Builder()
    .title("Custom Slide")
    .description("This slide has a custom button")
    .image(R.drawable.custom_image)
    .buttonText("Click me")
    .buttonClickListener { Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show() }
    .build())

Customizing the intro screen appearance:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    
    setSkipButtonVisible(true)
    setFinishButtonVisible(true)
    setButtonsEnabled(true)
    setColorTransitionsEnabled(true)
    setIndicatorVisible(true)
}

Getting Started

  1. Add the dependency to your build.gradle file:
dependencies {
    implementation 'agency.tango.android:material-intro-screen:0.0.5'
}
  1. Create an activity that extends MaterialIntroActivity:
class MyIntroActivity : MaterialIntroActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        addSlide(SimpleSlide.Builder()
            .title("Welcome")
            .description("This is your first slide")
            .image(R.drawable.intro_image)
            .background(R.color.background_color)
            .build())
        
        // Add more slides as needed
    }
}
  1. Start the intro activity from your main activity:
startActivity(Intent(this, MyIntroActivity::class.java))

Competitor Comparisons

[Archived] Highlight the best bits of your app to users quickly, simply, and cool...ly

Pros of ShowcaseView

  • More flexible and customizable for highlighting specific UI elements
  • Lightweight and focused on showcasing individual views
  • Easier to integrate into existing apps without major changes

Cons of ShowcaseView

  • Less suitable for creating full onboarding experiences
  • Lacks built-in navigation between multiple showcase items
  • May require more manual setup for complex intro sequences

Code Comparison

ShowcaseView:

new ShowcaseView.Builder(this)
    .setTarget(new ViewTarget(findViewById(R.id.button)))
    .setContentTitle("Hello!")
    .setContentText("This is a showcase view")
    .hideOnTouchOutside()
    .build();

material-intro-screen:

new MaterialIntroBuilder()
    .addSlide(new SimpleSlide.Builder()
        .title("Welcome!")
        .description("This is a material intro screen")
        .image(R.drawable.intro_image)
        .build())
    .build();

ShowcaseView focuses on highlighting individual UI elements, while material-intro-screen is designed for creating full-screen intro sequences. ShowcaseView offers more granular control over specific views, whereas material-intro-screen provides a more structured approach to building onboarding experiences with multiple slides and built-in navigation.

10,507

Make a cool intro for your Android app.

Pros of AppIntro

  • More extensive customization options for intro screens
  • Larger community and more frequent updates
  • Better documentation and examples

Cons of AppIntro

  • Slightly more complex setup process
  • Heavier library with more dependencies

Code Comparison

material-intro-screen:

class IntroActivity : MaterialIntroActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableLastSlideAlphaExitTransition(true)
        addSlide(SimpleSlide.Builder()
            .title("Title")
            .description("Description")
            .image(R.drawable.image)
            .background(R.color.background_color)
            .build())
    }
}

AppIntro:

class IntroActivity : AppIntro() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        addSlide(AppIntroFragment.newInstance(
            title = "Title",
            description = "Description",
            imageDrawable = R.drawable.image,
            backgroundColor = getColor(R.color.background_color)
        ))
        setIndicatorColor(
            selectedIndicatorColor = getColor(R.color.selected_indicator),
            unselectedIndicatorColor = getColor(R.color.unselected_indicator)
        )
    }
}

Both libraries offer similar functionality for creating intro screens, but AppIntro provides more granular control over individual elements and styling. material-intro-screen has a simpler API, which may be preferable for basic intro screens. AppIntro's larger community and more frequent updates make it a more robust choice for long-term projects.

A simple material design app intro with cool animations and a fluent API.

Pros of material-intro

  • More recent updates and active development
  • Better documentation and usage examples
  • Supports more customization options for intro screens

Cons of material-intro

  • Fewer stars and forks on GitHub
  • Less comprehensive feature set compared to material-intro-screen
  • May require more setup and configuration

Code Comparison

material-intro-screen:

new MaterialIntroBuilder()
    .addSlide(new SimpleSlide.Builder()
        .title("Title")
        .description("Description")
        .image(R.drawable.image)
        .background(R.color.background_color)
        .build())
    .build();

material-intro:

MaterialIntroActivity.Builder builder = new MaterialIntroActivity.Builder();
builder.addSlide(new SimpleSlide.Builder()
    .title("Title")
    .description("Description")
    .image(R.drawable.image)
    .backgroundColor(R.color.background_color)
    .build());
IntroActivity.launch(this, builder.build());

Both libraries offer similar functionality for creating intro screens, but material-intro-screen provides a more streamlined API and additional features. material-intro may be a good choice for developers who need more control over the intro screen behavior and appearance, while material-intro-screen offers a more comprehensive out-of-the-box solution.

A material horizontal calendar view for Android based on RecyclerView

Pros of Horizontal-Calendar

  • Focused on a specific UI component (horizontal calendar) for easier integration
  • Lightweight and simple to use
  • Customizable appearance with various styling options

Cons of Horizontal-Calendar

  • Limited to calendar functionality, less versatile for general app introductions
  • Less actively maintained (last update 5 years ago)
  • Fewer stars and forks, indicating potentially less community support

Code Comparison

material-intro-screen:

public class IntroActivity extends AppIntro {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        addSlide(SimpleSlide.newInstance(R.layout.fragment_simple_slide));
    }
}

Horizontal-Calendar:

HorizontalCalendar horizontalCalendar = new HorizontalCalendar.Builder(this, R.id.calendarView)
    .startDate(startDate)
    .endDate(endDate)
    .datesNumberOnScreen(5)
    .build();

Summary

material-intro-screen is a comprehensive solution for creating app introduction screens with multiple slides and customization options. It's more actively maintained and has a larger community following.

Horizontal-Calendar, on the other hand, is a specialized library for implementing horizontal calendars in Android apps. It's simpler to use for its specific purpose but lacks the versatility of material-intro-screen for creating full app introductions.

Choose material-intro-screen for complete app onboarding experiences, and Horizontal-Calendar for implementing a specific calendar UI component.

An implementation of tap targets from the Material Design guidelines for feature discovery.

Pros of TapTargetView

  • More focused on highlighting specific UI elements
  • Lightweight and easy to integrate into existing apps
  • Supports custom shapes and animations for target views

Cons of TapTargetView

  • Limited to showcasing individual elements, not full-screen introductions
  • Less customization options for overall app onboarding flow
  • Requires more manual setup for multiple targets

Code Comparison

TapTargetView:

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        .outerCircleColor(R.color.red)
        .targetCircleColor(R.color.white)
        .titleTextSize(20)
        .titleTextColor(R.color.white)
        .descriptionTextSize(10)
        .descriptionTextColor(R.color.red)
        .textColor(R.color.blue)
        .dimColor(R.color.black)
        .drawShadow(true)
        .cancelable(false)
        .tintTarget(true)
        .transparentTarget(false)
        .targetRadius(60));

material-intro-screen:

new MaterialIntroActivity()
    .addSlide(new SimpleSlide.Builder()
        .title("Title")
        .description("Description")
        .image(R.drawable.image_1)
        .background(R.color.background_color)
        .build())
    .addSlide(new CustomSlide())
    .enableFadeAnimation(true)
    .build();

The code comparison shows that TapTargetView focuses on individual element highlighting, while material-intro-screen provides a more comprehensive intro screen setup.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Android Material Intro Screen

Download Codacy Badge Build Status Android Arsenal Material Intro Screen

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

Simple slideCustom slidePermission slideFinish slide
Simple slideCustomslidePermission slideFinish slide

Usage

Step 1:

Add gradle dependecy

dependencies {
  compile 'agency.tango.android:material-intro-screen:{latest_release}'
}

Step 2:

First, your intro activity class needs to extend MaterialIntroActivity:

public class IntroActivity extends MaterialIntroActivity

Step 3:

Add activity to manifest with defined theme:

        <activity
            android:name=".IntroActivity"
            android:theme="@style/Theme.Intro" />

Step 4:

Add slides:

 @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

getBackButtonTranslationWrapper()
                .setEnterTranslation(new IViewTranslation() {
                    @Override
                    public void translate(View view, @FloatRange(from = 0, to = 1.0) float percentage) {
                        view.setAlpha(percentage);
                    }
                });

Available translation wrappers:

  • 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:

And set there the app:layout_parallaxFactor attribute:

<agency.tango.materialintroscreen.parallax.ParallaxLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:id="@+id/image_slide"
        app:layout_parallaxFactor="0.6"/>

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

Things I have used to create this

Getting Help

To report a specific problem or feature request, open a new issue on Github.

Company

Facebook     Twitter     LinkedIn

Here 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 contact@tango.agency. Thanks in advance.