První projekt

---

Měli bychom mít vše potřebné nastaveno, je tedy čas vytvořit náš první projekt. Jak je ve světě programování zvykem, nazveme první projekt „Hello world!“. Zároveň si vyzkoušíme propojení počítače s mobilním telefonem.

1. Spusťte vývojové prostředí Android Studio.


2. Na úvodní obrazovce zvolte Start a new Android Studio project.


3. Jako název aplikace uveďte „Cisteni obrazovky“


4. Nyní musíte zadat doménu projektu.
   Doména by měla jednoznačně určovat vás a vaši organizaci. Pokud vlastníte doménu, využijte ji. Jedná-li se o školní projekt, zvolte například:
   vas_login.skolni_rok.predmet.domena_skoly.cz
   Příklad pro Obchodní akademii Uherské Hradiště:
   novak_jan.r201516.pro4.oauh.cz
   Pokud si děláte vlastní projekt, zvolte například doménu: test.local
   novak_jan.test.local

5. Zkontrolujte umístění složky s projektem na disku.


6. Dále vyberte, pro jaké zařízení chcete aplikaci určit.
   Vybíráte minimální konfiguraci. Takže když vyberete Android 4.0.3, znamená to, že na novějších verzích by aplikace měla fungovat, ale na starších fungovat nebude!
   Ujistěte se, že jste si při volbě nainstalovaných komponent v SDK Manageru zvolili odpovídající verzi SDK. Případně můžete spustit SDK a dodatečně balíčky doinstalovat:
   Tool → Android → SDK Manager


7. V dalším kroku můžete vybrat přednastavený vzhled hlavního okna (aktivity).

   Zatím vyberte prázdné hlavní okno (Blank Activity).

8. A nyní zbývá už jen zvolit název hlavní aktivity (obrazovky).

   Zapište název „Cistic“.

Pro začátek se nám vytvořila aplikace s prázdnou obrazovkou (Activity) a jediným textem „Hello world!“. Pojďme vyzkoušet propojení s mobilní telefonem!

1. Připojte mobilní telefon.
   Přihlaste se a zvolte režim připojení Nabíjení telefonu (Charge phone).


2. V Android Studiu zvolte v nabídce nástrojů zelenou šipku (Run→ Run 'app', nebo kombinace kláves Shift-F10).


3. Android Studio vám nabídne možnost spustit aplikaci v emulátoru (v počítači na virtuálním zařízení) nebo v mobilním telefonu (Running Device).
   Pokud v okně Running Device nevidíte žádné zařízení, zkuste znovu projít kroky z kapitoly Instalace a nastavení, nebo se ptejte vyučujícího.

Pokud vše proběhlo v pořádku, vidíte na svém mobilním zařízení bílou obrazovku s nápisem „Hello world!“. Při doteku obrazovky mobilního zařízení by se měly objevovat zápisy o události v dolní části okna Android Studia (logcat).

Časté chyby:

• Pokud se objeví chyba Insufficient disk space, zkontrolujte, zda máte dostatek místa na pevném disku vašeho počítače (i když nápověda k chybě navádí spíše k domněnce, že se jedná o nedostatek místa v úložišti mobilního telefonu).

Pojďme si nyní vyzkoušet přidání textu na obrazovce mobilní aplikace. Provedeme tak první zásah do kódu projektu.

V levé části okna Android Studia je zobrazena stromová struktura projektu. Je zastoupena záložkou app. V ní nás zajímá složka res a její podsložka layout, kde je popsán vzhled každého okna aplikace (aktivit). Každou aktivitu popisuje jeden soubor ve formátu XML. Zatím máme ve složce layout jediný soubor jediný s názvem activity_cistic.xml.

Vzhled aplikace je popsán pomocí dokumentu v jazyce XML. O jazyku XML se můžete více dozvědět třeba na stránkách W3Schools.com (www.w3schools.com). Nám stačí vedět, že jednotlivé prvky se popisují pomocí elementů podobně jako v jazyce HTML.

Postup přidání textu na hlavní obrazovku:

1. Zvolte soubor activity_cistic.xml ve složce res/layout


2. Přepněte pomocí záložky pod obrázkem s mobilním zařízením na Text (místo Design).
   V kódu XML vidíme element <RelativeLayout>, který reprezentuje celý obsah okna aplikace, a dále element <TextView>, který reprezentuje textové hlášení.


3. Kód atributu <TextView android:text=“...“ …/> zkopírujeme ještě jednou (oba dva řádky až po značku „/>“). V uvozovkách za „android:text“ řepíšeme text Hello world! na @string/text_oznameni. Tím jsme vytvořili na obrazovce nový grafický prvek – popisek. Atribut android:text určuje text, který bude zobrazen.



<TextView android:text="Hello World!" android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
<TextView android:text="@string/text_oznameni" android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

4. Nakonec musíme v souboru res/values/strings.xml (najdete pomocí stromu projektu v levém okně) přidat text, který budeme zobrazovat:



<resources>
    <string name="app_name">Cisteni obrazovky</string>
    <string name="action_settings">Settings</string>
    <string name="text_oznameni">Nyní můžete v klidu vyčistit obrazovku. Žádný prvek tady nereaguje na dotyk.</string>
</resources>

5. Teď můžete spustit aplikaci v mobilu znovu. Ve výsledku by měla být dvě hlášení přes sebe. To brzy opravíme!


6. Všimněte si, že v souboru res/values/strings.xml je už připraven text s názvem app_name. Tento text udává název, který se zobrazí v titulku aplikace. Pokud chceme, můžeme zde například dopsat diakritiku tak, aby se název aplikace zobrazoval správně. (Název projektu diakritiku obsahovat nemůže.)

Uspořádání jednotlivých grafických komponent v okně navzájem je dáno volbou Layout-u v souboru s aktivitou (v našem případě res/layout/activity_cistic.xml). Standardně Android Studio používá <RelativeLayout>, který je vhodný pro rozmisťování komponent pomocí myši v grafickém režimu (můžete vyzkoušet přetáhnout text ručně – bude to fungovat, ale do kódu vám přibude několik nových řádek o umístění komponent).

Pokud přepíšeme element <RelativeLayout> na <LinearLayout>, jednotlivé prvky budou umístěny postupně za sebou. Musíme pak ještě přidat prvku <LinearLayout> atribut android:orientation s hodnotou vertical, čímž zařídíme, že se komponenty budou skládat pod sebe. Tím jsme vyřešili překrytí textů. Texty jsou teď umístěny pod sebou.

Dále můžeme nastavit rozměry obrysu textů. To vyřešíme pomocí atributu android:width a android:height u prvků TextView. Standardně mají atributy hodnotu wrap_content, která znamená, že bude textový popisek zabírat v okně právě tolik místa, kolik je třeba k vypsání textu. Pokud chceme, aby text zabíral vždy celý řádek, změníme hodnotu atributu android:width u obou prvků TextView na match_parent.

Výsledný kód by měl vypadat takto:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Cistic"
    android:orientation="vertical">
    <TextView android:text="Hello World!" android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView android:text="@string/text_oznameni" android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

1. Vzhled aktivit (oken aplikace) je popsán ve formátu XML v souborech v adresáři res/layout. Název souboru vždy odpovídá názvu aktivity.


2. Textový popisek (label) se vytváří XML elementem <TextView>. Tento element má atribut:

   android:text… text, který se zobrazí.


3. Velikost komponent (popisků, ale i dalších) nastavujeme pomocí atributů: android:width a android:height.
   K dispozici jsou volby wrap_content a match_parent.


4. Uspořádání prvků v okně je dáno elementem typu Layout. Použili jsme:
   RelativeLayout… je vhodný pro grafické umisťování prvků pomocí myši LinearLayout… prvky následují jeden za druhým. Mohou být pod sebou: android:orientation=vertical nebo vedle sebe: horizontal.


5. Texty nevkládáme do atributů přímo, ale odkazujeme do souboru res/values/strings.xml. To usnadňuje překlady aplikace do jiných jazyků.
   Kód odkazu může vypadat například takto:
   android:text=“@string/nazev_popisku“


6. Zobrazený název aplikace v titulku hlavního okna můžeme nastavit v textu app_name v souboru res/values/strings.xml.