Created: February 2016
By Arulnadhan
Skype: arulnadhandev
Email: arulnadhan@gmail.com

Thank you for purchasing our code. If you have any questions that are beyond the scope of this help file, Please feel free to email us.. Thanks so much!

Android Ultimate has over 25+ Modules embedded in a single template. These modules are categorized into three sections like Material Highlights, Android Patterns & Bonus. All these are modules are Ready to be used in your project. Every Module is imported into the template with a simple demo of the module. You can take a look at the setup section, Video tutorials & use these modules in your project.

To create this Awesome Template, we had to use some open source projects (foreign projects). Every foreign project is imported into workspace and converted to library module. So, if you would like to use features from these foreign projects, you can import them as library projects into your own (to do so, please take a look at this page).

Every module in this template has a mixture of UI Design & features. Some Module only has UI Design & some modules has both the UI Design & Features.
To identify the UI Design & Features Module easily, we have added Icons in every module.

- UI Design

- Feature Code Included.

The demo app of this Template is in the app module. This Module has lot of packages named as like the module name & the feature name. (Consider that you want to use the Bubbles in your Project. Then the app module will have a package called bubbles & the Template has a Module called Bubbles. Import those two in your projects & add the missing resources. Then the job is done.)

Every Package will have a Main Activity & the demo java files where the module has been implemented. If you want to do a different implementation other than the demo app. Then you can refer the Documentation. If you stuck at anything, you can mail or Skype us right away. We will provide you the best support available

1. Open Android studio.
2. Select Open an Existing Android Studio Project, Navigate to the Template Directory -> Source -> Select Android Ultimate.
3. After the project is loaded, hit the Run Button.
4. Choose your Device or Emulator and click OK.
5. The Template will be opened in the Device.

1. Open Android studio.
2. Open your Existing project in which the Module has to be added or create a new Project.
3. After creating/ opening the project in Android Studio.
4. Select File -> New -> Import Module
5. Browse for the Source Directory, Navigate to the Template Directory -> Source -> Expand Android Ultimate -> Select the Module Folder which has to be added.
6. Click Finish in the Add Module Dialog.
7. After adding the Module. You can refer the Module Documentation in our site. Then you can implement the module according to your needs. If you want to implement the same like our template. You can use our code from the Template.
8. If your using the Code from our Template. Be sure to add all the missing Layouts, resources from our Template Project.
9. After the module is added, hit the Run Button.
10. Choose your Device or Emulator and click OK.
11. The Template will be opened in the Device.

It provides greater control to customize its appearance unlike old ActionBar. Using Toolbar, application developer can now, show multiple toolbars on the screen, spanning only part of the width, etc.

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:background="#2196F3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
   </android.support.v7.widget.Toolbar>

To Know More

This Template has 2 different types of toolbar.

• 1. Collapsing Toolbar
• 2. Quick Return Toolbar

Collapsing Toolbar

Let’s take a look at how our XML structure will be first. The AppBarLayout will help us control the Toolbar behavior.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">
       <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="192dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
           <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginBottom="32dp"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
                <ImageView
                    android:id="@+id/header"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/header"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax" />
                <android.support.v7.widget.Toolbar
                    android:id="@+id/anim_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
           </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
        <android.support.v7.widget.RecyclerView
            android:id="@+id/scrollableview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:clickable="true"
            android:src="@drawable/ic_action_add"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="bottom|right|end" />
        
    </android.support.design.widget.CoordinatorLayout>

Quick Return Toolbar

The ‘Quick Return’ is a famous UI pattern seen in Android apps. It aims to dedicate the screen’s maximum possible real estate to content, instead of controls. With Android Design Support Library, the same which was harder in the past, is now quite easy!

< !-- Helps listen and react to events in child views -->
    < android.support.design.widget.CoordinatorLayout >
    < !-- Helps control Toolbar -->
        < android.support.design.widget.AppBarLayout >
            < android.support.v7.widget.Toolbar />
        < /android.support.design.widget.AppBarLayout>
    < !-- Our scrollable list with scroll behavior -->
       < android.support.v7.widget.RecyclerView /> 
    < /android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
       <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
           <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways" />
       </android.support.design.widget.AppBarLayout>
      <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </android.support.design.widget.CoordinatorLayout>

To Know More

How to use

First I have added the toolbar, Next element that I have added is the TabLayout which acts like a Tab Strip, you can place this strip anywhere in your layout but I want it to be above the pages that are being swiped so I am placing it just below the Toolbar, Next you add the View Pager which is required for swiping the pages.

In the code you define every view and then set the SlidingTabs. SetViewPager method to the ViewPager in your activity which is where you tell the app that on page swipe of your View Pager you want the tabs to swipe and change as well.

Note the new widgets I’m using. These are from the Design Support Library. If you’re not familiar with these new widgets, I suggest you go through this post.

That’s the skeleton of our activity layout. Let’s start defining it now. Open your Activity’s layout.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
       <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </android.support.design.widget.AppBarLayout>
        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </android.support.design.widget.CoordinatorLayout>

They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Floating action buttons come in two sizes:

• Default size: For most use cases
• Mini size: Only used to create visual continuity with other screen elements

To Know More

How to use

setupFABMenu(FloatingActionButton menuBase, int[] menuItemDrawables, int menuItemStyle, View.OnClickListener menuItemClickListener); 

Use the above function to create a menu for your FAB.

• menuBase - The FAB you want to add the menu to
• menuItemDrawables - List of the drawables you want to add to the menu
• menuItemStyle - Style the menu items your way
• menuItemClickListener - Handle the menu item that is selected. The 'id' of the menu item is its index in the 'menuItemDrawables' array

This is an implemention of https://dribbble.com/shots/2012292-Download-Animation

How to use

    startAnimating()
    setProgress() 

usereset() state., the button will recover to initial

This component is compatible with any existent FAB.

How to use

<me.arulnadhan.fabprogress.FABProgressCircle
    android:id="@+id/fabProgressCircle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
  <!-- You can change it with the fab from the library you want to use -->
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/ic_upload"
      app:rippleColor="@color/fab_ripple"
      app:elevation="@dimen/fab_elevation"
      app:borderWidth="0dp"
      />
</me.arulnadhan.fabprogress.FABProgressCircle>

fabView.setOnClickListener(new View.OnClickListener() {
  @Override public void onClick(View view) {
    fabProgressCircle.show();
    startYourAsynchronousJob();
  }
});

Custom Attributes

• app:arcColor="@color/progressArcColor": Sets the color for the arc, and for the final aspect of the FAB (after the transform animation).
• app:arcWidth="@dimen/arcStrokeWidth": Stroke width for the progress circle.
• app:finalIcon="@drawable/ic_done": By default, this library uses the typical ic_done icon at the end of the animation. Normally i would rather not to change it, but feel free to do it if you need to.
• app:reusable="true": By default, the FAB gets locked when the final animation finishes. Use this attr to allow using the FAB multiple times. A new fadeout anim will be played after completion, and the component will get reset to it's initial state.
• app:circleSize="normal" or app:circleSize="mini": Normally you will not use this attribute, as the default size for the circle is the normal one. But if you are working with a mini sized FAB, you will need to use it.
• app:roundedStroke="true": Use this one to have a rounded stroke on both progress circle heads. You will not really notice the difference for the default arcStrokeWidth, but you will if you are using a higher width to get some cool effects.

How to use

<me.arulnadhan.fabloading.LoadingView
    android:id="@+id/loading_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleX="1.5" //(optional)
    android:scaleY="1.5" // (optional)
    app:mfl_onclickLoading="true" //(optional)
    app:mfl_duration="200" //(optional)
    app:mfl_repeat="4" //(optional)
      />

 mLoadingView = (LoadingView) findViewById(R.id.loading_view);
  mLoadingView.addAnimation(yourColor,yourDrawable,yourLoadingType);

  //also you can add listener for getting callback (optional)
  mLoadingView.addListener(new LoadingView.LoadingListener() {
         @Override public void onAnimationStart(int currentItemPosition) {
         }

         @Override public void onAnimationRepeat(int nextItemPosition) {
         }

         @Override public void onAnimationEnd(int nextItemPosition) {
         }
        });

• Morphing Floating Action Button (or any other view that extends ImageView) into custom toolbar
• FAB image fade-out animation
• Toolbar elements fade-in animation
• Toolbar elements translation animation

How to use

 <me.arulnadhan.fabtoolbar.widget.FABToolbarLayout
    android:id="@+id/fabtoolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:showDuration="600"
    app:hideDuration="200"
    app:rightMargin="30dp"
    app:bottomMargin="30dp"
    app:fadeInFraction="0.2"
    app:fabId="@+id/fabtoolbar_fab"
    app:containerId="@+id/fabtoolbar_container"
    app:fabToolbarId="@+id/fabtoolbar_toolbar">

    ...

   <RelativeLayout
        android:id="@+id/fabtoolbar_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabtoolbar_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fabSize="normal"
            android:src="@drawable/abc_ic_menu_share_mtrl_alpha"/>

    </RelativeLayout>

   <LinearLayout
        android:id="@+id/fabtoolbar_toolbar"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/one"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scaleType="centerInside"
            android:src="@drawable/test"/>
        ...

    </LinearLayout>

</me.arulnadhan.fabtoolbar.widget.FABToolbarLayout> 

show();

hide();

Parameters:

<attr name="showDuration" format="integer"/>      //show animation duration (in ms), default: 600 ms
<attr name="hideDuration" format="integer"/>      //hide animation duration (in ms), default: 600 ms
<attr name="bottomMargin" format="dimension"/>    //FAB bottom margin (in dp), default: 100 px
<attr name="rightMargin" format="dimension"/>     //FAB right margin (in dp), default: 100 px
<attr name="fadeInPivotX" format="dimension"/>    //toolbar elements translation animation pivot X (in dp), default: 1/2 toolbar width
<attr name="fadeInPivotY" format="dimension"/>    //toolbar elements translation animation pivot Y (in dp), default: 1/2 toolbar height
<attr name="fadeInFraction" format="float"/>      //percent of translation animation, between element position and pivot point (float 0.0-1.0), default: 0.2
<attr name="fabId" format="reference"/>           //reference to the FAB view
<attr name="containerId" format="reference"/>     //reference to the FAB container view
<attr name="fabToolbarId" format="reference"/>    //reference to the FAB toolbar view
<attr name="fabDrawableAnimationEnabled" format="boolean"/> //enable or disable FAB cross-fade animation, default: true

<me.arulnadhan.fabreveal.FABRevealLayout
    android:id="@+id/fab_reveal_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/fab_reveal_height"
    >

   <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="@color/some_color"
        android:src="@drawable/some_drawable"
        />

   <RelativeLayout
        android:id="@+id/main_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        ...
   </RelativeLayout>

   <RelativeLayout
        android:id="@+id/secondary_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        ...
   </RelativeLayout>

</me.arulnadhan.fabreveal.FABRevealLayout>

private void configureFABReveal(FABRevealLayout fabRevealLayout) {
    fabRevealLayout.setOnRevealChangeListener(new OnRevealChangeListener() {
        @Override
        public void onMainViewAppeared(FABRevealLayout fabRevealLayout, View mainView) {}

        @Override
        public void onSecondaryViewAppeared(final FABRevealLayout fabRevealLayout, View secondaryView) {}
    });
}

fabRevealLayout.revealMainView();
fabRevealLayout.revealSecondaryView();

It has come up with a awesome solution to make use of Material AlertDialog in pre Lollipop devices without using any third party library integration. In order to use it so please update your sdk. Now let us see the step by step implementation of Material AlertDialog.

AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
                builder.setTitle("Dialog");
                builder.setMessage("Hello here is the best template of Android. 
                Lets make use of it");
                builder.setPositiveButton("OK", null);
                builder.setNegativeButton("Cancel", null);
                builder.show();

But since the Android team was building an enhancement, they added a bunch of new features to RecyclerView. Each one of these new features, give a platform to developers for implementing a highly custom made RecyclerView. One of the custom implementations of RecyclerView is the new Gmail app on Android.

How to use

Getting Started

<LinearLayout
    android:id="@+id/root"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <View
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
  </LinearLayout>

  <me.arulnadhan.bottomsheet.BottomSheetLayout
    android:id="@+id/bottomsheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <LinearLayout
        android:id="@+id/root"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

         <View
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

      </LinearLayout>

  </me.arulnadhan.bottomsheet.BottomSheetLayout>

BottomSheetLayout bottomSheet = (BottomSheetLayout) findViewById(R.id.bottomsheet);

bottomSheet.showWithSheetView(LayoutInflater.from(context).inflate(R.layout.my_sheet_layout, bottomSheet, false));

bottomSheet.showWithSheetView(new IntentPickerSheetView(this, shareIntent, "Share with...", new IntentPickerSheetView.OnIntentPickedListener() {
    @Override
    public void onIntentPicked(Intent intent) {
        bottomSheet.dismissSheet();
        startActivity(intent);
    }
});

To Know More

How to use - ScrollBar

 MaterialScrollBar materialScrollBar = new MaterialScrollBar(this, recyclerView, {{lightOnTouch}});

where 'recyclerView' is the recyclerView to which you want to link the scrollBar. "lightOnTouch" can either be true or false. A value of true will cause the handle to be grey until pressed, when it will become the normal accent colour (as set). A value of false will cause the handle to always have the accent colour, even when not being pressed.

It is also strongly recommended that you provide the accent colour if your app supports devices below Lollipop. You can do this by invoking:

materialScrollBar.setHandleColour([[Accent Colour]]);

How to use

 materialScrollBar.addIndicator({{Indicator}});

The indicator should be either AlphatbetIndicator, DateAndTimeIndicator, or CustomIndicator. See below for specific instructions per indicator.

To use an indicator, you MUST make your recyclerView's adapter implement the relevant interface. If you do not, the library will throw a runtime error informing you of your mistake. See documentation for the relevant interface.

How to use

<!— Must be last for right layering display —>
    <FrameLayout
        android:id="@+id/toolbar_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/theme_primary" />

        <me.arulnadhan.searchview.MaterialSearchView
            android:id="@+id/search_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </FrameLayout>

  <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_action_action_search"
        android:orderInCategory="100"
        android:title="@string/abc_search_hint"
        app:showAsAction="always" />

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);

        MenuItem item = menu.findItem(R.id.action_search);
        searchView.setMenuItem(item);

        return true;
            }

   MaterialSearchView searchView = (MaterialSearchView) findViewById(R.id.search_view);
    searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                //Do some magic
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                //Do some magic
                return false;
            }
        });

        searchView.setOnSearchViewListener(new MaterialSearchView.SearchViewListener() {
            @Override
            public void onSearchViewShown() {
                //Do some magic
            }

            @Override
            public void onSearchViewClosed() {
                //Do some magic
            }
        });

Use VoiceSearch

  searchView.setVoiceSearch(true); //or false

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == MaterialSearchView.REQUEST_VOICE && resultCode == RESULT_OK) {
            ArrayList matches = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
            if (matches != null && matches.size() > 0) {
                String searchWrd = matches.get(0);
                if (!TextUtils.isEmpty(searchWrd)) {
                    searchView.setQuery(searchWrd, false);
                }
            }

            return;
        }
        super.onActivityResult(requestCode, resultCode, data);
    }

How to use

1. Implement an OnDateSetListener or OnTimeSetListener
2. Create a `DatePickerDialog using the supplied factory

Implement an OnDateSetListener

In order to receive the date set in the picker, you will need to implement the OnDateSetListener interfaces. Typically this will be the Activity or Fragment that creates the Pickers.

Implement an OnTimeSetListener

In order to receive the time set in the picker, you will need to implement the OnTimeSetListener interfaces. Typically this will be the Activity or Fragment that creates the Pickers.

  //new onDateSet
@Override
public void onDateSet(DatePickerDialog view, int year, int monthOfYear, int dayOfMonth,int yearEnd, int monthOfYearEnd, int dayOfMonthEnd) {

}

@Override
public void onTimeSet(DatePickerDialog view, int year, int monthOfYear, int dayOfMonth,int yearEnd, int monthOfYearEnd, int dayOfMonthEnd) {
        String hourString = hourOfDay < 10 ? "0"+hourOfDay : ""+hourOfDay;
        String minuteString = minute < 10 ? "0"+minute : ""+minute;
        String hourStringEnd = hourOfDayEnd < 10 ? "0"+hourOfDayEnd : ""+hourOfDayEnd;
        String minuteStringEnd = minuteEnd < 10 ? "0"+minuteEnd : ""+minuteEnd;
        String time = "You picked the following time: From - "+hourString+"h"+minuteString+" To - "+hourStringEnd+"h"+minuteStringEnd;

        timeTextView.setText(time);

}

Create a DatePickerDialog` using the supplied factory

Calendar now = Calendar.getInstance();
DatePickerDialog dpd = DatePickerDialog.newInstance(
  MainActivity.this,
  now.get(Calendar.YEAR),
  now.get(Calendar.MONTH),
  now.get(Calendar.DAY_OF_MONTH)
);
dpd.show(getFragmentManager(), "Datepickerdialog");

Create a TimePickerDialog` using the supplied factory

 Calendar now = Calendar.getInstance();
TimePickerDialog tpd = TimePickerDialog.newInstance(
                        MainActivity.this,
                        now.get(Calendar.HOUR_OF_DAY),
                        now.get(Calendar.MINUTE),
                        false
                );
tpd.show(getFragmentManager(), "Timepickerdialog");

How to use

public class MyIntro extends AppIntro {

    // Please DO NOT override onCreate. Use init.
    @Override
    public void init(Bundle savedInstanceState) {

        // Add your slide's fragments here.
        // AppIntro will automatically generate the dots indicator and buttons.
        addSlide(first_fragment);
        addSlide(second_fragment);
        addSlide(third_fragment);
        addSlide(fourth_fragment);

        // Instead of fragments, you can also use our default slide
        // Just set a title, description, background and image. AppIntro will do the rest.
        addSlide(AppIntroFragment.newInstance(title, description, image, background_colour));

        // OPTIONAL METHODS
        // Override bar/separator color.
        setBarColor(Color.parseColor("#3F51B5"));
        setSeparatorColor(Color.parseColor("#2196F3"));

        // Hide Skip/Done button.
        showSkipButton(false);
        setProgressButtonEnabled(false);

        // Turn vibration on and set intensity.
        // NOTE: you will probably need to ask VIBRATE permisssion in Manifest.
        setVibrate(true);
        setVibrateIntensity(30);
    }

    @Override
    public void onSkipPressed() {
    // Do something when users tap on Skip button.
    }

    @Override
    public void onDonePressed() {
    // Do something when users tap on Done button.
    }

        @Override
    public void onSlideChanged() {
    // Do something when the slide changes.
    }

    @Override
    public void onNextPressed() {
    // Do something when users tap on Next button.
    }

}

<activity android:name="com.example.example.intro"
        android:label="@string/app_intro" />

And since it’s usually the very first impression people have about your app it’s super important to get it right.

We have created beautiful login screens the right way using Material design spec with the assistance of Google’s new design support library. The design support library implements a growing subset of the Material spec, and also includes a bunch of sexy UI widgets that can be used to give your Android apps that polished feel.

On the design and layout side of things, the focus here is on balancing the screen elements in a way that’s pleasing to the eye. To add the finishing touches we will also be styling the top status bar on newer devices , and utilising floating labels from the design library (implemented via the TextInputLayout tag).

• Conforms to the Material design spec.
• Floating labels from the design library.
• Custom status bar style.

• 1. Animated Login Screen
• 2. Social Login Screen
• 3. Video Login Screen
• 4. Material Login Screen

How to use

<  ?xml version="1.0" encoding="utf-8"?>
  <me.arulnadhan.swipablelayout.SwipeableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    android:orientation="vertical">

    <!--Add your child views here-->

  </me.arulnadhan.swipablelayout.SwipeableLayout>

       <item name="windowNoTitle">true </item>
       <item name="android:windowIsTranslucent">true </item>
       <item name="android:windowBackground">@android:color/transparent </item>
       <item name="android:windowNoTitle">true </item>
       <item name="windowActionBar">false </item>
       <item name="android:windowAnimationStyle">@null </item>

 SwipeableLayout swipeableLayout = (SwipeableLayout) findViewById(R.id.swipableLayout);
        swipeableLayout.setOnLayoutCloseListener(new SwipeableLayout.OnLayoutCloseListener() {
            @Override
            public void OnLayoutClosed() {
                //TODO finish or do smth
            }
        });

Adding your first Bubble

<me.arulnadhan.bubbles.BubbleLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="center"
        android:background="@drawable/profile_decorator"
        android:src="@drawable/profile"
        android:scaleType="centerCrop"/>

</me.arulnadhan.bubbles.BubbleLayout>

private BubblesManager bubblesManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
     bubblesManager = new BubblesManager.Builder(this)
                                        .build();
     bubblesManager.initialize();
    ...
}

@Override
protected void onDestroy() {
    bubblesManager.recycle();
    ...
}

BubbleLayout bubbleView = (BubbleLayout)LayoutInflater
                                    .from(MainActivity.this).inflate(R.layout.bubble_layout, null);
bubblesManager.addBubble(bubbleView, 60, 20);

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:src="@mipmap/bubble_trash_background"
    android:layout_gravity="bottom|center_horizontal" />

private BubblesManager bubblesManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
     bubblesManager = new BubblesManager.Builder(this)
                                        .setTrashLayout(R.layout.bubble_trash_layout)
                                        .build();
     bubblesManager.initialize();
    ...
}

This library is compatible with Android ICS 4.0 and upwards. Backward compatibility is possible with nineoldandroids library, but not implemented.

How to use

AchievementUnlocked test = new AchievementUnlocked(YourActivity.this).setTitle("Title").setIcon(getDrawable(R.drawable.gpg)).setSubTitle("Subtitle").build().show();

.setAchievementListener
There are four options, each represents a stage of an achievements animations. They come with booleans that represent the end of corresponding stage (such as "boolean created"). 

.setAchievementListener(new AchievementUnlocked.achievementListener() {
 @Override
public void onAchievementBeingCreated(AchievementUnlocked achievement, boolean created) {

}

 @Override
public void onAchievementExpanding(AchievementUnlocked achievement, boolean expanded) {

}

 @Override
 public void onAchievementShrinking(AchievementUnlocked achievement, boolean shrunken) {

}
	
@Override
public void onAchievementBeingDestroyed(AchievementUnlocked achievement, boolean destroyed) {
	 }
 });

.alignTop(boolean)
By default, achievement pop-ups are aligned to top, you can use .alignTop(false) to align it to bottom

.setBackgroundDrawable(Drawable)
You can set your own background to an achievement using this option.

.isLarge(boolean)
Specify whether or not you want the achievement to be large. Default is small

.isRounded(boolean)
The default background is rounded, you can override that by using .isRounded(false)

.getAchievementView()
Returns the achievement container view. You can use this view to attach custom listener, such as Swipe listener.

.getIconView()
Returns the icon container view (not an ImageView). You can use this option to animate the icon.

• 1. Swiperefresh
• 2. Fly Refresh

SwipeRefreshLayout

It can be achieved using either the SwipeRefreshLayout from the support library, which was recently introduced and back-ported to all versions down to Android API level 4. SwipeRefreshLayout is a ViewGroup that can hold only one scrollable view as a child. This can be either a ScrollView or anAdapterView such as a ListView or a RecyclerView.

< android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipeContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

 <android.support.v7.widget.RecyclerView
      android:id="@+id/rvItems"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true" />

</android.support.v4.widget.SwipeRefreshLayout>

Features

• Appearance animations for items in ListViews, GridViews, other AbsListViews;
  • Built in animations include Alpha, SwingRightIn, SwingLeftIn, SwingBottomIn, SwingRightIn and ScaleIn.
  • Other animations can easily be added
  • StickyListHeaders is supported, other implementations can easily be added.
• Swipe-to-Dismiss, Swipe-To-Dismiss with contextual undo;
• Drag-and-Drop reordering;
• Animate addition of items;
• Smoothly expand your items to reveal more content;

Appearance animations

The classes in the me.arulnadhan.listviewanimations.appearance package provide a way for you to add more fancyness to your ListViews when showing data for the first time. Instead of snapping the items into view, the AnimationAdapter class lets you gradually present your items to the user:

To implement this behaviour, you need to wrap your original adapter in an AlphaInAnimationAdapter:

MyAdapter myAdapter = new MyAdapter();
AlphaInAnimationAdapter animationAdapter = new AlphaInAnimationAdapter(myAdapter);
animationAdapter.setAbsListView(mListView);
mListView.setAdapter(animationAdapter);

You can create your own AnimationAdapter implementation, or use one of the predefined ones:

• AlphaAnimationAdapter
• ScaleInAnimationAdapter
• SwingBottomInAnimationAdapter
• SwingLeftInAnimationAdapter
• SwingRightInAnimationAdapter

DynamicListView

The DynamicListView is a convenience class which provides drag and drop, swipe to dismiss and insertion animation functionality. It has been designed to combine these features in a most optimal way:

< me.arulnadhan.listviewanimations.itemmanipulation.DynamicListView
        android:id="@+id/dynamiclistview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Drag and drop

To enable drag and drop, simply call enableDragAndDrop() on your DynamicListView, and specify when items are draggable. To specify a child view which can be touched to initiate a drag, you can use a TouchViewDraggableManager:

 mDynamicListView.enableDragAndDrop();
mDynamicListView.setDraggableManager(new TouchViewDraggableManager(R.id.itemrow_gripview));

You can also initiate a drag by calling startDragging(int), for example in an OnItemLongClickListener:

mDynamicListView.enableDragAndDrop();
mDynamicListView.setOnItemLongClickListener(
    new OnItemLongClickListener() {
        @Override
        public boolean onItemLongClick(final AdapterView
 parent, final View view,
                                       final int position, final long id) {
            mDynamicListView.startDragging(position);
            return true;
        }
    }
);

Swipe to dismiss

mDynamicListView.enableSwipeToDismiss(
    new OnDismissCallback() {
        @Override
        public void onDismiss(@NonNull final ViewGroup listView, @NonNull final int[] reverseSortedPositions) {
            for (int position : reverseSortedPositions) {
                mAdapter.remove(position);
            }
        }
    }
);

Swipe to dismiss with contextual undo

MyAdapter myAdapter = new MyAdapter();
SimpleSwipeUndoAdapter swipeUndoAdapter = new SimpleSwipeUndoAdapter(myAdapter, MyActivity.this,
    new OnDismissCallback() {
        @Override
        public void onDismiss(@NonNull final ViewGroup listView, @NonNull final int[] reverseSortedPositions) {
            for (int position : reverseSortedPositions) {
                mAdapter.remove(position);
            }
        }
    }
);
swipeUndoAdapter.setAbsListView(mDynamicListView);
mDynamicListView.setAdapter(swipeUndoAdapter);
mDynamicListView.enableSimpleSwipeUndo();

Animate addition

MyInsertableAdapter myAdapter = new MyInsertableAdapter(); // MyInsertableAdapter implements Insertable
mDynamicListView.setAdapter(myAdapter);
mDynamicListView.insert(0, myItem); // myItem is of the type the adapter represents.

StickyListHeaders

StickyListHeadersListView listView = (...);
AlphaInAnimationAdapter animationAdapter = new AlphaInAnimationAdapter(adapter);
StickyListHeadersAdapterDecorator stickyListHeadersAdapterDecorator = new StickyListHeadersAdapterDecorator(animationAdapter);
stickyListHeadersAdapterDecorator.setStickyListHeadersListView(listView);
listView.setAdapter(stickyListHeadersAdapterDecorator);

Includes the brand new Roboto Slab fonts.

• Roboto
• Roboto Condensed
• Roboto Slab

How to use

< me.arulnadhan.robototextview.widget.RobotoTextView
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:typeface="roboto_light_italic"/>

< me.arulnadhan.robototextview.widget.RobotoTextView
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fontFamily="roboto"
            app:textWeight="light"
            app:textStyle="italic"/>

RobotoTextView textView = new RobotoTextView(context);
Typeface typeface = RobotoTypefaceManager.obtainTypeface(
        context, 
        RobotoTypefaceManager.Typeface.ROBOTO_LIGHT_ITALIC);
RobotoTextViewUtils.setTypeface(textView, typeface);

RobotoTextView textView = new RobotoTextView(context);
Typeface typeface = RobotoTypefaceManager.obtainTypeface(
        context, 
        RobotoTypefaceManager.FontFamily.ROBOTO,
        RobotoTypefaceManager.TextWeight.LIGHT,
        RobotoTypefaceManager.TextStyle.ITALIC);
RobotoTextViewUtils.setTypeface(textView, typeface);

RobotoTypefaceSpan span = new RobotoTypefaceSpan(
        context,
        RobotoTypefaceManager.Typeface.ROBOTO_BOLD);
Spannable spannable = new SpannableString("text");
spannable.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

RobotoTypefaceSpan span = new RobotoTypefaceSpan(
        context,
        RobotoTypefaceManager.FontFamily.ROBOTO,
        RobotoTypefaceManager.TextWeight.LIGHT,
        RobotoTypefaceManager.TextStyle.ITALIC);
Spannable spannable = new SpannableString("text");
spannable.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

How to use

 mSweetSheet = new SweetSheet(rl);
mSweetSheet.setMenuList(list);
mSweetSheet.setDelegate(new RecyclerViewDelegate(true));
mSweetSheet.setBackgroundEffect(new BlurEffect(8));
mSweetSheet.setOnMenuItemClickListener(new SweetSheet.OnMenuItemClickListener() {
    @Override
    public boolean onItemClick(int position, MenuEntity menuEntity1) {

        Toast.makeText(MainActivity.this, menuEntity1.title + "  " + position, Toast.LENGTH_SHORT).show();
        return true;
    }
}); 

mSweetSheet3 = new SweetSheet(rl);
CustomDelegate customDelegate = new CustomDelegate(true,
        CustomDelegate.AnimationType.DuangLayoutAnimation);
View view = LayoutInflater.from(this).inflate(R.layout.layout_custom_view, null, false);
customDelegate.setCustomView(view);
mSweetSheet3.setDelegate(customDelegate);
view.findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mSweetSheet3.dismiss();
    }
});

How to use

/**
          * PinterestView'layoutParams must match_parent or fill_parent,
          * just for cover the whole screen
          */
         pinterestView = (PinterestView) findViewById(R.id.item_layout);
         /**
          * add item view into pinterestView
          */
         pinterestView.addShowView(40,createCircleImage(R.drawable.googleplus)
         ,createCircleImage(R.drawable.linkedin),createCircleImage(R.drawable.twitter)
         ,createCircleImage(R.drawable.pinterest));
         /**
          * add pinterestview menu and Pre click view click
          */
         pinterestView.setPinClickListener(new PinterestView.PinMenuClickListener() {

             @Override
             public void onMenuItemClick(int childAt) {
                 Toast.makeText(MainActivity.this, "onMenuItemClick" + childAt, Toast.LENGTH_SHORT).show();
             }

             @Override
             public void onPreViewClick() {
                 Toast.makeText(MainActivity.this, "onPreViewClick", Toast.LENGTH_SHORT).show();
             }
         });
         /**
          * dispatch pre click view onTouchEvent to PinterestView
          */
         findViewById(R.id.text).setOnTouchListener(new View.OnTouchListener() {
             @Override
             public boolean onTouch(View v, MotionEvent event) {
                 pinterestView.dispatchTouchEvent(event);
                 return true;
             }
         });

 <me.arulnadhan.androidultimate.ShareView.PinterestView
        xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:id="@+id/item_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#50000000"
        custom:childSize="44px"
        android:visibility="gone"
        custom:fromDegrees="150.0"
        custom:toDegrees="300.0" />

        //Note,this two params don'n need now,it can be auto compute 
        //degrees range by position u click(a little bit coarse)
        custom:fromDegrees="150.0"
        custom:toDegrees="300.0"

How to use

  Text textDaai = TextBuilder
      .create("Welcome to Android Ultimate")
      .setSize(64)
      .setAlpha(0)
      .setColor(Color.WHITE)
      .setPosition(Align.SURFACE_CENTER).build();

textSurface.play(
      new Sequential(
              Slide.showFrom(Side.TOP, textDaai, 500),
              Delay.duration(500),
              Alpha.hide(textDaai, 1500)
      )
);

How to use

   <me.arulnadhan.library.ElasticDownloadView
        android:id="@+id/elastic_download_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

  @InjectView(R.id.elastic_download_view) ElasticDownloadView mElasticDownloadView;
    mElasticDownloadView.startIntro();

 mElasticDownloadView.setProgress(25); 

  mElasticDownloadView.success(); //This function moves the cursor to 100 if the progress has not been set already
    mElasticDownloadView.fail();

To create this Awesome Template, we had to use some open source projects. We have described in documentation and shown in our demo app how to use these projects. These projects are from GitHub or elsewhere. All of them have licence that allows us to import the project in our project and then sell it on Envato.
We will list every foreign project that is used in this project with a link to it. If you have any questions regarding lack of foreign projects documentation, don’t hesitate to email us. We will try to help you.

Projects we used for this template are:

Recycler View - Link
Bottom sheet - Link
Material Scrollbar - Link
SearchView - Link
Material Picker - Link

Android Patterns

Bonus