Using Framer for Android prototyping All programmers with Mobile Application experience have been in the situation of trying to create a prototype to showcase the application idea in a quick way! development 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 , which is really time-consuming. Android 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 interactive high-fidelity prototypes for iOS, Android, desktop or the web. Invent new animations and…_framer.com Design everything with code 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! _Insert, design and animate text with Framer Type. Our TextLayer is completely dynamic, which means we default to system…_www.youtube.com Framer A perfect feature of this tool is importing graphic assets directly from , 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. Sketch Integrate Framer in Android As I mentioned, a Framer project is a dynamic website using JavaScript which the entrance is an 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! index.html 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 inside your Framer project’s Framer folder and edit the first JavaScript function: framer.init.js 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 is a perfect tool for creating a well-designed prototype application as fast as possible that can be integrated with Android so easily. Framer Source-Code and more info You can access this sample project source code repo here on GitHub: _framer-android-wrapper - Framer Android Wrapper Application_github.com mirhoseini/framer-android-wrapper , and also read more about Framer here: _Design interactive high-fidelity prototypes for iOS, Android, desktop or the web. Invent new animations and…_framer.com Design everything with code 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 _I am a senior Android Developer with about nine years experience in the field of Computer Software engineering. I have…_mirhoseini.info Mohsen Mirhoseini - Senior Android Developer

Super

YouTube

My first experiences with Kotlin

A useful memory debugger plugin for Android Studio

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Creating a quick fancy Android application prototype

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A useful memory debugger plugin for Android Studio

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

A useful memory debugger plugin for Android Studio

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps