Ripple View Effect : 9 Step Guide to Create

1
9 Step Guide To Create Ripple View Effect In
Android
By Nine Hertz
2
Introduction
9 Step Guide To Create Ripple View Effect In
Android
Google is regularly updating its most popular
mobile operating system Android. Last year, it
released Android Lollipop version with lots of
new features and tons of APIs.
One of the primary changes in Lollipop is the
material design which has completely changed the
look of android. This type of design has given an
entire new design interface to Android 5.0 and
introduced the new techniques of customizing the
applications.
However, each version of Android is born with
some new and unique features, but Lollipop came
up with some major advancements which were never
seen in Androids earlier versions (Gingerbread,
Froyo, Jelly Bean, KitKat).
1
3
9 Step Guide To Create Ripple View Effect In
Android
Goal Of Material Design
These effects not only provide the attractive
look to applications, but also creates a better
user experience.

• The primary goal of material design is to create
  an interface that works on all mobile devices and
  platforms. Material design also allows the third
  party app developers to develop their own custom
  application with elegant design effects.

Material Design Example
Material design includes various visual effects
such as shrinking, rolling or expanding of UI
elements on touch, 3D appearance of buttons,
animated buttons, shadow effects, etc.
2
4
9 Step Guide To Create Ripple View Effect In
Android
Ripple Effect
If you are using Lollipop version in your
smartphone, then you must have seen expanding or
rolling effects in buttons on touch events. These
effects are called Ripple Effects. It is the type
of transition that happens when a user interacts
with buttons.
Ripple View Effect - Demo Link
https//www.youtube.com/watch?vLlKISmPbmgw
3
5
9 Step Guide To Create Ripple View Effect In
Android
How to create Ripple View Effect
As the emergence of material design in Android
Lollipop, app developers have started to
implement the various design effects in their
Android applications. Among all the design
effects ripple view effect gives the most elegant
and exclusive look to an application. If you are
also a mobile app developer and want to make your
Android application more attractive by using
ripple effect, then follow these 9 steps.
4
6
9 Step Guide To Create Ripple View Effect In
Android
In this tutorial you will learn how ripple effect
can make your application attractive and how to
develop it. Lets get started
1
Step
Create a new Android project in Eclipse by
clicking on File gt New gt Android Application
Project.
5
7
9 Step Guide To Create Ripple View Effect In
Android
2
Step
Set the below string values to file string.xml
placed under res gt values. strings.xml
lt?xml version"1.0" encoding"utf-8"?gt ltresources
gt ltstring name"app_name"gtRippleViewExamplelt/stri
nggt ltstring name"hello_world"gtHello
world!lt/stringgt ltstring name"action_settings"gtSe
ttingslt/stringgt ltstring name"click_me"gtClick
Melt/stringgt lt/resourcesgt
This file is used to save your time that could be
consumed in hardcoded values. For example, lets
assume that a title string is used in every file
of the application and after creating half of the
files you want to make a slight change in title.
Now, it will be very typical to make changes in
all the files, but with String.xml file, the
change needs to be done only at one place and
that is in the xml file.
6
8
9 Step Guide To Create Ripple View Effect In
Android
3
Step
Now find the dimense.xml file located under res
gt values, add the below values. dimens.xml
ltresourcesgt lt!-- Default screen margins, per
the Android Design guidelines.--gt ltdimen
name"activity_horizontal_margin"gt16dplt/dimengt
ltdimen name"activity_vertical_margin"gt16dplt/dimen
gt lt/resourcesgt
This file is used to set the values of dimensions
so that the application layout is adjusted
automatically on each screen size. In this file
you can specify various dimensions like padding,
radius, width, text size etc. To set the
dimensions, there are many units available such
as pt (point), in (inches), px (pixels) but the
preferred unit is dp (density independent pixels)
because dp adjust the layout of the application
on the screen size of all densities.
7
9
9 Step Guide To Create Ripple View Effect In
Android
4
Step
To set the color and shape of buttons, set the
below values in card_bk.xml file located under
res gt drawable.cards_bk.xml
lt?xml version"1.0" encoding"utf-8"?gt ltlayer-list
xmlnsandroid"http//schemas.android.com/apk/res
/android"gt ltitem androidleft"1.2dp"gt ltshape
androidshape"rectangle" androiddither"true"gt
ltcorners androidradius"2.9dp"/gt ltsolid
androidcolor"ccc" /gt lt/shapegt lt/itemgt
ltitem androidbottom"1.6dp"gt ltshape
androidshape"rectangle" androiddither"true"gt
ltcorners androidradius"3dp" /gt ltsolid
androidcolor"_at_androidcolor/white" /gt
lt/shapegt lt/itemgt lt/layer-listgt
You can also choose different colors and shapes
for buttons according to the background of your
Android application.
8
10
9 Step Guide To Create Ripple View Effect In
Android
5
Step
Import the library RippleView in eclipse, which
is located in the source code. It provides all
the APIs that are necessary to create ripple
effects in buttons.
6
Step
Add this Ripple view library to your Android
application by navigating Properties gt Android gt
Add gt RippleView. Click apply and then OK.
9
11
9 Step Guide To Create Ripple View Effect In
Android
7
Step
Now open the layout file (ripple_view.xml)
write the below code. This will create a simple
layout with RippleViewButton.
ltRelativeLayout xmlnsandroid"http//schemas.andr
oid.com/apk/res/android" xmlnstools"http//sche
mas.android.com/tools" xmlnsripple"http//schem
as.android.com/apk/res/org.ninehertz.rippleview.sa
mple" androidlayout_width"match_parent"
androidlayout_height"match_parent"
androidbackground"d2d2d2" androidpaddingBotto
m"_at_dimen/activity_vertical_margin"
androidpaddingLeft"_at_dimen/activity_horizontal_ma
rgin" androidpaddingRight"_at_dimen/activity_horiz
ontal_margin" androidpaddingTop"_at_dimen/activity
_vertical_margin" toolscontext"org.ninehertz.ri
ppleview.sample.RippleViewActivity" gt
ltorg.ninehertz.rippleviewlib.RippleView
androidid"_at_id/btn" androidlayout_width"match
_parent" androidlayout_height"wrap_content"
androidlayout_centerInParent"true"
androidbackground"_at_drawable/card_bk"
androidgravity"center" androidpadding"35dp"
androidtext"_at_string/click_me"
androidtextAppearance"?androidattr/textAppearan
ceMedium" ripplealphaFactor"0.7"
ripplehover"true" ripplerippleColor"58FAAC"
/gt lt/RelativeLayoutgt
10
12
9 Step Guide To Create Ripple View Effect In
Android
8
Step
Make some changes in main activity class
(RippleViewActivity.java)
package org.ninehertz.rippleview.sample import
android.app.Activity import android.os.Bundle im
port android.view.Menu import android.view.MenuIt
em import android.view.View import
android.widget.Toast import org.ninehertz.ripple
viewlib.RippleView public class
RippleViewActivity extends Activity
RippleView mButton _at_Override protected void
onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState)
setContentView(R.layout.ripple_view) mButton
(RippleView) findViewById(R.id.btn)
mButton.setOnClickListener(new View.OnClickListene
r() _at_Override public void onClick(View v)
Toast.makeText(getApplicationContext(),
"Ripples", Toast.LENGTH_LONG).show() )

11
13
9 Step Guide To Create Ripple View Effect In
Android
9
Step
Run the project to see the ripple effect in
button you are good to go. Now you will be
able to see a button with ripple view effect.
12
14
9 Step Guide To Create Ripple View Effect In
Android
Benefits of using Ripple Effects in your Android
application

• Gives the better usability and accessibility
  option
• Provide new ways of user interaction that was not
  possible in older Android versions
• Gives the opportunities to customize the
  applications
• Can be easily created by any third party app
  developer
• Compatible with multiple screen sizes
• Give a realistic and practical look to the buttons

13
15
9 Step Guide To Create Ripple View Effect In
Android
Conclusion
This was a very simple example of creating a
button with ripple view effect. You can create
any kind of ripple effect in your application by
making some slight changes in the code.
Ripple View Effect Example
It is not a very typical task as you may think,
just a little study and efforts can open the
doors of success for creating smartphone apps
with amazing ripple view effects.
We believe this tutorial will help you to
successfully create ripple effect in Android. If
you have any query then feel free to contact us
on info_at_theninehertz.com
14
16
Did you like the tutorial ? Share it on social
media.
Click on the social media buttons to share the
guide.
15
17
This tutorial is brought to you by Nine Hertz
Website
http//theninehertz.com
Skype ninehertz Email
info_at_theninehertz.com
Our Offices
USA 7278, East Galbraith Raod, Cincinnati,
45243, Ohio, United States Call us
1-315-381-4100
India44/8, Mansarovar, Jaipur.302020 Call us
91-0141-2786973
Dubai Apartment 1009, Yacht bay, Behind JLT
metro station, Dubai
Nine Hertz 2015, A Mobile App development
Company