Skip to content

Commit e6a3e9e

Browse files
kkuan2011kkuan2011
authored
Add Article to JetNews (#1426)
Add Article to Jetnews and slight adjustment to colors applied to AppBar
2 parents c844e53 + 31a8914 commit e6a3e9e

10 files changed

Lines changed: 177 additions & 11 deletions

File tree

‎JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/PostsData.kt‎

Lines changed: 168 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ val florina = PostAuthor(
4141
val jose =
4242
PostAuthor("Jose Alcérreca", "https://medium.com/@JoseAlcerreca")
4343

44+
val androidstudioteam =
45+
PostAuthor("Android Studio Team", "https://twitter.com/androidstudio")
46+
4447
val publication = Publication(
4548
"Android Developers",
4649
"https://cdn-images-1.medium.com/max/258/1*u7oZc2_5mrkcFaxkXEyfYA@2x.png"
@@ -934,6 +937,153 @@ val paragraphsPost5 = listOf(
934937
)
935938
)
936939

940+
val paragraphsPost6 = listOf(
941+
Paragraph(
942+
ParagraphType.Text,
943+
"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."
944+
),
945+
Paragraph(
946+
ParagraphType.Text,
947+
"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."
948+
),
949+
Paragraph(
950+
ParagraphType.Header,
951+
"Identifying the problem"
952+
),
953+
Paragraph(
954+
ParagraphType.Text,
955+
"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!"
956+
),
957+
Paragraph(
958+
ParagraphType.Text,
959+
"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."
960+
),
961+
Paragraph(
962+
ParagraphType.Text,
963+
"Additionally, the use of color alone to differentiate between Canary and Stable versions made it difficult for users with color vision deficiencies."
964+
),
965+
Paragraph(
966+
ParagraphType.Text,
967+
"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."
968+
),
969+
Paragraph(
970+
ParagraphType.Text,
971+
"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."
972+
),
973+
Paragraph(
974+
ParagraphType.Header,
975+
"A brief history of the Android Studio logo"
976+
),
977+
Paragraph(
978+
ParagraphType.Bullet,
979+
"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.",
980+
listOf(
981+
Markup(MarkupType.Bold, 0, 5)
982+
)
983+
),
984+
Paragraph(
985+
ParagraphType.Bullet,
986+
"2014: The Android Emulator merged to a flat mark but remained otherwise unchanged.",
987+
listOf(
988+
Markup(MarkupType.Bold, 0, 5)
989+
)
990+
),
991+
Paragraph(
992+
ParagraphType.Bullet,
993+
"2014-2019: An updated Android Studio logo was introduced featuring an \"A\" compass in front of a green circle.",
994+
listOf(
995+
Markup(MarkupType.Bold, 0, 10)
996+
)
997+
),
998+
Paragraph(
999+
ParagraphType.Bullet,
1000+
"2019: In Canary 3.6, the color palette was updated to match Android 10.",
1001+
listOf(
1002+
Markup(MarkupType.Bold, 0, 5)
1003+
)
1004+
),
1005+
Paragraph(
1006+
ParagraphType.Bullet,
1007+
"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.",
1008+
listOf(
1009+
Markup(MarkupType.Bold, 0, 10)
1010+
)
1011+
),
1012+
Paragraph(
1013+
ParagraphType.Header,
1014+
"Understanding the Android brand elements"
1015+
),
1016+
Paragraph(
1017+
ParagraphType.Text,
1018+
"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."
1019+
),
1020+
Paragraph(
1021+
ParagraphType.Header,
1022+
"Key objectives"
1023+
),
1024+
Paragraph(
1025+
ParagraphType.Bullet,
1026+
"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.",
1027+
listOf(
1028+
Markup(MarkupType.Bold, 0, 12)
1029+
)
1030+
),
1031+
Paragraph(
1032+
ParagraphType.Bullet,
1033+
"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.",
1034+
listOf(
1035+
Markup(MarkupType.Bold, 0, 36)
1036+
)
1037+
),
1038+
Paragraph(
1039+
ParagraphType.Bullet,
1040+
"Establish distinction: the Android Studio and Android Emulator need to be easily distinguishable, to avoid confusion.",
1041+
listOf(
1042+
Markup(MarkupType.Bold, 0, 22)
1043+
)
1044+
),
1045+
Paragraph(
1046+
ParagraphType.Bullet,
1047+
"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.",
1048+
listOf(
1049+
Markup(MarkupType.Bold, 0, 27)
1050+
)
1051+
),
1052+
Paragraph(
1053+
ParagraphType.Bullet,
1054+
"Ensure accessibility: the logo should be accessible to all users, including those with visual impairments. This means using clear shapes, colors, and contrast.",
1055+
listOf(
1056+
Markup(MarkupType.Bold, 0, 21)
1057+
)
1058+
),
1059+
Paragraph(
1060+
ParagraphType.Bullet,
1061+
"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.",
1062+
listOf(
1063+
Markup(MarkupType.Bold, 0, 21)
1064+
)
1065+
),
1066+
Paragraph(
1067+
ParagraphType.Bullet,
1068+
"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.",
1069+
listOf(
1070+
Markup(MarkupType.Bold, 0, 20)
1071+
)
1072+
),
1073+
Paragraph(
1074+
ParagraphType.Text,
1075+
"Read More",
1076+
listOf(
1077+
Markup(
1078+
MarkupType.Link,
1079+
0,
1080+
9,
1081+
"https://android-developers.googleblog.com/2023/05/redesigning-android-studio-logo.html"
1082+
)
1083+
)
1084+
)
1085+
)
1086+
9371087
val post1 = Post(
9381088
id = "dc523f0ed25c",
9391089
title = "A Little Thing about Android Module Paths",
@@ -1014,16 +1164,33 @@ val post5 = Post(
10141164
imageThumbId = R.drawable.post_5_thumb
10151165
)
10161166

1167+
val post6 = Post(
1168+
id = "55db18283ac0",
1169+
title = "Redesigning the Android Studio Logo",
1170+
subtitle = "A case study offering a comprehensive overview of the design journey of the Android Studio product logo.",
1171+
url = "https://android-developers.googleblog.com/2023/05/redesigning-android-studio-logo.html",
1172+
publication = publication,
1173+
metadata = Metadata(
1174+
author = androidstudioteam,
1175+
date = "May 10",
1176+
readTimeMinutes = 5
1177+
),
1178+
paragraphs = paragraphsPost6,
1179+
imageId = R.drawable.post_6,
1180+
imageThumbId = R.drawable.post_6_thumb
1181+
)
1182+
10171183
val posts: PostsFeed =
10181184
PostsFeed(
1019-
highlightedPost = post4,
1185+
highlightedPost = post6,
10201186
recommendedPosts = listOf(post1, post2, post3),
10211187
popularPosts = listOf(
10221188
post5,
10231189
post1.copy(id = "post6"),
10241190
post2.copy(id = "post7")
10251191
),
10261192
recentPosts = listOf(
1193+
post6,
10271194
post3.copy(id = "post8"),
10281195
post4.copy(id = "post9"),
10291196
post5.copy(id = "post10")

‎JetNews/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ private fun PostHeaderImage(post: Post) {
116116
val imageModifier = Modifier
117117
.heightIn(min = 180.dp)
118118
.fillMaxWidth()
119-
.clip(shape = MaterialTheme.shapes.medium)
119+
.clip(shape = MaterialTheme.shapes.large)
120120
Image(
121121
painter = painterResource(post.imageId),
122122
contentDescription = null, // decorative

‎JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreens.kt‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -679,16 +679,15 @@ private fun HomeTopAppBar(
679679
painter = painterResource(R.drawable.ic_jetnews_wordmark),
680680
contentDescription = title,
681681
contentScale = ContentScale.Inside,
682-
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onBackground),
682+
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
683683
modifier = Modifier.fillMaxWidth()
684684
)
685685
},
686686
navigationIcon = {
687687
IconButton(onClick = openDrawer) {
688688
Icon(
689689
painter = painterResource(R.drawable.ic_jetnews_logo),
690-
contentDescription = stringResource(R.string.cd_open_navigation_drawer),
691-
tint = MaterialTheme.colorScheme.primary
690+
contentDescription = stringResource(R.string.cd_open_navigation_drawer)
692691
)
693692
}
694693
},

‎JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardTop.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ fun PostCardTop(post: Post, modifier: Modifier = Modifier) {
5252
val imageModifier = Modifier
5353
.heightIn(min = 180.dp)
5454
.fillMaxWidth()
55-
.clip(shape = MaterialTheme.shapes.medium)
55+
.clip(shape = MaterialTheme.shapes.large)
5656
Image(
5757
painter = painterResource(post.imageId),
5858
contentDescription = null, // decorative

‎JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ import androidx.compose.foundation.verticalScroll
3838
import androidx.compose.material.icons.Icons
3939
import androidx.compose.material.icons.filled.Search
4040
import androidx.compose.material3.CenterAlignedTopAppBar
41-
import androidx.compose.material3.Divider
4241
import androidx.compose.material3.ExperimentalMaterial3Api
42+
import androidx.compose.material3.HorizontalDivider
4343
import androidx.compose.material3.Icon
4444
import androidx.compose.material3.IconButton
4545
import androidx.compose.material3.MaterialTheme
@@ -128,7 +128,8 @@ fun InterestsScreen(
128128
title = {
129129
Text(
130130
text = stringResource(R.string.cd_interests),
131-
style = MaterialTheme.typography.titleLarge
131+
style = MaterialTheme.typography.titleLarge,
132+
color = MaterialTheme.colorScheme.primary
132133
)
133134
},
134135
navigationIcon = {
@@ -139,7 +140,6 @@ fun InterestsScreen(
139140
contentDescription = stringResource(
140141
R.string.cd_open_navigation_drawer
141142
),
142-
tint = MaterialTheme.colorScheme.primary
143143
)
144144
}
145145
}
@@ -233,7 +233,7 @@ private fun InterestScreenContent(
233233
val selectedTabIndex = tabContent.indexOfFirst { it.section == currentSection }
234234
Column(modifier) {
235235
InterestsTabRow(selectedTabIndex, updateSection, tabContent, isExpandedScreen)
236-
Divider(
236+
HorizontalDivider(
237237
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f)
238238
)
239239
Box(modifier = Modifier.weight(1f)) {
@@ -352,7 +352,7 @@ private fun TopicItem(
352352
Spacer(Modifier.width(16.dp))
353353
SelectTopicButton(selected = selected)
354354
}
355-
Divider(
355+
HorizontalDivider(
356356
modifier = modifier.padding(start = 72.dp, top = 8.dp, bottom = 8.dp),
357357
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f)
358358
)

‎JetNews/app/src/main/res/drawable-nodpi/post_6.png‎

48.4 KB
Loading

‎JetNews/app/src/main/res/drawable-nodpi/post_6_thumb.png‎

18.9 KB
Loading

‎JetNews/screenshots/jetnews_all_screens.png‎

162 KB
Loading

‎JetNews/screenshots/jetnews_demo.gif‎

-2.93 MB
Loading

‎JetNews/screenshots/screenshots.png‎

-41.2 KB
Loading

0 commit comments

Comments
 (0)