Learn How To Make Gif Tutorials In Mobile Apps

What is GIF tutorial ?

These days a new type of tutorial is in fashion for mobile apps where GIFs can be used to explain the “steps to be taken”.
There are lot many apps which requires user permissions, set-ups before getting into the core of the app.
Setups can be enabling pop-ups, grant permissions, some system level accessiblity or may be how to take a camera click inside the app.
So, this becomes a bit difficult for the users who are not tech-savvy and the lack of proper information ends up in uninstalling the application.
In the example shared below, i will be explaining how a gif can be helpful for explaining the app overflow to the users.

Problem Statement –  How to enable accessibility permission for Android App.
This tutorial will help to design an app which shows GIF describing the mandatory steps required to access the application.
Running the code in Android Studio will end up showing you the demo app like this.
(Click image to see the final output.)

Why do we need it?

In one our app “Spychat” we need a permission which can not be taken directly from the app. In this case we need to redirect the user to the “notification accessibility screen” to grant the permission but in most of the cases user do not easily understand what next to do after getting navigated to the permission screen. For them these kind of tutorials are very much helpful because as they describe in detail what exactly the user is required to do (Step by Step).

Development: Start a new Project:
MainActivity.java
TranslucentActivity.java
activity_main.xml
translucent_activity.xml

Step 1: Activity with a translucent background :

a) Add this code in Java File public class

public class TranslucentActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.translucent_activity);
super.onCreate(savedInstanceState);
getWindow().setLayout(getWindowManager().getDefaultDisplay().getWidth(),
getWindowManager().getDefaultDisplay().getHeight() – 100); // adjust height accordingly
RelativeLayout relLay = (RelativeLayout) findViewById(R.id.translayRel);

relLay.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish(); // you have to finish the tutorial on the tap of screen
}
});
}
}

b) Add this code in (translucent_activity) xml file:

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”#bb000000″ // to make background a bit darker
android:id=”@+id/translayRel”
android:orientation=”vertical”>
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:background=”#ddffffff” // a different background to differentiate
android:padding=”0dp”
android:orientation=”vertical”>
<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:gravity=”center”
android:padding=”5dp”
android:id=”@+id/text_trans”
android:text=“YOUR TEXT”
android:textColor=”#000000″
android:textSize=”16sp”
android:textStyle=”normal” />
<— Your GIF —>
<pl.droidsonroids.gif.GifTextView
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_alignParentRight=”true”
android:layout_centerVertical=”true”
android:background=”@drawable/ezgif_com” />

</LinearLayout>
</RelativeLayout>

c) This should be your manifest:    
<activity android:name=”.activities.TranslucentActivity”    
android:theme=”@style/Theme.Transparent  // this is custom style

    android:screenOrientation=”portrait”>

d) This should be in the style file:    

<style name=”Theme.Transparent” parent=”android:Theme”>
<item name=”android:windowIsTranslucent”>true</item>
<item name=”android:windowBackground”>@android:color/transparent</item>
<item name=”android:windowContentOverlay”>@null</item>
<item name=”android:windowNoTitle”>true</item>
<item name=”android:windowIsFloating”>true</item>
<item name=”android:backgroundDimEnabled”>false</item>
</style>

e) You must add this dependency in build gradle(app)

// This gif dependency is used in this project . You can use any gif dependency
compile ‘pl.droidsonroids.gif:android-gif-drawable:1.1.+’

Step 2: How to use this TranslucentActivity:

a) Add this code MainActivity file .
Note: You need to start activity (TranslucentActivity.java) in a new thread (Main thread will handle only one activity at a time).
================== This is a new thread. =================
new Timer().schedule(new TimerTask() {
@Override
public void run() {
startActivity(new Intent(getActivity(), TranslucentActivity.class));
}
},100);
===================New Thread Ends Here====================

// This code should be on main thread
startActivityForResult(new Intent(“android.settings.ACTION_NOTIFICATION_LISTENER_SETTINGS”), 1);

 

 

Download Sample App Code from the link below:

https://drive.google.com/open?id=0By9W4QguTZbOOW04UXhHUlBpa3M

Leave a Reply

Your email address will not be published. Required fields are marked *