Data binding kotlin android

Databinding in Android using Kotlin

December 3, 2020

If you have ever wondered if there is a way to link the UI directly to the data source ? You are in the right place. Repeating the dreaded findViewbyID statement in your code can be tedious.

It takes so much time that one may end up forgetting variables’ IDs. Well, there is a solution. That solution is data binding . We will learn how to implement this concept in this tutorial.

Introduction

Without going any further, it’s essential to understand what data binding is and it’s advantages. The data binding library is part of Android Jetpack utilities.

According to the Android developer documentation, the data binding library allows users to bind layouts and UI components to data sources declaratively.

The data binding library seeks to eliminate something like this:

By introducing this.

The goal of the tutorial

In this project, we will create a simple Notes app in Android using Kotlin . As you guessed, the app will make use of the data binding library.

At the end of the tutorial, your application should be similar to the one shown in the video below.

Prerequisites

This tutorial is intended for those who have some experience in Android programming using Kotlin . You can download the full source code here.

1. Installing the required dependencies

Launch Android studio and create a new project. Once the project is ready, go to the Gradle scripts folder and open build.gradle (module: app) .

Add buildFeatures and set databinding to true . This notifies the Android system that our app uses data binding. Therefore, the proper files will be generated.

In the same build.gradle file, add the lifecycle library to your dependencies . This library helps connect the UI to a ViewModel and LiveData .

Read more about MVVM architecture here.

Remember to add apply plugin: kotlin-kapt at the top of the file.

2. Model

In your primary folder, create a new package and name it model . Then create a Note.kt file in this package.

As shown, the data class NoteItem only holds two variables ( title and description ). These values are required to initialize the class.

3. ViewModel

The ViewModel makes it easy to update data changes on the UI .

Create a package named viewmodels in your main folder.

Then create a new file and name it MainViewModel.kt . The file will contain the following variables.

The isStringEmpty variable is a Boolean . It will help determine whether or not the user’s input is empty.

The inputTitle and inputdescription variables will store the user’s data. The values stored in these variables will change according to the user’s input; hence, we use MutableLiveData .

The list will store the NoteItem arraylst . It’s capable of refreshing itself when it detects a change in its content.

The NotesViewModel also contains three important methods; init , addData , and clearData .

The init method will initialize the isStringEmpty variable to false . This method launches automatically once the NotesViewModel is created.

The addData method takes the user input and checks if it’s empty.

The isStringEmpty variable is updated to true if the data is empty.

Otherwise, the data is entered into a NoteItem object and passed to the arraylst .

The arraylst is then stored in list.

The clearData function resets the arraylst and list , as shown below.

Note: To use the bindable component, the NotesViewModel must extend the Observable class. You will then need to implement the methods below.

Your final NotesViewModel file should look like this.

4. ViewModelFactory

In the same viewmodels package, create a file named NotesViewModelFactory and add the code below.

The NotesViewModelFactory will throw an Exception in case the ViewModel is not found.

5. User Interface

Let’s create the app UI before finalizing with the MainActivity .

Since this is a Notes App, we need to allow the user to enter, save, and clear data. Therefore, the application will have two EditTexts and two Buttons .

Whatever the user types will be displayed in a TextView on the click of the submit button. The app UI is shown below.

To include data binding in the UI, enclose all content with .

The ViewModel is introduced to the layout in the section, as shown. Ensure that the type value points to the specific folder that has the required ViewModel .

The EditText widgets will be bound to the NotesViewModel using @= statement.

The submit and clear buttons will connect to the NotesViewModel by @<()->NotesViewModel.addData()> statement.

This is illustrated below.

We’ll use the TextView with the ID content to display the user’s input.

Here is the full code for the activity_main.xml .

6. MainActivity

In this class, we need to initialize the NotesViewModel and the ActivityMain data binding.

The lateinit allows variables to be initialized at a later stage.

The NotesViewModelFactory is initialized first and then passed to the NotesViewModel as a parameter.

The databinding is also assigned the required viewmodel and lifecycleowner .

We will observe the list in the NotesViewModel using the following commands.

We’ll observe the isStringEmpty variable to determine if the user has clicked the submit button without entering data. A Toast message will appear in case the user inputs are empty.

The complete MainActivity.kt is shown below.

When you run your application, it should appear as in the video below.

Conclusion

As a developer, data binding will allow you to save time by eliminating boilerplate code. The UI components are updated automatically in case of any data changes. This functionality enables you to create both high quality and productive applications.

References

Peer Review Contributions by: Peter Kayere

About the author

A lover of technology. An upright individual not afraid of getting out of the comfort zone and trying out new things.

Want to learn more about the EngEd Program?

Discover Section’s community-generated pool of resources from the next generation of engineers.

Источник

Легкий DataBinding для Android

Здравствуйте уважаемые читатели. Все мы любим и используем DataBinding, который представила компания Google несколько лет назад, для связи модели данных с вьюшками через ViewModel. В этой статье, хочу поделиться с вами, как можно унифицировать этот процесс с помощью языка Kotlin, и уместить создание адаптеров для RecyclerView (далее RV), ViewPager и ViewPager2 в несколько строчек кода.

Начну с того, что раньше разрабатывали кастомные адаптеры, которые под капотом создавали ViewHolder’ы, и их написание, а тем более поддержка, занимала достаточно большое количество времени. Ниже приведу пример типичного адаптера для RV:

С тем как проект увеличивается, подобных адаптеров может становиться намного больше. Помню, однажды, адаптер был настолько огромный, в несколько сотен строчек кода, что разобраться, что там происходит, а тем более добавить что-то новое занимало колосальное количество времени, так как он работал с разными моделями данных, а так же должен был создавать различные отображения для каждого типа данных. Честно скажу, это было тяжело.

Затем появился DataBinding и большую часть по связыванию данных перекладывалась на него, но адаптеры все равно приходилось писать вручную, изменились только методы onCreateViewHolder , где вместо инфлэйтинга через LayoutInflater , использовался DataBindingUtil.inflate , а при создании вьюхолдеров данные связывались непосредственно с самой вьюшкой через ссылку на созданный объект байдинга.

Выглядит уже лучше, но что если в RV, по прежнему должны отображаться элементы лайаута с разными типами данных, то такая реализация не сильно помогла решить проблему больших адаптеров. И здесь на помощь приходит аннотация BindingAdapter из библиотеки androidx.databinding. С ее помощью, можно создать универсальное решение, которое скрывает реализацию создания адаптера для RV, если использовать вспомогательный объект-конфигуратор DataBindingRecyclerViewConfig , в котором содержится ряд свойств для настройки адаптера.

В результате на свет появилась библиотека, которая называется EasyRecyclerBinding. В нее так же вошли BindingAdapters для ViewPager и ViewPager2. Теперь процесс связывания данных выглядит следующим образом:
1) В лайауте фрагмента, необходимо добавить специальные переменные, которые содержат список отображаемых моделей данных и конфигурацию, указав их атрибутами для RV, — app:items и app:rv_config .

ViewModel, соответственно, содержит список моделей данных для адаптера, которые должны отображаться в RV, а фрагмент конфигурацию DataBindingRecyclerViewConfig.

Сам лайаут для элемента списка, должен содержать ссылку на модель данных, чтобы связать их вместе.

2) Во фрагменте нам нужно получить конфигурацию для адаптера и передать её в отображение через инстанс dataBinding, используя специальную функцию-конструктор createRecyclerConfig , которая создаст и вернет инстанс DataBindingRecyclerViewConfig, указав при этом id лайаута для выбранной модели, и название свойства, к которому будет прикреплена данная модель.

Это все, что нужно сделать, чтобы связать данные из ViewModel с отображением списка в RV. Так же при создании адаптера можно назначить слушатели событий для байдинга вьюхолдера, такие как onItemClick, onItemCreate, onItemBind и другие.

А чтобы использовать вьюхолдеры с разными визуальными лайаутами, к которым привязаны свои модели отображения данных, необходимо имплементировать в них специальный интерфейс из библиотеки EasyRecyclerBinding — IBindingModel и переопределить поле layoutResId , — id лайаута, который будет отображаться для этой модели в списке.

Реализация для фрагмента с разными вьюхолдерами не сильно отличается от вышеприведенной, кроме того, используется другая функция-конструктор createRecyclerMultiConfig для конфигурации адаптера, в которой уже не нужно указывать тип привязанных данных и сгенерированный класс байдинга.

Таким образом, создание адаптеров для отображения данных в RV, превратилось в простую задачу состоящую из пары строчек кода, где разработчику уже не надо думать о том, как поддерживать, фактически, не нужную часть presentation слоя. И даже, если модель данных изменится, достаточно будет поменять только её отображение, и связать его с новыми данными, не заботясь о поддержке адаптеров.

Аналогичный процесс создания адаптеров для ViewPager и ViewPager2, представлен в примере на github вместе с открытым кодом, ссылку на который, я разместил в конце статьи. В настоящий момент библиотека еще дорабатывается, и хочется получить адекватный фидбек, и пожелания по дальнейшему ее развитию. Так же в неё вошли вспомогательные функции для удобного создания байдинга, в том числе в связке с ViewModel. (LayoutInflater.createBinding, Fragment.createBindingWithViewModel, etc)

Спасибо, что дочитали до конца. Приятного кодинга и хорошего настроения)

Источник

Урок 8. Android Data Binding – основы

Продолжаем курс по обучению основам разработки мобильных приложений в Android Studio на языке Kotlin. В этом уроке познакомимся с Android Data Binding.

Data Binding Library

Библиотека Data Binding Library, которая является частью Android Jetpack, позволяет привязывать компоненты пользовательского интерфейса в макетах к источникам данных в приложении, используя декларативный формат, а не программно. Другими словами, Data Binding поможет организовать работу с View так, чтобы нам не пришлось писать кучу методов findViewById, setText, setOnClickListener и т.п.

Чтобы более тесно на практике познакомиться с чистой архитектурой и архитектурными компонентами, записывайтесь на продвинутый курс по разработке приложения «Чат-мессенжер»

В этом цикле уроков вы узнаете, как настроить Data Binding в проекте, что такое layout expressions, как работать с observable objects и как создавать кастомные Binding Adapters чтобы свести избыточность (boilerplate) вашего кода к минимуму.

С чего начать

В этом уроке, мы возьмем уже существующий проект и конвертируем его в Data Binding:

Приложение имеет один экран, который показывает некоторые статические данные и некоторые наблюдаемые данные, что означает, что при изменении данных пользовательский интерфейс будет автоматически обновляться. Данные предоставлены ViewModel. Model-View-ViewModel — это шаблон уровня представления, который очень хорошо работает с Data Binding. Вот диаграмма паттерна MVVM:

Если вы еще не знакомы с классом ViewModel из библиотек компонентов архитектуры, вы можете посмотреть официальную документацию. Мы знакомились с этим классом на прошлом уроке, ссылку на который вы видите в правом верхнем углу этого видео. Это класс, который предоставляет состояние пользовательского интерфейса для представления (Activity, Fragment, т.п.). Он выдерживает изменения ориентации и действует как интерфейс для остальных слоев вашего приложения.

Что нам понадобится

• Среда разработки Android Studio 3.4 или более новой версии.
• Приложение без Data Binding

На этом этапе мы загрузим и запустим простое приложение-пример. Выполните в консоли команду:

Вы также можете клонировать или скачать репозиторий в виде Zip-файла по ссылке на GitHub

1. Распакуйте проект
2. Откройте проект в Android Studio версии 3.4 или выше.
3. Запустите приложение

Экран по умолчанию открывается и выглядит так:

Этот экран отображает несколько различных полей и кнопку, по нажатию которой можно увеличить счетчик, обновить индикатор выполнения и изображение. Логика действий, происходящих на экране, описана в классе SimpleViewModel. Откройте его и посмотрите.

Используйте Ctrl + N, чтобы быстро найти класс в Android Studio. Используйте Ctrl + Shift + N, чтобы найти файл по его имени.

На Mac найдите класс с помощью Command + O и файл с помощью Command + Shift + O.

В классе SimpleViewModel описаны такие поля:

• Имя и фамилия
• Количество лайков
• Уровень популярности

Кроме того, он позволяет пользователю увеличивать количество лайков методом onLike().

Пока SimpleViewModel содержит не самый интересный функционал, но здесь все в порядке. С другой стороны, класс главного экрана MainActivity имеет ряд проблем:

• Он вызывает метод findViewById несколько раз. Это не только медленно, но и небезопасно, потому что не проверяется на ошибки времени компиляции. Если идентификатор, который вы передаете в findViewById, неправильный, приложение аварийно завершит работу во время выполнения.
• Устанавливает начальные значения в onCreate. Было бы намного лучше иметь значения по умолчанию, которые устанавливаются автоматически.
• Использует в макете атрибут android:onClick который также не является безопасным: если метод onLike не реализован в активити (или переименован), приложение упадет в рантайме.
• В нем много кода. Активити и фрагменты имеют тенденцию расти очень быстро, поэтому желателно удалить из них как можно больше кода. Кроме того, код в активити и фрагментах трудно тестировать и поддерживать.

В нашей серии уроков с помощью библиотеки Data Binding мы собираемся исправить все эти проблемы, переместив логику из активити в места, где ее можно повторно использовать и проще тестировать.

Подключаем Data Binding в проект

Первым шагом является включение библиотеки Data Binding в модули, которые будут ее использовать. Добавьте такие строки в файл сборки модуля app:

Источник