Add Article to JetNews (#1426)

Add Article to Jetnews and slight adjustment to colors applied to AppBar
android · Jul 8, 2024 · e6a3e9e · e6a3e9e
2 parents c844e53 + 31a8914
commit e6a3e9e
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 11 deletions.
diff --git a/JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/PostsData.kt b/JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/PostsData.kt
@@ -41,6 +41,9 @@ val florina = PostAuthor(
 val jose =
     PostAuthor("Jose Alcérreca", "https://medium.com/@JoseAlcerreca")
 
+val androidstudioteam =
+    PostAuthor("Android Studio Team", "https://twitter.com/androidstudio")
+
 val publication = Publication(
     "Android Developers",
     "https://cdn-images-1.medium.com/max/258/1*[email protected]"
@@ -934,6 +937,153 @@ val paragraphsPost5 = listOf(
     )
 )
 
+val paragraphsPost6 = listOf(
+    Paragraph(
+        ParagraphType.Text,
+        "The Android Studio logo redesign caught the attention of the developer community since its sneak peek at the Android Developer Summit. We are thrilled to release the new Android Studio logo with the stable release of Flamingo. Now that the new logo is available to most Android Studio users, we can examine the design changes in greater detail and decode their meaning."
+    ),
+    Paragraph(
+        ParagraphType.Text,
+        "This case study offers a comprehensive overview of the design journey, from identifying the initial problem to the final outcome. It explores the critical brand elements that the team needed to consider and the tools used throughout the redesign process. This case study also delves into the various stages of design exploration, highlighting the efforts to create a modern logo while honoring the Android Studio brand's legacy."
+    ),
+    Paragraph(
+        ParagraphType.Header,
+        "Identifying the problem"
+    ),
+    Paragraph(
+        ParagraphType.Text,
+        "You told us the Android Studio logo looked a little weird and complicated. It doesn't shrink down well and it's way too similar to the emulator. We heard you!"
+    ),
+    Paragraph(
+        ParagraphType.Text,
+        "The Android Studio logo used between 2020 and 2022 was well-suited for print, but it posed challenges when used as an application icon. Its readability suffered when reduced to smaller sizes, and its similarity to the emulator caused confusion."
+    ),
+    Paragraph(
+        ParagraphType.Text,
+        "Additionally, the use of color alone to differentiate between Canary and Stable versions made it difficult for users with color vision deficiencies."
+    ),
+    Paragraph(
+        ParagraphType.Text,
+        "The redesign aimed to resolve these concerns by creating a logo that was easy to read, visually distinctive, and followed the OS guidelines when necessary, ensuring accessibility. The new design also maintained a connection with the Android logo family while honoring its legacy."
+    ),
+    Paragraph(
+        ParagraphType.Text,
+        "In this case study, we will delve into the version history and evolution of the Android Studio logo and how it has changed over the years."
+    ),
+    Paragraph(
+        ParagraphType.Header,
+        "A brief history of the Android Studio logo"
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "2013: The original Android Studio logo was a 3D robot that highlighted the gears and interworking of the bugdroid. At this time, the Android Emulator was the bugdroid.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 5)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "2014: The Android Emulator merged to a flat mark but remained otherwise unchanged.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 5)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "2014-2019: An updated Android Studio logo was introduced featuring an \"A\" compass in front of a green circle.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 10)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "2019: In Canary 3.6, the color palette was updated to match Android 10.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 5)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "2020-2022: With the release of Android Studio 4.1 Canary, the \"A\" compass was reduced to an abstract form placed in front of a blueprint. The Android head was also added, peeking over the top.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 10)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Header,
+        "Understanding the Android brand elements"
+    ),
+    Paragraph(
+        ParagraphType.Text,
+        "When redesigning a logo, it's important to consider brand elements that unify products within an ecosystem. For the Android Developer ecosystem, the \"robot head\" is a key brand element, alongside the primaryAndroid green color. The secondary colors blue and navy, and tertiary colors like orange, can also be utilized for support."
+    ),
+    Paragraph(
+        ParagraphType.Header,
+        "Key objectives"
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "Iconography: use recognizable and appropriate symbols, such as compass \"A\" for Android Studio or a device for Android Emulator, to convey the purpose and functionality clearly and quickly.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 12)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "Enhance recognition and scalability: the Android Studio and Android Emulator should prioritize legibility and scalability, ensuring that they can be easily recognized and understood even at smaller sizes.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 36)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "Establish distinction: the Android Studio and Android Emulator need to be easily distinguishable, to avoid confusion.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 22)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "Maintain brand consistency: the Android Studio and Android Emulator designs should be consistent with the overall branding and visual identity of the Android family, while still being distinctive.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 27)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "Ensure accessibility: the logo should be accessible to all users, including those with visual impairments. This means using clear shapes, colors, and contrast.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 21)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "Follow OS guidelines: the updated application icon must align with the Android visual language and conform to the guidelines of macOS, Windows, and Linux operating systems, ensuring consistency and coherence across all platforms.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 21)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Bullet,
+        "Ensure versatility: the Android Studio logo should be versatile enough to work in a variety of sizes and contexts, such as on different devices and platforms.",
+        listOf(
+            Markup(MarkupType.Bold, 0, 20)
+        )
+    ),
+    Paragraph(
+        ParagraphType.Text,
+        "Read More",
+        listOf(
+            Markup(
+                MarkupType.Link,
+                0,
+                9,
+                "https://android-developers.googleblog.com/2023/05/redesigning-android-studio-logo.html"
+            )
+        )
+    )
+)
+
 val post1 = Post(
     id = "dc523f0ed25c",
     title = "A Little Thing about Android Module Paths",
@@ -1014,16 +1164,33 @@ val post5 = Post(
     imageThumbId = R.drawable.post_5_thumb
 )
 
+val post6 = Post(
+    id = "55db18283ac0",
+    title = "Redesigning the Android Studio Logo",
+    subtitle = "A case study offering a comprehensive overview of the design journey of the Android Studio product logo.",
+    url = "https://android-developers.googleblog.com/2023/05/redesigning-android-studio-logo.html",
+    publication = publication,
+    metadata = Metadata(
+        author = androidstudioteam,
+        date = "May 10",
+        readTimeMinutes = 5
+    ),
+    paragraphs = paragraphsPost6,
+    imageId = R.drawable.post_6,
+    imageThumbId = R.drawable.post_6_thumb
+)
+
 val posts: PostsFeed =
     PostsFeed(
-        highlightedPost = post4,
+        highlightedPost = post6,
         recommendedPosts = listOf(post1, post2, post3),
         popularPosts = listOf(
             post5,
             post1.copy(id = "post6"),
             post2.copy(id = "post7")
         ),
         recentPosts = listOf(
+            post6,
             post3.copy(id = "post8"),
             post4.copy(id = "post9"),
             post5.copy(id = "post10")

diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt
@@ -116,7 +116,7 @@ private fun PostHeaderImage(post: Post) {
     val imageModifier = Modifier
         .heightIn(min = 180.dp)
         .fillMaxWidth()
-        .clip(shape = MaterialTheme.shapes.medium)
+        .clip(shape = MaterialTheme.shapes.large)
     Image(
         painter = painterResource(post.imageId),
         contentDescription = null, // decorative

diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreens.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreens.kt
@@ -679,16 +679,15 @@ private fun HomeTopAppBar(
                 painter = painterResource(R.drawable.ic_jetnews_wordmark),
                 contentDescription = title,
                 contentScale = ContentScale.Inside,
-                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onBackground),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
                 modifier = Modifier.fillMaxWidth()
             )
         },
         navigationIcon = {
             IconButton(onClick = openDrawer) {
                 Icon(
                     painter = painterResource(R.drawable.ic_jetnews_logo),
-                    contentDescription = stringResource(R.string.cd_open_navigation_drawer),
-                    tint = MaterialTheme.colorScheme.primary
+                    contentDescription = stringResource(R.string.cd_open_navigation_drawer)
                 )
             }
         },

diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardTop.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardTop.kt
@@ -52,7 +52,7 @@ fun PostCardTop(post: Post, modifier: Modifier = Modifier) {
         val imageModifier = Modifier
             .heightIn(min = 180.dp)
             .fillMaxWidth()
-            .clip(shape = MaterialTheme.shapes.medium)
+            .clip(shape = MaterialTheme.shapes.large)
         Image(
             painter = painterResource(post.imageId),
             contentDescription = null, // decorative

diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt
@@ -38,8 +38,8 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -128,7 +128,8 @@ fun InterestsScreen(
                 title = {
                     Text(
                         text = stringResource(R.string.cd_interests),
-                        style = MaterialTheme.typography.titleLarge
+                        style = MaterialTheme.typography.titleLarge,
+                        color = MaterialTheme.colorScheme.primary
                     )
                 },
                 navigationIcon = {
@@ -139,7 +140,6 @@ fun InterestsScreen(
                                 contentDescription = stringResource(
                                     R.string.cd_open_navigation_drawer
                                 ),
-                                tint = MaterialTheme.colorScheme.primary
                             )
                         }
                     }
@@ -233,7 +233,7 @@ private fun InterestScreenContent(
     val selectedTabIndex = tabContent.indexOfFirst { it.section == currentSection }
     Column(modifier) {
         InterestsTabRow(selectedTabIndex, updateSection, tabContent, isExpandedScreen)
-        Divider(
+        HorizontalDivider(
             color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f)
         )
         Box(modifier = Modifier.weight(1f)) {
@@ -352,7 +352,7 @@ private fun TopicItem(
             Spacer(Modifier.width(16.dp))
             SelectTopicButton(selected = selected)
         }
-        Divider(
+        HorizontalDivider(
             modifier = modifier.padding(start = 72.dp, top = 8.dp, bottom = 8.dp),
             color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f)
         )

diff --git a/JetNews/app/src/main/res/drawable-nodpi/post_6.png b/JetNews/app/src/main/res/drawable-nodpi/post_6.png
diff --git a/JetNews/app/src/main/res/drawable-nodpi/post_6_thumb.png b/JetNews/app/src/main/res/drawable-nodpi/post_6_thumb.png
diff --git a/JetNews/screenshots/jetnews_all_screens.png b/JetNews/screenshots/jetnews_all_screens.png
diff --git a/JetNews/screenshots/jetnews_demo.gif b/JetNews/screenshots/jetnews_demo.gif
diff --git a/JetNews/screenshots/screenshots.png b/JetNews/screenshots/screenshots.png