Android Jetpack's Data Binding Library

Android Jetpack's Data Binding Library has been there since some time but not many people have got chance to actually use it. This presentation will help you to understand how this Library can be used to avoid writing "findViewById" and directly access the views with their id names in java/kotlin class.

It explains how you can do most of the calculations(Mathematical, Logical, Binary, Ternary) in the XML itself.

Also, you can override existing attributes of a View, example "android:text" to behave in your own way or you can create your own attributes and set it in the views in XML. This is super effective.

We were not aware that the approach when we do android:onClick = "methodName" and defining the method in your java/kotlin class later, uses REFLECTION internally, which is pretty slow. Data Binding provides solution to it by its "Method References" and "Listener Bindings" that happens all at compile time and the most interesting part "Observables".

Transcript

1. Let’s bond with Android Jetpack’s Data Binding Aayushma Agrawal Android Developer At Lenskart Twitter:- @AgrawalAayushma
2. Are you a Beginner ?
5. WHAT WE WILL BE DOING TODAY? • Learning Data Binding through a LIVE example. • Learning KEY terminologies to get started with it.
6. TOPICS TO BE DISCUSSED • Introduction to Android Jetpack’s Data Binding Library • Enabling Data Binding Library in project. • Digging Deep to learn: ◦ <data>, <variable> and @{} ◦ Event Binding ◦ Expression ◦ Binding Adapters ◦ Observables • Your Homework :p
7. Introduction to Android Jetpack’s Data Binding Library
8. INTRODUCTION • Data Binding Library was founded in 2015. • Official Source says: ◦ The Data Binding Library is a support library that allows you to bind UI components in your layout to data sources in your app using a declarative format rather than programmatically. • Data Binding Library executes during compile time and saves you from any unexpected errors at Runtime.
9. Source Of Data UI Components TextView SERVER FILE Binds Button EditText
10. Enabling Data Binding Library
11. STEP 1: ENABLING DATA BINDING LIBRARY • Create a new project or open an existing project. • Go to build.gradle(Module) file in your project.
12. EXISTING CODE: android { compileSdkVersion : defaultConfig{ ………. } }
13. NEW CODE... android { compileSdkVersion : defaultConfig{ ………. } databinding{ enabled = true } }
14. Step 2 : <layout> tag • Old Code: <LinearLayout xmlns:android = “https://schemas.android.com/apk/res/android” android:layout_width = “match_parent” android:layout_height = “match_parent” <TextView> ….. <ImageView> </LinearLayout>
15. New Code.. • Start your XML file with <layout> tag. <layout> <LinearLayout xmlns:android = “https://schemas.android.com/apk/res/android” android:layout_width = “match_parent” <TextView> ….. <ImageView> </LinearLayout> </layout>
17. At the background? - Binding classes are Auto-Generated Name of the xml : activity_main Default Binding class Generated : ActivityMainBinding When we create reference of this class in Activity/Fragment, you can access all the variables or views present in its corresponding XML directly by their ids.
18. Changes required in the Activity Then…. setContentView(R.layout.activity_main); Now.. ActivityMainBinding activityMainBinding ; activityMainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main);
19. AUTO- GENERATED BINDING CLASSES activity_gift.xml activity_details.xml ActivityGiftBinding ActivityDetailsBinding
20. Auto Generated Binding Class public abstract class ActivityMainBinding extends ViewDataBinding { @NonNull public final Button addToCartButton; @NonNull public final ImageView giftImageview; @NonNull public final Button buyNowButton; . . . } android:id="@+id/gift_imageview" android:id="@+id/add_to_cart_button" android:id="@+id/buy_now_button"
21. Auto Generated Binding Class ActivityMainBinding activityMainBinding ; activityMainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main); activityMainBinding.addToCartButton.setText(“Add To Cart”);
22. We Completed... ➔ Introduction to Android Jetpack’s Data Binding Library ➔ How to enable Data Binding in the project?
23. Digging Deep into Data Binding
24. Let’s Look at the Basics public class MainActivity extends AppCompatActivity { EditText firstNameEditText, lastNameEditText, emailEditText, organizationEditText, designationEditText, addressEditText; Button submitButton; }
25. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); firstNameEditText = findViewById(R.id.first_name_edittext); } . . .
26. Initializing Views.. lastNameEditText = findViewById(R.id.last_name_edittext); orgEditText = findViewById(R.id.organization_edittext); designationEditText = findViewById(R.id.designation_edittext); addressEditText = findViewById(R.id.address_edittext); mobileNumberEditText = findViewById(R.id.mobile_no_edittext); emailEditText = findViewById(R.id.email_edittext); submitButton = findViewById(R.id.submit_button); }
27. Initializing Views.. lastNameEditText = findViewById(R.id.last_name_edittext); orgEditText = findViewById(R.id.organization_edittext); designationEditText = findViewById(R.id.designation_edittext); addressEditText = findViewById(R.id.address_edittext); mobileNumberEditText = findViewById(R.id.mobile_no_edittext); emailEditText = findViewById(R.id.email_edittext); submitButton = findViewById(R.id.submit_button); }
28. Initializing Views.. lastNameEditText = findViewById(R.id.last_name_edittext); orgEditText = findViewById(R.id.organization_edittext); designationEditText = findViewById(R.id.designation_edittext); addressEditText = findViewById(R.id.address_edittext); mobileNumberEditText = findViewById(R.id.mobile_no_edittext); emailEditText = findViewById(R.id.email_edittext); submitButton = findViewById(R.id.submit_button); }
29. Initializing Views.. lastNameEditText = findViewById(R.id.last_name_edittext); orgEditText = findViewById(R.id.organization_edittext); designationEditText = findViewById(R.id.designation_edittext); addressEditText = findViewById(R.id.address_edittext); mobileNumberEditText = findViewById(R.id.mobile_no_edittext); emailEditText = findViewById(R.id.email_edittext); submitButton = findViewById(R.id.submit_button); }
30. Initializing Views.. lastNameEditText = findViewById(R.id.last_name_edittext); orgEditText = findViewById(R.id.organization_edittext); designationEditText = findViewById(R.id.designation_edittext); addressEditText = findViewById(R.id.address_edittext); mobileNumberEditText = findViewById(R.id.mobile_no_edittext); emailEditText = findViewById(R.id.email_edittext); submitButton = findViewById(R.id.submit_button); }
31. Initializing Views.. lastNameEditText = findViewById(R.id.last_name_edittext); orgEditText = findViewById(R.id.organization_edittext); designationEditText = findViewById(R.id.designation_edittext); addressEditText = findViewById(R.id.address_edittext); mobileNumberEditText = findViewById(R.id.mobile_no_edittext); emailEditText = findViewById(R.id.email_edittext); submitButton = findViewById(R.id.submit_button); }
32. Initializing Views.. lastNameEditText = findViewById(R.id.last_name_edittext); orgEditText = findViewById(R.id.organization_edittext); designationEditText = findViewById(R.id.designation_edittext); addressEditText = findViewById(R.id.address_edittext); mobileNumberEditText = findViewById(R.id.mobile_no_edittext); emailEditText = findViewById(R.id.email_edittext); submitButton = findViewById(R.id.submit_button); }
33. Too much of Boilerplate code, isn’t it? Let’s do it using Data Binding
34. <layout> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" <TextView android:id="@+id/welcome_title" android:layout_width="wrap_content" android:layout_height="wrap_content" /> //Remaining code goes here <layout>
35. SURPRISE…….NO MORE “findViewById” public class MainActivity extends AppCompatActivity { //Auto- Generated binding class ActivityMainBinding activityMainBinding; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); activityMainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main); //Access all your views using the above binding variable } }
36. ACCESSING VIEWS DIRECTLY @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); activityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main); //Access all your views using the above binding variable activityMainBinding.welcomeTitle.setText("Welcome to DevFest 19"); String firstName = activityMainBinding.firstNameEdittext.getText().toString(); } android:id=“@+id/first_name_edittext”
37. <data> and @{} and @={ }
38. <data> and @{} • An Activity comprises of IMPORTS, VARIABLES , METHODS. • Similarly, XML declares “import” and “variables” through <data> tag. • Whenever you want to access /assign value to views, use @{ }
39. EXAMPLE <layout> <data> <import type="android.view.View"/> <!--String variable --> <variable name="name" type="String"/> </data> <layout>
40. EXAMPLE <layout> <data> <import type="android.view.View"/> <!--String variable --> <variable name="variableName" type="String"/> </data> <layout> Has an internal getter getFirstName() and setter setFirstName ()with it by which it can be accessed.
41. EXAMPLE <data> <import type="android.view.View"/> <!--POJO Class variable --> <variable name="gift" type="com.example.bouquetapp.Gift" /> </data>
42. More about <data> and <variable> tags • Each variable declared inside <variable> tag has an internal setter and getter to it. • If we want to pass value to those variables through Activity, we can do that by calling setter method of the variable .
43. EXAMPLE :- SETTING TEXT TO TEXTVIEW <TextView android:id="@+id/welcome_title" android:layout_width="wrap_content" android:layout_height="wrap_content" />
44. EXAMPLE :- SETTING TEXT TO TEXTVIEW • There are two ways:- 1. Doing it from the Activity activityMainBinding.welcomeTitle.setText("Welcome to DevFest 19"); 2. Doing it from the XML android:text=@{variableName}
45. EXAMPLE :- SET TEXT TO TEXTVIEW • There are TWO ways: 1. Directly accessing the view by its “id” android:id="@+id/welcome_title" In Activity, just write, activityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main) activityMainBinding.welcomeTitle.setText("Welcome to DevFest 19");
46. EXAMPLE :- SET TEXT TO TEXTVIEW 2. Using user defined VARIABLE declared in XML • Create a variable, say headerText, inside <variable> tag. • Assign this variable to the TextView • Pass value to this variable through its from Activity.
47. EXAMPLE :- SET TEXT TO TEXTVIEW • Create a variable, say headerText, inside <variable> tag. <variable name="headerText" type="String"/>
48. EXAMPLE :- SET TEXT TO TEXTVIEW • Assign this variable to the TextView <TextView android:id="@+id/welcome_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{headerText}" />
49. EXAMPLE :- SET TEXT TO TEXTVIEW • Pass the value to headerText variable through its SETTER method from Activity. activityMainBinding.setHeaderText("Welcome to DevFest 19"); AUTO GENERATED SETTER FOR THE XML variable.
50. SO FAR IN DEEP DIGGING DATA BINDING ◦ <data>, <variable> and @{} ◦ Event Binding ◦ Expression ◦ Binding Adapters ◦ Observables
51. Event Bindings - Handling Clicks from XML
52. TYPES OF EVENT BINDING 1. Method References 2. Listener Bindings
53. BUTTON CLICK - WITHOUT DATA BINDING @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); submitButton = findViewById(R.id.submit_button); submitButton.setOnClickListener(this); //Implement the Listener interface in activity }
54. BUTTON CLICK - WITHOUT DATA BINDING public void onClick(View view) { if(view.getId() == R.id.submit_button) { //Do the stuff } } Note the signature of onClick(). It takes “View” as the first parameter.
55. GOAL - CODE SMARTLY!! Another way of handling button click is android:onClick = “methodName” (Uses Reflection internally) Also, the method declared here , should be defined in the corresponding activity itself. So , standard onClick() is slow, compared to the data binding mechanisms that DOES NOT use REFLECTION.
56. METHOD REFERENCES • Any STATIC OR INSTANCE method in any class that has same signature like the default onClick(), can be directly called from the XML public void showOrderDetails(View view) { }
57. METHOD REFERENCES Example , you have a method say “showOrderDetails()” in the OrderDetails class. class OrderDetails { public void showOrderDetails(View v) { //Write your logic here } }
58. METHOD REFERENCES Existing Way:- If you want to call the same method from Activity, how will you do that? OrderDetails orderDetailsObj = new OrderDetails(); orderDetailsObj.showOrderObj(view); objectName.methodName(parameter)
59. METHOD REFERENCES • In XML, first declare a variable of OrderDetails class, since you want to call its method: <variable name="orderDetails" type="com.example.OrderDetails"/>
60. METHOD REFERENCES 2. Pass the value to this object reference/variable from your Activity binding.setOrderDetails(orderDetailsObj);
61. METHOD REFERENCES • In XML, call this method from Button like shown below <Button android:id="@+id/add_to_cart_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{orderDetails.showOrderDetails}" android:text="@string/add_to_cart" /> @{orderDetails :: showOrderDetails} OR
62. LISTENER BINDINGS • Any method that DOES NOT match with the default signature of onClick(), we can still call it from XML using LISTENER BINDINGS . • Example , you have a method say “showOrderDetails(int orderId)” in the OrderDetails class.
63. LISTENER BINDINGS class OrderDetails { public void showOrderDetails(int orderId) { //Write your logic here } }
64. LISTENER BINDINGS 1. Step 1, create an integer orderId that you need to pass to the method. <variable name="orderId" type="int"/> <variable name="orderDetails" type="com.example.OrderDetails"/>
65. LISTENER BINDINGS 2. Pass the values to these variables from your Activity binding.setOrderId(5); binding.setOrderDetails(orderDetailsObj);
66. LISTENER BINDINGS 3. Write code in Button as shown below:- <Button android:id="@+id/add_to_cart_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{() -> orderDetails.showOrderDetails(orderId)}" android:text="@string/add_to_cart" />
67. LISTENER BINDINGS Example the signature of method is:- class OrderDetails { public void showOrderDetails(View view, int orderId) { //Write your logic here } } If your method wants parameter view also, Then???
68. LISTENER BINDINGS • You can just write your Button code as:- <Button android:id="@+id/add_to_cart_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{(v) -> orderDetails.showOrderDetails(v, orderId)}" android:text="@string/add_to_cart" />
69. Expressions +, - , % , / , ?: , && || << >>
70. Expressions • Mathematical + - / * % • String concatenation + • Logical && || • Binary & | ^ • Unary + - ! ~ • Shift >> >>> << • Comparison == > < >= <= • instanceOf
71. Expressions • Grouping () • Literals — character, String, numeric, null • Cast • Method calls • Field access • Array access [] • Ternary operator? :
72. EXPRESSIONS IN XML <TextView android:id="@+id/discount_price_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="@{gift.discountedPrice > 0?View.VISIBLE : View.GONE}" android:text="@{String.valueOf(gift.price)}" />
73. EXPRESSIONS IN XML <TextView android:id="@+id/price_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="@{gift.discountedPrice > 0?View.VISIBLE : View.GONE}" android:text="@{String.valueOf(gift.price)}" />
74. EXPRESSIONS IN XML You can even do concatenation in XML Like <TextView android:id="@+id/price_textview" android:layout_width="wrap_content" android:layout_height="wrap_conten android:text=‘@{“Price” + price}’ />
76. SO FAR IN DEEP DIGGING DATA BINDING ◦ <data>, <variable> and @{} ◦ Event Binding ◦ Expression ◦ Binding Adapters ◦ Observables
77. BINDING ADAPTERS
78. BINDING ADAPTERS • Binding Adapters are CUSTOM SETTERS • Helps you to add extra functionality to your view. • You can override existing behaviour of an attribute. • Gives you the flexibility to create your own attributes in XML
79. BINDING ADAPTERS - USE CASE • Overriding existing behaviour of an attribute. I want , whatever value I enter in the textView should append “Welcome” to it. Why write redundant code in Activity for each textview like:- textView.setText(“Welcome”+ text);
80. BINDING ADAPTERS - USE CASE @BindingAdapter("android:text") public static void setCustomText(TextView textView, String text) { textView.setText("Welcome "+text); }
81. BINDING ADAPTERS - USE CASE Note:- 1. Contains the name of the attribute you want to override. Impact :- All the textviews in the entire app, will have “Welcome” appended in their text. STRICTLY NOT RECOMMENDED to do this. 2. The first parameter of the method has to be the VIEW TYPE(here textview) 3. Binding Adapter method is static.
82. BINDING ADAPTERS Output:- Every Textview got the text “Welcome” appended to it.
83. BINDING ADAPTERS • Creating your own custom attributes for xml Problem :- All the textviews in the entire app, will have “Welcome” appended in their text. STRICTLY NOT RECOMMENDED to do this. Solution :- Create your own attributes using Binding Adapter and get the flexibility to assign it ONLY to views which you want to customize .
84. BINDING ADAPTERS - USE CASE <TextView android:id="@+id/price_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" app:strikeText="@{String.valueOf(gift.price)}" />
85. BINDING ADAPTER - USE CASE public class BindingAdapters { @BindingAdapter("strikeText") public static void setStrikeText(TextView view, String textToStrike) { ... } } Name of the method does not matter.
86. BINDING ADAPTER - USE CASE public class BindingAdapters { @BindingAdapter("strikeText") public static void setStrikeText(TextView view, String textToStrike) { view.setText(textToStrike, TextView.BufferType.SPANNABLE); Spannable spannable = (Spannable) view.getText(); spannable.setSpan(new StrikethroughSpan(), 0, view.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); } }
87. BINDING ADAPTER - EXAMPLE 2 • Loading image into Imageview using Data Binding android:src="@drawable/champagne" The above statement returns you a drawable (image) , whereas if we directly try to use any Image Library like Picasso/ Glide , they DO NOT return anything to the android:src, hence does not work.
88. BINDING ADAPTER - EXAMPLE 2 • Loading image into Imageview using Data Binding <ImageView android:id="@+id/gift_imageview" android:layout_width="match_parent" android:layout_height="300dp" android:src = “Picasso.with(imageView.getContext()).load(url).into(gift_imageview);" />
89. BINDING ADAPTER - EXAMPLE 2 • Right way of doing it with Data Binding @BindingAdapter("imageUrl") public static void setImageUrl(ImageView imageView, String imageUrl) { if (!Helpers.isNullOrEmpty(imageUrl)) Picasso.with(imageView.getContext()).load(imageUrl).into(imageView); }
90. BINDING ADAPTER - EXAMPLE 2 • Assign the CUSTOM SETTER defined in BindingAdapter class to Imageview <ImageView android:id="@+id/bouquet_imageview" android:layout_width="match_parent" android:layout_height="300dp" app:imageUrl="@{url}" /> What’s this?
91. BINDING ADAPTER - EXAMPLE 2 • What is “url” in the app:imageUrl="@{url}" <variable name="url" type="String"/>
92. BINDING ADAPTER - EXAMPLE 2 • You can pass value to this variable through your ACTIVITY binding.setUrl("https://postimg.cc/68yJtvjw");
93. ENOUGH OF BINDING ADAPTERS!!!
94. SO FAR IN DEEP DIGGING DATA BINDING ◦ <data>, <variable> and @{} ◦ Event Binding ◦ Expression ◦ Binding Adapters ◦ Observables
95. WORKING WITH OBSERVABLES
96. Source: Internet
97. OBSERVABLES Key terms:- • Base Observable and @Bindable • BR File • Observable Fields and types
98. BASE OBSERVABLE AND @BINDABLE OBSERVABLE (Interface) BASE OBSERVABLE (CLASS)
99. BASE OBSERVABLE AND @BINDABLE public class BankAccount extends BaseObservable { private double bankBalance; @Bindable public double getBankBalance() { return bankBalance; } public void setBankBalance(Double bankBalance) { //code to set the values } Use it with all the getter methods of variables, whose value you want to observe.
100. BASE OBSERVABLE AND @BINDABLE public class BankAccount extends BaseObservable { private double bankBalance; @Bindable public double getBankBalance() { return bankBalance; } public void setBankBalance(Double bankBalance) { this.bankBalance = bankBalance; notifyPropertyChanged(BR.bankBalance); } } Generates the entry of “bankBalance” variable in BR file.
101. BR FILE • It’s same like the R class file which is auto-generated for all ids inside your layout, or references. • The Bindable annotation generates an entry in the BR class file during compilation. • So it will contain references to all property annotated with @Bindable.
102. OBSERVABLE FIELDS AND TYPES • In the above approach, we had to separately create a class and extend it with Base Observable. • Use @Bindable and call notifyPropertyChanged() to notify. • Well, to further simplify this mechanism we have Observable Fields.
103. OBSERVABLE FIELDS AND TYPES • ObservableBoolean • ObservableByte • ObservableChar • ObservableShort • ObservableInt • ObservableLong • ObservableFloat • ObservableDouble • ObservableParcelable
104. OBSERVABLE FIELDS AND TYPES • Observable fields are self-contained observable objects that have a single field. • To use this mechanism, create a public final property in the Java programming language.
106. Order Successfully Placed!!
107. OBSERVABLE FIELDS AND TYPES EXAMPLE Step 1. Create the observable fields in a class , say Address. public class Address { public final ObservableField<String> firstName = new ObservableField<>(); public final ObservableField<String> lastName = new ObservableField<>(); public final ObservableField<String> address = new ObservableField<>(); public final ObservableField<String> mobileNumber = new ObservableField<>(); }
108. OBSERVABLE FIELDS AND TYPES EXAMPLE Step 1. Create the observable fields in a class , say Address. public class Address { public final ObservableField<String> firstName = new ObservableField<>(); public final ObservableField<String> lastName = new ObservableField<>(); public final ObservableField<String> address = new ObservableField<>(); public final ObservableField<String> mobileNumber = new ObservableField<>(); }
109. OBSERVABLE FIELDS AND TYPES EXAMPLE Step 1. Create the observable fields in a class , say Address. public class Address { public final ObservableField<String> firstName = new ObservableField<>(); public final ObservableField<String> lastName = new ObservableField<>(); public final ObservableField<String> address = new ObservableField<>(); public final ObservableField<String> mobileNumber = new ObservableField<>(); }
110. OBSERVABLE FIELDS AND TYPES EXAMPLE Step 1. Create the observable fields in a class , say Address. public class Address { public final ObservableField<String> firstName = new ObservableField<>(); public final ObservableField<String> lastName = new ObservableField<>(); public final ObservableField<String> address = new ObservableField<>(); public final ObservableField<String> mobileNumber = new ObservableField<>(); }
111. OBSERVABLE FIELDS AND TYPES EXAMPLE One-way Data Binding - Data flows in uni direction, only from model to the UI. android:text= “@{variableName}” Two-way Data Binding - Data flows in both directions, Changes in the UI gets reflected in the model. android:text= “@={variableName}”
112. OBSERVABLE FIELDS AND TYPES EXAMPLE 2. Populate the Strings with values entered in Edittext as shown:- <EditText android:id="@+id/first_name_edittext" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@={address.firstName}" android:hint="@string/first_name" /> Notice the “ @={ } “ You use it, when you want to get the value from view
113. OBSERVABLE FIELDS AND TYPES EXAMPLE Step 2:- Declare the necessary variables • You want to access the above variables of “Address” class from layout. • Create reference of Address class in XML . <variable name="address" type="com.example.bouquetapplication.Address"/>
114. OBSERVABLE FIELDS AND TYPES EXAMPLE Step 3:- Set values to the variables defined public class AddressActivity extends AppCompatActivity { ActivityAddressBinding addressBinding; //AUTO-GENERATED BINDING CLASS @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); addressBinding = DataBindingUtil.setContentView(this, R.layout.activity_address); addressBinding.setAddress(new Address()); } }
115. OBSERVABLE FIELDS AND TYPES EXAMPLE 2. Populate the Strings with values entered in Edittext as shown:- <EditText android:id="@+id/last_name_edittext" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@={address.lastName}" android:hint="@string/last_name" />
116. OBSERVABLE FIELDS AND TYPES EXAMPLE 2. Populate the Strings with values entered in Edittext as shown:- <EditText android:id="@+id/address_edittext" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@={address.userAddress}" android:hint="@string/address" />
117. OBSERVABLE FIELDS AND TYPES EXAMPLE 2. Populate the Strings with values entered in Edittext as shown:- <EditText android:id="@+id/amobileNumber_edittext" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@={address.mobileNumber}" android:hint="@string/address" />
118. OBSERVABLE FIELDS AND TYPES EXAMPLE We want to enable the submit button, only when firstName, lastName , mobileNumber and address is filled. Step 3:- Write the necessary logic in the class for above requirement
119. OBSERVABLE FIELDS AND TYPES EXAMPLE Step 4:- Set the integer to Button <Button android:id="@+id/submit_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="@{address.submitButtonVisibility}" android:onClick="@{() -> address.submitButtonClicked(context)}" android:text="Submit" />
120. public final ObservableField<Integer> submitButtonVisibility = new ObservableField<Integer>(firstName, lastName, address, mobileNumber) { @Override public Integer get() { if(firstName.get() != null && lastName.get()!=null && address.get()!=null && mobileNumber.get()!=null) { boolean areAllFieldsFilled = !firstName.get().isEmpty() && !lastName.get().isEmpty() && !address.get().isEmpty() && !mobileNumber.get().isEmpty(); if (areAllFieldsFilled) return View.VISIBLE; else return View.INVISIBLE; } return View.INVISIBLE; } OBSERVABLE FIELDS AND TYPES EXAMPLE
121. public final ObservableField<Integer> submitButtonVisibility = new ObservableField<Integer>(firstName, lastName, address, mobileNumber) { @Override public Integer get() { if(firstName.get() != null && lastName.get()!=null && address.get()!=null && mobileNumber.get()!=null) { boolean areAllFieldsFilled = !firstName.get().isEmpty() && !lastName.get().isEmpty() && !address.get().isEmpty() && !mobileNumber.get().isEmpty(); if (areAllFieldsFilled) return View.VISIBLE; else return View.INVISIBLE; } return View.INVISIBLE; } } OBSERVABLE FIELDS AND TYPES EXAMPLE
122. public final ObservableField<Integer> submitButtonVisibility = new ObservableField<Integer>(firstName, lastName, address, mobileNumber) { @Override public Integer get() { if(firstName.get() != null && lastName.get()!=null && address.get()!=null && mobileNumber.get()!=null) { boolean areAllFieldsFilled = !firstName.get().isEmpty() && !lastName.get().isEmpty() && !address.get().isEmpty() && !mobileNumber.get().isEmpty(); if (areAllFieldsFilled) return View.VISIBLE; else return View.INVISIBLE; } return View.INVISIBLE; } } OBSERVABLE FIELDS AND TYPES EXAMPLE
123. public final ObservableField<Integer> submitButtonVisibility = new ObservableField<Integer>(firstName, lastName, address, mobileNumber) { @Override public Integer get() { if(firstName.get() != null && lastName.get()!=null && address.get()!=null && mobileNumber.get()!=null) { boolean areAllFieldsFilled = !firstName.get().isEmpty() && !lastName.get().isEmpty() && !address.get().isEmpty() && !mobileNumber.get().isEmpty(); if (areAllFieldsFilled) return View.VISIBLE; else return View.INVISIBLE; } return View.INVISIBLE; } } OBSERVABLE FIELDS AND TYPES EXAMPLE
124. public final ObservableField<Integer> submitButtonVisibility = new ObservableField<Integer>(firstName, lastName, address, mobileNumber) { @Override public Integer get() { if(firstName.get() != null && lastName.get()!=null && address.get()!=null && mobileNumber.get()!=null) { boolean areAllFieldsFilled = !firstName.get().isEmpty() && !lastName.get().isEmpty() && !address.get().isEmpty() && !mobileNumber.get().isEmpty(); if (areAllFieldsFilled) return View.VISIBLE; else return View.INVISIBLE; } return View.INVISIBLE; } } OBSERVABLE FIELDS AND TYPES EXAMPLE
125. public final ObservableField<Integer> submitButtonVisibility = new ObservableField<Integer>(firstName, lastName, address, mobileNumber) { @Override public Integer get() { if(firstName.get() != null && lastName.get()!=null && address.get()!=null && mobileNumber.get()!=null) { boolean areAllFieldsFilled = !firstName.get().isEmpty() && !lastName.get().isEmpty() && !address.get().isEmpty() && !mobileNumber.get().isEmpty(); if (areAllFieldsFilled) return View.VISIBLE; else return View.INVISIBLE; } return View.INVISIBLE; } } OBSERVABLE FIELDS AND TYPES EXAMPLE
126. OBSERVABLE FIELDS EXAMPLE Step 5:- Showing Toast in Button click <Button android:id="@+id/submit_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="@{address.submitButtonVisibility}" android:onClick="@{() -> address.submitButtonClicked(context)}" android:text="Submit" />
127. OBSERVABLE FIELDS AND TYPES EXAMPLE /*Note calling this method from XML, and even View is not needed as first parameter here*/ public void submitButtonClicked(Context context) { Toast.makeText(context,"Your Order is successfully Placed", Toast.LENGTH_LONG).show(); }
128. OBSERVABLE FIELDS AND TYPES EXAMPLE • Passing the context from Activity to XML <variable name="context" type="com.example.bouquetapplication.AddressActivity"/> • Setting the context in Activity addressBinding.setContext(this);
130. RECAP.. • No findViewById required. • You can reference views directly from java class by the “id” • Initialize your imports and variables in the XML inside <data> tag. • Event clicks can be handled in the XML by calling the appropriate methods ,having SAME(METHOD REFERENCES) or DIFFERENT(LISTENER BINDINGS) signatures from onClick() . • You can do mathematical, logical, ternary operations etc in XML itself. • Boilerplate code is largely reduced by using Observables.
131. HOMEWORK TIME!! Imagine you are in a PET shop and you have finalized that you are buying Golden Retriever Dog. Design a screen that shows the details of the Dog. Its name, breed, age and other useful information. Also you have to fill your contact details(Full Name , Mobile Number) before you can actually adopt that cute creature.
132. COMMON ERRORS WHILE YOU START • You missed to enable data binding in gradle. • Putting xmlns: tools in <layout> giving you compiler issues. • You used “@{“Hi” + “123” }” for concatenation instead of ‘@{“Hi” + “123”}’ , so the outside QUOTES matter!! • Image not loading through Binding Adapters. Wait did you give Internet permissions in the Manifest? • What is even the issue?????????
133. REFERENCES https://developer.android.com/topic/libraries/data-binding https://android.jlelse.eu/android-data-binding-binding-view-and-data-part-1-3b9154de09c6 https://guides.codepath.com/android/Applying-Data-Binding-for-Views https://www.youtube.com/watch?v=v4XO_y3RErI&t=995s https://www.vogella.com/tutorials/AndroidDatabinding/article.html#data-binding-for-events-via-listener-bindings-and-method-references https://android.jlelse.eu/an-untold-story-of-observable-dependencies-in-data-binding-c7824552e4ec https://developer.android.com/reference/android/databinding/ObservableField https://medium.com/@jencisov/androids-data-binding-s-baseobservable-class-and-bindable-annotation-in-kotlin-1a5c6682a3c1 Image credits :- Jell Wellington https://pixabay.com/users/jillwellington-334088/ Meme Credits:- https://memecreatorapp.com/ and makeameme.org
134. New Announcement!! View Bindings in Google I/O 19 https://proandroiddev.com/new-in-android-viewbindings-the-difference-from-databinding-library-bef5945baf5e
135. Say Bye to Boilerplate Code and Hii to Data Binding Lib. Twitter : @AgrawalAayushma