Lekce 1 - Android AlertDialog - Základní systémové dialogové okno

Dnešním Android tutoriálem zahájíme kurz na téma dialogová okna v Androidu. Dnes ve vývojovém prostředí Android Studio založíme nový projekt ukázkové aplikace nazvané Dialogs, ve které budeme postupně vytvářet různé typy dialogových oken.

Dialogová okna používáme ke komunikaci s uživatelem. Zobrazujeme mu informační zprávy nebo od něj požadujeme nějaké rozhodnutí. Dále v nich například žádáme o zadání nějakých dat.

Minimální požadavky kurzu

K úspěšnému absolvování kurzu není třeba žádných pokročilých znalostí. Vše si postupně vysvětlíme. Předpokládáme však znalost základů objektově orientovaného programování v Javě a kurzu Základy vývoje Android aplikací v Javě, ve kterém se seznamujeme s vývojovým prostředím Android Studio.

Založení projektu ukázkové aplikace

Nyní ve vývojovém prostředí Android Studio založíme nový projekt pojmenovaný Dialogs. Tento projekt nás bude provázet celým kurzem a umožní nám prakticky si vyzkoušet popisovanou teorii.

V levé části okna pro vytvoření nového projektu zvolíme možnost Phone and Tablet a v pravé části vybereme šablonu Empty Activity. Volbu potvrdíme tlačítkem Next:

V dalším okně do políčka Name napíšeme název projektu, v našem případě Dialogs. Políčko Package name vyplníme textem cz.itnetwork.dialogs. Vše potvrdíme tlačítkem Finish:

Vývojové prostředí nám v projektu vygeneruje několik základních souborů. Těmi nejdůležitějšími jsou soubory activity_main.xml s XML návrhem vzhledu hlavní aktivity aplikace a MainActivity.java s jejím Java kódem.

Úprava souboru activity_main.xml

Soubor s návrhem vzhledu grafického uživatelského rozhraní hlavní aktivity aplikace upravíme do této podoby:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="20dp">

        <Button
            android:id="@+id/btn_basic_dialog"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="AlertDialog"
            android:textAllCaps="false" />

    </LinearLayout>

</ScrollView>

Hlavním elementem této aktivity bude komponenta ScrollView obsahující LinearLayout. Do tohoto layoutu budeme postupně přidávat tlačítka pro zobrazování příkladů, které budeme postupně během kurzu vytvářet. Na konci kurzu budeme mít tlačítek více. Mohlo by se tedy stát, že se všechna tlačítka na displej telefonu nevejdou. Proto je hlavní komponentou aktivity právě ScrollView.

Do layoutu jsme zároveň přidali první tlačítko s textem AlertDialog, které bude sloužit k zobrazení našeho prvního dialogového okna.

Doplnění souboru MainActivity.java

Soubor s Java kódem hlavní aktivity doplníme do následující podoby:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    Button btn_basic_dialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn_basic_dialog = findViewById(R.id.btn_basic_dialog);

        btn_basic_dialog.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_basic_dialog:
                break;
        }
    }
}

V souboru MainActivity.java nejprve doplníme hlavičku třídy MainActivity o implementaci rozhraní View.OnClickListener. Po tomto kroku nás Android Studio upozorní na nutnost přepsání metody onClick() zmíněného rozhraní. Tuto metodu tedy doplníme. Metoda onClick() obsahuje konstrukci switch, která bude určovat další chování aplikace. Podle toho, které tlačítko bylo stisknuto, zobrazíme dané dialogové okno.

Zatím máme deklarované pouze jedno tlačítko. Proto zde máme jen jednu možnost, která ale zatím neobsahuje žádný obslužný kód.

V úvodu třídy MainActivity máme proměnnou btn_basic_dialog typu Button, kterou dále v metodě onCreate() inicializujeme referencí na naše tlačítko v XML návrhu vzhledu aktivity. V metodě onCreate() zároveň tomuto tlačítku nastavujeme posluchače události kliknutí. Posluchačem je hlavní aktivita, proto do parametru metody setOnClickListener() dosazujeme hodnotu this. Nyní máme připravené první tlačítko, jehož úkolem bude zobrazení jednoduchého dialogového okna typu AlertDialog.

Základní systémové dialogové okno

AlertDialog je základní systémové dialogové okno, jehož vzhled je vždy přizpůsoben vzhledu konkrétní verze Androidu, na které aplikace poběží. AlertDialog má tyto tři části:

• hlavičku, která může obsahovat textový řetězec a ikonu,
• obsah, jenž v nejjednodušším případě obsahuje textový řetězec s nějakou informací pro uživatele, možností nastavení obsahu ale existuje více a všechny si je postupně ukážeme,
• tlačítka ve spodní část dialogu, nemusíme zde použít žádné tlačítko nebo až tři defaultní tlačítka.

K základnímu nastavení okna AlertDialog můžeme použít připravené metody třídy AlertDialog.Builder. Tyto metody slouží k nastavení textu hlavičky, k nastavení textu v obsahu pro AlertDialog a k nastavení až tří tlačítek:

Toto nám bohatě stačí k vytvoření jednoduchého informačního dialogového okna, jehož Java kód zabere jen několik řádků. Možnosti základního nastavení vzhledu základního okna jsou značně omezené, proto máme možnost v hlavičce a obsahu dialogu nastavit vlastní vzhled definovaný XML souborem, podobně jako vzhled aktivity.

Nejprve si projdeme možnosti základního nastavení a až později si ukážeme, jak lze AlertDialog upravit k nepoznání od jeho základní verze použitím vlastního layoutu s komponentami z nabídky Android Studia.

Základ dialogového okna

Nyní si ukážeme základní Java kód potřebný k vytvoření základního dialogového okna. Do třídy MainActivity proto přidáme deklaraci naší první metody showMyAlert() podle následující ukázky:

public void showMyAlert() {
    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);

    // ... prostor pro nastavení dialogu

    AlertDialog alertDialog = alertDialogBuilder.create();
    alertDialog.show();
}

V metodě showMyAlert() nejprve vytváříme instanci třídy AlertDialog.Builder, která umožňuje definování vzhledu a vlastností pro budoucího AlertDialog. Samotné nastavení dialogu v ukázce chybí a je nahrazeno tečkami. Parametrů, které lze dialogu nastavit, je více a budeme si je ukazovat postupně. Po nastavení vzhledu dialogu vytváříme voláním metody create() instanci třídy AlertDialog. Takto máme dialog připravený k zobrazení uživateli.

Samotného zobrazení dialogu však docílíme až voláním metody show().

Titulek a obsah dialogu

Nyní si ukážeme nejjednodušší možnost, jak AlertDialog nastavit. Necháme v něm zobrazit textový řetězec v jeho hlavičce a další v jeho obsahu. Upravený kód metody showMyAlert() bude vypadat takto:

public void showMyAlert() {
    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);

    alertDialogBuilder.setTitle("Titulek");
    alertDialogBuilder.setMessage("Text zobrazený v dialogu");

    AlertDialog alertDialog = alertDialogBuilder.create();
    alertDialog.show();
}

Abychom mohli popsaný AlertDialog zobrazit uživateli, musíme se postarat o zavolání naší metody showMyAlert(). Tato metoda bude zavolána stisknutím našeho zatím jediného tlačítka. Proto volání této metody přidáme do zatím jediné větve konstrukce switch v přepsané metodě onClick():

@Override
public void onClick(View view) {
    switch (view.getId()) {
        case R.id.btn_basic_dialog:
            showMyAlert();
            break;
    }
}

Po spuštění aplikace a po stisknutí jediného tlačítka bude zobrazeno toto jednoduché dialogové okno:

Jak bylo zmíněno výše, vzhled základního dialogového okna je závislý na verzi Androidu, na kterém aplikace běží. Jeho vzhled se proto může na různých zařízeních lišit.

V úvodu bylo také zmíněno, že text titulku pro AlertDialog není povinný. Pokud v metodě showMyAlert() zakomentujeme řádek s voláním metody setTitle(), nebude hlavička zobrazena:

Totéž platí i pro obsah, který také není pro AlertDialog povinný. V takovém případě bude zobrazen pouze titulek dialogu.

Pod článkem je k dispozici ke stažení projekt naší ukázkové aplikace s jedním tlačítkem.

V příští části, Android AlertDialog - Defaultní tlačítka, našemu prvnímu dialogovému oknu nastavíme defaultní tlačítka a také si ukážeme, jak vyřešit reakci kliknutí na tato tlačítka. Do Java kódu aplikace si tak přidáme posluchače událostí.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.