Skip to content

Commit

Permalink
Add Article to JetNews (android#1426)
Browse files Browse the repository at this point in the history
Add Article to Jetnews and slight adjustment to colors applied to AppBar
  • Loading branch information
kkuan2011 authored Jul 8, 2024
2 parents c844e53 + 31a8914 commit e6a3e9e
Show file tree
Hide file tree
Showing 10 changed files with 177 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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*u7oZc2_5mrkcFaxkXEyfYA@2x.png"
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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")
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
)
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = {
Expand All @@ -139,7 +140,6 @@ fun InterestsScreen(
contentDescription = stringResource(
R.string.cd_open_navigation_drawer
),
tint = MaterialTheme.colorScheme.primary
)
}
}
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -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)
)
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified JetNews/screenshots/jetnews_all_screens.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified JetNews/screenshots/jetnews_demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified JetNews/screenshots/screenshots.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e6a3e9e

Please sign in to comment.