“@{dataBinding}” talk:title= @{dataBinding} @lisawrayz

textView.setCompoundDrawablesWithIntrinsicBounds( ContextCompat.getDrawable(this, R.drawable.cat), null, null, null); Problem: Repetitive Java boilerplate @{dataBinding} findViewById, casts setters are verbose/confusing toolbar = (Toolbar) findViewById(R.id.toolbar);

Problem: Repetitive Java boilerplate @{dataBinding} findViewById, casts setters are verbose/confusing XML layout is limited Manually keep track of UI updates

What is it? @{dataBinding} A framework to connect your model and your UI Once or persistently

An XML attribute for every Java setter @{dataBinding} What else is it?

Custom XML attributes @{dataBinding} What else is it?

Overwrite Android XML attributes @{dataBinding} What else is it?

An alternative to custom views @{dataBinding} What else is it?

O.K., show me!

Find the views Set custom font Set button colors Load and set the image Set title

Before: inflate and find views CollapsingToolbarLayout appBarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout); ImageView backdropImageView = (ImageView) findViewById(R.id.backdrop); Button upvoteButton = (Button) findViewById(R.id.upvote); Button downvoteButton = (Button) findViewById(R.id.downvote); setContentView(R.layout.activity_pet_detail); After PetDetailBinding binding = DataBindingUtil.setContentView (this, R.layout.pet_detail);

Before:Java if (pet != null) { appBarLayout.setTitle(pet.getName()); } After:XML

Before: Java Typeface lobster = FontCache.getInstance().get("LobsterTwo-Bold"); appBarLayout.setCollapsedTitleTypeface(lobster); appBarLayout.setExpandedTitleTypeface(lobster); After:XML

Before:Java After:XML switch(pet.vote) { case UPVOTE: upvoteButton.setSelected(true); downvoteButton.setSelected(false); break; case DOWNVOTE: …

Before: Java Glide.with(this).load(pet.getImageUrl()).into(backdropImageView); After:XML

Making the connection

PetDetailBinding binding = DataBindingUtil.setContentView (this, R.layout.pet_detail); Before: Java … After:XML binding.setPet(pet); PetDetailBinding binding = DataBindingUtil.setContentView (this, R.layout.pet_detail); Your old layout goes here Your model object

100% generated Java code Uses bitwise flags to mark ‘dirty’ One traversal to find all views How does it work? @{dataBinding}

layout/pet.xml generated: PetBinding.java PetBinding.image .title .upvote @{dataBinding}

@{ }

Existing attributes Pet.getName() app:title="@{pet.name}"

android:text android:textColor Existing attributes android:drawableLeft android:src … and many, many more

Attributes for every Java setter View.setSelected()

app:imageUrl="@{pet.imageUrl}" Custom attributes

@BindingAdapter({"bind:imageUrl"}) public static void loadImage(ImageView view, String url) { Glide.with(view.getContext()) .load(url) .into(view); } Bindings You pick The view you’re binding Attribute

app:font Custom attributes @BindingAdapter({"bind:font"}) public static void setFont(TextView textView, String fontName) { Typeface type = FontCache.getInstance().get(fontName); textView.setTypeface(type); } Bindings Tinkerbell

app:collapsedTitleTypeface="@{`LobsterTwo-Bold`}" app:expandedTitleTypeface="@{`LobsterTwo-Bold`}" Custom attributes @BindingAdapter("bind:expandedTitleTypeface") public static void setExpandedTitleTypeface( CollapsingToolbarLayout layout, String fontName) { Typeface type = FontCache.getInstance().get(fontName); layout.setExpandedTitleTypeface(type); } @BindingAdapter("bind:collapsedTitleTypeface") public static void setCollapsedTitleTypeface …

Evaluate simple expressions app:selected=“@{vote == VOTE.UPVOTE}"

before: if (pet != null) { appBarLayout.setTitle(pet.getName()); } after: android:text=“@{pet.name}” Avoid NPEs android:text=“@{pet.name.last}”

@BindingAdapter("android:indeterminateTint") public static void setIndeterminateTint( ProgressBar progressBar, int color) { Drawable toTint = progressBar.getIndeterminateDrawable().mutate(); toTint.setColorFilter(color, PorterDuff.Mode.SRC_IN); } Overwrite Android attributes

layout/family.xml … layout/pet.xml …

One way binding Model changes, view is updated Persistent binding

enum VOTE { UPVOTE, DOWNVOTE, NONE } public class VoteState { public final ObservableField vote = new ObservableField(); } voteState.vote.set(VOTE.DOWNVOTE) Persistent binding

enum VOTE { UPVOTE, DOWNVOTE, NONE } public class VoteState extends BaseObservable { private VOTE vote; @Bindable getVote(); setVote(VOTE vote) { this.vote = vote; notifyChanged(BR.vote) } } Persistent binding

“In beta”, you said “It’ll be fun”, you said

Gradle integration Syntax highlighting Code completion (2.0.0-alpha5) View and debug generated code Android Studio and You

Refactoring “Convert to data binding” shortcut “Clean project” required sometimes Still to come …

Android Studio tips tools:text=“Jane Doe” tools:ignore="UnusedAttribute" Declare namespaces in layout tag Use tools: prefix for layout preview Ignore lint warnings

app/build.gradle android { dataBinding { enabled = true } } How do I get started?

fonts: goo.gl/n6lQY7 docs: goo.gl/47cVzB @lisawrayz