Sunday, November 15, 2015

Flutter – Cross Platform App Development Framework from Google

Flutter is a new cross-platform app development framework from Google that allows apps to be created for both Android (KitKat or later) and iOS (iOS 5 or later). It's all open source and still being developed by engineers at Google and you can follow two engineer's profile at Chinmay Garde & Devon Carew. The main focus of Flutter is to provide low-latency input and high frame rates (60fps) for high performance on Android & iOS.

Flutter Architecture

Flutter is built with C, C++, Dart, Skia (a 2D rendering engine), Mojo IPC, and Blink’s text rendering system. To have better understanding of the main components, please check the below architecture diagram:-

High-Level Overview of Flutter Architecture
Flutter has three main components:-
  1. A heavily optimized, mobile-first 2D rendering engine (with excellent support for text)
  2. A functional-reactive framework
  3. A set of Material Design widgets, libraries, tools, and a plugin for Atom

How do Flutter apps work on Android & iOS?

For Android, the engine’s C/C++ code is compiled with the Android NDK (Native Development Kit); the majority of the framework and application code runs on the Dart VM, which generates JIT-compiled optimized native code on the device. For iOS, the C/C++ code is compiled with LLVM; Dart code is AOT (Ahead-of-time) compiled into native code. Apps use a native instruction set & on both platforms you can call native services via Mojo’s IPC system.

Why is Flutter better than other cross-platform frameworks?

Flutter is different than most other options for building cross-platform mobile apps because Flutter uses neither WebView nor the OEM widgets that shipped with the device. Instead, Flutter uses its own high-performance rendering engine to draw widgets. Flutter also offers developers a highly productive and fast development experience, fast runtime and engine performance, and beautifully designed widgets that make for beautiful apps.

Platform & IDE support for Flutter

The programming language used is Dart which is also open source & which became available about a year ago. Dart is a mix between c++ and Java and supports classes with single inheritance. It supports interfaces, abstract classes, reified generics and optional typing.

Flutter uses Atom as its IDE with the dartlang plugin which currently contains functionality related to creating the app from the template, syntax highlight, code complete, refactor, launch apps, show type hierarchies, jump to definition and running Flutter projects.

Flutter currently supports developers on Mac and Linux. Windows support is in the works.

Are apps production ready?

At present, Flutter isn’t suitable for production apps and you can’t yet produce installable apps that easily (work is still in progress).

Thursday, July 10, 2014

Android L Developer Preview

As you all know last month at Google I/O we got glimpse of the L Developer Preview. It provides us an advance look at the upcoming release for the Android platform, which offers new features for users and app developers. Android is getting a major overhaul with its next version, which is currently being referred to as Android L. The new version will tout more than 5,000 new APIs, multiple new features, a new runtime engine, and a major user interface makeover. The Android SDK has been released and, for the first time, you will be able to preview the new version on a Nexus 5 or 7 device.

I thought let's give a try to L Developer Preview, so I downloaded the SDK & setup my development environment. After that I installed the L Preview System Image on Nexus 5. To flash the image onto your device please follow these instructions. You can have a look at Nexus 5 with L Developer Preview as follows:-


Now it's time to get our hands on L Developer Preview APIs & I’m creating a github repository, where you can find this example. This sample app is focused on the new API's for preview version of Android-L, such as Material Design UI, RecyclerView, CardView,; Floating Button, & Ripples.

The Android L Developer Preview includes support for material design apps. Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. To use the Material theme on your app, you only have to set the parent of your app style to :-
  • @android:style/Theme.Material
  • @android:style/Theme.Material.Light 
  • @android:style/Theme.Material.DarkActionBar. 
You can also customize the color palette, and default animations for touch feedback and activity transitions. Animations are an important element of Material Design. A new set of APIs also let you create custom animations. The new animation APIs let you :-
  • Respond to touch events with touch feedback animations
  • Hide and show views with reveal effect animations
  • Switch between activities with custom activity transition animations
  • Create more natural animations with curved motion
  • Animate changes in one or more view properties with view state change animations
  • Show animations in state list drawables between view state changes
The Android L Developer Preview includes two new widgets for displaying complex lists and cards in your app and can be found in the latest support-v7 version. These widgets have material design style by default.
  1. RecyclerView
  2. CardView
RecyclerView - This new widget is more advanced and flexible version of ListView. This widget is a container for large sets of views that can be recycled and scrolled very efficiently. As we already know that in the ListView to increase the performance we have to use the ViewHolder pattern. This is simply a java class that holds the references to the widget in the row layout of the ListView (for example ImageView, & TextView which I used in sample app). Using this pattern we avoid to call several times findViewById() method to get the UI widget reference making the ListView scrolling smoother. Even if this pattern was suggested as best-practice we could implement our Adapter without using this pattern. 

RecyclerView enforces this pattern making it the core of this UI widget and we have to use it in our Adapter. RecyclerView introduces a new Adapter that must be used to represent the underlying data in the widget. This new adapter is called RecyclerView.Adapter. This component stands behind the UI widget and determines how the rows, in the ListView, have to be rendered and what information to show. It’s a similar approach to the ones you already used, but with some peculiarities, such as a required ViewHolder. You will have to override two main methods: 
  1. onCreateViewHolder(ViewGroup parent, int viewType)
  2. onBindViewHolder(ViewHolder holder, int position)
First method to inflate the view and its view holder, and second method to bind data to the view. The good thing about this is that first method is called only when we really need to create a new view. No need to check if it’s being recycled.

CardView - CardView widget lets you display important pieces of information inside cards that have a consistent look and feel. CardView extends the FrameLayout class. You can specify properties of CardView as follows:
  • To set the corner radius in your layouts, use the android:cardCornerRadius attribute.
  • To set the corner radius in your code, use the CardView.setRadius method.
  • To set the background color of a card, use the android:cardBackgroundColor attribute.
Floating Button - Android-L introduces a new way to manage view with elevation and shadows. You can also define the ripple area for touch feedback.

Ripples - This is touch feedback & one of the important elements in Material Design, to give immediate feedback to users what they touch? where they touch? by animate the state color change.

In addition to Ripples, Android L also has Shadows to give 3d effect using elevation property. The elevation of a view determines the size of its shadow: views with higher Z values cast bigger shadows. I tried to use some APIs in my sample app & the output is as follows:-


Link to Github Repository

Wednesday, June 25, 2014

Check whether device is phone or tablet(7" or 10")?

Sometimes we have requirements to check whether device is phone or tablet & even for tablet whether device is 7" or 10". Following method will help us if the device is tablet or phone. If device is tablet method will return true, otherwise it'll return false.

public boolean isTablet(Context context) {
boolean isTablet = (context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) >= Configuration.SCREENLAYOUT_SIZE_LARGE;

return isTablet;
}

If above method return true, which means the device is Tablet. Now we have to detect whether device is 10" tablet or not. If device is 10" following method will return true, otherwise it'll return false.

public boolean isXLTablet(Context context) {
boolean isXLTablet = (context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) >= Configuration.SCREENLAYOUT_SIZE_XLARGE;

return isXLTablet;

}

Wednesday, April 16, 2014

How to check whether current file is audio/video/image?

The below method will return whether current file is audio file or not:-

public static boolean isMusic(File file) {
Uri uri = Uri.fromFile(file);
String type = MimeTypeMap.getSingleton().getMimeTypeFromExtension(
MimeTypeMap.getFileExtensionFromUrl(uri.toString()));

if (type == null)
return false;
else
return (type.toLowerCase().startsWith("audio/"));

}

The below method will return whether current file is video file or not:-

public static boolean isVideo(File file) {
Uri uri = Uri.fromFile(file);
String type = MimeTypeMap.getSingleton().getMimeTypeFromExtension(
MimeTypeMap.getFileExtensionFromUrl(uri.toString()));

if (type == null)
return false;
else
return (type.toLowerCase().startsWith("video/"));
}

The below method will return whether current file is image file or not:-

public static boolean isImage(File file) {
Uri uri = Uri.fromFile(file);
String type = MimeTypeMap.getSingleton().getMimeTypeFromExtension(
MimeTypeMap.getFileExtensionFromUrl(uri.toString()));

if (type == null)
return false;
else
return (type.toLowerCase().startsWith("image/"));
}