| Theresa Wellington | b0767a7 | 2019-10-01 00:17:46 | [diff] [blame] | 1 | # Chrome for Android UI |
| 2 | |
| 3 | ## Ramping-up |
| 4 | |
| 5 | Android has a number of[developer guides](https://developer.android.com/guide) that are helpful for getting ramped up on general Android development. We recommend reading the following as primers for developing UI: |
| 6 | |
| 7 | *[Application fundamentals](https://developer.android.com/guide/components/fundamentals) |
| 8 | *[Providing resources](https://developer.android.com/guide/topics/resources/providing-resources.html) |
| 9 | *[Layouts](https://developer.android.com/guide/topics/ui/declaring-layout) |
| 10 | *[Introduction to activities](https://developer.android.com/guide/components/activities/intro-activities) |
| 11 | |
| 12 | |
| 13 | ## Colors and text styles |
| 14 | |
| Sinan Sahin | 8265050 | 2022-04-07 18:00:21 | [diff] [blame] | 15 | [DynamicColor doc](dynamic_colors.md) should be followedwhen working on UI.For colors that cannot/shouldnot be madedynamic(as mentionedin the doc),ChromeforAndroid has a color palettedefinedin[//ui/android/java/res/values/color_palette.xml](/ui/android/java/res/values/color_palette.xml) and a set of reusable semantic colors defined in [//ui/android/java/res/values/semantic_colors_adaptive.xml](/ui/android/java/res/values/semantic_colors_adaptive.xml). The semantic colors from semantic_colors_adaptive.xml should be used to ensure colors adapt properly for dark mode and can be consistently and easily updated during product-wide visual refreshes. |
| Theresa Wellington | b0767a7 | 2019-10-01 00:17:46 | [diff] [blame] | 16 | |
| 17 | For more information on selecting the right color, see[NightMode onChromeAndroid](night_mode.md). |
| 18 | |
| Sinan Sahin | 8265050 | 2022-04-07 18:00:21 | [diff] [blame] | 19 | Text should be styledwith a pre-defined text appearancefrom[//components/browser_ui/styles/android/java/res/values/styles.xml](/components/browser_ui/styles/android/java/res/values/styles.xml). If the text color cannot/should not be dynamic, pre-defined text styles from [//ui/android/java/res/values-v17/styles.xml](/ui/android/java/res/values-v17/styles.xml) can be used. If leading (aka line height) is needed, use [org.chromium.ui.widget.TextViewWithLeading](/ui/android/java/src/org/chromium/ui/widget/TextViewWithLeading.java) with `app:leading` set to one of the pre-defined *_leading dimensions in [//ui/android/java/res/values/dimens.xml](/ui/android/java/res/values/dimens.xml). |
| Theresa Wellington | abc3e5c | 2019-10-01 16:55:55 | [diff] [blame] | 20 | |
| Theresa Wellington | b0767a7 | 2019-10-01 00:17:46 | [diff] [blame] | 21 | ## Widgets |
| 22 | |
| 23 | TheChromium codebase contains a number of wrappers aroundAndroid classes(to smooth over bugsor save on binary size)and many UI widgets that provideChrome-specific behaviorand/or styling. |
| 24 | |
| Theresa Wellington | 95cc3b4 | 2020-01-25 21:25:05 | [diff] [blame] | 25 | These can be foundin[//components/browser_ui/widget/android/](/components/browser_ui/widget/android/), [//ui/android/](/ui/android/), and [//chrome/android/java/src/org/chromium/chrome/browser/widget/](/chrome/android/java/src/org/chromium/chrome/browser/widget/). There is an ongoing effort to consolidate all widgets in //components/browser_ui/widget/android. |
| Theresa Wellington | b0767a7 | 2019-10-01 00:17:46 | [diff] [blame] | 26 | |
| 27 | ## MVC |
| 28 | |
| 29 | UI development should follow a modifiedModel-View-Controller pattern. MVCbase classes livein[//ui/android/java/src/org/chromium/ui/modelutil](/ui/android/java/src/org/chromium/ui/modelutil/). |
| 30 | |
| 31 | The following guides introduce MVCinChromeforAndroid: |
| 32 | |
| 33 | *[So, you want todo MVC...](mvc_architecture_tutorial.md) |
| 34 | *[SimpleListsin MVCLand](mvc_simple_list_tutorial.md) |
| 35 | *[SimpleRecyclerViewusein MVC](mvc_simple_recycler_view_tutorial.md) |
| 36 | *[So, you want to test MVC...](mvc_testing.md) |
| Theresa | a3bd803 | 2024-10-02 20:28:47 | [diff] [blame] | 37 | |
| 38 | ## Styles and widgets shared with WebView |
| 39 | |
| 40 | Stylesand widgetsin//ui/android/ may be used by WebView. UI shown in WebView is inflated using the host Activity as the Context, so Chrome's custom theme attributes won't be set and android theme attributes may or may not be set. When creating new styles/widgets or modifying styles/widgets used by WebView, either avoid theme attributes or define a fallback if the theme attribute cannot be resolved. |
| 41 | |
| 42 | Note that limitinguse of theme attributes to//chrome/android/ or other directories is not sufficient for Monochrome builds where Chrome and WebView are packaged in a single APK and therefore have a single set of resources. See https://crbug.com/361587111. |
