Club Screen implementation

app/.gitignore

@@ -0,0 +1 @@
+/build

app/build.gradle

@@ -0,0 +1,70 @@
+plugins {
+    id 'com.android.application'
+    id 'org.jetbrains.kotlin.android'
+}
+
+android {
+    namespace 'com.lb.codetest'
+    compileSdk 34
+
+    defaultConfig {
+        applicationId "com.lb.codetest"
+        minSdk 26
+        targetSdk 34
+        versionCode 1
+        versionName "1.0"
+
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        vectorDrawables {
+            useSupportLibrary true
+        }
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+    buildFeatures {
+        compose true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion '1.4.3'
+    }
+    packaging {
+        resources {
+            excludes += '/META-INF/{AL2.0,LGPL2.1}'
+        }
+    }
+}
+
+dependencies {
+
+    implementation 'androidx.core:core-ktx:1.12.0'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
+    implementation 'androidx.activity:activity-compose:1.8.2'
+    implementation platform('androidx.compose:compose-bom:2023.03.00')
+    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
+    implementation "androidx.lifecycle:lifecycle-runtime-compose:2.7.0"
+    implementation "me.onebone:toolbar-compose:2.3.5"
+    implementation 'androidx.compose.ui:ui'
+    implementation 'androidx.compose.ui:ui-graphics'
+    implementation 'androidx.compose.ui:ui-tooling-preview'
+    implementation 'androidx.compose.material3:material3'
+    testImplementation 'junit:junit:4.13.2'
+    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
+    androidTestImplementation platform('androidx.compose:compose-bom:2023.03.00')
+    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
+    debugImplementation 'androidx.compose.ui:ui-tooling'
+    debugImplementation 'androidx.compose.ui:ui-test-manifest'
+}

app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

app/src/androidTest/java/com/lb/codetest/ExampleInstrumentedTest.kt

@@ -0,0 +1,24 @@
+package com.lb.codetest
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("com.lb.codetest", appContext.packageName)
+    }
+}

app/src/main/AndroidManifest.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
+        android:allowBackup="true"
+        android:dataExtractionRules="@xml/data_extraction_rules"
+        android:fullBackupContent="@xml/backup_rules"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.CodeTest"
+        tools:targetApi="31">
+        <activity
+            android:name=".ClubActivity"
+            android:exported="true"
+            android:label="@string/app_name"
+            android:theme="@style/Theme.CodeTest">
+        </activity>
+
+        <activity
+            android:name=".MainActivity"
+            android:exported="true"
+            android:label="@string/app_name"
+            android:theme="@style/Theme.CodeTest">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

app/src/main/java/com/lb/codetest/ClubActivity.kt

@@ -0,0 +1,238 @@
+package com.lb.codetest
+
+import android.app.Activity
+import android.content.Intent
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.TabRowDefaults
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.lb.codetest.models.Squad
+import com.lb.codetest.ui.SquadUI
+import com.lb.codetest.ui.theme.ClubTheme
+import com.lb.codetest.ui.theme.CodeTestTheme
+import com.lb.codetest.ui.theme.SecondaryTextColor
+import com.lb.codetest.viewmodel.ClubViewModel
+import me.onebone.toolbar.CollapsingToolbarScaffold
+import me.onebone.toolbar.ScrollStrategy
+import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState
+
+const val CLUB_THEME = "ClubTheme"
+
+class ClubActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        val clubTheme = getClubTheme(intent)
+        setContent {
+            CodeTestTheme(primaryColor = clubTheme.primary) {
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = clubTheme.background
+                ) {
+                    ClubScreen(clubTheme)
+                }
+            }
+        }
+    }
+
+    private fun getClubTheme(intent: Intent): ClubTheme {
+        return intent.getSerializableExtra(CLUB_THEME) as? ClubTheme ?: ClubTheme.UCL
+    }
+}
+
+@Composable
+fun ClubScreen(clubTheme: ClubTheme, clubViewModel: ClubViewModel = viewModel()) {
+    val squad by clubViewModel.squadFlow.collectAsStateWithLifecycle()
+    val state = rememberCollapsingToolbarScaffoldState()
+
+    CollapsingToolbarScaffold(
+        state = state,
+        scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
+        modifier = Modifier,
+        toolbar = {
+            TopBarContainer(clubTheme = clubTheme)
+        }
+    ) {
+        ClubTabsUI(clubTheme = clubTheme, squad = squad)
+    }
+}
+
+@Composable
+fun ClubTabsUI(clubTheme: ClubTheme, squad: Squad, modifier: Modifier = Modifier) {
+    val tabs = listOf(
+        stringResource(R.string.overview),
+        stringResource(R.string.matches),
+        stringResource(R.string.groups),
+        stringResource(R.string.stats),
+        stringResource(R.string.squad)
+    )
+
+    var selectedTabIndex by remember { mutableStateOf(tabs.lastIndex) }
+
+    Column(
+        modifier = modifier.then(Modifier.fillMaxWidth())
+    ) {
+        TabRow(
+            selectedTabIndex = selectedTabIndex,
+            containerColor = clubTheme.tabsContainerColor,
+            indicator = { tabPositions ->
+                TabRowDefaults.Indicator(
+                    modifier = Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]),
+                    color = clubTheme.accentColor
+                )
+            },
+            divider = {}
+        ) {
+            tabs.forEachIndexed { index, title ->
+                val isSelected = selectedTabIndex == index
+                val color = if (isSelected) clubTheme.accentColor else SecondaryTextColor
+
+                Tab(text = {
+                    Text(
+                        text = title,
+                        color = color,
+                        fontSize = 13.sp
+                    )
+                },
+                    selected = isSelected,
+                    onClick = { selectedTabIndex = index }
+                )
+            }
+        }
+
+        when (selectedTabIndex) {
+            tabs.lastIndex -> SquadUI(clubTheme, squad)
+            else -> EmptyTabUI(clubTheme = clubTheme)
+        }
+    }
+}
+
+@Composable
+fun EmptyTabUI(clubTheme: ClubTheme) {
+    Spacer(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(clubTheme.primary)
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TopBarContainer(clubTheme: ClubTheme) {
+    Spacer(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(60.dp)
+    )
+
+    Box(modifier = Modifier.fillMaxWidth()) {
+
+        Image(
+            painter = painterResource(id = clubTheme.topbarImage),
+            contentDescription = null,
+            modifier = Modifier.matchParentSize(),
+            contentScale = ContentScale.Crop
+        )
+
+        Column {
+
+            TopAppBar(
+                colors = TopAppBarDefaults.smallTopAppBarColors(
+                    containerColor = Color.Transparent,
+                    titleContentColor = Color.White,
+                    navigationIconContentColor = Color.White,
+                    actionIconContentColor = Color.White,
+                    scrolledContainerColor = clubTheme.primary
+                ),
+                title = {},
+                navigationIcon = {
+                    val activity = LocalContext.current as? Activity
+                    IconButton(onClick = { activity?.finish() }) {
+                        Icon(
+                            imageVector = Icons.Filled.ArrowBack,
+                            contentDescription = null
+                        )
+                    }
+                },
+                actions = {
+                    IconButton(onClick = { /* do something */ }) {
+                        Icon(
+                            painter = painterResource(id = R.drawable.topbar_action),
+                            contentDescription = null
+                        )
+                    }
+                }
+            )
+
+            Text(
+                text = stringResource(id = R.string.barcelona),
+                modifier = Modifier.padding(top = 12.dp, start = 16.dp),
+                color = Color.White,
+                fontSize = 48.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            Text(
+                text = stringResource(id = R.string.playing),
+                modifier = Modifier.padding(top = 72.dp, start = 16.dp),
+                color = SecondaryTextColor,
+                fontSize = 14.sp
+            )
+
+            Text(
+                text = stringResource(id = R.string.round),
+                modifier = Modifier.padding(start = 16.dp, bottom = 24.dp),
+                color = Color.White,
+                fontSize = 16.sp
+            )
+        }
+
+        Image(
+            painter = painterResource(id = R.drawable.crest),
+            contentDescription = null,
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .padding(16.dp)
+                .size(110.dp)
+        )
+    }
+}
+