Ripple Animation Tutorial with Example in Android

Material Design Animations

1.Touch Feedback- Ripple Animation
2. Activity Transition Animations
-Explode Animation
- Slide Animation
-Fade Animation
-Shared Element Transition Animation
3. Circular Reveal Animation

Getting Started with Android Material Design

       Here we are going to cover topic Material themes, which is most talked feature that got introduced with Lollipop release. We will learn how to setup project to use material theme in pre-Lollipop and Lollipop and above versions Ie. API 21 and above.

Introduction to material design in Android

     Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. 
To use material design in your Android apps, follow the guidelines defined in the material design specification and use the new components and functionality available in Android 5.0 (API level 21) and above.

Android provides the following elements for you to build material design apps:
A new theme
New widgets for complex views
New APIs for custom shadows and animations
Following are the major introduction with Material Design APIs.

Material Theme
The material theme provides a new style for your app, system widgets that let you set their color palette, and default animations for touch feedback and activity transitions.
Lists and Cards
Android provides two new widgets for displaying cards and lists with material design styles and animations:

View Shadows
In addition to the X and Y properties, views in Android now have a Z property. This new property represents the elevation of a view, which determines:

  • The size of the shadow: views with higher Z values cast bigger shadows.
  • The drawing order: views with higher Z values appear on top of other views.

Animations
The new animation APIs let you create custom animations for touch feedback in UI controls, changes in view state, and activity transitions.

These APIs let you:

  • Respond to touch events in your views with touch feedback animations.
  • Hide and show views with circular reveal animations.
  • Switch between activities with custom activity transition animations.
  • Create more natural animations with curved motion.
  • Animate changes in one or more view properties with view state change animations.
  • Show animations in state list drawables between view state changes.
  • Touch feedback animations are built into several standard views, such as buttons. The new APIs let you customize these animations and add them to your custom views.

We will see these things one by one in coming posts.


AngularJS Events Example

    Event handling in AngularJS is pretty simple. There are ample events in AngularJS for better user interaction. We can handle DOM events like mouse clicks, moves, keyboard events etc.,

ng-focus example in angularjs

      ng-focus directive executes when an element gets focus. This can be used in many different ways and below I have represented few of the examples.


ng-copy, ng-cut, ng-paste example in AngularJS

        ng-copy, ng-cut, ng-paste are some basic AngularJS events used to perform copy (Ctrl + C), paste (Ctrl + V) and cut (Ctrl + X) action that we perform using keyboards. Lets see them with some example.


ng-change example in AngularJS

    ng-change event directive is fired when there is change in the input value or in other words whenever your HTML element changes ng-change is triggered.

ng-change syntax : 

<ng-change
  ng-change="expression">
...
</ng-change>

Lets see this event directive in action with some simple examples.

Example 1: Change in Checkbox element
    So in this example we are incrementing the counter($scope.counter) whenever the checkbox is selected or unselected. The output gif would explain it much better.

<!DOCTYPE html>
<html>
<script
 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
 <div ng-controller="myCtrl">
  <p>Check :</p>

  <input type="checkbox" ng-model="myValue" ng-change="myFunc()" />

  <p>The Checkbox has changed {{count}} times.</p>
 </div>

 <script>
  angular.module('myApp', []).controller('myCtrl',
    [ '$scope', function($scope) {
     $scope.count = 0;
     $scope.myFunc = function() {
      $scope.count++;
     };
    } ]);
 </script>
 
</body>
</html>


Output : 
Example 2 : Change in Dropdown element
   In this example, we have invoked the counter incrementing function when the drop down element is changed

<!DOCTYPE html>
<head>
<script
 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtrl">
  <select ng-change="myFunc()" class="form-control"
   ng-model="selectDemo">
   <option>ONE</option>
   <option>TWO</option>
   <option>THREE</option>
  </select> <br /> <br />

  <p>
   Total number of times drop down selected:<b>{{count}} </b>
  </p>
 </div>

 <script>
  var app = angular.module("myApp", []);
  app.controller('myCtrl', [ '$scope', function($scope) {
   $scope.count = 0;
   $scope.myFunc = function() {
    $scope.count = $scope.count + 1;
   }
  } ]);
 </script>
</body>
</html>


Output 

Hope  these examples gives a good understanding on ng-change event directive in AngularJS.


ng-blur example in AngularJS

       AngularJS ng-blur event directive fires when an input element loses its focus. In case if you want to call an function or fire an event ng-blur helps. This angularjs ng-blur event directive is supported by <input>, <select>, <textarea> elements.

AngularJS Include html example and tutorial

         Include in AngularJS is an interesting topic where you can embed external Html file into another html file. This feature is not possible in regular Html file without angular JS. ng-include is the AngularJS directive used to achieve this functionality. 


AngularJS Scope Tutorial

      As we already know, Angular JS consists of Model, View and Controller

View - it is the HTML portion
Controller - Controllers are javascript functions that controls the data of AngularJS applications
Model  - is data of AngularJS applcation

So, Scope is Model in AngularJS

     Scope in AngularJS is like a bridge between controller and view and you need scope every time you create a controller. Scope is nothing but a Javascript object. Scope is available for both View and Controller.  

Lets see this with an example that will give a clean picture of what we are talking theoretically..

AngularJSScope.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>My Name is <b>{{name}}</b></p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name= "Rob";
});
</script>

</body>
</html>

Lets see this code as Model, View and Controller

Controller
     Controller is nothing but a Javascript function. Every controller should have scope - $scope. The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name= "Rob";
});
</script>

View
     View is what displays your data. So the property from controller is displayed here
<div ng-app="myApp" ng-controller="myCtrl">
<p>My Name is <b>{{name}}</b></p>
</div>

Model
$scope.name= "Rob";

scope is the model.

Output of the program

My Name is Rob

Hope this tutorial helps you to understand the below stuff :
  • Scope in AngularJS
  • Relating model scope AngularJS



Filters in AngularJS Tutorial with example

        Filters in AngularJS formats the value of expression for display to the user. There are many number of filters in AngularJS but the following are commonly used

Tables in AngularJS Example

       In this tutorial lets see how to design AngularJS tutorial using ng-repeat directive. Generally tables are repeating structure, so ng-repeat directive can be used to draw tables easily..

Method in AngularJS Example

        In this tutorial lets see how to define and invoke a AngularJS method from html. Methods help us to reuse functionality across your HTML code. So we are going to input two fields from the UI, append both in the method and display it back.

Expressions in AngularJS

      AngularJS expressions bind application data to HTML. So how do you make AngularJS understand that you are writing an expression ? We need to specify expressions within curly braces as shown below :
Syntax : {{Expression}}

MVC in AngularJS Example

     AngularJS is MVC based framework. In this tutorial we will see what is Model, View and Controller in general and how this can be related to AngularJS with clear explanation and appropriate example.

AngularJS Hello World Example

      This tutorial will explain you how to write a simple AngularJS program or in other words a Hello World program. We will be using Eclipse to write this hello world program. Alternatively you do this in notepad and run the program.

AngularJS Setup in Visual Studio

        In this tutorial lets see how to setup AngularJS in Visual Studio. I am using Visual Studio 2012 Professional edition for this purpose. Actually speaking, configuring AngularJS in visual studio is a simple process.