[Roman Herasymenko] Deal with it: Android DataBinding explained

Presentation from GDG DevFest Ukraine 2016.
Learn more at: https://devfest.gdg.org.ua

Transcript

1. Android Data Binding Roman Herasymenko CEO@Yamert, 
 Organizer@GDG Dnipro
 Google Developer Expert
2. #dfua Model-View-Controller XML Activity/Fragment
 View REST Api Database
3. #dfua Model-View-Controller Controller layer - (Activity/Fragment), aware both of the View and Model Model layer - same as the Controller layer View - XML layout only
4. #dfua Model-View-Presenter REST Api Database DataManager Activity/Fragment/
 View Presenter View Model layer View layer
5. #dfua Model-View-Presenter DataManager - model layer, holds a reference to Retrofit, Database, etc. Presenter Layer - in the “middle” between View layer and Model Layer, doesn’t know anything about Activity/Fragment/View View Layer - combination of Activity/Fragment with implementation of the View interface and XML layout. Holds soft reference to Presenter.
6. #dfua android:visibility="@{age < 13 ? View.GONE : View.VISIBLE}" Data Binding
7. #dfua Model-View-ViewModel XML Activity/Fragment ViewModel REST Api Database DataManager POJO Request For 
 updates DataBinding Model layer
8. #dfua What is the difference? Controller - replaced by ViewModel, and located below UI layer ViewModel - exposes the data and command objects for the View ViewModel - receives its data from the Model layer Model - business and validation
9. #dfua build.gradle apply plugin: 'com.android.application'
 
 android {
 dataBinding {
 enabled = true
 }
 } Setup
10. #dfua fragment_user.xml <layout>
 <data class=“UserBinding”>
 <variable
 name="data"
 type="co.yamert.binding.UserViewModel" />
 </data>
 <!-- the rest of your original layout here -->
 </layout> View
11. #dfua fragment_user.xml <android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <android.support.design.widget.TextInputEditText
 android:id="@+id/name"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 bind:addTextChangedListener="@{viewModel.usernameWatcher}" />
 
 </android.support.design.widget.TextInputLayout> View
12. #dfua public class UserViewModel extends BaseObservable {
 
 private UserInteractor interactor;
 private String username;
 
 public UserViewModel(UserInteractor interactor, long id) {
 this.interactor = interactor;
 if (id != WRONG_ID) loadUserById(id);
 }
 
 public final TextWatcher usernameWatcher = new TextWatcherAdapter() {
 @Override
 public void afterTextChanged(Editable s) {
 username = TextUtils.isEmpty(s)? “” : s.toString();
 notifyPropertyChanged(co.yamert.binding.BR.username);
 }
 };
 
 @Bindable
 public String getUsername() {
 return username;
 }
 }
 ViewModel
13. #dfua public class UserFragment extends Fragment implements UserInteractor {
 
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle state) {
 
 UserBinding binding = DataBindingUtil.inflate(R.layout.fragment_user);
 UserViewModel vm = new UserViewModel(this, id);
 binding.setViewModel(vm); 
 return binding.getRoot();
 }
 
 @Override
 public void onDialogButton() {
 Intent intent = new Intent();
 startActivity(intent);
 }
 } Bring it all together
14. #Binding
15. #dfua <android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <android.support.design.widget.TextInputEditText
 android:id="@+id/name"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:text=“@{data.username}“/>
 
 </android.support.design.widget.TextInputLayout> One-Way Binding
16. #dfua <android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <android.support.design.widget.TextInputEditText
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:text=“@={data.username}“/>
 
 </android.support.design.widget.TextInputLayout> Two-Way Binding
17. #Include
18. #dfua <layout>
 <LinearLayout>
 
 <TextView android:id="@+id/hello" />
 
 <include
 android:id="@+id/included"
 layout="@layout/included_layout" />
 </LinearLayout>
 </layout>
 Include
19. #dfua <layout>
 <TextView android:id="@+id/world" />
 </layout> Included layout
20. #dfua HelloBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_hello); 
 binding.hello.setText("Hello");
 binding.included.world.setText("World"); Usage
21. Custom setters
22. #dfua public class ColorPicker extends View {
 private int color;
 
 public ColorPicker(Context context) {
 super(context);
 }
 
 public void setColor(int color) {
 this.color = color;
 invalidate();
 }
 
 public void addListener(OnColorChangeListener listener) { }
 
 public void removeListener(OnColorChangeListener listener) { }
 } Custom setter
23. #dfua <co.yamert.binding.views.ColorPicker
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:color=“@{color}" /> Custom setter
24. #dfua <co.yamert.binding.views.ColorPicker
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:color=“@{color}" />
 
 public void setColor(int color) {
 this.color = color;
 invalidate();
 } Custom setter
25. #dfua public class BindingAdapters {
 
 @BindingAdapter("color")
 public static void setPickerColor(ColorPicker picker, int color) {
 if (picker != null)
 picker.setColor(color);
 }
 } Binding adapter as setter
26. #dfua @BindingAdapter("onColorChange")
 public static void setColorChangeListener(ColorPicker view, OnColorChangeListener oldListener, OnColorChangeListener newListener) {
 
 if (oldListener != null)
 view.removeListener(oldListener);
 
 if (newListener != null)
 view.addListener(newListener);
 } Events handling
27. #dfua <co.yamert.binding.views.ColorPicker
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:color="@{color}"
 app:onColorChange="@{(v, color)->handler.colorChanged(color)}" /> Events handling
28. #dfua @BindingAdapter({"bind:font"})
 public static void setFont(TextView textView, String fontName) {
 textView.setTypeface(Typeface.createFromAsset(textView .getContext() .getAssets(), "fonts/" + fontName));
 } <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:font="@{'Roboto-Regular.ttf'}" /> Tip: Fonts binding
29. Binding Adapters
30. #dfua <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:imageUrl=“@{viewModel.imageUrl}"
 app:placeholder="@{@drawable/emptyUser}"/>
 Image layout
31. #dfua @BindingAdapter(value = {"imageUrl", "placeholder"}, requireAll = false)
 public static void setImageUrl(ImageView imageView, String url, Drawable placeHolder) {
 if (url == null) {
 imageView.setImageDrawable(placeholder);
 } else {
 ImageLoader.loadInto(imageView, url, placeholder);
 }
 } Binding adapter
32. #dfua <android.support.v7.widget.RecyclerView
 android:id="@+id/listUsers"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_gravity="center_horizontal"
 android:clipToPadding="false"
 android:overScrollMode="never"
 bind:usersList=“@{viewModel.users}" /> RecyclerView
33. #dfua @BindingAdapter("usersList")
 public static void setUsersList(RecyclerView recycler, List<User> users) {
 if (recycler.getAdapter() != null)
 return;
 
 Context context = recycler.getContext();
 LinearLayoutManager manager = new LinearLayoutManager(context);
 manager.setOrientation(LinearLayoutManager.HORIZONTAL);
 recycler.setLayoutManager(manager);
 recycler.setHasFixedSize(true);
 recycler.setAdapter(new UserAdapter(users));
 } Binding adapter
34. #dfua <View
 android:background="@{isError ? @color/red : @color/white}"
 android:layout_width="wrap_content"
 android:layout_height=“wrap_content"/> 
 @BindingConversion
 public static ColorDrawable convertColorToDrawable(int color) {
 return new ColorDrawable(color);
 } Binding conversion
35. Conclusion
36. RomanHerasymenko @aenterhy +RomanHerasymenko Questions? Thank you!