Flutter 1.0

Back in 2015 we said here that Google is working to somethign to make the dart language build android app. After awhile we didnt hear about it and the product later then evolve to what we know know now as flutter. But instead of only building android app, the flutter team decided to make it build app cross platform, for both iOS and android. Fast forward to this week, flutter is now 1.0, and we at Mix Plate Media started playing with it when it reached rc 2.0. We started loving it and here are some of the things we love:

1) The way the UI is built is pretty amazing, it's all code based so if you're from react native that means no XML and CSS. The learning curve here is a bit high if you haven't develop code based UI but if you had on the past, it is pretty standard. Another great thing about the UI is that it has material design built into it, so things like transition to next screen with Hero Image is extremely simple.

2) Hot reload, most developers love this feature and we do. 90% of the time it does hot reload for you, when it doesn't it would rebuild the app for you. In one of our windows machine, hot reload was not working but as a workaround we just run the command line "flutter run" and press r when we update something. It's additional step from automatic hot reload but its still better then compiling the whole app everytime you change something.

3) It is stable, even before it reached 1.0 it is pretty stable, the flutter team build a lot of plugins https://github.com/flutter/plugins which is great cos you know its first class support.

The future of is bright as flutter goes beyond mobile, later on you can export it as an embedded desktop app and even to the web. It is an exciting time to learn flutter.

Here is the announcement video:

Picky Eaters

I recently when back to doing app for the company I'm working for, this time its using React Native. It has some advantages and disadvantages over native development. One huge advantage for us is that we just have to build one source code for Android and iOS. One downside to it is that it's another mindset of development, where you have to think differently since its a reactive framework with website technology. For me, it's a bit of hybrid between how you build website through javascript and css and how UI flows in mobiles. The end result is quite satisfying.

The app is targeted for picky eaters. So if you have some special dietary requirements and if you live in US, especially in Honolulu, Hawaii, have a try of our app Picky Eaters Android.
We also have a website for it Pickyeaters.app

GOTO 2016 • Better Android Development with Kotlin & Gradle

The introduction part of the video he talks about how kotlin is better then java:
Different android version have different java version
Syntaxal problem in Java like lambda
Gradle officially support kotlin
Cleaner code for other developers

Its a great talk for anyone who wants to start kotlin.

Kotlin is now official

Kotlin was announced in Google IO as an official language to create android app. This is extremely good news :)
There are 2 videos related to kotlin in Google IO.

Introduction to Kotlin


and

Life is Great and Everything Will Be Ok, Kotlin is Here

Google IO 2017

Google IO would start soon (1 Hours from this post). There are tons of android related talks this year.
Here are the list of the talks

Most of the talks I'm looking forward to are the ones in May 18, with understanding color and android animations sprint to life on 19th.
What are the ones you look forward to?

Android Links 3

Android round of android links :)

1) Kotlin for Android developers

Why you should consider kotlin as a development language for android

2) ConstraintLayout links
Here are few links that talks about the new layout.
ConstraintLayout, Inside and Out: Part 1
ConstraintLayout, Inside and Out: Part 2


3) MPAndroidChart
This is graphing library which is really useful if you need to add graphs on your app.

4) 80+ Best Resources for Android Developers 2016 (Blogs, Forums & More)
This is a really good list for resource for Android developers.

PaperParcel with Kotlin

When I started to code in kotlin, one of the libraries that I found that was really useful is PaperParcel. PaperParcel is a library that would generate Parcelable using annotation. The good thing about it, is that it will reduce the amount of code and mistake you could make if you manually create those classes. Having said that, the library is not purely for Kotlin and it could be used in Java Android project.

To use it in kotlin
You will need to add these to your app build gradle dependencies

compile 'com.github.grandstaish.paperparcel:paperparcel:1.0.0-rc4'
compile 'com.github.grandstaish.paperparcel:paperparcel-kotlin:1.0.0-rc4'
kapt 'com.github.grandstaish.paperparcel:compiler:1.0.0-rc4'

while still in that gradle file, add these before dependencies

kapt {
    generateStubs = true
}
repositories {
    maven { url 'https://jitpack.io' }
}

Now the fun part, this is taken from my app Daily Picture Quotes

@PaperParcel
data class QuoteImage(val id: String = "",
                 val name: String = "",
                 val text_quote: String = "",
                 val url: String = "",
                 val created: String = "",
                 val cursor:String? = "") : PaperParcelable {
    companion object {
        @JvmField val CREATOR = PaperParcelable.Creator(QuoteImage::class.java)
    }
}

Thats about it, you can use QuoteImage to pass around Activities or Fragment or use it with your custom class.

Two things you have to remember is that your data class name must be supplied in PaperParcelable.Creator and every time you make changes to this data class (atleast for me) you have to do rebuild project.

If this interest you then have a check on the kotlin usage section of their github page.

Hope this helps :)

Easier way of getting your layout view in kotlin

As an Android developer, findViewById is probably one of the most annoying code piece you will keep using. However there are libraries that ease this daunting task, one of which I constantly use in Java is ButterKnife. Where you would have something like

public class MainActivity extends AppCompatActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mTabLayout = (TabLayout) findViewById(R.id.table_layout);
        mAddBtn = (Button) findViewById(R.id.add_btn);
    }
}

to something cleaner and easier to understand

public class MainActivity extends AppCompatActivity{
    @BindView(R.id.add_btn) Button mAddBtn;
    @BindView(R.id.table_layout) TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        ButterKnife.bind(this);
    }
}

Now in kotlin, there are different options that I had encountered so far.
One of which is KotterKnife which is also from Jake Wharton, the creator of ButterKnife. The library has the same awesomeness as ButterKnife, just check out the example on its github page

Another method is anko's find method, I previously blogged about Anko in Android and how you can use it to create UI in code, but anko is more than that. It has a lot of awesome helper functions and one of it is find, which is a shortform for findViewById and the code would look like this

class MainActivity: AppCompatActivity(){
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mTabLayout = find<TabLayout>(R.id.table_layout)
        mAddBtn = find<Button>(R.id.add_btn)
    }
}

Lastly most probably the lazies solution, but might be not be the most readable one is by using Kotlin Android Extensions. It will automatically bind the views to a class which you will just have to import. To configure it, open your app's gradle file and add on the top

apply plugin: 'kotlin-android-extensions'

Then say you have a layout named activity_main.xml with table_layout and add_btn on it. On your kotlin activity, fragment or custom class just add

import kotlinx.android.synthetic.main.activity_main.view.*

And viola, you can already use table_layout and add_btn like this

import kotlinx.android.synthetic.main.activity_main.view.*
class MainActivity: AppCompatActivity(){
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        add_btn.onClick {
            toast("hello world")
        }
    }
}

SMS Quotes - Simply Make Sharable Quotes Rewrite in Kotlin

I just rewrite one of my app completely in kotlin, check it out. Simply Make Sharable Quotes
In light of this i'll blog in the following days what I learned from the rewrite :)

Conference Developer Videos - New App

Announcing my first kotlin android app Conference Developer Videos. It features videos from different languages and technologies, it also have lists for you to add videos into. Please help rate the app. Thank you in advance :)

Incase you don't have Android, it is on the web at https://www.conferencedevelopervideos.com/

I created a patreon page to those who are willing to help/donate, my plan is that I want it to be my full time job as there are tons of features to include like notifications, make an ios app and a lot more. Help support the site

Android Kotlin with Anko

I recently found an interest in Android, this time with Kotlin and Anko. Kotlin is an alternative language to build Android App and it's a more modern language therefore it has its own advantage and possibly cleaner way to program then Java. Jetbrains made an amazing job with IntelliJ in making sure that you can create Android Apps. Having said that, here is a tutorial on how to start your first Kotlin Android App. Getting started with Android and Kotlin.

Incase you encounter an error, open your app's build.gradle and replace the contents with the generated content from kotlin build.gradle generator. Note that this has anko in its dependencies.

So what is Anko? From its github page Anko is a library which makes Android application development faster and easier. It makes your code clean and easy to read, and lets you forget about rough edges of Android SDK for Java. It's mostly known for its DSL for making UI but there are few view related extensions that are quite helpful in developing new apps.

Let's see how Kotlin and Anko works. Here is an example of a sharing fragment class

class ShareFragment: Fragment() {
    companion object {
        val FACEBOOK_URL = "https://m.facebook.com/pages/somePage"
    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
 savedInstanceState: Bundle?): View? {
        return UI {
            linearLayout {
                orientation = LinearLayout.VERTICAL
                gravity = Gravity.CENTER_HORIZONTAL

                textView("Share to FB")

                imageButton {
                    imageResource = R.drawable.facebook
                    onClick {
                        owner.gotoUrl(FACEBOOK_URL)
                    }
                }

                textView("Sharing to other network will appear later")
            }
        }.view
    }
}

Just reading from the UI part you would know that this is a linearLayout with gravity horizontally centered and its children is stacked vertically. The first child is textView with text Share to FB, below it is an imageButton with resource drawable named facebook. Then below it is also a textView with the text Sharing to other network.

owner.gotoUrl(FACEBOOK_URL);
You might be wondering what is this, this is called extensions. In kotlin, you can extend base class with your custom functions. With this specific code the owner is a Fragment. So i would have a code like

fun Fragment.gotoUrl(url: String) {
    val intent: Intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
    startActivity(intent)
}

The advantage of doing this is that if you decided to put a share button in another fragment you wont have to duplicate the code. Kotlin advices to use this approach then using an utility based approach. And for me, this way is a lot cleaner.

You could put the Fragment.gotoUrl at the end of the class or a more organised approach is to create an class with all your view related extensions, i called mine ViewExtensions.kt. Here is a gist.

I have just started to learn kotlin and I found it to be interesting. Hope this helps :)

Android Links 2

Another round of Android links :)

1) Developing for Android: the Naughty Bits (Android Dev Summit 2015)

Last week i featured the article from medium (Developing for Android: Introduction), during Android Dev, Chet Haase and Romain Guy talks some aspect about it.

2) Android Studio for Experts- Cheat Sheet

Another one from Android Dev Summit, this time its Android Studio, @shem made a really nice cheat sheet based from the video.

3) AdMob integration in Android
If you need to use ads on your app and you want to use AdMob, then this blog shows you how to implement it from downloading dependencies in using sdk manager to including it on your group view. It shows how to implement code for both banner ads and interstial ads.

4) What’s in a web browser
This is about the web browser in Android, from the early days of Android to why it was super seeded by Chrome codebase on Android 4.3. It is a good read specially if you are developing a web app and/or want to know what's happening behind the browser.

Android Links 1

Today i would start a new trend to keep this blog alive, i wont be blogging as currently I'm not doing Android related but I would showcase 3 Android reads/sites/videos that could help developers with their android app.
Here are the first 3, enjoy :)

1) Developing for Android: Introduction
This is more of rules to developing im Android then an introduction, however it is essential to read it as it writes about why some Android behaves different between versions and what we can do for our app.

2) Google developer youtube
There are tons of videos that takes about how to develop on android.

3) Advanced Android Espresso
Video about testing in Android with espresso, it is from the recent AnDevCon.

Dart and Android

It's time to learn new language now that the future seems to be Android and Dart. Here is the video

Extending Components and AppTheme with Material Design

Recently I have been dealing with custom font in the default components of Android. However I need to use different fonts in English and one font in Chinese. As we know integrating custom fonts with the default components shipped out by Android is a bit tricky specially if you have to cater earlier version of the platform. To fix this problem, i need to extend the components first and this StackOverflow post helped with setting up the classes.

Another piece of the puzzle is with making it use the widget tinting that comes with appcompat v21. We need this because without it we need to generate a lot of files (drawable, styles, etc) and maintaining them is not fun. For this, we refer to the appcompat v21 material design for pre lollipop where we just need to put colorAccent, colorControlNormal, colorControlActivated, colorControlHighlight & colorSwitchThumbNormal. But then, our problem is that if we extend RadioButton, EditText and others, the tinting is not applied. Initially I extended the style of the RadioButton to android:Widget.CompoundButton but nothing happens, then I make sure that if I just use RadioButton and set the color* that it would work and it did. After few tries, I went back to StackOverflow and found this in where it tells use to extends the internal class.

So I made an experiment and here is the gist
First, we create a FontUtils so that we could reuse it with different components

public class FontUtils {
    public static int FONT_REGULAR = 0;
    public static int FONT_THIN = 1;

    public static void setTypeface (int fontName, TextView textView) {
        Typeface font = null;
        Context context = textView.getContext();
        Resources resources = context.getResources();
        if (fontName == FontUtils.FONT_REGULAR) {
            font = Typeface.createFromAsset(context.getAssets(), resources.getString(R.string.font_regular));
        } else if (fontName == FontUtils.FONT_THIN) {
            font = Typeface.createFromAsset(context.getAssets(), resources.getString(R.string.font_thin));
        }
        textView.setTypeface(font);
    }
}

The full class is here, basically here we create a helper class that would set the typeface based on the fontName that is passed from the xml. We create the typeface from the files we have under assets/ using the Typeface.createFromAsset(context.getAssets(), resources.getString(R.string.font_thin)); where the getString() will load the path of the string based on the locale we have. For example we passed in 0 (FONT_REGULAR) we would then load fonts/Roboto-Regular.ttf for English and fonts/NotoSansCJKtc-Bold.oft for Chinese.

For the custom class we have RadioButton as example but it could easily be done with EditText, CheckBox, Spinner using the prefix Tint.

public class RadioButtonCustomFont  extends TintRadioButton {
    private int mFontName;
 
    ...
    public RadioButtonCustomFont(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }
    ... 

    private void init(AttributeSet attrs, int defStyle) {
        final TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.font, defStyle, 0);
        mFontName = a.getInt(R.styleable.font_name, FontUtils.FONT_REGULAR);
        a.recycle();
 
        if (!isInEditMode()) {
            FontUtils.setTypeface(mFontName, this);
        }
    }
}

Here we just pass the mFontName to our FontUtils helper, we got that from the xml on our layout.

To create our RadioButtonCustomFont on our layout we must do something like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:font="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.monmonja.tutorial.RadioButtonCustomFont
        font:name="Regular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Yes"
        />
</RelativeLayout>

Here we create a namespace for font (the same as the name in our assets.xml) then we pass in font:name the value/s from the assets.xml.

Finally we need to apply the tinting that comes with appcompat, for that take a look at the our themes.xml and its explanation is the same as Appcompat for pre-lollipop theming part
Hope this helps :)

Automatically generate Parcelable in Android

Found this really amazing plugin (for lazy people) for Android Studio
Android Parcelable boilerplate code generation

What it does is rewrite the class automatically to include the codes for making your object be Parcelable (for passing between activity, fragment, screen orientation or more).

Center DialogFragment with padding

How do you center the DialogFragment in Android with padding on the right and left? Something like this

For the following, the code is at Github Gist

The problem:
When I created a DialogFragment, the layout's width (match_parent) is being ignored.
The solution for this is to get the window and set the width on the layout

@Override
public void onStart() {
    super.onStart();
    getDialog().getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}

However we want to add padding on the right and left of the window.
One solution, which I did right now is to

Create the dialog with custom style

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    final View view = View.inflate(getActivity(), R.layout.dialog_fragment, null);

    Dialog dialog = new Dialog(getActivity(), R.style.DialogFragment);
    dialog.setContentView(view);
    return dialog;
}

On DialogFragment we extend it to the framework's Dialog style and set windowIsFloating to true with windowBackground of transparent

<style name="DialogFragment" parent="android:style/Theme.Dialog">
    <item name="android:windowBackground">@android:color/transparent
    <item name="android:windowNoTitle">true
    <item name="android:windowIsFloating">true
 
    <item name="android:layout_gravity">center
</style>

Add another layer on the layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/dialog_fragment_bg"
        >
            ...

We added another layer so that we can add the simulated window style on the child layout, we also added a fake shadow on dialog_fragment_bg because we removed it when we set the windowBackground to transparent.

If there is a better solution, please comment below
Hope this helps :)

SMS Quotes new app

Released a new android app SMS Quotes, it is a rewrite of my previous website back in 2006/2007 but with added feature like being able to create quotes that could be share in different social network like instagram. Like:

Any feedback is appreciated :)

Download SMS Quotes

Back doing the android :)

For the last 3 years I was working under HealthGuru.com and was focused on doing mainly Javascript and PHP, was part of the team that builds client website (pluggable module sites) like the video sites of Diabetic Living Online.com and Pregnancy.org and web embed widgets like in sites Medhelp or Health Boards. It was a lot of fun doing it and learn a lot especially Javascript and how browser behaves. But sadly everything has to end, last year HealthGuru were brought by another company and since then it was on maintenance mode and last month I'm not with them anymore.

Now back in Android, as you could see I still do some android apps under Ramen Tech but almost no update on the blog :( One reason is that during those years i was relying on my previous knowledge on Android, i was using Fragment without understanding why it was created hah, i didnt know about the cool projects that Square gave to the android, and a lot more. And since Android changed a lot from 3 years ago, it was a perfect time to update my skills :)

As a start i'll do a shameless plug of the apps i created to enhance my skills
Throwback Thursday Reminder - if you never want to forget that you have to do tbt, explanation why i did this is on my G+ page

Social Days Reminder - for the ones that love posting theme/event based post on social networks, imagine getting reminded that today you have to post science sunday :)

For both project i used ButterKnife and appcompat-v7 to make it look consistent across all version (4.1+).

A tool for publishing screenshot for your android apps

Found a get app, if you're publishing app Android Apps you might need this app, it cleans your action bar before you take a screenshot.
Clean Status Bar