How to use Gravity View for Android

Before getting into an example, we should know what gravity view in android is. Gravity view allows us to utilize the motion sensors of an Android device and allow the end user to explore the product by rotating his device.

This example demonstrates How to use Gravity View for Android.

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project.

Step 2 − Open build.gradle and add design support library dependency.

apply plugin: 'com.android.application'
android {
   packagingOptions {
      exclude 'META-INF/proguard/androidx-annotations.pro'
   }
   packagingOptions {
      exclude 'META-INF/DEPENDENCIES'
      exclude 'META-INF/LICENSE'
      exclude 'META-INF/LICENSE.txt'
      exclude 'META-INF/license.txt'
      exclude 'META-INF/NOTICE'
      exclude 'META-INF/NOTICE.txt'
      exclude 'META-INF/notice.txt'
      exclude 'META-INF/ASL2.0'
   }
   compileSdkVersion 28
   defaultConfig {
      applicationId "com.example.andy.myapplication"
      minSdkVersion 15
      targetSdkVersion 28
      versionCode 1
      versionName "1.0"
      testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
   }
   buildTypes {
      release {
         minifyEnabled false
         proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
      }
   }
}
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:28.0.0'
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'
   implementation 'co.gofynd.library:gravity-view:1.0'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.2'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Step 3 − Add the following code to res/layout/activity_main.xml.

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:id = "@+id/activity_main"
   android:layout_width = "match_parent"
   android:layout_height = "wrap_content">
   <HorizontalScrollView
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:scrollbars = "none">
      <ImageView
         android:id = "@+id/imageView"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content" />
   </HorizontalScrollView>
</RelativeLayout>

In the above code, we have taken a horizontal scroll view to scroll image and image view to show the image on the screen.

Step 4 − Add the following code to src/MainActivity.java

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import co.gofynd.gravityview.GravityView;
public class MainActivity extends AppCompatActivity {
   GravityView gravityView;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      ImageView imageView = findViewById(R.id.imageView);
      gravityView = GravityView.getInstance(this);
      boolean is_supported = gravityView.deviceSupported();
      if(is_supported) {
         gravityView
         .setImage(imageView,R.drawable.back)
         .center();
      }
   }
   @Override
   protected void onResume() {
      super.onResume();
      gravityView.registerListener();
   }
   @Override
   protected void onStop() {
      super.onStop();
      gravityView.unRegisterListener();
   }
}

In the above code we have taken an image from drawable as the back so add a scrollable image on drawable.

Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from the android studio, open one of your project's activity files and click the Run  icon from the toolbar. Select your mobile device as an option and then check your mobile device which will display your default screen –

In the above screen is shown the center of the image, now move a left side and right side to the mobile device. It will show output as shown below –

Click here to download the project code

Jennifer Nicholas

Published on 14-Mar-2019 12:03:28