2022-2023/Lab/Lab4/4.5.2 - Kotlin - PUMApp.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "d4f237ad-99a0-452e-ab76-3aabbdf056fd",
   "metadata": {},
   "source": [
    "## 4.5 PUMApp"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "96d6ab4b-061f-45f7-ac12-b4372632bf52",
   "metadata": {},
   "source": [
    "W tej aplikacji wykorzystamy `RecyclerView`, `Drawer`, `Jetpack Navigation` oraz `Materials` do stworzenia prostej aplikacji będącej mocno uproszczoną wersją tego repozytorium."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "54915f2c-a3ef-4c79-a9f6-958bbacf0987",
   "metadata": {},
   "source": [
    "<table><tr><td><img src=\"https://media4.giphy.com/media/vxFCJk2ezJecGe0q51/giphy.gif?cid=790b7611375b0d8e309f01295b707e9b33cd918c6b2cec75&rid=giphy.gif&ct=g\" width=\"200\" /></td><td><img src=\"https://media0.giphy.com/media/rsqB9pEWGHKi5L6TbN/giphy.gif?cid=790b76115b96ca067a07916491cdb73faee0b317424c8e4a&rid=giphy.gif&ct=g\" width=\"200\" /></td></tr></table>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "794b9d2b-9e4f-483a-996b-d5168f64f49f",
   "metadata": {},
   "source": [
    "### **Fragmenty**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "10e44711-172f-42dc-b102-0dda45d57ddc",
   "metadata": {},
   "source": [
    "Rozpocznijmy od dodania fragmentów (**Blank Fragment**) z których będzie składała się nasza aplikacja.\n",
    "\n",
    "- `StartFragment` - fragment domowy\n",
    "- `ModuleListFragment` - fragment zawierający listę modułów\n",
    "- `ModuleFragment` - fragment zawierający zawartość modułu\n",
    "- `LectureFragment` - fragment zawierający informacje o wykładzie\n",
    "- `LabListFragment` - fragment zawierający listę wszystkich labów przeznaczonych do tego laboratorium\n",
    "- `AppListFragment` - fragment zawierający listę wszystkich aplikacji przeznaczonych do tego laboratorium\n",
    "- `AboutFragment` - fragment zawierający podstawowe informacje o aplikacji\n",
    "- `SettingsFragment` - fragment zawierający ustawienia aplikacji - w tej aplikacji dodamy możliwość przełączenia na ciemny motyw"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "332ca9aa-f56c-4c00-8120-739870cccf9c",
   "metadata": {},
   "source": [
    "### **Nawigacja**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f3908521-322f-4479-aa46-66803d29a700",
   "metadata": {},
   "source": [
    "Dodajmy do aplikacji nawigację. Do skryptów `Gradle(Project)` dodajemy"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b3db6eb0-7f2f-41b0-8bba-723746ea1260",
   "metadata": {},
   "outputs": [],
   "source": [
    "buildscript {\n",
    "    repositories {\n",
    "        google()\n",
    "    }\n",
    "    dependencies {\n",
    "        def nav_version = \"2.5.0\"\n",
    "        classpath \"androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version\"\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a3bb85cf-1de8-4a81-8b16-3a2fd07e6adb",
   "metadata": {},
   "source": [
    "Do `Gradle(Module)`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d68c79ea-4db4-4be9-9322-f99fe1e307aa",
   "metadata": {},
   "outputs": [],
   "source": [
    "plugins {\n",
    "    id 'com.android.application'\n",
    "    id 'org.jetbrains.kotlin.android'\n",
    "    id 'androidx.navigation.safeargs.kotlin'\n",
    "}\n",
    "\n",
    "dependencies {\n",
    "\n",
    "    def nav_version = \"2.5.0\"\n",
    "    implementation \"androidx.navigation:navigation-fragment:$nav_version\"\n",
    "    implementation \"androidx.navigation:navigation-ui:$nav_version\"\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bbfbfe82-4b91-4250-921a-70117017858d",
   "metadata": {},
   "source": [
    "Następnie synchronizujemy projekt i przechodzimy do utworzenia grafu."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "56a3f2d5-598f-4843-8b53-660fbf95ada8",
   "metadata": {},
   "source": [
    "<img src=\"https://files.fm/thumb_show.php?i=375bnxj9c\" width=\"400\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7ac0361d-96de-4d4c-a51c-f727236c0484",
   "metadata": {},
   "source": [
    "Zauważmy że `AboutFragment` oraz `SettingsFragment` nie posiadają żadnej zdefiniowanej akcji - nawigację do tych fragmentów dodamy za pomocą `Drawer`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "872df3f9-fe02-4e3f-b968-e7ae5031181b",
   "metadata": {},
   "source": [
    "Dodajmy `Menu` dla `Drawer`. Otwieramy menu kontekstowe na katalogu `res`, następnie **New -> Android Resource File**, jako **Resource Type** wybieram `Menu` - plik nazwijmy `drawer_menu`. Dodamy w nim dwa wpisy `<item>`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8c71446d-9abe-408f-956e-2f70e5665f71",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<menu xmlns:android=\"http://schemas.android.com/apk/res/android\">\n",
    "    <item\n",
    "        android:id=\"@+id/aboutFragment\"\n",
    "        android:title=\"About\" />\n",
    "\n",
    "    <item\n",
    "        android:id=\"@+id/settingsFragment\"\n",
    "        android:title=\"Settings\" />\n",
    "</menu>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "51e8c6b9-d86d-4bc8-a84e-3ed76324d9bc",
   "metadata": {},
   "source": [
    "Istotną rzeczą są `id` - muszą być takie same jak w `navigation.xml` pola `id` nadane odpowiednim fragmentom. Tutaj chcemy zapewnić możliwość nawigacji z menu bocznego do dwóch fragmentów, więc dodajemy dwa pola o odpowiednich `id`.\n",
    "\n",
    "Kolejnym krokiem będzie modyfikacja layoutu `MainActivity`. Naszym głównym elementem będzie `DrawerLayout` - ponieważ chcemy móc otworzyć panel boczny, tutaj będzie on powiązany z aktywnością główną aplikacji."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a2022ec4-93af-4d80-aad9-a94a2471f38f",
   "metadata": {},
   "outputs": [],
   "source": [
    "<androidx.drawerlayout.widget.DrawerLayout \n",
    "xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    android:id=\"@+id/drawerLayoutID\"\n",
    "    tools:context=\".MainActivity\">\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e7df484a-b575-41e6-9046-9bdc82d0aff4",
   "metadata": {},
   "source": [
    "Następnie potrzebujemy `FragmentContainer` - jak w poprzednich aplikacjach"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "19b89e24-7872-4142-b0f5-18935939833c",
   "metadata": {},
   "outputs": [],
   "source": [
    "    <LinearLayout\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:orientation=\"vertical\">\n",
    "\n",
    "        <androidx.fragment.app.FragmentContainerView\n",
    "            android:id=\"@+id/nav_host_fragment\"\n",
    "            android:name=\"androidx.navigation.fragment.NavHostFragment\"\n",
    "            android:layout_width=\"match_parent\"\n",
    "            android:layout_height=\"match_parent\"\n",
    "            app:defaultNavHost=\"true\"\n",
    "            app:navGraph=\"@navigation/navigation\" />\n",
    "    </LinearLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c613c80e-b951-40db-bf6f-00cf40ab67b3",
   "metadata": {},
   "source": [
    "Ostatnim elementem jest `NavigationView`, który pozwoli dodać wcześniej utworzony `drawer_menu` i wyświetlić panel boczny"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d79029ec-94fb-4dca-8dc9-6cc28f441396",
   "metadata": {},
   "outputs": [],
   "source": [
    "    <com.google.android.material.navigation.NavigationView\n",
    "        android:id=\"@+id/navigation_drawerID\"\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:layout_gravity=\"start\"\n",
    "        app:menu=\"@menu/drawer_menu\"/>\n",
    "\n",
    "</androidx.drawerlayout.widget.DrawerLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "dcc5670b-9314-477d-b79d-f1cd48dbeba4",
   "metadata": {},
   "source": [
    "Ostatnim krokiem w tworzeniu nawigacji w tym projekcie będzie spięcie wszystkiego w `MainActivity`. W pierwszym kroku musimy posiadać instancję `NavController`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "38074e7c-21d2-47ba-90cd-89e01691f93f",
   "metadata": {},
   "outputs": [],
   "source": [
    "private val navController: NavController by lazy {\n",
    "    val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment)\n",
    "            as NavHostFragment\n",
    "    navHostFragment.findNavController()\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "63e5e3e5-0843-409a-9a85-4077df09605f",
   "metadata": {},
   "source": [
    "Następnie definiujemy `AppBarConfiguration` w którym łączymy `NavController` z `DrawerLayout`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "77eeb9e5-7d9b-421e-bde4-79dfb0d9a8e7",
   "metadata": {},
   "outputs": [],
   "source": [
    "private val appBarConfiguration: AppBarConfiguration by lazy {\n",
    "    val drawerLayout : DrawerLayout = findViewById(R.id.drawerLayoutID)\n",
    "    AppBarConfiguration(navController.graph, drawerLayout)\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1af537ca-f7cc-4ed9-8cfb-b49873fc1228",
   "metadata": {},
   "source": [
    "W metodzie `onCreate` łączymy domyślny `ActionBar` z `NavController`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2869a260-6d6c-424f-a7ce-14d06935c552",
   "metadata": {},
   "outputs": [],
   "source": [
    "setupActionBarWithNavController(navController, appBarConfiguration)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "71106a87-a297-4c4a-a9ca-cd73c340f570",
   "metadata": {},
   "source": [
    "oraz `NavigationView` z `NavController`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cbef4196-67cf-4292-a7f7-fb34934e6e8c",
   "metadata": {},
   "outputs": [],
   "source": [
    "findViewById<NavigationView>(R.id.navigation_drawerID).setupWithNavController(navController)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "000191ed-491e-441e-88b9-2577c7ba45d1",
   "metadata": {},
   "source": [
    "Dodamy implementacje dwóch metod. Pierwszą jest `onSupportNavigateUp` - pozwala ona na zmianę ikony szuflady na ikonę powrotu po opuszczeniu głównego ekranu aplikacji - szufladę zawsze można otworzyć przez przeciągnięcie."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9975e442-116b-41ce-8265-9d384b080423",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onSupportNavigateUp(): Boolean {\n",
    "    return navController.navigateUp(appBarConfiguration)\n",
    "            || super.onSupportNavigateUp()\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ebd5165d-d02e-4e66-b72e-03c561e0ce90",
   "metadata": {},
   "source": [
    "Następną metodą jest `onOptionsItemSelected` - pozwala ona na nawigację bez definiowania akcji pod warunkiem zgodności `id` w plikach `drawer_menu` oraz `navigation`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2c9729eb-c3cf-4ebd-8b67-cb8acc1690d5",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onSupportNavigateUp(): Boolean {\n",
    "    return navController.navigateUp(appBarConfiguration)\n",
    "            || super.onSupportNavigateUp()\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bf6f2c58-1c29-4306-80d5-5491125071d9",
   "metadata": {},
   "source": [
    "Możemy przetestować działanie `Drawer`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0a91b814-59a8-4fe9-a71a-44b1cff8d870",
   "metadata": {},
   "source": [
    "<img src=\"https://media1.giphy.com/media/v98tLyiUpSyfTG9VmD/giphy.gif?cid=790b76110cf80882ea0dfcb8fdb4c8c397f8a3d45e0401df&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cc34a25a-a5c2-4eed-96c8-b7e4e11f9932",
   "metadata": {},
   "source": [
    "### **Zmiana motywu**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "100db752-1e71-4311-a75d-a5fb5f96bfd6",
   "metadata": {},
   "source": [
    "Dodajmy opcję zmiany motywu w naszej aplikacji - wykorzystamy w tym celu `RadioButton` oraz `RadioGroup`. Dodamy możliwość wyboru trzech motywów - jasny, ciemny, domyślny zintegrowany z Android. Możemy zauważyć że dwa motywy mamy już domyślnie zdefiniowane w plikach `themes.xml`. Rozpocznijmy od layoutu `fragment_settings`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "61f07493-7c9e-410f-a5cc-886e6ae6cdde",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<FrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    tools:context=\".fragments.SettingsFragment\">\n",
    "\n",
    "    <RelativeLayout\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"match_parent\">\n",
    "\n",
    "        <TextView\n",
    "            android:id=\"@+id/textViewSettings\"\n",
    "            android:layout_width=\"match_parent\"\n",
    "            android:layout_height=\"wrap_content\"\n",
    "            android:layout_marginTop=\"30dp\"\n",
    "            android:gravity=\"center_horizontal\"\n",
    "            android:text=\"@string/default_value\"\n",
    "            android:textAlignment=\"center\"\n",
    "            android:textSize=\"36sp\" />\n",
    "\n",
    "        <TextView\n",
    "            android:id=\"@+id/textViewThemeSetting\"\n",
    "            android:layout_width=\"match_parent\"\n",
    "            android:layout_height=\"wrap_content\"\n",
    "            android:layout_below=\"@id/textViewSettings\"\n",
    "            android:layout_marginTop=\"30dp\"\n",
    "            android:gravity=\"center_horizontal\"\n",
    "            android:text=\"@string/theme_settings\"\n",
    "            android:textAlignment=\"center\"\n",
    "            android:textSize=\"28sp\" />\n",
    "\n",
    "        <TextView\n",
    "            android:id=\"@+id/textViewCurrentTheme\"\n",
    "            android:layout_width=\"match_parent\"\n",
    "            android:layout_height=\"wrap_content\"\n",
    "            android:layout_below=\"@id/textViewThemeSetting\"\n",
    "            android:layout_marginTop=\"6dp\"\n",
    "            android:gravity=\"center_horizontal\"\n",
    "            android:text=\"@string/current_theme\"\n",
    "            android:textAlignment=\"center\"\n",
    "            android:textSize=\"20sp\" />\n",
    "\n",
    "        <RadioGroup\n",
    "            android:id=\"@+id/radioButtonTheme\"\n",
    "            android:layout_width=\"match_parent\"\n",
    "            android:layout_height=\"wrap_content\"\n",
    "            android:layout_below=\"@id/textViewCurrentTheme\"\n",
    "            android:layout_marginTop=\"30dp\"\n",
    "            android:orientation=\"vertical\"\n",
    "            android:layout_marginStart=\"100dp\"\n",
    "            android:layout_centerHorizontal=\"true\"\n",
    "            android:padding=\"4dp\">\n",
    "\n",
    "            <RadioButton\n",
    "                android:id=\"@+id/radioButtonLight\"\n",
    "                android:layout_width=\"wrap_content\"\n",
    "                android:layout_height=\"wrap_content\"\n",
    "                android:layout_margin=\"5dp\"\n",
    "                android:padding=\"5dp\"\n",
    "                android:text=\"@string/light\"\n",
    "                android:textSize=\"24sp\"/>\n",
    "\n",
    "            <RadioButton\n",
    "                android:id=\"@+id/radioButtonDark\"\n",
    "                android:layout_width=\"wrap_content\"\n",
    "                android:layout_height=\"wrap_content\"\n",
    "                android:layout_margin=\"5dp\"\n",
    "                android:layout_weight=\"1\"\n",
    "                android:padding=\"5dp\"\n",
    "                android:text=\"@string/dark\"\n",
    "                android:textSize=\"24sp\"/>\n",
    "\n",
    "            <RadioButton\n",
    "                android:id=\"@+id/radioButtonDefault\"\n",
    "                android:layout_width=\"wrap_content\"\n",
    "                android:layout_height=\"wrap_content\"\n",
    "                android:layout_margin=\"5dp\"\n",
    "                android:layout_weight=\"1\"\n",
    "                android:padding=\"5dp\"\n",
    "                android:text=\"@string/system_default\"\n",
    "                android:textSize=\"20sp\"/>\n",
    "\n",
    "        </RadioGroup>\n",
    "    </RelativeLayout>\n",
    "\n",
    "</FrameLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "871bfc8a-1f6a-4fa7-b37d-1ac77c1a1ac3",
   "metadata": {},
   "source": [
    "dodajmy odpowiednie elementy do `strings`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "daa24b80-9f24-4082-9ba1-e81b94abb726",
   "metadata": {},
   "outputs": [],
   "source": [
    "<resources>\n",
    "    <string name=\"app_name\">PUMApp</string>\n",
    "    <!-- TODO: Remove or change this placeholder text -->\n",
    "    <string name=\"hello_blank_fragment\">Hello blank fragment</string>\n",
    "    <string name=\"settings\">Settings</string>\n",
    "    <string name=\"default_value\">Settings</string>\n",
    "    <string name=\"light\">Light</string>\n",
    "    <string name=\"dark\">Dark</string>\n",
    "    <string name=\"light_theme\">Light Theme</string>\n",
    "    <string name=\"dark_theme\">Dark Theme</string>\n",
    "    <string name=\"system_default\">Android Compatible Theme</string>\n",
    "    <string name=\"selected_language\">English</string>\n",
    "    <string name=\"theme_settings\">Theme Settings</string>\n",
    "    <string name=\"current_theme\">Default</string>\n",
    "</resources>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fc64a235-180a-4f36-81a4-45a05310bd6d",
   "metadata": {},
   "source": [
    "Przejdźmy do `SettingsFragment` i zmieńmy tytuł na `ActionBar`. W metodzie `onCreateView` muisimy się dostać do `ActionBar`, w tym celu potrzebujemy instancję `AppCompatActivity` na której możemy wywołać metodę `getSupportActionBar`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fa9a4155-c562-41a5-b328-e38a84cb79e2",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onCreateView(\n",
    "    inflater: LayoutInflater, container: ViewGroup?,\n",
    "    savedInstanceState: Bundle?\n",
    "): View? {\n",
    "    val activity: AppCompatActivity = activity as AppCompatActivity\n",
    "    activity.supportActionBar?.title = getString(R.string.settings)\n",
    "    return inflater.inflate(R.layout.fragment_settings, container, false)\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6757eb77-77ba-4735-8aec-220f4b5d724c",
   "metadata": {},
   "source": [
    "Zmianę motywu wykonujemy przez wywołanie metody `AppCompatDelegate.setDefaultNightMode` z odpowiednimi opcjami."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f67e8a05-e1c2-491f-a28b-3a2dc5ecdb9f",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n",
    "    super.onViewCreated(view, savedInstanceState)\n",
    "\n",
    "    val themeTextView: TextView = view.findViewById(R.id.textViewCurrentTheme)\n",
    "    view.findViewById<RadioGroup>(R.id.radioButtonTheme)\n",
    "        .setOnCheckedChangeListener { _, checkedId ->\n",
    "        when(checkedId){\n",
    "            R.id.radioButtonLight -> {\n",
    "                themeTextView.text = getString(R.string.light_theme)\n",
    "                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)\n",
    "            }\n",
    "            R.id.radioButtonDark -> {\n",
    "                themeTextView.text = getString(R.string.dark_theme)\n",
    "                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)\n",
    "            }\n",
    "            R.id.radioButtonDefault -> {\n",
    "                themeTextView.text = getString(R.string.current_theme)\n",
    "                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)\n",
    "            }\n",
    "        }\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9ca76909-0033-4da7-8763-88c151437acd",
   "metadata": {},
   "source": [
    "<img src=\"https://media3.giphy.com/media/xY5ZRDy5mPHiMIzGwH/giphy.gif?cid=790b7611e9194faebe71b6ed8cb1782db66bd3838afe9a77&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "784751af-dbac-492d-ad34-e8db90c2a794",
   "metadata": {},
   "source": [
    "Zmodyfikujmy nieco wygląd szuflady. Po pierwsze dodamy nagłówek. Do katalogu `layout` dodajemy plik `drawer_header`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "05c74ff8-df70-4df5-9a8a-ba0cf3cc923c",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"200dp\"\n",
    "    android:orientation=\"horizontal\"\n",
    "    android:background=\"?colorSecondary\"\n",
    "    android:gravity=\"center\">\n",
    "\n",
    "    <ImageView\n",
    "        android:id=\"@+id/android_drawer_imageView\"\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:src=\"@drawable/ic_android\"\n",
    "        android:contentDescription=\"@string/android\" />\n",
    "\n",
    "    <TextView\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:text=\"@string/pum\"\n",
    "        android:textSize=\"72sp\"\n",
    "        android:gravity=\"center\"\n",
    "        android:layout_toEndOf=\"@id/android_drawer_imageView\"\n",
    "        android:textColor=\"?colorOnSecondary\"/>\n",
    "\n",
    "\n",
    "\n",
    "</RelativeLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "be871a63-c8c6-473a-af05-ddde756af01a",
   "metadata": {},
   "source": [
    "Do kolorów zdefiniowanych w `themes.xml` odnosimy się poprzez `?nazwa_atrybutu`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d024d3c7-3f7f-40a1-be96-bc9dacf74ffa",
   "metadata": {},
   "outputs": [],
   "source": [
    "android:background=\"?colorSecondary\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e9e2a46d-f6df-4f39-8473-0ad024ffa4eb",
   "metadata": {},
   "source": [
    "Grafikę definiujemy w katalogu `drawable` - otwieramy menu kontekstowe i wybieramy **New -> Vector Asset**, po kliknięciu na **ClipArt** możemy wybrać odpowiedni wygląd, lub zdefiniować własny"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bd045b50-9db1-4075-9938-6ae01a1ad646",
   "metadata": {},
   "outputs": [],
   "source": [
    "<vector android:height=\"76dp\" android:tint=\"#000000\"\n",
    "    android:viewportHeight=\"24\" android:viewportWidth=\"24\"\n",
    "    android:width=\"76dp\" xmlns:android=\"http://schemas.android.com/apk/res/android\">\n",
    "    <path android:fillColor=\"@android:color/white\" android:pathData=\"M16,1L8,1C6.34,1 5,2.34 5,4v16c0,1.66 1.34,3 3,3h8c1.66,0 3,-1.34 3,-3L19,4c0,-1.66 -1.34,-3 -3,-3zM14,21h-4v-1h4v1zM17.25,18L6.75,18L6.75,4h10.5v14z\"/>\n",
    "</vector>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "126446b6-fc9b-4d8b-bd59-eb8b3d39750c",
   "metadata": {},
   "source": [
    "Dodajmy również separator z nazwą oraz grafiki do `drawer_menu`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "54040b80-cfc1-49ba-9935-b51948acfe67",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<menu xmlns:android=\"http://schemas.android.com/apk/res/android\">\n",
    "    <item android:title=\"@string/settings\">\n",
    "        <menu>\n",
    "            <item\n",
    "                android:id=\"@+id/aboutFragment\"\n",
    "                android:icon=\"@drawable/ic_about\"\n",
    "                android:title=\"@string/about\" />\n",
    "\n",
    "            <item\n",
    "                android:id=\"@+id/settingsFragment\"\n",
    "                android:icon=\"@drawable/ic_settings\"\n",
    "                android:title=\"@string/settings\" />\n",
    "\n",
    "        </menu>\n",
    "    </item>\n",
    "</menu>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "739d5bfc-1f7b-4f6f-888b-9e90bce3ec96",
   "metadata": {},
   "source": [
    "Aby wykorzystać utworzony nagłówek musimy dodać go do `NavigationView` w pliku `activity_main`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "20da7189-6ca8-4014-97d4-e15b448556c5",
   "metadata": {},
   "outputs": [],
   "source": [
    "app:headerLayout=\"@layout/drawer_header\"\n",
    "\n",
    "    <com.google.android.material.navigation.NavigationView\n",
    "        android:id=\"@+id/navigation_drawerID\"\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:layout_gravity=\"start\"\n",
    "        app:headerLayout=\"@layout/drawer_header\"\n",
    "        app:menu=\"@menu/drawer_menu\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "855ac352-3fbf-4219-8f4a-b19ccdda857a",
   "metadata": {},
   "source": [
    "<img src=\"https://media4.giphy.com/media/GUtkxcigj4yDoiozTP/giphy.gif?cid=790b7611d67892dbf4b580d998ea69d1e48b7abe07bfcc04&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bed72a26-601d-41ad-ab7d-92e41611a35a",
   "metadata": {},
   "source": [
    "Dodajmy następnie przycisk do `StartFragment` w taki sam sposób jak w `QuickYogaApp`\n",
    "\n",
    "`start_button.xml` do katalogu `drawable`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f55827b5-da91-4f31-8182-d5789f7dd25c",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<shape xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    android:shape=\"rectangle\">\n",
    "    <stroke android:width=\"7dp\"\n",
    "        android:color=\"?colorSecondary\"/>\n",
    "    <solid android:color=\"?colorSecondaryVariant\"/>\n",
    "    <corners android:radius=\"170dp\"/>\n",
    "\n",
    "</shape>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5d906ccf-8ff9-4d49-af7b-27a59652eb61",
   "metadata": {},
   "source": [
    "`start_button_ripple.xml` do katalogu `drawable`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0660d629-7aff-4193-a80d-407e13a41748",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<ripple xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    android:color=\"?colorSecondary\">\n",
    "    <item android:id=\"@+id/ripple_effect\">\n",
    "        <shape android:shape=\"rectangle\"/>\n",
    "    </item>\n",
    "    <item android:drawable=\"@drawable/start_button\"/>\n",
    "\n",
    "</ripple>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bfd76c63-2c31-41da-86e4-349324a3ce62",
   "metadata": {},
   "source": [
    "zmodyfikujmy layout `StartFragment`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "854960bf-3292-4dca-b576-cd17f9ec2734",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<FrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    tools:context=\".fragments.StartFragment\">\n",
    "\n",
    "    <TextView\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:text=\"@string/pum\"\n",
    "        android:textSize=\"124sp\"\n",
    "        android:layout_gravity=\"center_horizontal\"\n",
    "        android:layout_marginTop=\"36dp\"\n",
    "        android:textStyle=\"bold\"/>\n",
    "\n",
    "    <LinearLayout\n",
    "        android:id=\"@+id/start_button_layout\"\n",
    "        android:layout_width=\"300dp\"\n",
    "        android:layout_height=\"150dp\"\n",
    "        android:layout_gravity=\"center\"\n",
    "        android:background=\"@drawable/start_button_ripple\"\n",
    "        android:gravity=\"center\">\n",
    "\n",
    "        <TextView\n",
    "            android:layout_width=\"wrap_content\"\n",
    "            android:layout_height=\"wrap_content\"\n",
    "            android:text=\"@string/start\"\n",
    "            android:textColor=\"?colorOnSecondary\"\n",
    "            android:textStyle=\"bold\"\n",
    "            android:textSize=\"45sp\"/>\n",
    "\n",
    "    </LinearLayout>\n",
    "\n",
    "</FrameLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4236486f-4397-40f6-b52a-22d9b09ace48",
   "metadata": {},
   "source": [
    "I na koniec zmieńmy tytuł pojawiający się na `ActionBar` oraz dodajmy `onClick`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7f622e80-b467-42cb-87fd-7815dc8e8961",
   "metadata": {},
   "outputs": [],
   "source": [
    "class StartFragment : Fragment() {\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        val activity: AppCompatActivity = activity as AppCompatActivity\n",
    "        activity.supportActionBar?.title = getString(R.string.app_name)\n",
    "        return inflater.inflate(R.layout.fragment_start, container, false)\n",
    "    }\n",
    "\n",
    "    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n",
    "        super.onViewCreated(view, savedInstanceState)\n",
    "        view.findViewById<LinearLayout>(R.id.start_button_layout).setOnClickListener {\n",
    "            findNavController()\n",
    "                .navigate(StartFragmentDirections.actionStartFragmentToModuleListFragment())\n",
    "        }\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "183b8adb-4d2c-40ba-b021-55f894ac7ff5",
   "metadata": {},
   "source": [
    "<img src=\"https://media4.giphy.com/media/vxFCJk2ezJecGe0q51/giphy.gif?cid=790b7611375b0d8e309f01295b707e9b33cd918c6b2cec75&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "73c38c42-7ff1-4be2-a58e-851042d393c7",
   "metadata": {},
   "source": [
    "### **Dane**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "282b1750-ca9c-4a9d-ad30-473e9788bb9a",
   "metadata": {},
   "source": [
    "Zacznijmy się teraz przygotowaniem danych do naszej aplikacji. Na tym etapie nie będziemy jeszcze wykorzystywać żadnej bazy danych ani backendu, więc wszystko wrzucimy hardcoded."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0f53c971-db09-43c9-ac35-f012c8b93b3c",
   "metadata": {},
   "outputs": [],
   "source": [
    "data class App(\n",
    "    val id: Int,\n",
    "    val apps: List<String>\n",
    ")\n",
    "\n",
    "data class Lab(\n",
    "    val id: Int,\n",
    "    val name: String,\n",
    "    val content: List<String>\n",
    ")\n",
    "\n",
    "data class Lecture (\n",
    "    val id: Int,\n",
    "    val name: String,\n",
    "    val content: List<String>\n",
    ")\n",
    "\n",
    "data class Module(\n",
    "    val id: Int,\n",
    "    val name: String,\n",
    "    val lecture: Lecture,\n",
    "    val lab: Lab,\n",
    "    val apps: App\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8098a3cb-81bf-4dec-a777-e52526381c66",
   "metadata": {},
   "outputs": [],
   "source": [
    "object DataProvider {\n",
    "    private val lectures = listOf(\n",
    "        Lecture(0, \"Podstawowe Informacje\", \n",
    "                listOf(\"podstawowe informacje\", \"treści programowe\", \"warunki zaliczenia\")),\n",
    "        Lecture(1, \"Cykl życia aktywności\", \n",
    "                listOf(\n",
    "                    \"Struktura projektu\", \n",
    "                    \"Activity\", \n",
    "                    \"Cykl życia aktywności\", \n",
    "                    \"Stan instancji\", \n",
    "                    \"Bundle\", \n",
    "                    \"Intent\")),\n",
    "        Lecture(2, \"RecyclerView\", \n",
    "                listOf(\"RecyclerView\", \"Adapter\", \"ViewHolder\", \"Selector\")),\n",
    "        Lecture(3, \"Fragmenty\", \n",
    "                listOf(\"Jetpack Navigation\", \"Navigation Drawer\", \"Fragment\"))\n",
    "    )\n",
    "\n",
    "    private val labs = listOf(\n",
    "        Lab(0, \"Przygotowanie layoutu\", \n",
    "            listOf(\"LinearLayout\", \"ConstraintLayout\", \"Obsługa onClick\")),\n",
    "        Lab(1, \"Mechanizm intentów\", \n",
    "            listOf(\n",
    "                \"Mechanizm intentów - jawne\", \n",
    "                \"Intefejsy Serializable, Parcelable\", \n",
    "                \"Mechanizm intentów - domniemane\")),\n",
    "        Lab(2, \"RecyclerView\", \n",
    "            listOf(\"RecyclerView\", \"Selector\")),\n",
    "        Lab(3, \"Nawigacja\", \n",
    "            listOf(\n",
    "                \"Fragmenty statyczne\", \n",
    "                \"Fragmenty dynamiczne\", \n",
    "                \"Navigation Drawer\", \n",
    "                \"RecyclerView\"))\n",
    "    )\n",
    "\n",
    "    private val apps = listOf(\n",
    "        App(0, listOf(\"CounterApp\")),\n",
    "        App(1, listOf(\"QuizApp\")),\n",
    "        App(2, listOf(\"WFiApp\", \"QuickYoga\")),\n",
    "        App(3, listOf(\"PUMApp\"))\n",
    "    )\n",
    "\n",
    "    val modules: List<Module>\n",
    "        get() = (0 until 4).map { Module(\n",
    "            it,\n",
    "            \"Moduł $it\",\n",
    "            lectures[it],\n",
    "            labs[it],\n",
    "            apps[it]\n",
    "        ) }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "dccb13e2-fd78-42f5-9dc7-eb59f9ce111e",
   "metadata": {},
   "source": [
    "### **ModuleListFragment**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "54a2d125-97c6-4990-ada1-5e4f5adab9db",
   "metadata": {},
   "source": [
    "Listę wszystkich modułów będziemy wyświetlać przez `RecyclerView`. Rozpocznijmy od przygotowania layoutu pojedynczego elementu - wyświetlimy nazwę modułu oraz tytuł wykładu"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "31e41d09-10f8-49a2-b638-f8cfc5f5d8d9",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<androidx.cardview.widget.CardView xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"72dp\"\n",
    "    android:layout_margin=\"24dp\"\n",
    "    app:cardBackgroundColor=\"#0b5294\"\n",
    "    app:cardCornerRadius=\"30dp\"\n",
    "    app:cardElevation=\"15dp\">\n",
    "\n",
    "    <LinearLayout\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:orientation=\"vertical\">\n",
    "\n",
    "        <TextView\n",
    "            android:id=\"@+id/moduleNameModuleRVItemTextView\"\n",
    "            android:layout_width=\"wrap_content\"\n",
    "            android:layout_height=\"wrap_content\"\n",
    "            android:layout_gravity=\"center_horizontal\"\n",
    "            android:text=\"@string/module\"\n",
    "            android:textColor=\"@color/white\"\n",
    "            android:textSize=\"26sp\" />\n",
    "\n",
    "        <TextView\n",
    "            android:id=\"@+id/lectureNameModuleRVItemTextView\"\n",
    "            android:layout_width=\"wrap_content\"\n",
    "            android:layout_height=\"wrap_content\"\n",
    "            android:layout_marginStart=\"16dp\"\n",
    "            android:text=\"@string/lecture_long_name\"\n",
    "            android:textColor=\"@color/white\"\n",
    "            android:textSize=\"18sp\" />\n",
    "\n",
    "\n",
    "    </LinearLayout>\n",
    "</androidx.cardview.widget.CardView>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a2bf770f-6f9b-4175-b864-ade0715e94b1",
   "metadata": {},
   "source": [
    "ponieważ wykorzystujemy `CardView` dodajmy odpowiednią zależność do `build.Gradle(Module)`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "845bd450-3e20-4821-9249-05c3ef94c670",
   "metadata": {},
   "outputs": [],
   "source": [
    "implementation(\"androidx.cardview:cardview:1.0.0\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "95ae1055-5d3d-46f8-bf3e-2eae6c8f85ce",
   "metadata": {},
   "source": [
    "Następnie dodajmy `RecyclerView` do layoutu `ModuleListFragment`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5515644a-3af3-4450-9f1c-11b83aea8fa3",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<FrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    tools:context=\".fragments.ModuleListFragment\">\n",
    "\n",
    "    <androidx.recyclerview.widget.RecyclerView\n",
    "        android:id=\"@+id/moduleRecyclerView\"\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:clipToPadding=\"false\"\n",
    "        android:padding=\"16dp\" />\n",
    "\n",
    "</FrameLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4b03c542-c557-4297-ba2c-6f6dcb7634a0",
   "metadata": {},
   "source": [
    "Następnie napiszmy `Adapter`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "473bd644-92e6-44d2-8ea1-a30afa536fdf",
   "metadata": {},
   "outputs": [],
   "source": [
    "class ModuleListAdapter : RecyclerView.Adapter<ModuleListAdapter.ViewHolder>() {\n",
    "\n",
    "    private val moduleList = DataProvider.modules\n",
    "\n",
    "    inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {\n",
    "        private val moduleTitleTextView: TextView = \n",
    "        view.findViewById(R.id.moduleNameModuleRVItemTextView)\n",
    "        private val lectureTitleTextView: TextView = \n",
    "        view.findViewById(R.id.lectureNameModuleRVItemTextView)\n",
    "\n",
    "        fun bind(item: Module){\n",
    "            moduleTitleTextView.text = item.name\n",
    "            lectureTitleTextView.text = item.lecture.name\n",
    "        }\n",
    "    }\n",
    "\n",
    "    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {\n",
    "        return ViewHolder(LayoutInflater\n",
    "            .from(parent.context)\n",
    "            .inflate(R.layout.module_list_item_view, parent, false))\n",
    "    }\n",
    "\n",
    "    override fun onBindViewHolder(holder: ViewHolder, position: Int) {\n",
    "        val item = moduleList[position]\n",
    "        holder.bind(item)\n",
    "    }\n",
    "\n",
    "    override fun getItemCount(): Int = moduleList.size\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "090ea907-712a-49a5-a49f-b75a8024973a",
   "metadata": {},
   "source": [
    "Ostatnim elementem będzie modyfikacja klasy `ModuleListFragment`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "055de5ca-db87-4f25-a1b7-937070abb7dd",
   "metadata": {},
   "outputs": [],
   "source": [
    "class ModuleListFragment : Fragment() {\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        val activity: AppCompatActivity = activity as AppCompatActivity\n",
    "        activity.supportActionBar?.title = getString(R.string.module_list)\n",
    "        return inflater.inflate(R.layout.fragment_module_list, container, false)\n",
    "    }\n",
    "\n",
    "    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n",
    "        super.onViewCreated(view, savedInstanceState)\n",
    "        val recyclerView = view.findViewById<RecyclerView>(R.id.moduleRecyclerView)\n",
    "        recyclerView.apply {\n",
    "            layoutManager = LinearLayoutManager(requireContext())\n",
    "            adapter = ModuleListAdapter()\n",
    "        }\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a97f5f01-66a0-483a-8f90-654918183245",
   "metadata": {},
   "source": [
    "### **ModuleFragment**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c993ea65-5fcd-481b-804b-252fe6ecac4d",
   "metadata": {},
   "source": [
    "Dodajmy `onClick` do `ModuleListAdapter` oraz `<argument>` do nawigacji umożliwiający przesłanie `id` klikniętego modułu. Rozpocznijmy od argumentu - przechodzimy do pliku `navigation.xml` i do `moduleListFragment` dodajemy argument typu `int`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e500d833-b324-486b-a64c-9abd440ec9ca",
   "metadata": {},
   "outputs": [],
   "source": [
    "<fragment\n",
    "    android:id=\"@+id/moduleListFragment\"\n",
    "    android:name=\"pl.edu.uwr.pum.pumappjava.fragments.ModuleListFragment\"\n",
    "    android:label=\"fragment_module_list\"\n",
    "    tools:layout=\"@layout/fragment_module_list\" >\n",
    "    <action\n",
    "        android:id=\"@+id/action_moduleListFragment_to_moduleFragment\"\n",
    "        app:destination=\"@id/moduleFragment\" >\n",
    "        <argument\n",
    "            android:name=\"moduleId\"\n",
    "            app:argType=\"integer\" />\n",
    "    </action>\n",
    "</fragment>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7a54e19b-f13d-4f54-91a8-f6738bc7558d",
   "metadata": {},
   "source": [
    "Następnie zdefiniujmy metodę `onClick` w `ModuleListAdapter`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8fa64833-e4b4-49ee-9c57-7539bc2802d2",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onBindViewHolder(holder: ViewHolder, position: Int) {\n",
    "    val item = moduleList[position]\n",
    "    holder.bind(item)\n",
    "    holder.itemView.setOnClickListener {\n",
    "        holder.itemView.findNavController().navigate(\n",
    "            ModuleListFragmentDirections.actionModuleListFragmentToModuleFragment(\n",
    "                moduleId = item.id\n",
    "            )\n",
    "        )\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fa6cee4a-70b7-4ce5-b974-eff79cf633cb",
   "metadata": {},
   "source": [
    "Przejdźmy do `ModuleFragment` - potrzebujemy dostać `Module` o otrzymanym `id`. Zdefiniujmy pole `module`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9c11ff6b-0156-421f-b49c-ef500e5cee9e",
   "metadata": {},
   "outputs": [],
   "source": [
    "private val module by lazy {\n",
    "    val moduleId = arguments?.getInt(\"moduleId\")?:\n",
    "        throw IllegalArgumentException(\"moduleId doesn't exist\")\n",
    "    DataProvider.modules[moduleId]\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7cd9fd72-105f-4af2-85fd-341ef69f8608",
   "metadata": {},
   "source": [
    "Zmodyfikujmy layout `ModuleFragment` - będziemy potrzebować trzy przyciski, przez które będziemy przenosić się do elementów modułu (wykład, lab, aplikacje)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c9021132-acf3-4ab2-a004-a83f0f88f984",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    android:orientation=\"vertical\"\n",
    "    tools:context=\".fragments.ModuleFragment\">\n",
    "\n",
    "    <Button\n",
    "        android:id=\"@+id/lectureButton\"\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:layout_margin=\"16dp\" />\n",
    "\n",
    "    <LinearLayout\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:baselineAligned=\"false\"\n",
    "        android:orientation=\"horizontal\">\n",
    "\n",
    "\n",
    "        <Button\n",
    "            android:id=\"@+id/labButton\"\n",
    "            android:layout_width=\"0dp\"\n",
    "            android:layout_weight=\"1\"\n",
    "            android:layout_margin=\"16dp\"\n",
    "            style=\"@style/Theme.PUMAppJava\"\n",
    "            android:textAlignment=\"center\"\n",
    "            android:layout_height=\"72dp\"\n",
    "            android:layout_marginStart=\"16dp\" />\n",
    "\n",
    "        <Button\n",
    "            android:id=\"@+id/appButton\"\n",
    "            android:layout_width=\"0dp\"\n",
    "            android:layout_weight=\"1\"\n",
    "            style=\"@style/Theme.PUMAppJava\"\n",
    "            android:textAlignment=\"center\"\n",
    "            android:layout_margin=\"16dp\"\n",
    "            android:layout_height=\"72dp\" />\n",
    "\n",
    "    </LinearLayout>\n",
    "\n",
    "</LinearLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2e287490-6d6e-4f0f-ab11-40148fc25d2c",
   "metadata": {},
   "source": [
    "Tekst przycisków będzie odpowiadał tytułowi elementu. Wpierw zmodyfikujmy tytuł fragmentu. Przechodzimy do metody `onCreateView`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "11f0f481-d7cc-4810-97eb-6f05e517686d",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onCreateView(\n",
    "    inflater: LayoutInflater, container: ViewGroup?,\n",
    "    savedInstanceState: Bundle?\n",
    "): View? {\n",
    "    val activity: AppCompatActivity = activity as AppCompatActivity\n",
    "    activity.supportActionBar?.title = module.name\n",
    "    return inflater.inflate(R.layout.fragment_module, container, false)\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1a75228b-da3a-4397-a1e7-eaa07ff020f2",
   "metadata": {},
   "source": [
    "Tytuł będzie odpowiadał tytułowi modułu. Następnie, w metodzie `onViewCreated`, ustawiamy tekst przycisków."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "81445268-b19e-4813-a84d-2428d2508229",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n",
    "    super.onViewCreated(view, savedInstanceState)\n",
    "    view.findViewById<Button>(R.id.lectureButton).apply { \n",
    "        text = \"Wykład:\\n${module.lecture.name}\"\n",
    "    }\n",
    "\n",
    "    view.findViewById<Button>(R.id.labButton).apply { \n",
    "        text = \"Laboratorium:\\n${module.lab.name}\"\n",
    "    }\n",
    "\n",
    "    view.findViewById<Button>(R.id.appButton).apply { \n",
    "        text = requireContext().getString(R.string.aplications)\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "401f2849-bd73-4552-8771-22f7edbd2704",
   "metadata": {},
   "source": [
    "Ostatnim elementem będzie dodanie obsługi `onClick` oraz argumentów do akcji. Przejdźmy do `navigation.xml` i zmodyfikujmy `moduleFragment`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ed2f9776-0b6b-48d2-abce-5b51f18a242b",
   "metadata": {},
   "outputs": [],
   "source": [
    "<fragment\n",
    "    android:id=\"@+id/moduleFragment\"\n",
    "    android:name=\"pl.edu.uwr.pum.pumappjava.fragments.ModuleFragment\"\n",
    "    android:label=\"fragment_module\"\n",
    "    tools:layout=\"@layout/fragment_module\" >\n",
    "    <action\n",
    "        android:id=\"@+id/action_moduleFragment_to_lectureFragment\"\n",
    "        app:destination=\"@id/lectureFragment\" >\n",
    "        <argument\n",
    "            android:name=\"moduleId\"\n",
    "            app:argType=\"integer\" />\n",
    "    </action>\n",
    "    <action\n",
    "        android:id=\"@+id/action_moduleFragment_to_labListFragment\"\n",
    "        app:destination=\"@id/labListFragment\" >\n",
    "        <argument\n",
    "            android:name=\"moduleId\"\n",
    "            app:argType=\"integer\" />\n",
    "    </action>\n",
    "    <action\n",
    "        android:id=\"@+id/action_moduleFragment_to_appListFragment\"\n",
    "        app:destination=\"@id/appListFragment\" >\n",
    "        <argument\n",
    "            android:name=\"moduleId\"\n",
    "            app:argType=\"integer\" />\n",
    "    </action>\n",
    "</fragment>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "40bd07a6-3707-4374-a581-ffe9bbadf927",
   "metadata": {},
   "source": [
    "Przy każdej zmianie ekranu będziemy przekazywać `mopduleId` dzięki któremu wyciągniemy odpowiednie dane z `DataProvider`. Dodajmy metodzy `onClick` naszych przycisków do metody `onViewCreated`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d5d77b83-3cd4-49a4-b80b-63687a3b8fcb",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n",
    "    super.onViewCreated(view, savedInstanceState)\n",
    "    view.findViewById<Button>(R.id.lectureButton).apply { \n",
    "        text = \"Wykład:\\n${module.lecture.name}\"\n",
    "        setOnClickListener {\n",
    "            findNavController()\n",
    "                .navigate(ModuleFragmentDirections.actionModuleFragmentToLectureFragment(\n",
    "                moduleId = module.id\n",
    "            ))\n",
    "        }\n",
    "    }\n",
    "\n",
    "    view.findViewById<Button>(R.id.labButton).apply { \n",
    "        text = \"Laboratorium:\\n${module.lab.name}\"\n",
    "        setOnClickListener {\n",
    "            findNavController()\n",
    "                .navigate(ModuleFragmentDirections.actionModuleFragmentToLabListFragment(\n",
    "                moduleId = module.id\n",
    "            ))\n",
    "        }\n",
    "    }\n",
    "\n",
    "    view.findViewById<Button>(R.id.appButton).apply { \n",
    "        text = requireContext().getString(R.string.aplications)\n",
    "        setOnClickListener {\n",
    "            findNavController()\n",
    "                .navigate(ModuleFragmentDirections.actionModuleFragmentToAppListFragment(\n",
    "                moduleId = module.id\n",
    "            ))\n",
    "        }\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "82c43c6f-6682-4e17-a32b-92ebf9d7e630",
   "metadata": {},
   "source": [
    "Możemy przetestować aplikację"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "23ef93a5-fb80-4298-b18a-17a2dc02c1ac",
   "metadata": {},
   "source": [
    "<img src=\"https://media2.giphy.com/media/a0efhMDjbTeqZJl3oO/giphy.gif?cid=790b7611970400a9fec62348cfb0475e5a6876fd87c51c83&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0352041e-2e93-4b8f-9762-a2313389849f",
   "metadata": {},
   "source": [
    "### **ContentAdapter**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d84c6b90-692f-4ab6-9c6a-19720c724cde",
   "metadata": {},
   "source": [
    "Ponieważ trzy fragmenty `LectureFragment`, `AppFragment` i `LabFragment` mają niemal identyczną funkcjonalność i wyświetlają zawartość w ten sam sposób, napiszemy dla nich jeden adapter. Rozpocznijmy od layoutu wspólnego dla tych trzech fragmentów - `fragment_content.xml`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "089c5138-9bea-4869-af76-b5d532ce42ed",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<FrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    tools:context=\".fragments.LectureFragment\">\n",
    "\n",
    "    <androidx.recyclerview.widget.RecyclerView\n",
    "        android:id=\"@+id/contentRecyclerView\"\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:clipToPadding=\"false\"\n",
    "        android:padding=\"16dp\" />\n",
    "\n",
    "</FrameLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "565c2d7c-f3e0-411d-bc84-a9c57b01f3d1",
   "metadata": {},
   "source": [
    "Również pojedynczy element listy będzie miał taki sam layout, więc zdefiniujmy `content_item_view.xml`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cbd42ca3-5469-4f4a-bd87-3a8c2befb82e",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    android:id=\"@+id/contentTextViewItem\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"wrap_content\"\n",
    "    android:layout_margin=\"4dp\"\n",
    "    android:textSize=\"24sp\"\n",
    "    android:textStyle=\"bold\"\n",
    "    android:padding=\"8dp\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "96559b77-9e40-426a-a26f-e4e43ef0ecfb",
   "metadata": {},
   "source": [
    "Przejdźmy do adaptera - różnicą będzie źródło danych, więc przekażemy je w konstruktorze."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b99b5e47-dc88-4e87-9b9e-ed9347db906d",
   "metadata": {},
   "outputs": [],
   "source": [
    "class ContentAdapter (private val content: List<String>) : \n",
    "    RecyclerView.Adapter<ContentAdapter.ViewHolder>() {\n",
    "\n",
    "    class ViewHolder (view: View) : RecyclerView.ViewHolder(view) {\n",
    "        private val contentTextView: TextView = view.findViewById(R.id.contentTextView)\n",
    "\n",
    "        fun bind(text: String){\n",
    "            contentTextView.text = \"- $text\"\n",
    "        }\n",
    "    }\n",
    "\n",
    "    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {\n",
    "        return ViewHolder(\n",
    "            LayoutInflater\n",
    "                .from(parent.context)\n",
    "                .inflate(R.layout.content_item_view, parent, false))\n",
    "    }\n",
    "\n",
    "    override fun onBindViewHolder(holder: ViewHolder, position: Int) {\n",
    "        val item = content[position]\n",
    "        holder.bind(item)\n",
    "    }\n",
    "\n",
    "    override fun getItemCount(): Int = content.size\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1f2ade94-4e28-4af6-be41-93f28de6da9f",
   "metadata": {},
   "source": [
    "Przejdźmy do fragmentów - musimy podać listę `String` jako parametr konstruktora `ContentAdapter` oraz ustawić tytuł na `ActionBar`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d9a2957d-fd17-47a1-a339-0126bfb2f179",
   "metadata": {},
   "outputs": [],
   "source": [
    "class LectureFragment : Fragment() {\n",
    "\n",
    "    private val moduleId by lazy {\n",
    "        arguments?.getInt(\"moduleId\")?:\n",
    "            throw IllegalArgumentException(\"moduleId doesn't exist\")\n",
    "    }\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        val lectureName = DataProvider.modules[moduleId].lecture.name\n",
    "        val activity: AppCompatActivity = activity as AppCompatActivity\n",
    "        activity.supportActionBar?.title = lectureName\n",
    "        return inflater.inflate(R.layout.fragment_content, container, false)\n",
    "    }\n",
    "\n",
    "    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n",
    "        super.onViewCreated(view, savedInstanceState)\n",
    "        val recyclerView = view.findViewById<RecyclerView>(R.id.contentRecyclerView)\n",
    "        recyclerView.apply {\n",
    "            layoutManager = LinearLayoutManager(requireContext())\n",
    "            adapter = ContentAdapter(DataProvider.modules[moduleId].lecture.content)\n",
    "        }\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d5d24df7-b5b1-4cc5-b9d5-625e6cad2778",
   "metadata": {},
   "outputs": [],
   "source": [
    "class LabListFragment : Fragment() {\n",
    "\n",
    "    private val moduleId by lazy {\n",
    "        arguments?.getInt(\"moduleId\")?:\n",
    "        throw IllegalArgumentException(\"moduleId doesn't exist\")\n",
    "    }\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        val labName = DataProvider.modules[moduleId].lab.name\n",
    "        val activity: AppCompatActivity = activity as AppCompatActivity\n",
    "        activity.supportActionBar?.title = labName\n",
    "        return inflater.inflate(R.layout.fragment_content, container, false)\n",
    "    }\n",
    "\n",
    "    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n",
    "        super.onViewCreated(view, savedInstanceState)\n",
    "        val recyclerView = view.findViewById<RecyclerView>(R.id.contentRecyclerView)\n",
    "        recyclerView.apply {\n",
    "            layoutManager = LinearLayoutManager(requireContext())\n",
    "            adapter = ContentAdapter(DataProvider.modules[moduleId].lab.content)\n",
    "        }\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0e7c29f6-1db8-4984-9ea4-46010d1f9549",
   "metadata": {},
   "outputs": [],
   "source": [
    "class AppListFragment : Fragment() {\n",
    "\n",
    "    private val moduleId by lazy {\n",
    "        arguments?.getInt(\"moduleId\")?:\n",
    "        throw IllegalArgumentException(\"moduleId doesn't exist\")\n",
    "    }\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        val activity: AppCompatActivity = activity as AppCompatActivity\n",
    "        activity.supportActionBar?.title = requireContext().getString(R.string.aplications)\n",
    "        return inflater.inflate(R.layout.fragment_content, container, false)\n",
    "    }\n",
    "\n",
    "    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n",
    "        super.onViewCreated(view, savedInstanceState)\n",
    "        val recyclerView = view.findViewById<RecyclerView>(R.id.contentRecyclerView)\n",
    "        recyclerView.apply {\n",
    "            layoutManager = LinearLayoutManager(requireContext())\n",
    "            adapter = ContentAdapter(DataProvider.modules[moduleId].apps.apps)\n",
    "        }\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e566aa1c-bfe8-4b88-8423-e792cca6144a",
   "metadata": {},
   "source": [
    "Możemy przetestować aplikację"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8373fbde-a240-4150-9ef6-6275629fb953",
   "metadata": {},
   "source": [
    "<img src=\"https://media0.giphy.com/media/rsqB9pEWGHKi5L6TbN/giphy.gif?cid=790b76115b96ca067a07916491cdb73faee0b317424c8e4a&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8502ba54-a0c0-4f1e-9c3a-f6158be99f16",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Kotlin",
   "language": "kotlin",
   "name": "kotlin"
  },
  "language_info": {
   "codemirror_mode": "text/x-kotlin",
   "file_extension": ".kt",
   "mimetype": "text/x-kotlin",
   "name": "kotlin",
   "nbconvert_exporter": "",
   "pygments_lexer": "kotlin",
   "version": "1.6.20-dev-6372"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}