$30 off During Our Annual Pro Sale. View Details »

Databinding in Android

Databinding in Android

Introduction to Android's new databinding Gradle plugin

Bryan Herbst

July 25, 2015
Tweet

More Decks by Bryan Herbst

Other Decks in Programming

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