[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# Style\n\nStyling widgets effectively is crucial for achieving a visually appealing and\nconsistent user experience. This section delves into the key concepts and\ntechniques for defining the color and typography to create the most helpful\nand engaging Android widgets.\n\nColor\n-----\n\nUse color to express style and communicate meaning. Setting appropriate colors\nfor your widget colors are crucial for legibility, personalization, and of\ncourse expressing your app's brand identity.\n\nUse Material color roles and tokens to fulfill accessibility contrast guidelines\nand support dynamic color features, such as user-generated color and dark or\nlight themes.\n\nFor more information see the [Material Design Color guidance](https://m3.material.io/styles/color/system/overview).\n\nShape\n-----\n\nThe shape of your widget sets the mood of your widget. For rectangular widgets,\nuse the [system corner radius property](/reference/android/R.dimen#system_app_widget_background_radius). This property creates consistency\nacross different devices and helps prevent widget content from being clipped.\n\nFor more details, see [Implement rounded corners](/develop/ui/views/appwidgets#rounded-corner).\n\nDynamic themes\n--------------\n\nStarting in Android 12, a widget can use the device theme colors for buttons,\nbackgrounds, and other components. This provides visual consistency across\ndifferent widgets, home screen icons, and wallpapers, offering Android users a\nmore cohesive user experience. Using the provided color tokens ensures your\nwidget will look integrated across device themes provided by different device\nmanufacturers and the dynamic themes set by the user.\n**Figure 1:** Image of a widget with color tokens called out.\n\nLight and dark mode\n-------------------\n\nA dark mode is a low-light version of the device UI that displays mostly dark\nsurface colors. Users are increasingly switching to dark mode for better\nbattery life and eye comfort. If your widget doesn't adapt to dark mode, it\nwill appear out of place and could potentially frustrate users.\n**Figure 2:** A widget in light mode on the left screen and dark on the right.\n\nTypography\n----------\n\nTypography helps make writing legible and beautiful. Utilize font sizes and\nweights to establish a clear hierarchy, guiding the user's eye to the most\nimportant elements. Pay attention to line spacing and letter spacing (kerning)\nto improve readability, especially for smaller text displays within the\nrestricted space of a widget.\n\n### Hierarchy\n\nHierarchy is communicated through differences in font weight, size, line height,\nand letter spacing. The updated type scale organizes text styles into five roles\nthat are named to describe their purposes. The five text styles are display,\nheadline, title, subtitle and body. The new roles are device-agnostic, allowing\neasier application across a variety of use cases.\n**Figure 3:** A widget showing the use of different type scales."]]