Měli byc­hom mít vše potřebné nas­taveno, je tedy čas vytvořit náš první pro­jekt. Jak je ve světě pro­gramování zvykem, naz­veme první pro­jekt „Hello world!“. Zároveň si vyz­koušíme pro­poj­ení počítače s mobil­ním telefonem.

1. Spusťte vývojové prostředí An­droid Studio.


2. Na úvodní ob­razov­ce zvol­te Start a new An­droid Studio pro­ject.


3. Jako název ap­likace uveďte „Cis­teni ob­razov­ky“


4. Nyní musíte zadat doménu pro­jek­tu.
   Doména by měla jedno­značně určovat vás a vaši or­ganizaci. Pokud vlastníte doménu, využijte ji. Jedná-li se o školní pro­jekt, zvol­te například:
   vas_login.skol­ni_rok.pred­met.domena_skoly.cz
   Příklad pro Obchodní akademii Uherské Hradiště:
   novak_jan.r201516.pro4­.oauh.cz
   Pokud si děláte vlastní pro­jekt, zvol­te například doménu: test.local
   novak_jan.test.loc­al

5. Zkontroluj­te umístění složky s pro­jek­tem na disku.


6. Dále vyber­te, pro jaké zařízení chcete ap­likaci určit.
   Vybíráte minimální kon­figuraci. Takže když vyberete An­droid 4.0.3, znam­ená to, že na novějších verzích by ap­likace měla fun­govat, ale na starších fun­govat nebude!
   Ujistěte se, že jste si při volbě nainstalovaných kom­ponent v SDK Man­ageru zvolili odpovídající verzi SDK. Případně můžete spus­tit SDK a dodatečně balíčky doinstalovat:
   Tool → An­droid → SDK Man­ag­er


7. V dalším kroku můžete vyb­rat před­nastav­ený vzhled hlavního okna (ak­tiv­ity).
   Zatím vyber­te prázdné hlavní okno (Blank Ac­tiv­ity).

8. A nyní zbývá už jen zvolit název hlavní ak­tiv­ity (ob­razov­ky).
   Zapište název „Cis­tic“.

Pro začátek se nám vytvořila ap­likace s prázdnou ob­razov­kou (Ac­tiv­ity) a jediným tex­tem „Hello world!“. Pojďme vyz­koušet pro­poj­ení s mobilní telefonem!

1. Připoj­te mobilní telefon.
   Přih­laste se a zvol­te režim připoje­ní Nabíjení telefonu (Char­ge phone).


2. V An­droid Studiu zvol­te v nabídce nástrojů zelenou šipku (Run→ Run 'app', nebo kom­binace kláves Shift-F10).


3. An­droid Studio vám nabídne možnost spus­tit ap­likaci v emulátoru (v počítači na virtuálním zařízení) nebo v mobil­ním telefonu (Runn­ing De­vice).
   Pokud v okně Runn­ing De­vice nevidíte žádné zařízení, zkus­te znovu projít kroky z kapito­ly In­stalace a nas­tav­ení, nebo se ptej­te vyučujícího.

Pokud vše proběhlo v pořádku, vidíte na svém mobil­ním zařízení bílou ob­razov­ku s nápisem „Hello world!“. Při doteku ob­razov­ky mobil­ního zařízení by se měly ob­jevovat zápisy o události v dolní části okna An­droid Studia (log­cat).

Časté chyby:

• Pokud se objeví chyba In­suf­ficient disk space, zkontroluj­te, zda máte dos­tatek 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 nedos­tatek místa v úložišti mobil­ního telefonu).

Pojďme si nyní vyz­koušet přidání textu na ob­razov­ce mobilní ap­likace. Pro­vedeme tak první zásah do kódu pro­jek­tu.

V levé části okna An­droid Studia je zob­razena stromová struk­tura pro­jek­tu. Je zas­toupena 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 ap­likace (ak­tivit). Každou ak­tivitu popisuje jeden soubor ve formátu XML. Zatím máme ve složce layout jediný soubor jediný s názvem ac­tivity_­cistic.xml.

Vzhled ap­likace je popsán pomocí dokumen­tu 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 jedno­tlivé prvky se popisují pomocí ele­mentů podobně jako v jazyce HTML.

Pos­tup přidání textu na hlavní ob­razov­ku:

1. Zvol­te soubor ac­tivity_­cistic.xml ve složce re­s/layout


2. Přepněte pomocí záložky pod obrázkem s mobil­ním zařízením na Text (místo De­sign).
   V kódu XML vidíme ele­ment <RelativeLayout>, který re­prezen­tuje celý obsah okna ap­likace, a dále ele­ment <TextView>, který re­prezen­tuje tex­tové hlášení.


3. Kód at­ributu <TextView android:text=“...“ …/> zkopírujeme ještě jedno­u (oba dva řádky až po značku „/>“). V uvozov­kách za „an­droid:text“ řepíšeme text Hello world! na @string/text_oznameni. Tím jsme vytvořili na ob­razov­ce nový grafický prvek – popisek. At­ribut android:text určuje text, který bude zob­raz­en.



<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 re­s/values/strings.xml (naj­dete pomocí stromu pro­jek­tu v levém okně) přidat text, který budeme zob­razovat:



<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 spus­tit ap­likaci v mobilu znovu. Ve výs­ledku by měla být dvě hlášení přes sebe. To brzy opravíme!


6. Všimněte si, že v souboru re­s/values/strings.xml je už přip­rav­en text s názvem app_name. Tento text udává název, který se zob­razí v titul­ku ap­likace. Pokud chceme, můžeme zde například dop­sat di­ak­ritiku tak, aby se název ap­likace zob­razov­al správně. (Název pro­jek­tu di­ak­ritiku ob­sahovat nemůže.)

Uspořádání jedno­tlivých grafic­kých kom­ponent v okně navzájem je dáno vol­bou Layout-u v souboru s ak­tivitou (v našem případě re­s/layout­/activity_­cistic.xml). Stan­dardně An­droid Studio používá <RelativeLayout>, který je vhodný pro roz­misťování kom­ponent pomocí myši v grafic­kém režimu (můžete vyz­koušet přetáhnout text ručně – bude to fun­govat, ale do kódu vám přibude několik nových řádek o umístění kom­ponent).

Pokud přepíšeme ele­ment <RelativeLayout> na <LinearLayout>, jedno­tlivé prvky budou umístěny pos­tupně za sebou. Musíme pak ještě přidat prvku <LinearLayout> at­ribut android:orientation s hod­notou vertical, čímž zařídíme, že se kom­ponen­ty 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 nas­tavit rozměry ob­rysu textů. To vyřešíme pomocí at­ributu android:width a android:height u prvků TextView. Stan­dardně mají at­ributy hod­notu wrap_content, která znam­ená, že bude tex­tový 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 hod­notu at­ributu 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 ak­tivit (oken ap­likace) je popsán ve formátu XML v souborech v adresáři re­s/layout. Název souboru vždy odpovídá názvu ak­tiv­ity.


2. Tex­tový popisek (label) se vytváří XML elemen­tem <TextView>. Tento ele­ment má at­ribut:
   android:text… text, který se zob­razí.


3. Velikost kom­ponent (popisků, ale i dalších) nas­tavujeme pomocí at­ributů: android:width a android:height.
   K dis­pozici jsou volby wrap_content a match_parent.


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


5. Texty nevkládáme do at­ributů přímo, ale od­kazujeme do souboru re­s/values/strings.xml. To usnadňuje přek­lady ap­likace do jiných jazyků.
   Kód od­kazu může vypadat například takto:
   android:text=“@string/nazev_popisku“


6. Zob­raz­ený název ap­likace v titul­ku hlavního okna můžeme nas­tavit v textu app_name v souboru re­s/values/strings.xml.