Skip to content

Commit 0f4bbfb

Browse files
dcalhoundcalhoun
authored
feat: Update Android Demo app navigation (#185)
* refactor: Android Demo app uses Jetpack Compose * feat: Add Android example header navigation * feat: Refine Android header UI
1 parent 315c04d commit 0f4bbfb

File tree

3 files changed

+150
-14
lines changed

3 files changed

+150
-14
lines changed

‎android/app/build.gradle.kts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
plugins {
22
alias(libs.plugins.android.application)
33
alias(libs.plugins.jetbrains.kotlin.android)
4+
alias(libs.plugins.jetbrains.kotlin.compose)
45
}
56

67
android {
@@ -33,6 +34,9 @@ android {
3334
kotlinOptions {
3435
jvmTarget = "1.8"
3536
}
37+
buildFeatures {
38+
compose = true
39+
}
3640
}
3741

3842
dependencies {
@@ -46,6 +50,15 @@ dependencies {
4650
implementation(libs.androidx.recyclerview)
4751
implementation(libs.wordpress.rs.android)
4852
implementation(project(":Gutenberg"))
53+
54+
// Compose
55+
implementation(platform(libs.androidx.compose.bom))
56+
implementation(libs.androidx.compose.ui)
57+
implementation(libs.androidx.compose.material3)
58+
implementation(libs.androidx.compose.material.icons.extended)
59+
implementation(libs.androidx.compose.ui.tooling.preview)
60+
implementation(libs.androidx.activity.compose)
61+
4962
testImplementation(libs.junit)
5063
androidTestImplementation(libs.androidx.junit)
5164
androidTestImplementation(libs.androidx.espresso.core)

‎android/app/src/main/java/com/example/gutenbergkit/EditorActivity.kt‎

Lines changed: 128 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,42 @@ package com.example.gutenbergkit
33
import android.os.Bundle
44
import android.webkit.WebView
55
import android.content.pm.ApplicationInfo
6+
import androidx.activity.ComponentActivity
7+
import androidx.activity.compose.setContent
68
import androidx.activity.enableEdgeToEdge
7-
import androidx.appcompat.app.AppCompatActivity
8-
import androidx.core.view.ViewCompat
9-
import androidx.core.view.WindowInsetsCompat
9+
import androidx.compose.foundation.layout.Box
10+
import androidx.compose.foundation.layout.fillMaxSize
11+
import androidx.compose.foundation.layout.padding
12+
import androidx.compose.material.icons.Icons
13+
import androidx.compose.material.icons.automirrored.filled.ArrowBack
14+
import androidx.compose.material.icons.automirrored.filled.Redo
15+
import androidx.compose.material.icons.automirrored.filled.Undo
16+
import androidx.compose.material.icons.filled.MoreVert
17+
import androidx.compose.material3.DropdownMenu
18+
import androidx.compose.material3.DropdownMenuItem
19+
import androidx.compose.material3.ExperimentalMaterial3Api
20+
import androidx.compose.material3.Icon
21+
import androidx.compose.material3.IconButton
22+
import androidx.compose.material3.Scaffold
23+
import androidx.compose.material3.Text
24+
import androidx.compose.material3.TextButton
25+
import androidx.compose.material3.TopAppBar
26+
import androidx.compose.runtime.Composable
27+
import androidx.compose.runtime.getValue
28+
import androidx.compose.runtime.mutableStateOf
29+
import androidx.compose.runtime.remember
30+
import androidx.compose.runtime.setValue
31+
import androidx.compose.ui.Modifier
32+
import androidx.compose.ui.viewinterop.AndroidView
1033
import org.wordpress.gutenberg.EditorConfiguration
1134
import org.wordpress.gutenberg.GutenbergView
1235

13-
class EditorActivity : AppCompatActivity() {
36+
class EditorActivity : ComponentActivity() {
1437
override fun onCreate(savedInstanceState: Bundle?) {
1538
super.onCreate(savedInstanceState)
1639
enableEdgeToEdge()
17-
setContentView(R.layout.activity_editor)
1840

19-
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.editor)) { v, insets ->
20-
val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
21-
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
22-
insets
23-
}
24-
25-
if (0 != (applicationInfo.flags and android.content.pm.ApplicationInfo.FLAG_DEBUGGABLE)) {
41+
if (0 != (applicationInfo.flags and ApplicationInfo.FLAG_DEBUGGABLE)) {
2642
WebView.setWebContentsDebuggingEnabled(true)
2743
}
2844

@@ -38,7 +54,105 @@ class EditorActivity : AppCompatActivity() {
3854
intent.getParcelableExtra<EditorConfiguration>(MainActivity.EXTRA_CONFIGURATION)
3955
} ?: EditorConfiguration.builder().build()
4056

41-
val gbView = findViewById<GutenbergView>(R.id.gutenbergView)
42-
gbView.start(configuration)
57+
setContent {
58+
EditorScreen(
59+
configuration = configuration,
60+
onClose = { finish() }
61+
)
62+
}
63+
}
64+
}
65+
66+
@OptIn(ExperimentalMaterial3Api::class)
67+
@Composable
68+
fun EditorScreen(
69+
configuration: EditorConfiguration,
70+
onClose: () -> Unit
71+
) {
72+
var showMenu by remember { mutableStateOf(false) }
73+
74+
Scaffold(
75+
modifier = Modifier.fillMaxSize(),
76+
topBar = {
77+
TopAppBar(
78+
title = { },
79+
navigationIcon = {
80+
IconButton(onClick = onClose) {
81+
Icon(
82+
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
83+
contentDescription = "Close"
84+
)
85+
}
86+
},
87+
actions = {
88+
IconButton(onClick = { }, enabled = false) {
89+
Icon(
90+
imageVector = Icons.AutoMirrored.Filled.Undo,
91+
contentDescription = "Undo"
92+
)
93+
}
94+
IconButton(onClick = { }, enabled = false) {
95+
Icon(
96+
imageVector = Icons.AutoMirrored.Filled.Redo,
97+
contentDescription = "Redo"
98+
)
99+
}
100+
TextButton(onClick = { }, enabled = false) {
101+
Text("PUBLISH")
102+
}
103+
104+
// Overflow menu button and dropdown in Box for proper anchoring
105+
Box {
106+
IconButton(onClick = { showMenu = true }) {
107+
Icon(
108+
imageVector = Icons.Default.MoreVert,
109+
contentDescription = "More options"
110+
)
111+
}
112+
DropdownMenu(
113+
expanded = showMenu,
114+
onDismissRequest = { showMenu = false }
115+
) {
116+
DropdownMenuItem(
117+
text = { Text("Save") },
118+
onClick = { },
119+
enabled = false
120+
)
121+
DropdownMenuItem(
122+
text = { Text("Preview") },
123+
onClick = { },
124+
enabled = false
125+
)
126+
DropdownMenuItem(
127+
text = { Text("Code editor") },
128+
onClick = { },
129+
enabled = false
130+
)
131+
DropdownMenuItem(
132+
text = { Text("Post settings") },
133+
onClick = { },
134+
enabled = false
135+
)
136+
DropdownMenuItem(
137+
text = { Text("Help") },
138+
onClick = { },
139+
enabled = false
140+
)
141+
}
142+
}
143+
}
144+
)
145+
}
146+
) { innerPadding ->
147+
AndroidView(
148+
factory = { context ->
149+
GutenbergView(context).apply {
150+
start(configuration)
151+
}
152+
},
153+
modifier = Modifier
154+
.fillMaxSize()
155+
.padding(innerPadding)
156+
)
43157
}
44158
}

‎android/gradle/libs.versions.toml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ robolectric = "4.14.1"
1616
kotlinx-coroutines = '1.10.2'
1717
androidx-recyclerview = '1.3.2'
1818
wordpress-rs = 'trunk-503f1da9e067677d1517d09f926b1d038dfa58a1'
19+
composeBom = "2024.12.01"
20+
activityCompose = "1.9.3"
1921

2022
[libraries]
2123
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -34,8 +36,15 @@ robolectric = { group = "org.robolectric", name = "robolectric", version.ref = "
3436
kotlinx-coroutines-android = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-android", version.ref = "kotlinx-coroutines" }
3537
androidx-recyclerview = { group = "androidx.recyclerview", name = "recyclerview", version.ref = "androidx-recyclerview" }
3638
wordpress-rs-android = { group = "rs.wordpress.api", name = "android", version.ref = "wordpress-rs" }
39+
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
40+
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui" }
41+
androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" }
42+
androidx-compose-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }
43+
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
44+
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
3745

3846
[plugins]
3947
android-application = { id = "com.android.application", version.ref = "agp" }
4048
jetbrains-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
49+
jetbrains-kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
4150
android-library = { id = "com.android.library", version.ref = "agp" }

0 commit comments

Comments
 (0)