Pulse View In Android Using Android Studio

Introduction

 

In this article, we are going to create a Pulse View in Android using Android Studio. Pulse View is a type of library that makes an image as an icon. This View is used in most popular apps including ShareIt and Tinder.

 

Step 1

 

Create a new project in Android Studio.

 

 

Give a name to the project and click "Next".

 

 

Select the "Phone and Tablet" option and click "Next".

 

 

Select an empty activity and click "Next".

 

 

At last, give the activity name and click on "Finish".

 

 

Step 2

 

Next, copy the source image in .png format.

 

 

Locate app>>res>>drawable folder and paste the copied image into the drawable folder.

 

 

Check whether it is pasted correctly.

 

 

Step 3

 

Locate the Gradle Scripts>>Build. Gradle.

 

 

And, type the following dependency in your app's build.gradle.

 

 

Then, click the "Sync Now" button from the top right corner and repeat this for step 4.

 

 

Code copy is here,

compile 'com.github.devlight.pulseview:library:1.0.2'

Step 4

 

Next, go to app >> res >> layout >> activity_main.xml. Select activity page.

 

 

Just type the code as given below.

 

 

The code copy is here.

<LinearLayout
       android:orientation="horizontal"
       android:layout_alignParentBottom="true"
       android:weightSum="2"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <Button
           android:id="@+id/btnStart"
           android:text="Start"
           android:layout_weight="1"
           android:layout_width="0dp"
           android:layout_height="wrap_content" />

       <Button
           android:id="@+id/btnStop"
           android:text="Stop"
           android:layout_weight="1"
           android:layout_width="0dp"
           android:layout_height="wrap_content" />
   </LinearLayout>

   <com.gigamole.library.PulseView
       android:id="@+id/pv"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:pv_alpha="70"
       app:pv_color="#FFF"
       app:pv_icon="@drawable/ic"
       app:pv_icon_height="100dp"
       app:pv_icon_width="100dp"
       app:pv_measure="height"
       app:pv_spawn_period="500"
       app:pv_interpolator="@android:anim/linear_interpolator"
       />

Step 5

 

Next, go to app>>res>>values>>Styles.xml

 

 

Just type the following code.

 

 

Code copy is here.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
   </style>

Step 6

 

Next, go to app >> java>>Mainactivity.java. Select Mainactivity page.

 

 

Just type the following code.

 

 

Code copy is here.

public class MainActivity extends AppCompatActivity {

    PulseView pulseView;
    Button btnStart, btnStop;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        pulseView = (PulseView) findViewById(R.id.pv);
        btnStart = (Button) findViewById(R.id.btnStart);
        btnStop = (Button) findViewById(R.id.btnStop);

        btnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pulseView.startPulse();
            }
        });

        btnStop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pulseView.finishPulse();
            }
        });

Step 7

 

Verify the preview.

After the code is applied, the preview will appear like this.

 

 

Step 8

 

Next, go to Android Studio and deploy the application. Select an Emulator or your mobile with USB debugging enabled. Give it a few seconds to make installations and set permissions.

 

 

Run the application in your desired emulator (Shift + F10).

 

 

Explanation of source code

 

The source code used in the activitymain.xml file will insert the image into the app and render the Pulse View of the image given.

 

Summary

 

We have just created the app to see how the Pulse View works and learned where to use it.

 

*Support and Share! Thank you*