Databinding in Android

Introduction to Android's new databinding Gradle plugin

Transcript

1. Databinding in Android BRYAN HERBST
2. Job Interview Q: How does an Android Activity fit in to the MVC pattern? A: Ehh…
3. MV[C|P|VM] A Model that represents your raw data. Aka POJOs. A View that dictates how your data is displayed to the user Something to get the data and display the view
4. View <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>
5. Controller var template = Handlebars.compile(viewTemplate); var data = {title: “Hello World", body: “Templating rocks!"}; var html = template(data);
6. Let there be data binding Now we can have better separation of concerns Activities and Fragments now have more limited scope and a clearer purpose: ◦ Load data ◦ Bind data to the View ◦ Respond to events
7. Setup buildscript { dependencies { classpath 'com.android.databinding:dataBinder:1.0-rc0' } } apply plugin: 'com.android.databinding'
8. The View- step one <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout> </layout> Wrap your layout in a <layout> tag
9. The View- step two <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="animal" type="com.example.AnimalModel" /> </data> <!-- Your layout --> </layout> Add a <data> tag with <variable>s for your models
10. The View- step three <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{animal.species}"/> Bind to model with @{model.property}
11. The binding class Plugin generates binding class my_fancy_layout.xml becomes MyFancyLayoutBinding
12. The controller side @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ActivityAnimalBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_animal); binding.setAnimal(new Elephant()); }
13. Demo time!
14. Can the views be smarter? What else can we bind?
15. Visibility- step one <data> <import type="android.view.View"/> <variable name="note" type="com.bherbst.bindingnotes.NoteViewModel" /> </data> Import types into layouts just like Java
16. Visibility- step two android:visibility="@{note.content == null ? View.GONE : View.VISIBLE}"
17. Introducing the ViewModel Because that date format is terrible.
18. NoteViewModel public class NoteViewModel { private static final DateFormat TIMESTAMP_FORMAT = DateFormat.getDateInstance(); private Note mNote; public String getFormattedTimestamp() { return TIMESTAMP_FORMAT.format(mNote.getCreatedTime()); } } <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{note.formattedTimestamp}"/>
19. Demo time!
20. Data binding: Two way street <LinearLayout android:orientation="vertical“ android:layout_width="match_parent" android:layout_height="match_parent" app:onClickListener="@{note.clickListener}"> Using app namespace, bind to anything with a setter
21. Automatic updates What happens when our data changes?
22. Observables No, not RxJava
23. Observables in the ViewModel public ObservableInt numClicks; public View.OnClickListener clickListener = new View.OnClickListener() { @Override public void onClick(View view) { numClicks.set(numClicks.get() + 1); } };
24. Observables in the layout <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{String.valueOf(note.numClicks)}"/> Text now automatically updates
25. Demo time!
26. Resources https://developer.android.com/tools/data-binding/guide.html Tons of information about: ◦ <include>s ◦ Operators in bindings ◦ Accessing arrays/lists/maps ◦ Using resources in bindings ◦ Value converters ◦ Binding custom view properties ◦ More ways to make data observable