Tag Archives: Patterns

An introduction to MVVM pattern on Android with the Data Binding Library

In a previous post we made a brief introduction to the MVP architectural pattern, describing how it help us to create a much cleaner, testable and modular source code for our application.

In this post we are going to talk about the MVVM pattern and explain how using the new Android Data Binding Library we can achieve the same level of modularity and separation of concerns but one step ahead, making the data binding with the UI layer less verbose and straightforward, which will produce source code less prone to errors and bugs.

 

What is MVVM?

Model-View-ViewModel is a variation of the MVC and MVP patterns initially described and implemented by Microsoft to be used on the .NET platform, specifically with WPF and Silverlight technologies that makes use of the XAML language to implement User Interfaces.

In the Microsoft ecosystem one of the main advantages of this pattern is that the designers can implement the View working completely independent of developers using Blend, which is an amazing UI IDE. Then developers can focus only on the ViewModel and Model and wiring everything with the Binding functionality. This in Android is much more difficult as the UI designer tools are not powerful enough.

Screen Shot 2015-12-05 at 10.59.55

Like in the MVP pattern we separate and architect our code in three well defined layers.

The View defines the pure user interface and it has no logic at all except any related only to the UI. If we focus on the Android platform in this layer we would have Activities, Fragments, Dialogs, Views, etc. As we saw in the MVP post these entities will implement an interface that will be use as bridge with the ViewModel layer.

The Model integrates our data strategy, backend support, pojos, and generally speaking what we all know as business logic. These will be implemented via Interactors which defines uses cases of the domain logic.

And finally we have the ViewModel which differentiate this patterns from others. Conceptually this layer is in charge of the same logic as the Presenter in the MVP, which is acting as a facade and brain between our data model and the user interface.

It will be able to identify the application status and display or fetch data and information using the View and the Model. The ViewModel knows how and where to display the information in the user interface. Also it knows where  and how to get this information from the Model.

But the main difference is how this data are passed from the model to the View, which in the VM happen using a mechanism called Data Binding.

 

What is Data Binding?

Data Binding is a mechanism where a view component is linked to a data entity of the ViewModel without having to implement specific code to transform or assign this data to the visual component. We can send and receive commands and events and also connect data source to the component. In Android this magic happen thanks to the recently added Data Binding Library.

As we can see, one of the main advantages of using Data Binding is the time we save due the amount of code that we don’t have to implement to connect the data and the view and hence the possible bugs and code defects that we will avoid.

 

Implementing Data Binding on Android

First thing we need to use the Android Plugin for Gradle version 1.5.0-alpha1 or higher.

classpath 'com.android.tools.build:gradle:1.5.0'

Then we configure the app to use the data binding feature in the build.grade file.

dataBinding {
enabled = true
}

Now we need to add the data binding to the component that is going to display the data that we need. For this example we will use two TextView which are going to display a user name and email that we will fetch from a web service using Retrofit. Once we have the response from the server, this info will be automatically updated on the view.

So let’s add the binding code in the layout of our view, in this case we are adding a reference to the pojo class that contains the data that we are binding and that will fill up with the response of our server request. Also we are setting the TextView wit the field of the that contains the specific user name and email:

<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context="com.quoders.apps.androidbootstrap.mvvm.MvvmExampleFragment">

<data>
<variable name="commentItem" type="com.quoders.apps.androidbootstrap.rest.model.CommentItem"/>
</data>

<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@{commentItem.name}" android:layout_marginTop="15dp"/>

<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@{commentItem.email}" android:layout_marginTop="5dp"/>
</layout>

Next we need to initialise the binding objet in the Activity or Fragment. Note that the FragmentMvvmExampleBinding is created automatically by Android Studio:


FragmentMvvmExampleBinding mBinding = DataBindingUtil.setContentView(getActivity(), R.layout.fragment_mvvm_example);

And finally when we have the response from the HTTP request we do the binding with the pojo that contains the data to bind:


mBinding.setCommentItem(mComentItem);

As you can see in this example, the UI component is update on demand when we have the server response data. Although this feature is pretty cool, what makes data binding really powerful is the ability to update the UI component automatically each time that the status of the bind object changes. We accomplish this extending our pojo data class from the BaseObservable class that the Data Binding library provides and setting the fields as observables. In our example it would look  like this:

public class CommentItem extends BaseObservable {

@Expose
private String name;
@Expose
private String email;

@Bindable
public String getName() {
return name;
}

@Bindable
public String getEmail() {
return email;
}
}

There are multiple possibilities like binding collections, resources, automatic setters, etc… But all this due its extension will be the topic of another post!

You can find the source code with this example here in the FragmentMvvmExample. To check out how to implement the division of layers on MVP / MVVM have a look to my previous post.

As usual all comments, suggestions or critics are more than welcome, please leave your comments!

 

Tagged , , ,

A brief introduction to a cleaner Android architecture: The MVP pattern

As the Android platform has been maturing, developers found that the standard approach to organise the architecture and design of the application code wasn’t the best at all. Usually we ended up having a massive monolithic module, an Activity or a Fragment, containing business and UI logic, creating an unmaintainable and untestable messy project.

Google itself haven’t provided so far a good practice guideline or code examples showing a modular and decoupled approach that implements any of the well known and widely used design patterns, like for example MVC which is encouraged by default on the iOS platform or the common MVVM in Microsoft environments.

One of the most common pattern that the community of Android developers has been using for a while and that has got lot of attention is the Model View Presenter (MVP) pattern and we will focus on it on this post. We will not go through a deep academic description of the pattern but we will focus on the advantages and practical use of it. For an awesome analysis of the MVP and other patterns take a look at this classic post from Martin Fowler about GUI architecture.

So what’s MVP?

18289

Basically MVP is an architectural design pattern that divides our application code in three entities in order to achieve a modular design, implementing the separation of concerns concept, allows an easier implementation of unit tests and making possible to reuse and replace modules either of our UI, data or business layer.

MVP is an evolution of MVC and it has multiple variants and implementations. There has been a lot of conversations and debate about the best and proper way to adopt it on Android. I’m going to expone my way which I have been using in a couple of projects and I reckon works better for me. Of course it doesn’t mean is the best or only one that works on Android, so please leave any comment and suggestions if you find any area of improvement.

Ok so let’s see who is who in this approach.

The View

This entity is going to include the visual part of our app, it is only the UI and it will not have any logic or knowledge of the data displayed. The View doesn’t know anything about the business logic or how to get the data it has to show to the user.

Activities, Fragments, Dialogs, etc… would be included in this category. This elements will contain only initialisation and display functionalities of the visual components and elements to display information to the user. It will not contain any functional or business logic like access to database or web server for example.

This module (Activity, Fragment, etc) exports an interface that will be used by the Presenter, which is responsible and have the knowledge and logic about how, when and what to show in the View. This interface will have methods like “showProgressBar”, “showLoginErrorMessage” or “launchSignupActivity”. Here is an example:

public interface WelcomeView {

    void launchHomeActivity();
    void LaunchSignupActivity();
    void closeActivity();

    void setWrongUsernameError();
    void setWrongPasswordError();

    void showLoginErrorAlertDialog();
}

The Presenter

As we mentioned before, this entity is going to have all the logic and knowledge about what, how and when to display in the user interface. It will be responsible of capture events raised by the user when interacting with the UI and perform any action.

The presenter also acts as a bridge between the View and the Model fetching any data needed from the data layer, making any transformation and display this info to the user on the View.
This entity ideally shouldn’t have any dependency of the Android SDK such us Context or Activity references.

The Activity will have a reference to the Presenter interface and it will use it to communicate any event occurred on the View, like the user tap on a button or the user enter any data in a TextView and then it will decide what to do in reaction of that event.

Here is an example of a Presenter interface:

public interface WelcomePresenter {
    void onCreateAccountClick();
    void onActivityResultCalled(int requestCode, int result);
    void onLoginClick();
}

So for example let’s say that if the user tap on a Logout button, the View call the exported method “onLogoutClick” of the Presenter interface. Then the it knows what interactor of the Model layer needs to invoke to perform a Logout action on the app.

Once the log out success callback has been received, the Presenter will perform any action on the View, for example closing the Activity and displaying a home screen Activity.

The Model

In this entity we will include the “interactors” (use cases of our business logic) that will perform and manage any business layer logic and data access, like fetching data from our web service, accessing the database, etc.

Once we have that piece of data the interactor will send it back to the Presenter and this will decide what to do with this data and how to show it to the View as we saw in the previous point.

Here an example of an implementation of an interactor:

public class WelcomeInteractorImpl implements WelcomeInteractor {

    private WelcomeInteractorListener   mListener;

    public WelcomeInteractorImpl(WelcomeInteractorListener listener) {
        this.mListener = listener;
    }

    @Override
    public void loginWithUserName(String username, String password) {

        ParseUser.logInInBackground(username, password, new LogInCallback() {
            public void done(ParseUser user, ParseException e) {
                if (mListener != null) {
                    if (user != null) {
                        mListener.onLoginSuccessful();
                    }
                    else {
                        mListener.onLoginError(e);
                    }
                }
            }
        });
    }
}

Summary

So this is a very brief summary of what is MVP and how to use it on Android to achieve a cleaner, modular and testable source code. This is just an interpretation of the pattern and is not a silver bullet or the perfect solution for our apps, so any comments or critics are more than welcome!

To see an example of this implementation you can take a look to one of my open source experimental apps “Treepolis”. Is still an in progress project and you can find it here in Github
To see a practical example of the pattern used for the Welcome screen and login functionality check this folder.

Tagged , , ,