Save 37% off PRO during our Black Friday Sale! »

Databinding in Android

Databinding in Android

Introduction to Android's new databinding Gradle plugin


Bryan Herbst

July 25, 2015


  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 '' } } apply

    plugin: ''
  8. The View- step one <?xml version="1.0" encoding="utf-8"?> <layout xmlns: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=""> <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 @{}
  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 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