SlideShare a Scribd company logo
1 of 31
Download to read offline
MVVM & Data Binding
Library
Wojciech Topolski
Agenda
• Theory of MVVM
• Data Binding Library
• Custom MVVM(C) implementation
• View Model Composition
• Binding & RecycleView
• Grabbing value directly from View
• Links
Theory of MVVM
• "MVVM facilitates a separation of development of the graphical user interface from development of the
business logic. The view model of MVVM is a value converter; meaning the view model is responsible for
exposing (converting) the data objects from the model in such a way that objects are easily managed and
presented. In this respect, the view model is more model than view, and handles most if not all of the
view's display logic. The view model may implement a mediator pattern, organizing access to the back-
end logic around the set of use cases supported by the view.” (Wikipedia)
• Model - Business data layer, it could be set of POJO objects or layer operating on database/network/
cache. Must be independent of user interface.
• View - User interface.
• View Model - It is responsible for converting data between Model and View, visibility of View components.
Data Binding Library
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

MainActivityBinding binding;

binding = DataBindingUtil.setContentView(this, R.layout.main_activity);

User user = new User("Test", "User");

binding.setUser(user);

}
<layout xmlns:android="http://schemas.android.com/apk/res/android">

<data>

<variable name="user" type="com.example.User"/>

</data>

<LinearLayout ...>

<TextView

android:text="@{user.firstName}"/>

<TextView

android:text="@{user.lastName}"/>

</LinearLayout>

</layout>
BY EXAMPLE
Android Plugin for Gradle 2.1+

https://developer.android.com/topic/libraries/data-binding/index.html
Data Binding Library
Variables and imports in <data>...</data> section.

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:bind="http://schemas.android.com/apk/res-auto">

<data>

<import type="android.view.View" />

<variable

name="viewModel"

type="com.github.wtopolski.libmvvm.viewmodel.ButtonViewModel"/>

</data>



<Button . . . />



</layout>
FEATURE 1 / 15
Data Binding Library
Widgets are available by binding.id expression, where
id is equal to content of android:id attribute. However,
android:id is not obligatory at all.
<TextView android:id=“@+id/someTextView" />
ActivityMainBinding binding = DataBindingUtil.setContentView(

this, R.layout.activity_main);


binding.someTextView.setText("XYZ");
FEATURE 2 / 15
Data Binding Library
Setting almost every widget XML attribute is
possible. Directly by setter paired with attribute like
android:enabled and view.setEnabled(boolean). Or
indirectly using BindingAdapter or BindingMethods.
<EditText

android:enabled=“@{viewModel.enabled}" />
FEATURE 3 / 15
Data Binding Library
Observable variables. Every data change could be
reflected to View. "You can change your data model in
a background thread as long as it is not a collection."
public class BaseViewModel extends BaseObservable {

private boolean enabled;



public void setEnabled(boolean enabled) {

this.enabled = enabled;

notifyPropertyChanged(BR.enabled);

}



@Bindable

public boolean getEnabled() {

return enabled;

}

}
<EditText

android:enabled=“@{viewModel.enabled}" />
FEATURE 4 / 15
Data Binding Library
Two-way data binding allows synchronization
widget's state between user interface and passed
variable. Main restriction is XML attribute must
have listener indicating change of value.


<EditText

android:text="@={viewModel.value}" />
FEATURE 5 / 15
Data Binding Library
EventHandling::MethodReference
• "listener implementation is created when the data is bound”
• "expression is processed at compile time, so if the method does not exist or its signature is not
correct, you receive a compile time error.”
• "method must match the parameters of the event listener”
<Button

android:onClick="@{viewModel::onButtonClick}” />
public void onButtonClick(View view) {

// Some action

}
FEATURE 6 / 15
Data Binding Library
() -> EventHandling.ListenerBindings()
• "listener implementation is created when event is triggered”
• "return value must match the expected return value of the listener (unless it is
expecting void)”
<Button

android:onClick=“@{() -> viewModel.onButtonClick()}” />
public void onButtonClick() {

// Some action

}
FEATURE 7 / 15
Data Binding Library
BindingAdapter allows to set any data using custom
XML attribute. The same solution helps to write
attributes for custom widgets. No more attrs.xml
files!
@BindingAdapter({"errorEnabled"})

public static void errorEnabled(TextInputLayout view, String value) {

view.setError(value);

view.setErrorEnabled(!TextUtils.isEmpty(value));

}
<android.support.design.widget.TextInputLayout

bind:errorEnabled="@{viewModel.valueError}">
FEATURE 8 / 15
Data Binding Library
BindingMethods "Some attributes have setters that
don't match by name… For example, the
android:tint attribute is really associated with
setImageTintList(ColorStateList), not setTint."
@BindingMethods({

@BindingMethod(

type = "android.widget.ImageView",

attribute = "android:tint",

method = "setImageTintList")

})
FEATURE 9 / 15
Data Binding Library
Converter helps to translate given value format into
format which is expected by specific XML tag.
@BindingConversion

public static ColorDrawable convertColorToDrawable(String color) {

return new ColorDrawable(Color.parseColor(color));

}
<LinearLayout

android:background="@{viewModel.color}">
FEATURE 10 / 15
Data Binding Library
In custom XML attributes we can use application
resources.
<TextView

bind:textColor="@{@color/green}" />


<resources>

<color name="green">#009900</color>

</resources>
FEATURE 11 / 15
Data Binding Library
Null Coalescing Operator
<TextView

android:text=“@{user.displayName ?? user.lastName}” />
FEATURE 12 / 15
Data Binding Library
Including layouts. More in View Model Composition
section.
<include

layout="@layout/text_view"

android:layout_width=“match_parent"

android:layout_height=“wrap_content"

bind:viewModel="@{viewModel.redDesc}"

bind:textColor="@{@color/red}" />
FEATURE 13 / 15
Data Binding Library
Immediate Binding. "When a variable or observable
changes, the binding will be scheduled to change
before the next frame...To force execution, use the
executePendingBindings() method."
binding.executePendingBindings();
FEATURE 14 / 15
Data Binding Library
Data Binding doesn't use reflection. Binding classes
are generated almost in real time by Android Studio,
and they are part of application. You can find them in
build directory.
.../build/intermediates/classes/debug/package_name/databinding/*
FEATURE 15 / 15
Custom MVVM(C) implementation
• Bases on Data Binding Library and RxJava
• Layers:
• Model - business data layer (POJO, Database, Cache,
Backend)
• View - user interface (XML and Binding)
• View Model - conversion between displayed data and stored
data (model), validation of forms, etc…
• What’s about Activity and Fragment? Is it View or View Model?
• Or maybe MVVMC? Where:
• Controller - is responsible for global actions like open new
Activities
• View Model - takes care about operation on single screen
https://github.com/wtopolski/androidmvvm
View Model Composition
Real app screens are complicated. Usually they
contain several input and output widgets like
EditText, Button, SeekBar, RecycleView, etc.
It would be useful to create set of Views and View
Models. And then reuse them to composite user
interface.
View Model Composition
View Model Composition
SeekBar View
<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:bind="http://schemas.android.com/apk/res-auto">

<data>

<import type="android.view.View" />

<variable

name="viewModel"

type="com.github.wtopolski.libmvvm.viewmodel.SeekBarViewModel"/>

</data>



<SeekBar

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:max="@{viewModel.max}"

android:progress="@={viewModel.progress}"

android:visibility="@{viewModel.visibility ? View.VISIBLE : View.GONE}"

android:enabled="@{viewModel.enabled}" />



</layout>
View Model Composition
SeekBar View Model
public class SeekBarViewModel extends BaseViewModel {

private int progress;

private int max;

private PublishSubject<Integer> progressObservable = PublishSubject.create();



public SeekBarViewModel() { super(); }



public SeekBarViewModel(boolean enabled, boolean visibility) { super(enabled, visibility); }



public void setProgress(int progress) {

this.progress = progress;

progressObservable.onNext(progress);

notifyPropertyChanged(BR.progress);

}



@Bindable

public int getProgress() { return progress; }



public void setMax(int max) {

this.max = max;

notifyPropertyChanged(BR.max);

}



@Bindable

public int getMax() { return max; }



public Observable<Integer> rxProgress() { return progressObservable.asObservable(); }

}
View Model Composition
activity_color_form.xml ColorFormViewModel.java
Binding & RecycleView
We have to remember that this kind of screen has two sets of
MVVM elements. One for list screen itself. And one for every item
on the list.



colors = generateColors();



adapter = new ColorListAdapter(colors, 

getApplicationContext(), this);



ActivityColorListBinding binding;



binding = DataBindingUtil.setContentView(this, 

R.layout.activity_color_list);



ColorListViewModel viewModel = new ColorListViewModel();



binding.setViewModel(viewModel);



viewModel.configure(true, 

new DefaultItemAnimator(), 

new LinearLayoutManager(this));



viewModel.setAdapter(adapter);
https://github.com/wtopolski/androidmvvm
Binding & RecycleView
More interesting is MVVM for list elements. First of
all, our adapter is much more simple. No more
custom ViewHolders for RecycleView. All we need is
BindingViewHolder.
public class BindingViewHolder extends RecyclerView.ViewHolder {

private ViewDataBinding binding;



public BindingViewHolder(@NonNull ViewDataBinding binding) {

super(binding.getRoot());

this.binding = binding;

}



public ViewDataBinding getBinding() {

return binding;

}

}
Binding & RecycleView
onCreateViewHolder
@Override

public BindingViewHolder onCreateViewHolder(ViewGroup parent, 

int viewType) {



ActivityColorListItemBinding binding = DataBindingUtil.inflate(

LayoutInflater.from(parent.getContext()),

R.layout.activity_color_list_item, 

parent, 

false);



return new BindingViewHolder(binding);

}
Binding & RecycleView
onBindViewHolder
@Override

public void onBindViewHolder(BindingViewHolder holder, int position) {

ActivityColorListItemBinding binding = (ActivityColorListItemBinding)

holder.getBinding();

ColorListItemViewModel viewModel = binding.getViewModel();



// Init new view model object

if (viewModel == null) {

viewModel = new ColorListItemViewModel();

binding.setViewModel(viewModel);

binding.setTextColor(ContextCompat.getColor(context, R.color.colorAccent));

viewModel.setListener(listener);

}



ColorForm form = data.get(position);

viewModel.setAdapterPosition(holder.getAdapterPosition());

viewModel.setData(form);



// Immediate Binding

binding.executePendingBindings();

}
Grabbing value directly from View
Getting value from View which is not available in
ViewModel.
private void checkEnabledStateOnView() {

viewModel.confirm.setEditableObserver(new Subscriber<Boolean>() { . . . 

@Override

public void onNext(Boolean isEnabled) {

// Some code

}

});

binding.executePendingBindings();

}
bind:editableObserver="@{viewModel.editableObserver}"
@BindingAdapter({"editableObserver"})

public static void editableObserver(View view, Subscriber<Boolean> subscriber) {

if (subscriber != null) {

subscriber.onNext(view.isEnabled());

subscriber.onCompleted();

}

}
Links
• MVC VS. MVP VS. MVVM
• Model–view–viewmodel
• Approaching Android with MVVM
• Going with MVVM on Android via Data Binding
• DataBinding: how to develop Android apps faster
• Data Binding Library
• Exploring the MVC, MVP, and MVVM design patterns
• MVVMC thought experiment
• MVVM is dead, long live MVVMC!
• Comparison of Architecture presentation patterns MVP(SC),MVP(PV),PM,MVVM and MVC
• MVMMC – MVVM Grows A Controller

More Related Content

What's hot

What's hot (20)

Android MVVM
Android MVVMAndroid MVVM
Android MVVM
 
React js
React jsReact js
React js
 
Try Jetpack Compose
Try Jetpack ComposeTry Jetpack Compose
Try Jetpack Compose
 
Spring mvc
Spring mvcSpring mvc
Spring mvc
 
Deep dive into Android Data Binding
Deep dive into Android Data BindingDeep dive into Android Data Binding
Deep dive into Android Data Binding
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
 
Hexagonal architecture for java applications
Hexagonal architecture for java applicationsHexagonal architecture for java applications
Hexagonal architecture for java applications
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
 
ReactJS
ReactJSReactJS
ReactJS
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI
 
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOMReact.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
 
MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )
 
Jetpack Compose beginner.pdf
Jetpack Compose beginner.pdfJetpack Compose beginner.pdf
Jetpack Compose beginner.pdf
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
 
[부스트캠프 웹・모바일 7기 Tech Talk]이지훈_뉴비의 시점에서 바라본 Kotlin_suspend
[부스트캠프 웹・모바일 7기 Tech Talk]이지훈_뉴비의 시점에서 바라본 Kotlin_suspend[부스트캠프 웹・모바일 7기 Tech Talk]이지훈_뉴비의 시점에서 바라본 Kotlin_suspend
[부스트캠프 웹・모바일 7기 Tech Talk]이지훈_뉴비의 시점에서 바라본 Kotlin_suspend
 

Viewers also liked

Windows Store Development : MVVM and data binding
Windows Store Development : MVVM and data bindingWindows Store Development : MVVM and data binding
Windows Store Development : MVVM and data binding
Remon Kamel
 
Android - Thread, Handler and AsyncTask
Android - Thread, Handler and AsyncTaskAndroid - Thread, Handler and AsyncTask
Android - Thread, Handler and AsyncTask
Hoang Ngo
 
A Separation of Concerns: Clean Architecture on Android
A Separation of Concerns: Clean Architecture on AndroidA Separation of Concerns: Clean Architecture on Android
A Separation of Concerns: Clean Architecture on Android
Outware Mobile
 

Viewers also liked (20)

Data Binding in Action using MVVM pattern
Data Binding in Action using MVVM patternData Binding in Action using MVVM pattern
Data Binding in Action using MVVM pattern
 
Android Data Binding in action using MVVM pattern - droidconUK
Android Data Binding in action using MVVM pattern - droidconUKAndroid Data Binding in action using MVVM pattern - droidconUK
Android Data Binding in action using MVVM pattern - droidconUK
 
Android data binding
Android data bindingAndroid data binding
Android data binding
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no Android
 
MVVM with DataBinding on android
MVVM with DataBinding on androidMVVM with DataBinding on android
MVVM with DataBinding on android
 
MVVM_Ashraf
MVVM_AshrafMVVM_Ashraf
MVVM_Ashraf
 
Windows Store Development : MVVM and data binding
Windows Store Development : MVVM and data bindingWindows Store Development : MVVM and data binding
Windows Store Development : MVVM and data binding
 
Frontend Components Outside Main App by Adam Florczak
Frontend Components Outside Main App by Adam FlorczakFrontend Components Outside Main App by Adam Florczak
Frontend Components Outside Main App by Adam Florczak
 
iOS 10 Rich Push Notifications
iOS 10 Rich Push NotificationsiOS 10 Rich Push Notifications
iOS 10 Rich Push Notifications
 
Dodanie Prezentacji Z Slide Share Do Blog Engine
Dodanie Prezentacji Z Slide Share Do Blog EngineDodanie Prezentacji Z Slide Share Do Blog Engine
Dodanie Prezentacji Z Slide Share Do Blog Engine
 
Data binding
Data bindingData binding
Data binding
 
Prezi sucks
Prezi sucksPrezi sucks
Prezi sucks
 
Android Data Binding
Android Data BindingAndroid Data Binding
Android Data Binding
 
Memory Leaks in Android Applications
Memory Leaks in Android ApplicationsMemory Leaks in Android Applications
Memory Leaks in Android Applications
 
FFmpeg presentation
FFmpeg presentationFFmpeg presentation
FFmpeg presentation
 
Android - Thread, Handler and AsyncTask
Android - Thread, Handler and AsyncTaskAndroid - Thread, Handler and AsyncTask
Android - Thread, Handler and AsyncTask
 
Android Databinding Library
Android Databinding LibraryAndroid Databinding Library
Android Databinding Library
 
Testable Android Apps using data binding and MVVM
Testable Android Apps using data binding and MVVMTestable Android Apps using data binding and MVVM
Testable Android Apps using data binding and MVVM
 
FFMPEG on android
FFMPEG on androidFFMPEG on android
FFMPEG on android
 
A Separation of Concerns: Clean Architecture on Android
A Separation of Concerns: Clean Architecture on AndroidA Separation of Concerns: Clean Architecture on Android
A Separation of Concerns: Clean Architecture on Android
 

Similar to MVVM & Data Binding Library

Rp 6 session 2 naresh bhatia
Rp 6  session 2 naresh bhatiaRp 6  session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
sapientindia
 
Introduction to XAML and its features
Introduction to XAML and its featuresIntroduction to XAML and its features
Introduction to XAML and its features
Abhishek Sur
 
Adding a view
Adding a viewAdding a view
Adding a view
Nhan Do
 

Similar to MVVM & Data Binding Library (20)

Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
 
Knockoutjs databinding
Knockoutjs databindingKnockoutjs databinding
Knockoutjs databinding
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
Knockoutjs
KnockoutjsKnockoutjs
Knockoutjs
 
Rp 6 session 2 naresh bhatia
Rp 6  session 2 naresh bhatiaRp 6  session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
 
The Magic of WPF & MVVM
The Magic of WPF & MVVMThe Magic of WPF & MVVM
The Magic of WPF & MVVM
 
Asp.NET MVC
Asp.NET MVCAsp.NET MVC
Asp.NET MVC
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
 
MVVM with Databinding and Google's new ViewModel. UA Mobile 2017.
MVVM with Databinding and Google's new ViewModel. UA Mobile 2017.MVVM with Databinding and Google's new ViewModel. UA Mobile 2017.
MVVM with Databinding and Google's new ViewModel. UA Mobile 2017.
 
MVC
MVCMVC
MVC
 
Effective Android Data Binding
Effective Android Data BindingEffective Android Data Binding
Effective Android Data Binding
 
MVC ppt presentation
MVC ppt presentationMVC ppt presentation
MVC ppt presentation
 
Asp.net mvc training
Asp.net mvc trainingAsp.net mvc training
Asp.net mvc training
 
Dialogs in Android MVVM (14.11.2019)
Dialogs in Android MVVM (14.11.2019)Dialogs in Android MVVM (14.11.2019)
Dialogs in Android MVVM (14.11.2019)
 
Introduction to XAML and its features
Introduction to XAML and its featuresIntroduction to XAML and its features
Introduction to XAML and its features
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
 
Data binding 入門淺談
Data binding 入門淺談Data binding 入門淺談
Data binding 入門淺談
 
How to use data binding in android
How to use data binding in androidHow to use data binding in android
How to use data binding in android
 
Adding a view
Adding a viewAdding a view
Adding a view
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 

MVVM & Data Binding Library

  • 1. MVVM & Data Binding Library Wojciech Topolski
  • 2. Agenda • Theory of MVVM • Data Binding Library • Custom MVVM(C) implementation • View Model Composition • Binding & RecycleView • Grabbing value directly from View • Links
  • 3. Theory of MVVM • "MVVM facilitates a separation of development of the graphical user interface from development of the business logic. The view model of MVVM is a value converter; meaning the view model is responsible for exposing (converting) the data objects from the model in such a way that objects are easily managed and presented. In this respect, the view model is more model than view, and handles most if not all of the view's display logic. The view model may implement a mediator pattern, organizing access to the back- end logic around the set of use cases supported by the view.” (Wikipedia) • Model - Business data layer, it could be set of POJO objects or layer operating on database/network/ cache. Must be independent of user interface. • View - User interface. • View Model - It is responsible for converting data between Model and View, visibility of View components.
  • 4. Data Binding Library protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 MainActivityBinding binding;
 binding = DataBindingUtil.setContentView(this, R.layout.main_activity);
 User user = new User("Test", "User");
 binding.setUser(user);
 } <layout xmlns:android="http://schemas.android.com/apk/res/android">
 <data>
 <variable name="user" type="com.example.User"/>
 </data>
 <LinearLayout ...>
 <TextView
 android:text="@{user.firstName}"/>
 <TextView
 android:text="@{user.lastName}"/>
 </LinearLayout>
 </layout> BY EXAMPLE Android Plugin for Gradle 2.1+
 https://developer.android.com/topic/libraries/data-binding/index.html
  • 5. Data Binding Library Variables and imports in <data>...</data> section.
 <?xml version="1.0" encoding="utf-8"?>
 <layout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:bind="http://schemas.android.com/apk/res-auto">
 <data>
 <import type="android.view.View" />
 <variable
 name="viewModel"
 type="com.github.wtopolski.libmvvm.viewmodel.ButtonViewModel"/>
 </data>
 
 <Button . . . />
 
 </layout> FEATURE 1 / 15
  • 6. Data Binding Library Widgets are available by binding.id expression, where id is equal to content of android:id attribute. However, android:id is not obligatory at all. <TextView android:id=“@+id/someTextView" /> ActivityMainBinding binding = DataBindingUtil.setContentView(
 this, R.layout.activity_main); 
 binding.someTextView.setText("XYZ"); FEATURE 2 / 15
  • 7. Data Binding Library Setting almost every widget XML attribute is possible. Directly by setter paired with attribute like android:enabled and view.setEnabled(boolean). Or indirectly using BindingAdapter or BindingMethods. <EditText
 android:enabled=“@{viewModel.enabled}" /> FEATURE 3 / 15
  • 8. Data Binding Library Observable variables. Every data change could be reflected to View. "You can change your data model in a background thread as long as it is not a collection." public class BaseViewModel extends BaseObservable {
 private boolean enabled;
 
 public void setEnabled(boolean enabled) {
 this.enabled = enabled;
 notifyPropertyChanged(BR.enabled);
 }
 
 @Bindable
 public boolean getEnabled() {
 return enabled;
 }
 } <EditText
 android:enabled=“@{viewModel.enabled}" /> FEATURE 4 / 15
  • 9. Data Binding Library Two-way data binding allows synchronization widget's state between user interface and passed variable. Main restriction is XML attribute must have listener indicating change of value. 
 <EditText
 android:text="@={viewModel.value}" /> FEATURE 5 / 15
  • 10. Data Binding Library EventHandling::MethodReference • "listener implementation is created when the data is bound” • "expression is processed at compile time, so if the method does not exist or its signature is not correct, you receive a compile time error.” • "method must match the parameters of the event listener” <Button
 android:onClick="@{viewModel::onButtonClick}” /> public void onButtonClick(View view) {
 // Some action
 } FEATURE 6 / 15
  • 11. Data Binding Library () -> EventHandling.ListenerBindings() • "listener implementation is created when event is triggered” • "return value must match the expected return value of the listener (unless it is expecting void)” <Button
 android:onClick=“@{() -> viewModel.onButtonClick()}” /> public void onButtonClick() {
 // Some action
 } FEATURE 7 / 15
  • 12. Data Binding Library BindingAdapter allows to set any data using custom XML attribute. The same solution helps to write attributes for custom widgets. No more attrs.xml files! @BindingAdapter({"errorEnabled"})
 public static void errorEnabled(TextInputLayout view, String value) {
 view.setError(value);
 view.setErrorEnabled(!TextUtils.isEmpty(value));
 } <android.support.design.widget.TextInputLayout
 bind:errorEnabled="@{viewModel.valueError}"> FEATURE 8 / 15
  • 13. Data Binding Library BindingMethods "Some attributes have setters that don't match by name… For example, the android:tint attribute is really associated with setImageTintList(ColorStateList), not setTint." @BindingMethods({
 @BindingMethod(
 type = "android.widget.ImageView",
 attribute = "android:tint",
 method = "setImageTintList")
 }) FEATURE 9 / 15
  • 14. Data Binding Library Converter helps to translate given value format into format which is expected by specific XML tag. @BindingConversion
 public static ColorDrawable convertColorToDrawable(String color) {
 return new ColorDrawable(Color.parseColor(color));
 } <LinearLayout
 android:background="@{viewModel.color}"> FEATURE 10 / 15
  • 15. Data Binding Library In custom XML attributes we can use application resources. <TextView
 bind:textColor="@{@color/green}" /> 
 <resources>
 <color name="green">#009900</color>
 </resources> FEATURE 11 / 15
  • 16. Data Binding Library Null Coalescing Operator <TextView
 android:text=“@{user.displayName ?? user.lastName}” /> FEATURE 12 / 15
  • 17. Data Binding Library Including layouts. More in View Model Composition section. <include
 layout="@layout/text_view"
 android:layout_width=“match_parent"
 android:layout_height=“wrap_content"
 bind:viewModel="@{viewModel.redDesc}"
 bind:textColor="@{@color/red}" /> FEATURE 13 / 15
  • 18. Data Binding Library Immediate Binding. "When a variable or observable changes, the binding will be scheduled to change before the next frame...To force execution, use the executePendingBindings() method." binding.executePendingBindings(); FEATURE 14 / 15
  • 19. Data Binding Library Data Binding doesn't use reflection. Binding classes are generated almost in real time by Android Studio, and they are part of application. You can find them in build directory. .../build/intermediates/classes/debug/package_name/databinding/* FEATURE 15 / 15
  • 20. Custom MVVM(C) implementation • Bases on Data Binding Library and RxJava • Layers: • Model - business data layer (POJO, Database, Cache, Backend) • View - user interface (XML and Binding) • View Model - conversion between displayed data and stored data (model), validation of forms, etc… • What’s about Activity and Fragment? Is it View or View Model? • Or maybe MVVMC? Where: • Controller - is responsible for global actions like open new Activities • View Model - takes care about operation on single screen https://github.com/wtopolski/androidmvvm
  • 21. View Model Composition Real app screens are complicated. Usually they contain several input and output widgets like EditText, Button, SeekBar, RecycleView, etc. It would be useful to create set of Views and View Models. And then reuse them to composite user interface.
  • 23. View Model Composition SeekBar View <?xml version="1.0" encoding="utf-8"?>
 <layout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:bind="http://schemas.android.com/apk/res-auto">
 <data>
 <import type="android.view.View" />
 <variable
 name="viewModel"
 type="com.github.wtopolski.libmvvm.viewmodel.SeekBarViewModel"/>
 </data>
 
 <SeekBar
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:max="@{viewModel.max}"
 android:progress="@={viewModel.progress}"
 android:visibility="@{viewModel.visibility ? View.VISIBLE : View.GONE}"
 android:enabled="@{viewModel.enabled}" />
 
 </layout>
  • 24. View Model Composition SeekBar View Model public class SeekBarViewModel extends BaseViewModel {
 private int progress;
 private int max;
 private PublishSubject<Integer> progressObservable = PublishSubject.create();
 
 public SeekBarViewModel() { super(); }
 
 public SeekBarViewModel(boolean enabled, boolean visibility) { super(enabled, visibility); }
 
 public void setProgress(int progress) {
 this.progress = progress;
 progressObservable.onNext(progress);
 notifyPropertyChanged(BR.progress);
 }
 
 @Bindable
 public int getProgress() { return progress; }
 
 public void setMax(int max) {
 this.max = max;
 notifyPropertyChanged(BR.max);
 }
 
 @Bindable
 public int getMax() { return max; }
 
 public Observable<Integer> rxProgress() { return progressObservable.asObservable(); }
 }
  • 26. Binding & RecycleView We have to remember that this kind of screen has two sets of MVVM elements. One for list screen itself. And one for every item on the list.
 
 colors = generateColors();
 
 adapter = new ColorListAdapter(colors, 
 getApplicationContext(), this);
 
 ActivityColorListBinding binding;
 
 binding = DataBindingUtil.setContentView(this, 
 R.layout.activity_color_list);
 
 ColorListViewModel viewModel = new ColorListViewModel();
 
 binding.setViewModel(viewModel);
 
 viewModel.configure(true, 
 new DefaultItemAnimator(), 
 new LinearLayoutManager(this));
 
 viewModel.setAdapter(adapter); https://github.com/wtopolski/androidmvvm
  • 27. Binding & RecycleView More interesting is MVVM for list elements. First of all, our adapter is much more simple. No more custom ViewHolders for RecycleView. All we need is BindingViewHolder. public class BindingViewHolder extends RecyclerView.ViewHolder {
 private ViewDataBinding binding;
 
 public BindingViewHolder(@NonNull ViewDataBinding binding) {
 super(binding.getRoot());
 this.binding = binding;
 }
 
 public ViewDataBinding getBinding() {
 return binding;
 }
 }
  • 28. Binding & RecycleView onCreateViewHolder @Override
 public BindingViewHolder onCreateViewHolder(ViewGroup parent, 
 int viewType) {
 
 ActivityColorListItemBinding binding = DataBindingUtil.inflate(
 LayoutInflater.from(parent.getContext()),
 R.layout.activity_color_list_item, 
 parent, 
 false);
 
 return new BindingViewHolder(binding);
 }
  • 29. Binding & RecycleView onBindViewHolder @Override
 public void onBindViewHolder(BindingViewHolder holder, int position) {
 ActivityColorListItemBinding binding = (ActivityColorListItemBinding)
 holder.getBinding();
 ColorListItemViewModel viewModel = binding.getViewModel();
 
 // Init new view model object
 if (viewModel == null) {
 viewModel = new ColorListItemViewModel();
 binding.setViewModel(viewModel);
 binding.setTextColor(ContextCompat.getColor(context, R.color.colorAccent));
 viewModel.setListener(listener);
 }
 
 ColorForm form = data.get(position);
 viewModel.setAdapterPosition(holder.getAdapterPosition());
 viewModel.setData(form);
 
 // Immediate Binding
 binding.executePendingBindings();
 }
  • 30. Grabbing value directly from View Getting value from View which is not available in ViewModel. private void checkEnabledStateOnView() {
 viewModel.confirm.setEditableObserver(new Subscriber<Boolean>() { . . . 
 @Override
 public void onNext(Boolean isEnabled) {
 // Some code
 }
 });
 binding.executePendingBindings();
 } bind:editableObserver="@{viewModel.editableObserver}" @BindingAdapter({"editableObserver"})
 public static void editableObserver(View view, Subscriber<Boolean> subscriber) {
 if (subscriber != null) {
 subscriber.onNext(view.isEnabled());
 subscriber.onCompleted();
 }
 }
  • 31. Links • MVC VS. MVP VS. MVVM • Model–view–viewmodel • Approaching Android with MVVM • Going with MVVM on Android via Data Binding • DataBinding: how to develop Android apps faster • Data Binding Library • Exploring the MVC, MVP, and MVVM design patterns • MVVMC thought experiment • MVVM is dead, long live MVVMC! • Comparison of Architecture presentation patterns MVP(SC),MVP(PV),PM,MVVM and MVC • MVMMC – MVVM Grows A Controller