Creating a quick fancy Android application prototype

Using Framer for Android prototyping

All programmers with Mobile Application development experience have been in the situation of trying to create a prototype to showcase the application idea in a quick way!

Creating a prototype is a tricky task in term of time and quality. Usually, you have the minimum time available for creating a fancy Application which must not work but look perfect. How is this possible? No one knows that we have to code or design for every animation or loading data to list in Android, which is really time-consuming.

What is Framer?

As a reference to framer.com:

The familiarity of visual editing with the flexibility of code. A seamless workflow, further complemented by device previewing, version control and easy sharing. Pioneer new interaction patterns and create groundbreaking apps. The design and prototyping tool preferred by product teams at startups, agencies and Fortune 500s worldwide.

There are many nice words in this paragraph, but it really works!

Unfortunately, you will mention that the most of the screen shots for this tool is on iPhone devices, and they didn’t mention that we can use it for Android, too!

Framer sample project

Framer creates a dynamic website package using JavaScript which can be loaded in an offline WebView, so the integration phase is very simple.

Where should I start?

Framer is not free, but you can test it with a trial account and if you or your company enjoyed it you can pay later, so download it from here:

Design everything with code_Design interactive high-fidelity prototypes for iOS, Android, desktop or the web. Invent new animations and…_framer.com

At first glance, it may look very crowded with lots of code, but I will assure you it will take only one day to become a professional Framer designer! Just take a look at this product’s YouTube channel and watch all tutorials, currently, there are only 14 videos which take one and half hour!

Framer_Insert, design and animate text with Framer Type. Our TextLayer is completely dynamic, which means we default to system…_www.youtube.com

A perfect feature of this tool is importing graphic assets directly from Sketch, which will make your job much more easier. You have to ask your UI/UX designer to hand over a standard Sketch file and then you can import it directly into Framer project and some little code to make it work.

Integrate Framer in Android

As I mentioned, a Framer project is a dynamic website using JavaScript which the entrance is an index.html file, so if you have the experience of loading such an offline website from Assets folder into WebView you can go now and start prototyping!

Let’s begin with creating an empty Android application, and copy your framer project into assets folder. (You can create the assets folder using Android Studio, File > New > Folder > Assets Folder)

Create assets folder in project

, now copy your Framer project into your Android application project assets folder,

Framer project added to Assets folder

We need to add a WebView to our layout and add some code for loading Framer project in it.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">

<WebView  
    android:id="@+id/webView"  
    android:layout\_width="match\_parent"  
    android:layout\_height="match\_parent"/>

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

WebView webView;

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

    webView = (WebView) findViewById(R.id._webView_);

    WebSettings settings = webView.getSettings();  
    settings.setAllowFileAccessFromFileURLs(true);  
    settings.setJavaScriptEnabled(true);

    webView.loadUrl("file:///android\_asset/Sample.framer/index.html");  
}  

}

That is almost done, you can now run the app!

Framer Local File Restrictions warning!

A solvable warning!

There is an issue with loading Framer directly into WebView which cause a warning for file access permission despite adding this setting to WebView:

settings.setAllowFileAccessFromFileURLs(true);

Which can be solved by loading Framer from a web service (locally or on the Internet) or there is an easier way, you can change the method that causes this warning! Just open framer.init.js inside your Framer project’s Framer folder and edit the first JavaScript function:

function isFileLoadingAllowed() {// return (window.location.protocol.indexOf("file") == -1)return true;}

That’s it, now you can run your prototype without any warning.

Android Application prototype using Framer

Create a connection between Framer and Android

In most of the prototyping cases you would need to load a fancy UI which react to user interaction with an animation or some transaction or scrolling, but if you like to have a connection between your code and Framer project and develop for events it is possible. You can also load data from your app into Framer.

In this case, you would need a Javascript interface to add it to WebView:

JavascriptHandler.java

public class JavascriptHandler {

private Activity activity;  
private WebView webView;  

public JavascriptHandler(Activity activity, WebView webView) {  
    this.activity = activity;  
    this.webView = webView;  
}  

_/\*\*  
 \* This method handles call from Framer  
 \*/_    @JavascriptInterface  
public void javascriptCall(String jsString) {  
    Toast._makeText_(activity, jsString, Toast._LENGTH\_LONG_).show();  
}  

_/\*\*  
 \* This method handles call from Android  
 \*/_    public void javaCall(String message) {  

    final String webUrl = "javascript:DeviceComponent.displayJavaMessage('" + message + "')";  
    // Add this to avoid android.view.windowmanager$badtokenexception unable to add window  
    if (!activity.isFinishing())  
        // loadurl on UI main thread  
        activity.runOnUiThread(new Runnable() {  

            @Override  
            public void run() {  
                webView.loadUrl(webUrl);  
            }  
        });  
}  

}

, and you can add it as a JavaScript interface to WebView using this line of code:

MainActivity.java

webView.addJavascriptInterface(new JavascriptHandler(this, webView), "JavascriptHandler");

Now you can send events to Android by adding this line of code to your Framer project:

app.coffee

JavascriptHandler.javascriptCall(“LayerA clicked!”)

LayerB clicked event sent from Framer to Android

, or you can send a message to Framer by calling this method from Android:

javascriptHandler.javaCall("Hi!!!");

Done! You can now start creating your own prototypes without thinking about Android development, UI elements or Animations.

TL;DR

Framer is a perfect tool for creating a well-designed prototype application as fast as possible that can be integrated with Android so easily.

Source-Code and more info

You can access this sample project source code repo here on GitHub:

mirhoseini/framer-android-wrapper_framer-android-wrapper - Framer Android Wrapper Application_github.com

, and also read more about Framer here:

Design everything with code_Design interactive high-fidelity prototypes for iOS, Android, desktop or the web. Invent new animations and…_framer.com

P.S.

This post is not an advertisement and unfortunately no one didn’t paid me a cent. The point is, I have recently founded this tool and decide to share my experience with it and I am using a trial version, too. 🤣

I look forward for your comments and sharing your experience with Framer. Share this article if you think it is useful by tapping 💚 button, and follow me for more articles Mohsen Mirhoseini Argi.

Mohsen Mirhoseini - Senior Android Developer_I am a senior Android Developer with about nine years experience in the field of Computer Software engineering. I have…_mirhoseini.info