Data Binding - A MVVM Approach

1. Data Binding An Introduction to MVVM approach By Chintan Soni
2. Agenda • Introduction • Components of Data Binding • Hands On: Simple Data Binding Demo with / without Event Binding • Hands On: RecyclerView Demo with / without Event Binding • Hands On: ToDo App
3. Introduction
4. You hate boilerplate code. Just confirming it... • Assigning ids in layouts • Finding views and casting it to relevant views • Just for the sake of setting a text..!! android:id="@+id/textview" TextView textView = (TextView)findViewById(R.id.textview); textView.setText("Do i need to do it everytime..??");
5. Thanks to Jake Wharton for writing ButterKnife... • This made life more simpler and easier: • @Bind(R.id.textview) TextView textView; textView.setText("Feeling better now.."); But still you are dealing with ids.. Should it be mandatory ?
6. Any other way out ? Think of a some kind of mechanism that works like; You have the modelled data to display; Then you merely pass it to the layout; And layout will take care of WHERE to display WHAT.. "Are you kidding me..??"..
7. What If I say You can achieve most of the things from the layout itself • Setting data, • Handling events • and much more..
8. Welcome to, Data Binding: An MVVM Approach
9. Data Binding • Introduced along with Android Studio 1.3 at Google IO 2015 • Allows to write declarative layouts • Minimizes a huge amount of boilerplate code • Binds your application logic directly to your layout
10. Components
11. Layout • Every layout file that is declared for data binding starts with <Layout> • <data> is place where we define <variable> tags carrying the model • <variable> tag defines the type of the data and its alias name to use in layout <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="..." type="..."/> </data> <LinearLayout> . . . </LinearLayout> </layout> Basic Data Binding Layout Template
12. Sample Data Binding Layout • To use this variable “user”, we have to write Expression @{...} • This way we can bind the relevant properties of Model class to views, DIRECTLY... <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="user" type="com.letsnurture.User"/> </data> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.firstName}"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.lastName}"/> </LinearLayout> </layout>
13. DataBindingUtil • It generates Binding class • Binding class wires up layout properties to layout views • Binding class is generated based on the name of layout file, starting it with upper-case, removing underscores ( _ ) and capitalizing the following letter and then suffixing “Binding” • After generating the class, you can simply set the data with setter method of Binding class. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); MainActivityBinding binding = DataBindingUtil.setContentView(this, R.layout.main_activity); User user = new User("Test", "User"); binding.setUser(user); }
14. That’s it !!! Let’s Move On to Hands On Experience with Data Binding...
15. GDG Developers Conclave Reach Me At: @chintansoni202 +ChintanSoni201188 chintansoni202@gmail.com