9 Step Guide To Create Ripple View Effect In Android By:
Nine Hertz
9 Step Guide To Create Ripple View Effect In Android
Introduction Google is regularly updating its
One of the primary changes in
most popular mobile operating
Lollipop is the material design
system Android. Last year, it
which has completely changed the
released Android Lollipop version
look of android. This type of
with lots of new features and
design has given an entire new
tons of APIs.
design interface to Android 5.0 and
However,
each
version
of
Android is born with some new
introduced
techniques
of
the
customizing
applications.
and unique features, but Lollipop came
up
with
some
major
advancements which were never seen in Android’s earlier versions (Gingerbread, Froyo, Jelly Bean, KitKat).
1
new the
9 Step Guide To Create Ripple View Effect In Android
Goal Of Material Design The primary goal of material design is to create an interface that works on all mobile devices and platforms.
These effects not only provide the attractive look to applications, but
Material design also allows the third
also
party app developers to develop their
experience.
own custom application with elegant
creates
a
better
Material Design Example
design effects.
Material design includes various visual effects such as shrinking, rolling
or
elements
expanding on
of
touch,
user
UI 3D
appearance of buttons, animated buttons, shadow effects, etc.
2
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?v=LlKISmPbmgw
3
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
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.
Let’s get started Step
1
Create a new Android project in Eclipse by clicking on File > New > Android Application Project.
5
9 Step Guide To Create Ripple View Effect In Android
Step
2
Set the below string values to file string.xml placed under
res > values. strings.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">RippleViewExample</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="click_me">Click Me</string> </resources> This file is used to save your time that could be consumed in hardcoded values. For example, letâ&#x20AC;&#x2122;s 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
9 Step Guide To Create Ripple View Effect In Android
Step
3
Now find the dimense.xml file located under res > values, add the below values. dimens.xml
<resources> <!-- Default screen margins, per the Android Design guidelines.--> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> </resources> 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 Step Guide To Create Ripple View Effect In Android
Step
4
To set the color and shape of buttons, set the below values in card_bk.xml file located under res > drawable.cards_bk.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:left="1.2dp"> <shape android:shape="rectangle" android:dither="true"> <corners android:radius="2.9dp"/> <solid android:color="#ccc" /> </shape> </item> <item android:bottom="1.6dp"> <shape android:shape="rectangle" android:dither="true"> <corners android:radius="3dp" /> <solid android:color="@android:color/white" /> </shape> </item> </layer-list>
You can also choose different colors and shapes for buttons according to the background of your Android application.
8
9 Step Guide To Create Ripple View Effect In Android
Step
5
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.
Step
6
Add this Ripple view library to your Android application by navigating Properties > Android > Add > RippleView. Click apply and then OK.
9
9 Step Guide To Create Ripple View Effect In Android
Step
7
Now open the layout file (ripple_view.xml) & write the below code. This will create a simple layout with RippleViewButton. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:ripple="http://schemas.android.com/apk/res/org.ninehertz.rippleview.sample" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#d2d2d2" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="org.ninehertz.rippleview.sample.RippleViewActivity" > <org.ninehertz.rippleviewlib.RippleView android:id="@+id/btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@drawable/card_bk" android:gravity="center" android:padding="35dp" android:text="@string/click_me" android:textAppearance="?android:attr/textAppearanceMedium" ripple:alphaFactor="0.7" ripple:hover="true" ripple:rippleColor="#58FAAC" /> </RelativeLayout>
10
9 Step Guide To Create Ripple View Effect In Android
Step
8
Make some changes in main activity class (RippleViewActivity.java)
package org.ninehertz.rippleview.sample; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Toast; import org.ninehertz.rippleviewlib.RippleView; public class RippleViewActivity extends Activity { RippleView mButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.ripple_view); mButton = (RippleView) findViewById(R.id.btn); mButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getApplicationContext(), "Ripples", Toast.LENGTH_LONG).show(); } }); } } 11
9 Step Guide To Create Ripple View Effect In Android
Step
9
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
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
9 Step Guide To Create Ripple View Effect In Android
Conclusion This was a very simple example
of
creating
a
Ripple View Effect Example
button with ripple view effect. You can create any kind of ripple effect in your application by making some slight changes in the code. It is not a very typical task as
We believe this tutorial will
you may think, just a little
help you to successfully create
study and efforts can open
ripple effect in Android. If you
the doors of success for
have any query then feel free
creating smartphone apps with amazing ripple view
to
contact
us
on
info@theninehertz.com
effects. 14
Did you like the tutorial ? Share it on social media. Click on the social media buttons to share the guide.
15
This tutorial is brought to you by:
Nine Hertz
Website
http://theninehertz.com Skype : ninehertz
Email : info@theninehertz.com Our Offices
USA USA 7278, 7278,East EastGalbraith Galbraith Raod, Raod,Cincinnati, Cincinnati,45243, 45243, Ohio, Ohio,United UnitedStates States
Dubai Dubai
Apartment Apartment1009, 1009, Yacht Yachtbay, bay, Behind BehindJLT JLTmetro metrostation, station, Dubai Dubai Call Callus: us:+1-315-381-4100 +1-315-381-4100
India India 44/8, 44/8,Mansarovar, Mansarovar, Jaipur.302020 Jaipur.302020 Call Callus: us: +91-0141+91-01412786973 2786973
Š Nine Hertz 2015, A Mobile App development Company