Migrate launch/loading fragment to compose

5 files changed, 113 insertions, 75 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt
new file mode 100644
index 0000000000..4869cf6e9c
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt
@@ -0,0 +1,80 @@
+package net.mullvad.mullvadvpn.compose.screen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
+
+@Preview
+@Composable
+private fun PreviewLoadingScreen() {
+    LoadingScreen {}
+}
+
+@Composable
+fun LoadingScreen(
+    onSettingsCogClicked: () -> Unit
+) {
+    val backgroundColor = colorResource(id = R.color.blue)
+
+    ScaffoldWithTopBar(
+        topBarColor = backgroundColor,
+        statusBarColor = backgroundColor,
+        navigationBarColor = backgroundColor,
+        onSettingsClicked = onSettingsCogClicked,
+        isIconAndLogoVisible = false,
+        content = {
+            Box(
+                contentAlignment = Alignment.Center,
+                modifier = Modifier
+                    .background(backgroundColor)
+                    .padding(bottom = 64.dp)
+                    .fillMaxSize()
+            ) {
+                Column(
+                    verticalArrangement = Arrangement.Center,
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.launch_logo),
+                        contentDescription = "",
+                        modifier = Modifier
+                            .size(120.dp)
+                    )
+                    Image(
+                        painter = painterResource(id = R.drawable.logo_text),
+                        contentDescription = "",
+                        alpha = 0.6f,
+                        modifier = Modifier
+                            .padding(top = 12.dp)
+                            .height(18.dp)
+                    )
+                    Text(
+                        text = stringResource(id = R.string.connecting_to_daemon),
+                        fontSize = 13.sp,
+                        color = colorResource(id = R.color.white40),
+                        modifier = Modifier
+                            .padding(top = 12.dp)
+                    )
+                }
+            }
+        }
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/MainActivity.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/MainActivity.kt
index 05bbe681e1..baa7f75ec8 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/MainActivity.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/MainActivity.kt
@@ -40,7 +40,7 @@ import net.mullvad.mullvadvpn.repository.AccountRepository
 import net.mullvad.mullvadvpn.repository.DeviceRepository
 import net.mullvad.mullvadvpn.ui.fragment.ConnectFragment
 import net.mullvad.mullvadvpn.ui.fragment.DeviceRevokedFragment
-import net.mullvad.mullvadvpn.ui.fragment.LaunchFragment
+import net.mullvad.mullvadvpn.ui.fragment.LoadingFragment
 import net.mullvad.mullvadvpn.ui.fragment.LoginFragment
 import net.mullvad.mullvadvpn.ui.fragment.OutOfTimeFragment
 import net.mullvad.mullvadvpn.ui.fragment.WelcomeFragment
@@ -239,7 +239,7 @@ open class MainActivity : FragmentActivity() {
 
     private fun openLaunchView() {
         supportFragmentManager.beginTransaction().apply {
-            replace(R.id.main_fragment, LaunchFragment())
+            replace(R.id.main_fragment, LoadingFragment())
             commitAllowingStateLoss()
         }
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LaunchFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LaunchFragment.kt
deleted file mode 100644
index 877f4712bb..0000000000
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LaunchFragment.kt
+++ /dev/null
@@ -1,37 +0,0 @@
-package net.mullvad.mullvadvpn.ui.fragment
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.core.content.ContextCompat
-import androidx.fragment.app.Fragment
-import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.ui.MainActivity
-import net.mullvad.mullvadvpn.ui.NavigationBarPainter
-import net.mullvad.mullvadvpn.ui.StatusBarPainter
-import net.mullvad.mullvadvpn.ui.paintNavigationBar
-import net.mullvad.mullvadvpn.ui.paintStatusBar
-
-class LaunchFragment : Fragment(), StatusBarPainter, NavigationBarPainter {
-    override fun onCreateView(
-        inflater: LayoutInflater,
-        container: ViewGroup?,
-        savedInstanceState: Bundle?
-    ): View {
-        val view = inflater.inflate(R.layout.launch, container, false)
-
-        view.findViewById<View>(R.id.settings).setOnClickListener {
-            (context as? MainActivity)?.openSettings()
-        }
-
-        context
-            ?.let { ContextCompat.getColor(it, R.color.blue) }
-            ?.let { color ->
-                paintStatusBar(color)
-                paintNavigationBar(color)
-            }
-
-        return view
-    }
-}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LoadingFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LoadingFragment.kt
new file mode 100644
index 0000000000..0c83acf20d
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LoadingFragment.kt
@@ -0,0 +1,31 @@
+package net.mullvad.mullvadvpn.ui.fragment
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.ui.platform.ComposeView
+import androidx.fragment.app.Fragment
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.screen.LoadingScreen
+import net.mullvad.mullvadvpn.ui.MainActivity
+import net.mullvad.mullvadvpn.ui.NavigationBarPainter
+import net.mullvad.mullvadvpn.ui.StatusBarPainter
+
+class LoadingFragment : Fragment(), StatusBarPainter, NavigationBarPainter {
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        return inflater.inflate(R.layout.fragment_compose, container, false).apply {
+            findViewById<ComposeView>(R.id.compose_view).setContent {
+                LoadingScreen(this@LoadingFragment::openSettings)
+            }
+        }
+    }
+
+    private fun openSettings() {
+        (context as? MainActivity)?.openSettings()
+    }
+}
diff --git a/android/app/src/main/res/layout/launch.xml b/android/app/src/main/res/layout/launch.xml
deleted file mode 100644
index 24c2fa6350..0000000000
--- a/android/app/src/main/res/layout/launch.xml
+++ /dev/null
@@ -1,36 +0,0 @@
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-             xmlns:app="http://schemas.android.com/apk/res-auto"
-             android:layout_width="match_parent"
-             android:layout_height="match_parent">
-    <ImageButton android:id="@+id/settings"
-                 android:layout_width="wrap_content"
-                 android:layout_height="wrap_content"
-                 android:layout_gravity="top | right"
-                 android:paddingHorizontal="16dp"
-                 android:paddingVertical="25dp"
-                 android:background="?android:attr/selectableItemBackground"
-                 android:src="@drawable/icon_settings" />
-    <LinearLayout android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:layout_gravity="center"
-                  android:paddingHorizontal="@dimen/side_margin"
-                  android:orientation="vertical"
-                  android:gravity="center">
-        <ImageView android:layout_width="120dp"
-                   android:layout_height="120dp"
-                   android:src="@drawable/launch_logo" />
-        <ImageView android:layout_height="18dp"
-                   android:layout_width="wrap_content"
-                   android:layout_marginTop="12dp"
-                   android:layout_marginBottom="5dp"
-                   android:adjustViewBounds="true"
-                   android:scaleType="fitCenter"
-                   app:tint="@color/white60"
-                   android:src="@drawable/logo_text" />
-        <TextView android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:textColor="@color/white40"
-                  android:textSize="@dimen/text_small"
-                  android:text="@string/connecting_to_daemon" />
-    </LinearLayout>
-</FrameLayout>