Dominando o Data Binding no Android

Dominando o Data Binding 
no Android
+Nelson Glauber
@nglauber
www.nglauber.com.br

@nglauber
+NelsonGlauber
www.nglauber.com.br

Data Binding
• Facilita a ligação entre Model e View
• Estende os arquivos de layout com micro-expressões
• Binders customizados reduzem a repetição de código
• Tratamento de NPE

public class Book {
private String id;
private String title;
private String author;
private String coverUrl;
private int pages;
private int year;
private Publisher publisher;
private boolean available;
private MediaType mediaType;
private float rating;
// Getters and setters...
}

Book book = (Book)getIntent().getSerializableExtra(EXTRA_LIVRO);
ImageView imgCover = (ImageView) findViewById(R.id.image_cover);
TextView txtTitle = (TextView) findViewById(R.id.text_title);
TextView txtAuthor = (TextView) findViewById(R.id.text_author);
TextView txtPages = (TextView) findViewById(R.id.text_pages);
TextView txtYear = (TextView) findViewById(R.id.text_year);
TextView txtPublisher = (TextView) findViewById(R.id.text_publisher);
TextView txtAvailable = (TextView) findViewById(R.id.text_available);
TextView txtMediaType = (TextView) findViewById(R.id.text_media_type);
RatingBar ratingBook = (RatingBar) findViewById(R.id.rating_book);
Glide.with(this).load(book.getCoverUrl()).into(imgCover);
txtTitle.setText(book.getTitle());
txtAuthor.setText(book.getAuthor());
txtPages.setText(getString(R.string.text_format_book_pages, book.getPages()));
txtYear.setText(getString(R.string.text_format_book_year, book.getYear()));
txtPublisher.setText(book.getPublisher().getName());
txtAvailable.setText(book.isAvailable() ?
R.string.text_book_available : R.string.text_book_unavailable);
txtMediaType.setText(book.getMediaType().toString());
ratingBook.setNumStars(book.getRating());

book.setCoverUrl(imageFile.getAbsolutePath());
book.setTitle(editPages.getText().toString());
book.setAuthor(editAuthor.getText().toString());
book.setPages(Integer.parseInt(editPages.getText().toString()));
book.setYear(Integer.parseInt(editYear.getText().toString()));
book.setPublisher((Publisher) spinnerPublisher.getSelectedItem());
book.setAvailable(checkAvailable.isChecked());
book.setMediaTypeValue(radioMediaEbook.isChecked() ? 
MediaType.EBOOK : MediaType.PAPER);
book.setRating(ratingBook.getRating());
saveBook(book);

Book book = (Book)getIntent().getSerializableExtra(EXTRA_BOOK);
ActivityDetailViewBinding mBinding = 
DataBindingUtil.setContentView(this, R.layout.activity_detail_view);
mBinding.setBook(book);

Conﬁguração
Passo 1…
android {
...
dataBinding {
enabled true
}
}

res/layout/activity_main.xml
activity_main.xml
ActivityMainBinding
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout ...>
<TextView ...
android:id=“@+id/text_view_name”
android:text="Hello World!" />
</LinearLayout>
</layout>

public class MainActivity extends AppCompatActivity {
ActivityMainBinding mBinding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
mBinding.textViewName.setText(“DataBinding is cool!!!”);
}
}
MainActivity.java
camelCase

Se não gostar do nome da classe…
MainActivity.java
res/layout/activity_main.xml
<layout ...>
<data class="VaiFilhaoBinding">
...
</data>
public class MainActivity extends AppCompatActivity {
VaiFilhaoBinding binding;
...

<data>
<variable
name="book"
</data>
<LinearLayout ... >
<RatingBar android:progress="@{book.rating}" ... />
</LinearLayout>
</layout>

<string name="text_format_book_pages">Número de páginas: %1$d</string>
<string name="text_format_book_year">Ano de publicação: %1$d</string>

<data>
<variable
name="book"
</data>
<LinearLayout ... >
</LinearLayout>
</layout>
public class Book {
...
private String coverUrl;
private MediaType mediaType;
}

public class TextBinding {
@BindingAdapter({"android:text"})
public static void setMediaTypeText(TextView textView, MediaType mediaType){
Context context = textView.getContext();
switch (mediaType) {
case EBOOK:
textView.setText(context.getString(R.string.text_book_media_ebook));
break;
case PAPER:
textView.setText(context.getString(R.string.text_book_media_paper));
break;
default:
textView.setText(null);
}
}
}
TextBinding.java

public class ImageBinding {
@BindingAdapter({"android:src"})
public static void setImageUrl(ImageView imageView, String url){
Glide.with(imageView.getContext())
.load(url)
.into(imageView);
}
@BindingAdapter({"android:src", "placeHolder"})
public static void setImageUrl(ImageView imageView, String url,
Drawable placeholder){
Glide.with(imageView.getContext())
.load(url)
.placeholder(placeholder)
.into(imageView);
}
}
ImageBinding.java

<ImageView
android:id="@+id/image_cover"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:background="#CCC"
android:scaleType="centerCrop"
android:src="@{book.coverUrl}"
app:placeHolder=“@{@drawable/ic_photo}”/>
res/values/attrs.xml
<attr name="placeHolder" format="reference"/>

BookFragment.java
private FragmentBookBinding mBinding;
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
mBinding = DataBindingUtil.inflate(inflater,
R.layout.fragment_book,
container, false);
...
return mBinding.getRoot();
}

res/layout/item_book.xml
<layout ...>
<data>
<variable
name="book"
type="br.com.nglauber.livrosfirebase.model.Book"/>
</data>
<android.support.v7.widget.CardView ...>
<RelativeLayout ...>
</RelativeLayout>
</android.support.v7.widget.CardView>
</layout>

BookViewHolder.java
public static class BookViewHolder extends RecyclerView.ViewHolder {
ItemBookBinding binding;
public BookViewHolder(ItemBookBinding binding) {
super(binding.getRoot());
this.binding = binding;
}
}

@Override
public BookViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
ItemBookBinding binding = DataBindingUtil.inflate(
LayoutInflater.from(parent.getContext()),
R.layout.item_book,
parent,
false);
final BookViewHolder vh = new BookViewHolder(binding);
vh.itemView.setOnClickListener(...);
return vh;
}
@Override
public void onBindViewHolder(BookViewHolder holder, int pos) {
Book book = mBooksList.get(pos);
holder.binding.setBook(book);
holder.binding.executePendingBindings();
}
BookAdapter.java

public class Book extends BaseObservable {
// Atributos...
@Bindable
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
notifyPropertyChanged(BR.title);
}
@Bindable
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
notifyPropertyChanged(BR.author);
}
// Demais getters/setters
Book.java

public class Book implements Observable {
// Copie as coisas do BaseObservable :)
}

public class BaseObservable implements Observable {
private transient PropertyChangeRegistry mCallbacks;
public BaseObservable() {
}
@Override
public synchronized void addOnPropertyChangedCallback(OnPropertyChangedCallback callback) {
if (mCallbacks == null) {
mCallbacks = new PropertyChangeRegistry();
}
mCallbacks.add(callback);
}
@Override
public synchronized void removeOnPropertyChangedCallback(OnPropertyChangedCallback callback) {
if (mCallbacks != null) {
mCallbacks.remove(callback);
}
}
public synchronized void notifyChange() {
mCallbacks.notifyCallbacks(this, 0, null);
}
}
public void notifyPropertyChanged(int fieldId) {
mCallbacks.notifyCallbacks(this, fieldId, null);
}
}
}

import android.databinding.ObservableBoolean;
import android.databinding.ObservableField;
import android.databinding.ObservableInt;
public class Book {
//...
private final ObservableField<String> title;
private final ObservableInt year;
private final ObservableBoolean available;
public Book() {
//...
this.title = new ObservableField<>();
this.year = new ObservableInt(2016);
this.available = new ObservableBoolean(false);
}
public ObservableField<String> getTitle() { return title; }
public void setTitle(String title) { this.title.set(title); }
public ObservableInt getYear() { return year; }
public void setYear(double year) { this.year.set(year); }
public ObservableBoolean isAvailable() { return available; }
public void setAvailable(boolean available) { this.available.set(available); }
}

Cuidado com loops!
EditText 
android:text="@={book.title}"
// Atributos...
@Bindable
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
notifyPropertyChanged(BR.title);
}
// Demais getters/setters

public class EditTextBindingAdapters {
@InverseBindingAdapter(attribute = "android:text")
public static int getTextAsInt(EditText editText) {
try {
return Integer.parseInt(editText.getText().toString());
} catch (Exception e){
return 0;
}
}
@BindingAdapter({"android:text"})
public static void setTextFromInt(EditText editText, int value){
if (getTextAsInt(editText) != value) {
editText.setText(String.valueOf(value));
}
}
}
EditTextBindingAdapters.java

<layout ...>
<data>
...
<variable
name="presenter"
type=“br.com.nglauber.livrosfirebase.DetailEditActivity"/>
</data>
<LinearLayout ...>
...
<TextView ...
android:onLongClick="@{presenter::longClick}" />
<Button ...
android:onClick=“@{presenter::clickSaveBook}”/>
<EditText ...
android:onFocusChange="@{presenter::focusChanged}"/>
</LinearLayout>
</layout>
res/layout/activity_detail_edit.xml

@Override
protected void onCreate(Bundle savedInstanceState) {
...
binding.setBook(book);
binding.setPresenter(this);
}
public void clickSaveBook(View view) {
Toast.makeText(this, book.toString(), Toast.LENGTH_SHORT).show();
}
public boolean longClick(View view){
book.setRating(book.getRating() + 1);
return true;
}
public void focusChanged(View v, boolean focus){
if (!focus) showProduct(v);
}
DetailEditActivity.java
Respeite a
assinatura do
método

public void onMediaTypeChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
if (buttonView == mBinding.radioMediaEbook) {
mBinding.getBook().setMediaTypeValue(MediaType.EBOOK);
} else if (buttonView == mBinding.radioMediaPaper) {
mBinding.getBook().setMediaTypeValue(MediaType.PAPER);
}
}
}

public class Publisher {
private String id;
private String name;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return name;
}
}
private Publisher publisher;
...
@Bindable
public Publisher getPublisher() {
return publisher;
}
public void setPublisher(Publisher publisher) {
this.publisher = publisher;
notifyPropertyChanged(BR.publisher);
}
}

<layout ...>
<data>
<import type="java.util.List"/>
<variable name="presenter"
type="br.com.nglauber.livrosfirebase.DetailEditActivity" />
<variable name="publishers"
type="java.util.List<br.com.nglauber.livrosfirebase.model.Publisher>" />
</data> 
<LinearLayout ...>
<Spinner ...
android:entries="@{publishers}"
android:selection="@{publishers.indexOf(book.publisher)}"
android:onItemSelected="@{(p, v, pos, id)->book.setPublisher(publishers[pos])}" />
</LinearLayout>
</layout>

DetailEditActivity.java
ObservableList<Publisher> publishers = loadListFromSomewhere();
mBinding.setPublishers(publishers);

<layout ...>
<data>
<variable
name="book"
type="br.com.nglauber.livrosfirebase.model.Book"/>
<variable
name="presenter"
type=“br.com.nglauber.livrosfirebase.DetailEditActivity"/>
</data>
<LinearLayout ...>
...
<Button ...
android:onClick="@{()->presenter.saveBook(book)}"/>
</LinearLayout>
</layout>

http://jakewharton.github.io/butterknife/

https://github.com/lisawray/fontbinding
public class TextViewBinderAdapter {
@BindingAdapter({"font"})
public static void setFont(TextView textView,String font){
AssetManager assets = textView.getContext().getAssets();
Typeface typeface = Typeface.createFromAsset(assets, font);
textView.setTypeface(typeface);
}
}
<TextView app:font="@{`FunnyKid.ttf`}" .../>

Mas se tiver um “set” pode usar!
<android.support.v4.widget.DrawerLayout ...
app:scrimColor="@{@color/scrim}"
app:drawerListener="@{fragment.drawerListener}"/>

Expression Language
<TextView ...
android:text="@{user.displayName ?? user.lastName}"/>
<TextView ...
android:text="@{`User: ` + user.name}”/>
<LinearLayout ...
android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"/>

res/values/colors.xml
<color name="red">#F00</color>
<color name="black">#000</color>
<TextView ...
android:id="@+id/text_title"
android:textColor="@{book.available ? @color/black : @color/red}"
android:text="@{book.title}" />

res/values/strings.xml
<string name="price_format">$ %1$.2f</string>
<TextView ...
android:id="@+id/text_price"
android:text="@{@string/price_format(book.price)}" />
getString(R.string.price_format, product.price);

Include
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable name="book" type=“...Book”/>
<variable name=“presenter" type=“...DetailEditActivity" />
</data>
<LinearLayout ...>
<include
android:id="@+id/content"
layout="@layout/content_detail_edit"
app:presenter="@{presenter}"
app:book="@{book}" />
</LinearLayout>
</layout>

Include
ActivityDetailEditBinding mBinding =
DataBindingUtil.setContentView(this, R.layout.activity_detail_edit);
mBinding.setBook(book);
mBinding.setPresenter(this);
mBinding.content.setPublishers(new ObservableArrayList<Publisher>());

Expression Chain
<layout ...>
<data>
<import type="android.view.View" />
...
</data>
<LinearLayout ...>
<ImageView ...
android:id="@+id/image_cover"
android:visibility="@{book.available ? View.VISIBLE : View.INVISIBLE}" />
<RadioGroup ...
android:id="@+id/radio_group_media_type"
android:visibility="@{imageCover.visibility}" />
<RatingBar
android:visibility="@{radioGroupMediaType.visibility}"
android:id=“@+id/rating_book">
<CheckBox ...
android:id="@+id/check_available"
android:checked="@={book.available}" />

Ouvindo coisas… :)
binding.addOnPropertyChangedCallback(new Observable.OnPropertyChangedCallback() {
@Override
public void onPropertyChanged(Observable observable, int i) {
if (i == br.com.nglauber.uidemo.BR.name){
Product p = (Product)observable;
Log.d("NGVL", p.getName());
}
}
});

Ouvindo coisas… :)
Use para
animações
binding.addOnRebindCallback(new OnRebindCallback() {
@Override
public boolean onPreBind(ViewDataBinding binding) {
return super.onPreBind(binding);
}
@Override
public void onCanceled(ViewDataBinding binding) {
super.onCanceled(binding);
}
@Override
public void onBound(ViewDataBinding binding) {
super.onBound(binding);
}
});

Aplicando no seu projeto
1. Remova os ﬁndViewById’s :)
2. Faça o Binding dos seus objetos.
3. Use os callbacks (eventos) de UI.
4. Aproveite os objetos observáveis.
5. Two-way Data Binding é vida! ♥

Boas práticas
• Não coloque lógica de negócios na tela. Apenas lógica de tela.
• Os eventos disparados executarão na UI Thread.
• Simpliﬁque a lógica de UI (não coloque expressões complicadas,
crie métodos para isso.
• Considere utilizar um ViewModel.
• Leve os BinderAdapters com você :) Você só vai precisar escrevê-
los uma vez. // TODO: Fazer uma lib para isso :p

Referências
• Data Binding -- Write Apps Faster (Android Dev Summit 2015) 
https://www.youtube.com/watch?v=NBbeQMOcnZ0
• Data Binding Documentation (pode melhorar né…?) 
http://developer.android.com/tools/data-binding/guide.html
• Nelson Glauber Blog 
http://www.nglauber.com.br/2016/05/android-data-binding.html
• Advanced Data Binding (Google I/O 2016) 
https://www.youtube.com/watch?v=DAmMN7m3wLU

@nglauber
+NelsonGlauber
www.nglauber.com.br
Obrigado!

Dominando o Data Binding no Android

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Dominando o Data Binding no Android

Similar to Dominando o Data Binding no Android (20)

More from Nelson Glauber Leal

More from Nelson Glauber Leal (20)

Recently uploaded

Recently uploaded (20)

Dominando o Data Binding no Android