Databinding in Android

Introduction to Android's new databinding Gradle plugin

Transcript

1. Databinding in Android
   BRYAN HERBST
   

   View Slide

2. Job Interview
   Q: How does an Android Activity fit in to the MVC pattern?
   A: Ehh…
   

   View Slide

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
   

   View Slide

4. View
   
   {{title}}
   {{body}}
   
   

   View Slide

5. Controller
   var template = Handlebars.compile(viewTemplate);
   var data = {title: “Hello World", body: “Templating rocks!"};
   var html = template(data);
   

   View Slide

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
   

   View Slide

7. Setup
   buildscript {
   dependencies {
   classpath 'com.android.databinding:dataBinder:1.0-rc0'
   }
   }
   apply plugin: 'com.android.databinding'
   

   View Slide

8. The View- step one
   
   
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   
   
   Wrap your layout in a tag
   

   View Slide

9. The View- step two
   
   
   
   
   
   
   Add a tag with s for your models
   

   View Slide

10. The View- step three
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{animal.species}"/>
    Bind to model with @{model.property}
    

    View Slide

11. The binding class
    Plugin generates binding class
    my_fancy_layout.xml becomes MyFancyLayoutBinding
    

    View Slide

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());
    }
    

    View Slide

13. Demo time!
    

    View Slide

14. Can the views be smarter?
    What else can we bind?
    

    View Slide

15. Visibility- step one
    
    
    
    
    Import types into layouts just like Java
    

    View Slide

16. Visibility- step two
    android:visibility="@{note.content == null ? View.GONE : View.VISIBLE}"
    

    View Slide

17. Introducing the ViewModel
    Because that date format is terrible.
    

    View Slide

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());
    }
    }
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{note.formattedTimestamp}"/>
    

    View Slide

19. Demo time!
    

    View Slide

20. Data binding: Two way street
    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
    

    View Slide

21. Automatic updates
    What happens when our data changes?
    

    View Slide

22. Observables
    No, not RxJava
    

    View Slide

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);
    }
    };
    

    View Slide

24. Observables in the layout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{String.valueOf(note.numClicks)}"/>
    Text now automatically updates
    

    View Slide

25. Demo time!
    

    View Slide

26. Resources
    https://developer.android.com/tools/data-binding/guide.html
    Tons of information about:
    ◦ s
    ◦ Operators in bindings
    ◦ Accessing arrays/lists/maps
    ◦ Using resources in bindings
    ◦ Value converters
    ◦ Binding custom view properties
    ◦ More ways to make data observable
    

    View Slide