Диалоговое окно android studio kotlin

Диалоговые окна

В Android 3.0 (API 11) появилась новинка — класс android.app.DialogFragment и его аналог android.support.v4.app.DialogFragment, а чуть позже и android.support.v7.app.AppCompatDialogFragment из библиотеки совместимости, позволяющие выводить диалоговое окно поверх своей активности. Раньше использовался класс Dialog и его производные, например, AlertDialog. Они никуда не делись, только теперь их нужно встраивать в фрагмент, который выступает в качестве контейнера. Поэтому условно разговор о диалоговых окнах можно разбить на две части — как использовать DialogFragment и как пользоваться классами Dialog, AlertDialog и другими диалоговыми окнами. После появления AndroidX имена пакетов очередной раз изменились, теперь следует импортировать androidx.fragment.app.DialogFragment, androidx.appcompat.app.AlertDialog и другие аналогичные классы.

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

Для создания диалога следует наследоваться от класса DialogFragment. Создадим новый класс MyDialogFragment:

Допустим у нас есть кнопка на экране активности. Вызвать диалоговое окно можно через метод show().

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

Так как это обычный фрагмент, то нам нужно позвать менеджера фрагментов и попросить его показать фрагмент.

Для вызова диалога мы создаём экземпляр класса MyDialogFragment и вызываем метод show(). Метод принимает два параметра: объект класса FragmentManager, получаемый через метод getSupportFragmentManager(), и тег — идентификатор диалога в виде строковой константы, по которому можно идентифицировать диалоговое окно, если их будет много в нашем проекте.

Существует и альтернативный вариант показа окна через транзакцию.

Мы получили пустой бесполезный фрагмент. Следует заняться его конструированием. В созданном классе нужно переопределить метод onCreateDialog(). Если используется разметка, то также используется метод onCreateView(), как и у обычных фрагментов. Скорее всего вы не будете заново изобретать велосипед, а будете использовать готовые варианты диалоговых окон.

AlertDialog

Самый распространённый вариант диалогового окна — это AlertDialog. С него и начнём.

Диалоговое окно AlertDialog является расширением класса Dialog, и это наиболее используемое диалоговое окно в практике программиста. Очень часто требуется показать диалог с кнопками Да и Нет, а также Мур и Мяу . В создаваемых диалоговых окнах можно задавать следующие элементы:

• заголовок
• текстовое сообщение
• кнопки: от одной до трёх
• список
• флажки
• переключатели

AlertDialog с одной кнопкой

Начнём с простого примера — покажем на экране диалоговое окно с одной кнопкой.

В класс фрагмента добавляем метод.

Внешний вид от версии к версии может меняться. В частности, недавно поменяли цвет текста для кнопки.

Сначала мы создаём объект класса AlertDialog.Builder, передав в качестве параметра ссылку на активность. Затем, используя методы класса Builder, задаём для создаваемого диалога заголовок (метод setTitle()), текстовое сообщение в теле диалога (метод setMessage()), значок (метод setIcon()), а также кнопку через метод под странным названием setPositiveButton().

Сама обработка нажатия кнопки внутри диалогового окна задаётся внутри метода setPositiveButton(). В нашем случае мы просто закрываем окно диалога через метод cancel().

Обратите внимание на не совсем обычный способ вызова череды методов цепочкой через точку .setMessage(«Покормите кота!»).setIcon(R.drawable.ic_android_cat) и т.д. Такой синтаксис можно часто увидеть в jQuery. При таком способе не нужно использовать точку с запятой в конце каждого метода, вы просто склеиваете все вызовы. Но можете использовать и обычный синтаксис.

Если вы используете Java 8, то студия предложит использовать лямбда-выражение вместо анонимного класса. Решайте сами, в каком стиле писать код.

Заголовок. Метод setTitle()

Немного остановимся на заголовке. Старайтесь использовать небольшие сообщения. Если сообщение будет средней длины, то оно может разместиться на двух строках. Если сообщение будет слишком длинным, то оно обрежется.

А если очень хочется вывести длинную строку в заголовке? Тогда вместо setTitle() можно вызвать setCustomTitle() и передать ему View, в нашем случае это будет TextView.

При этом перестал выводиться значок. Обидно.

Нелёгкий выбор — пример с двумя кнопками

Теперь рассмотрим пример создания диалогового окна с двумя кнопками на основе иллюстрации.

Внешний вид диалоговых окон в разных версиях Android.

Общая часть кода осталась прежней — объект класса AlertDialog.Builder, методы для настройки окна, а также кнопки диалога и обработку событий на них. В AlertDialog можно добавить только по одной кнопке каждого типа: Positive, Neutral и Negative, т. е. максимально возможное количество кнопок в диалоге — три. На названия кнопок не обращайте внимания, они не несут смысловой нагрузки, а только определяют порядок вывода. Причём в разных версиях Android порядок менялся. Поэтому на старых устройствах кнопка «Да» может быть первой, а на новых — последней. Для каждой кнопки используется один из методов с префиксом set. Button, которые принимают в качестве параметров надпись для кнопки и интерфейс DialogInterface.OnClickListener, определяющий действие при нажатии. Чтобы пользователь не мог закрыть диалог нажатием в любой точке экрана, вызывается метод setCancelable() с значением true.

Три кнопки

Рассмотрим пример с тремя кнопками. Разницы практически нет. Повторяем все предыдущие шаги, для отображения диалогового окна вызывается метод builder.create(). Например, для создания диалога с кнопками Мяу, Гав, Сам дурак! код будет выглядеть приблизительно так:

AlertDialog со списком

Если вам нужно диалоговое окно со списком выбираемых пунктов вместо кнопок, то используйте метод setItems(), где нужно указать массив данных для отображения в списке диалога. Данный метод нельзя использовать вместе с методом setMessage(), так они выводят содержимое в основной части окна.

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

Напоминаю, что внешний вид окна менялся от версии к версии.

AlertDialog с переключателями

Для создания диалогового окна с переключателями применяется метод setSingleChoiceitems() вместо метода setItems().

Обратите внимание на следующие детали. При выборе переключателя диалоговое окно закрываться не будет. Поэтому необходимо предусмотреть механизм закрытия окна, например, добавить кнопку. Второй момент — в методе setSingleChoiceitems для первого параметра используется массив значений для переключателей, а для второго параметра используется целочисленное значение индекса переключателя, который будет включён по умолчанию при вызове диалогового окна. Если вы хотите, чтобы все переключатели при запуске были в выключенном состоянии, то используйте значение -1.

AlertDialog с флажками

Если вы хотите использовать вместо переключателей флажки (CheckBox) для множественного выбора, то вам нужен метод setMultiChoiceItems(). Код практически идентичен предыдущему примеру:

Первый параметр в методе setMultiChoiceItems() — массив значений для списка с флажками, второй параметр — булевый массив состояний флажков списка по умолчанию при вызове диалога. Например, мы хотим, чтобы второй элемент списка был отмечен флажком, а остальные элементы нужно оставить неотмеченными. В этом случае используем массив из булевых значений:

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

Автоматическое закрытие окна

В отличие от сообщения Toast, которое закрывается через одну-две секунды, диалоговые окна сами не закрываются, а ждут реакции пользователя. Но если мы воспользуемся таймером, то сможем обойти это ограничение.

Добавим в проект кнопку для вызова самозакрывающего диалогового окна и напишем код для обработчика щелчка кнопки (старый пример без использования фрагмента):

AlertDialog с рейтингом (проблемный пример)

Однажды я повстречал в сети пример включения компонента RatingBar в диалог. При тестировании обнаружил, что код работает не совсем корректно. На экран всегда выводятся шесть звёздочек, несмотря на установленные настройки. А если развернуть приложение в альбомный режим, то выводятся и семь звёздочек и больше, в зависимости от размеров экрана. Оставил пример на память, если кто-то разберётся в чём тут была проблема, то дайте знать. Это тоже старый пример без использования фрагмента.

Решение проблемы

Читатели предложили несколько вариантов решения проблемы. Как следует из документации, компонент RatingBar следует размещать в макете, который имеет свойство wrap_content. Поступим следующим образом. Создадим отдельную разметку с RatingBar, которую присоединим к диалоговому окну. Итак, разметка:

res/layout/ratingdialog.xml

Теперь модифицированный код:

Обратите внимание, что для доступа к свойствам RatingBar, мы вызываем метод View.findViewById(), а не Activity.findViewById(), как обычно мы привыкли делать в методе onCreate(), когда опускаем название класса.

Передать данные в активность

Для обработки щелчков кнопок в диалоговом окне вы пишете код, в котором указываете родительскую активность.

В коде каких-то сложностей нет — устанавливаем заголовок, значок, кнопки. При построении диалогового окна указываем родительскую активность и название методов в ней, которые будут отвечать за обработку нажатий кнопок диалога — в нашем случае это методы okClicked() и cancelClicked(). Кстати, имена методов будут подчёркнуты красной линией и среда разработки предложит создать данные методы в классе активности (используйте комбинацию клавиш Alt+Enter).

Возвращаемся в код главной активности и пропишем код для нажатий кнопок диалогового окна:

Пример был написан по принципу — «работает и ладно». На самом деле пример не совсем грамотный, хотя даже в документации он ещё встречается.

Правильный вариант рассматривается во второй части о диалоговых окнах DialogFragment.

AlertDialog с собственной разметкой

Если стандартный вид AlertDialog вас не устраивает, то можете придумать свою разметку и подключить её через метод setView()

Вы познакомились с базовыми принципами использования диалоговых окон.

Источник

Getting Started with Dialogs in Android Kotlin

February 14, 2021

Android has distinguished techniques for improving user experience. One of them is the use of dialogs. A Dialog is a brief conversation between the user and the application. It is usually a small window that pops-up on the device’s screen.

Dialogs can be used to prompt actions in some events or pass a message to the user. In this tutorial, we are going to learn how to create and implement dialogs in Android.

Prerequisites

Before we move on, make sure that you:

• Have Android Studio installed on your machine.
• Know how to create Android projects and navigate through the IDE .
• Are familiar with XML and the Kotlin programming language.
• Have basic knowledge of Data binding .

Getting started

Android offers several types of Dialogs which include:

• Alert Dialog
• DatePicker Dialog
• TimePicker Dialog
• Dialog Fragment
• BottomSheet Dialog

In this tutorial, we’re going to lay our focus on AlertDialog , and we’ll mainly cover the following concepts:

Creating Alert dialogs:

• Adding title, buttons, message, and an icon.
• Handle dialog events.

Customizing Alert dialogs:

• Creating custom layout resource file.
• Use of DataBinding to access views.
• Creating a round-corner-shape dialog.

Creating an Android project

Launch Android Studio and create an Empty Activity project with the following specifications.

Name : Dialogs in Android

Project setup

Adding Dependencies and Plugins

For us to use DataBinding, we have to enable and add the necessary plugin first. Open the app-level build.gradle file and add the following in the respective scope.

Sync and wait for the Gradle-build to finish. Once it’s done, proceed to set up the UI.

Setting up the user interface

In our UI, we need 2 buttons that we’ll use to show the Dialogs. Open activity_main.xml file and paste the code below.

To fix the error about the unresolved reference in the text attribute, create strings in the strings resources as shown below.

As we mentioned earlier, we will use these buttons to show the necessary dialogs. To achieve this, we need DataBinding objects for each view in our layout.

The beauty of DataBinding is that it autogenerates these objects. We just need to enclose the layout with a layout tag as shown below.

Writing Kotlin code

Inside the MainActivity.kt file is where we’ll write the logic of our app. First, create a mutable variable of type ActivityMainBinding that will initially be null but be initialized in the onCreate() method.

To learn more about DataBinding please refer to this article by Michael Barasa or this Youtube tutorial.

When activities or fragments are destroyed, variables or objects can still be holding a reference to non-existing values. This is called a memory leak which of course can lead to unwanted behavior in our app.

To avoid this, always de-allocate memory allocated to such objects in the onDestroy() method.

The snippet below shows the above-discussed concepts.

Creating Alert Dialogs

An Alert Dialog is created by instantiating the AlertDialog class and then creating a Builder for it. There are several types of Alert Dialogs in Android. In this tutorial, we’ll create every dialog in its own function and the respective one will be called when a button is clicked.

A). Default Alert Dialog

This type of dialog is usually rectangular and appears at the center of the screen. We’ll discuss its functionalities as we proceed. In the meanwhile, paste the code below inside the MainActivity class, just below the onCreate() method.

The code above creates a dialog with the title “Hello” and shows it on the screen using the show() method. If omitted, the dialog won’t pop up. You can verify this by calling its function when the button is clicked. Add the code below.

Ensure that there are no errors in your code before running the app. When you click the button, you should get an output similar to the one below.

Adding features to a Dialog

Now that we’ve created a Dialog, we can add functionalities such as:

• Icon — This is a small-sized image that appears alongside the title. It usually makes the dialog more informative and attractive.
• Message — This is the main content of the alert dialog. It gives a short description of the reason for its pop-up or, prompts the user to make a decision before proceeding.
• Buttons — They appear at the bottom part of the dialog. There are three types of buttons namely, Positive , Negative and Neutral buttons. As their names suggest, they are meant to perform the respective actions once clicked. By default, the dialog dismisses once any of the buttons is clicked.
• View — this is a layout used in customizing dialogs. We’ll learn about this in a moment.

Meanwhile, let us create a Dialog that implements the above features. Create a vector drawable (icon) named ic_hello .

Update the showDefaultDialog() function to look like the one below.

Now, copy and paste the code below just above or below the showDefaultDialog() function.

Explanation

The syntax for creating a button requires us to pass in a listener of type DialogInterface.OnClickListener in the lambda function. A DialogInterface defines a dialog-type class that can be shown, canceled (or dismissed), and may have buttons that can be clicked. Kotlin simplifies this by allowing us to pass in underscores for unused arguments in the lambda function.

The function toast() is used to show a short Toast message with a text passed as the argument when a button is clicked.

Run the app and you should see a dialog similar to the one below.

Notice that when you click outside the dialog, it dismisses. You can avoid this effect by adding setCancelable(false) in the builder.

B). Custom Alert Dialogs

Customization is the act of making something appear or behave differently from the default way. Alert Dialog offers us an important method, setView() that allows us to use a Layout as the View for the dialog. Such dialogs are called custom dialogs.

Moving on, create an XML layout resource file named lay_custom_dialog . We’ll use this layout for the purpose mentioned above.

Open the newly created file and paste the following code

To fix the errors about unresolved references in the “text” attribute, copy and paste the respective string resource below.

In the MainActivity.kt file, paste the following code just below showDefaultDialog() function.

Here we’ve linked the layout and created a non-cancellable dialog that can only be canceled by clicking the Ok button.

In the onCreate() method, add the following code.

We can customize it further by creating round corners. To achieve this, we’ll create a drawable resource file with a round shape then set it as the background for our layout. Create a drawable resource file named round_corners and paste the following code in it.

Remember to set this as the background of the root ViewGroup as shown below.

Before running the app we need to do the following;

• Create a top-curved shape drawable resource named curved_view and set it as the view’s background
• Set the color of the dialog window to transparent. This will make the round corners visible as the window background won’t be visible.

Paste the code below in the curved_view.xml file and showCustomDialog() function respectively.

The rest of the function remains the same.

Now we’re done. Run the app and you should see a dialog similar to this one

Conclusion

In this tutorial, we’ve learned how to create, customize, and use Alert Dialogs in Android. As you’ve seen, dialogs are very simple to implement. You can find the full source code for this tutorial here.

Check out the official documentation to learn more about Alert Dialogs and other types of dialogs that Android has to offer.

Peer Review Contributions by: Peter Kayere

About the author

Eric Gacoki is a 2nd-year undergraduate student pursuing computer science. He is a self-taught and solution-driven Android software developer. Currently, he’s doubling up as a co-lead in Android Stack under Developer Students’ clubs (sponsored by Google) in his university. He enjoys teaming up with all levels of developers to solve complex problems and learning from each other.

Want to learn more about the EngEd Program?

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

Источник