Cvičenie 3 - Dizajn

Za splnenie všetkých úloh 3 body.

Podľa zadania by ste mali mať v aplikácii tieto obrazovky:

• Úvodnú obrazovku - tlačidlá na prihlásenie a registráciu
• Obrazovku s registráciou - username, email, heslo, zopakovanie hesla
• Obrazovku s prihlásením - username a heslo
• Obrazovku s obnovením zabudnutého hesla (1) - zadá email
• Obrazovku s obnovením zabudnutého hesla (2) - zadá kód z emailu, a nové heslo, ktoré aj zopakuje
• Obrazovku s vlastným profilom - meno, email, fotka, prepínač alebo tlačidlo na zapnutie/vypnutie zaznamenávania okruhu, zadanie času na zapnutie a vypnutie zaznamenávania okruhu, mapu
• Obrazovku profilu inej osoby - meno, fotka, mapa
• Obrazovku so zmenou hesla, ak používateľ vie aktuálne heslo (ak je prihlásený, zadá aktuálne heslo a nové heslo, ktoré aj zopakuje)
• Obrazovku s mapou - s mapou
• Obrazovku so skrolovateľným zoznamom (feedom) - zatiaľ prázdna

Ak nemáte niektorú z obrazoviek s potrebným obsahom, pridajte si ich. Rovnako je potrebné mať medzi obrazovkami správnu navigáciu.

		Startovacia obrazovka: Úvodná
		Úvodná  -> Registrácia 
		Úvodná -> Prihlásenie
		Prihlásenie -> Zabudnuté heslo (1)
		Zabudnuté heslo (1) -> Zabudnuté heslo (2)
		Zabudnuté heslo (2) -> Prihlásenie
		Prihlásenie -> obrazovka s mapou
		Registrácia -> Prihlásenie
		obrazovka s mapou -> obrazovka s feedom
		obrazovka s mapou -> obrazovka s profilom
		obrazovka s mapou -> obrazovka s profilom iného používateľa (po kliknutí na marker)
		obrazovka s profilom -> obrazovka s feedom
		obrazovka s profilom -> obrazovka s mapou
		obrazovka s profilom -> zmena hesla 
		obrazovka s feedom -> obrazovka s mapou
		obrazovka s feedom -> obrazovka s profilom
		obrazovka s feedom -> obrazovka s profilom iného používateľa (po kliknutí na položku) - zatiaľ dať na túto obrazovku len jedno tlačidlo
		zmena hesla -> obrazovka s profilom 
		

Ak chýba navigácia medzi niektorými obrazovkami, dajte mi vedieť na cvičení alebo emailom.

Androidová hierarchia štýlov je organizovaná tak, aby umožňovala konzistentnosť dizajnu a zároveň flexibilitu pre jednotlivé komponenty. Táto hierarchia má tri hlavné časti:

• Zobrazené atribúty (View Attributes): Sú to vlastnosti, ktoré môžete nastaviť priamo na jednotlivé komponenty (views) vo vašom XML layoute. Sú to najkonkrétnejšie nastavenia, ktoré majú najvyššiu prioritu.
• Štýly (Styles): Štýly sú zoskupenia zobrazených atribútov. Môžete si predstaviť štýl ako "predlohu" alebo "súbor" nastavení, ktoré sa môžu opakovane použiť na rôzne komponenty v layoute.
• Témy (Themes): Sú to kolekcie štýlov a zobrazených atribútov, ktoré sa aplikujú na celú aplikáciu alebo časti aplikácie. Témy nastavujú všeobecný vzhľad a pocit aplikácie.

Je dôležité si uvedomiť: Ak sa rovnaký atribút definuje vo View, v štýle a v téme, atribút z View má najvyššiu prioritu (tzn. prekryje ostatné), štýl má strednú prioritu a téma má najnižšiu prioritu. Inými slovami, Zobrazené atribúty prepíšu Štýly, a Štýly prepíšu Témy.

Každý komponent (view) vo vašom layoute môže mať atribúty. Tieto atribúty môžu byť špecifikované priamo v XML súbore layoutu.

Napríklad, ak chcete, aby váš TextView mal červený text veľkosti 18sp, môžete nastaviť tieto atribúty priamo:

<TextView
    android:text="Ahoj svet!"
    android:textColor="#FF0000"
    android:textSize="18sp" 
    ... />

Ak nastavíte štýl alebo tému s inými hodnotami pre tieto atribúty, tieto hodnoty z TextView budú mať prednosť.

Štýly umožňujú znovu použiť skupinu atribútov naprieč rôznymi komponentami. Znížite tak redundanciu a zjednodušíte úpravy dizajnu.

Vytvorte štýl v súbore res/values/styles.xml:

<style name="TextStyle">
    <item name="android:textColor">#FF0000</item>
    <item name="android:textSize">18sp</item>
</style>

Použite štýl v komponente:

<TextView
    android:text="Ahoj svet!"
    style="@style/TextStyle"
    ... />

Témy definujú celkový vzhľad vašej aplikácie. Aplikujú sa buď na celú aplikáciu alebo len na časti aplikácie.

Vytvorenie témy v res/values/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">#3F51B5</item>
    <item name="colorPrimaryDark">#303F9F</item>
    <item name="colorAccent">#FF4081</item>
</style>

Aplikácia témy pre aplikáciu v AndroidManifest.xml:

<application
    android:theme="@style/AppTheme"
    ... />

Predstavte si, že máte základný štýl textu, ktorý chcete použiť na viacerých miestach vo vašej aplikácii, ale s niekoľkými malými zmenami v niektorých prípadoch.

Vytvoríme základný štýl textu v res/values/styles.xml:

<style name="BaseTextStyle">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">#000000</item>
</style>

Ak chcete vytvoriť variáciu tohto štýlu s väčšou veľkosťou textu, môžete vytvoriť nový štýl, ktorý dedí z "BaseTextStyle" a prepíše požadovaný atribút:

<style name="LargeTextStyle" parent="BaseTextStyle">
    <item name="android:textSize">24sp</item>
</style>

Keď použijete štýl LargeTextStyle na TextView v XML layoute, tento TextView bude mať čiernu farbu textu (zdedenú z BaseTextStyle) a veľkosť 24sp (prepisuje základný štýl).

Nočný režim umožňuje zmeniť vzhľad aplikácie podľa denného času alebo nastavení zariadenia. Aby ste podporili nočný režim, môžete definovať špecifické štýly a témy pre tento režim.

Vytvorenie štýlu pre nočný režim v res/values-night/styles.xml:

<style name="TextStyleNight">
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:textSize">18sp</item>
</style>

Pri aktivovanom nočnom režime sa automaticky použije tento štýl, ak je nastavený na komponente.

dp (Density-independent Pixels): Je to jednotka, ktorá sa používa na určenie rozmieru komponentu nezávisle od hustoty obrazovky. Umožňuje konzistentný vzhľad naprieč rôznymi zariadeniami.

sp (Scale-independent Pixels): Je to jednotka používaná pre text. Podobne ako dp, ale berie do úvahy aj nastavenia veľkosti textu užívateľa.

Je dôležité používať tieto jednotky pre dosiahnutie konzistentného a prispôsobivého dizajnu naprieč rôznymi zariadeniami.

Material Design je dizajnový jazyk vyvinutý Google. Poskytuje sadu komponentov, štýlov a usmernení pre vývoj kvalitných Android aplikácií. Ak chcete začať používať Material Design, pridajte závislosť v `build.gradle`:

implementation 'com.google.android.material:material:1.4.0'

XML:

<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Stlač ma!"
    app:cornerRadius="8dp" />

Kotlin:

val button = findViewById<MaterialButton>(R.id.materialButton)
button.setOnClickListener { 
    // kód po stlačení tlačidla 
}

XML:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/description"
    app:srcCompat="@drawable/ic_add_white_24dp" />

Kotlin:

val fab = findViewById<FloatingActionButton>(R.id.fab)
fab.setOnClickListener { 
    // kód po stlačení FAB
}

XML:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Zadajte text">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

Kotlin:

val view = findViewById<View>(R.id.container)
Snackbar.make(view, "Toto je Snackbar", Snackbar.LENGTH_LONG)
    .setAction("Akcia") {
        // kód po stlačení akcie na Snackbar
    }.show()

Vaše predvolené reťazce by mali byť definované v res/values/strings.xml. Napríklad:

<resources>
    <string name="app_name">Moja Aplikácia</string>
    <string name="welcome_message">Vitajte v mojej aplikácii!</string>
</resources>

Ak chcete pridať preklady, vytvorte ďalšie priečinky zdrojových hodnôt pre každý jazyk, ktorý chcete podporovať. Napríklad pre francúzštinu vytvorte priečinok res/values-fr a pre Nemčinu res/values-de.

Pre francúzštinu, res/values-fr/strings.xml môže vyzerať nasledovne:

<resources>
    <string name="app_name">Mon Application</string>
    <string name="welcome_message">Bienvenue dans mon application!</string>
</resources>

Pri použití reťazcov v kóde alebo XML, odkazujte sa na nich normálne pomocou @string/app_name. Android automaticky vyberie správny preklad na základe nastavenia jazyka zariadenia.

Aby ste otestovali rôzne preklady, zmeňte jazyk vášho Android zariadenia alebo emulátora. Uistite sa, že vaša aplikácia správne zobrazuje preložené reťazce.

Ak máte zariadenie s viacerými jazykmi, Android by mal automaticky zvoliť najvhodnejší preklad z dostupných prekladov vo vašej aplikácii.

Ak pridáte alebo zmeníte reťazce v predvolenej verzii, uistite sa, že aktualizujete aj všetky preklady. Existujú nástroje a služby, ktoré vám môžu pomôcť synchronizovať a spravovať preklady pre Android aplikácie.