Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Diseña widgets de Android adaptables que se ajusten sin problemas. Usa nuestros tamaños predeterminados recomendados como punto de partida y prueba tus diseños en diferentes dimensiones para garantizar una legibilidad y una experiencia del usuario óptimas.
Tamaños predeterminados
Optimiza el diseño para al menos uno de nuestros tamaños recomendados y brinda una experiencia de widget optimizada. Para garantizar la ubicación y la visibilidad correctas en el selector de widgets, define los atributos targetCellWidth y targetCellHeight para dispositivos de mano y tablets.
Estos valores se basan en dispositivos Pixel. Usa estos tamaños como punto de partida para el diseño de tu widget. Prueba tu widget en diferentes tamaños y en
variosos dispositivos para garantizar una experiencia del usuario de calidad.
Dispositivo manual
Tamaños
Ancho mínimo
Ancho máx.
Altura mínima
Altura máxima
2 × 1
109
306
56
130
2 × 2
109
306
115
276
2 x 3
109
306
185
422
4 x 1
245
624
56
130
4 × 2
245
624
115
276
4:3
245
624
185
422
Tablet
Tamaños
Ancho mínimo
Ancho máx.
Altura mínima
Altura máxima
2 × 1
180
304
64
120
2 × 2
180
304
184
304
2 x 3
180
304
304
488
3 x 1
328
488
64
120
3 × 2
298
488
184
304
3 × 3
298
488
304
488
3 × 4
298
488
424
672
Puntos de interrupción
Los puntos de interrupción son esenciales para crear widgets adaptables, fáciles de usar y con tamaño variable. Cuando pruebas tu diseño, puedes identificar los umbrales de tamaño en los que son necesarios los ajustes de diseño. Implementa puntos de interrupción para activar estos cambios y asegúrate de que tu widget mantenga el atractivo visual y la funcionalidad en cualquier tamaño.
Los puntos de interrupción también ofrecen la flexibilidad de incluir o excluir de forma condicional el contenido complementario, lo que optimiza el uso del espacio en función de las dimensiones del widget.
Figura 1: Usa puntos de interrupción para realizar cambios de diseño en diferentes tamaños.
Completa los límites
Uno de los principales motivos por los que los usuarios quitan widgets es debido a la falta de alineación con otros elementos de la pantalla principal. Para evitar esto, asegúrate de que el widget siempre ocupe por completo el espacio asignado en la cuadrícula.
check_circle
Qué debes hacer
Asegúrate de que el contenedor se extienda de borde a borde en todos los tamaños.
cancel
Qué no debes hacer
Agrega padding personalizado. El widget debe ocupar todo el espacio de la pantalla sin problemas.
check_circle
Qué debes hacer
Asegúrate de que la forma no rectangular toque la cuadrícula en el eje vertical u horizontal para lograr una coherencia visual.
cancel
Qué no debes hacer
Usa formas cuadradas fijas. En su lugar, usa contenedores rectangulares responsivos que se adapten a varias dimensiones de cuadrícula.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# Sizing\n\nDesign adaptable Android widgets that scale seamlessly. Use our recommended\ndefault sizes as a starting point, and test your layouts across different\ndimensions to ensure optimal readability and user experience.\n\nDefault sizes\n-------------\n\nDeliver a polished widget experience by optimizing your layout for at least one\nof our recommended sizes. Ensure correct placement and visibility in the widget\npicker by defining `targetCellWidth` and `targetCellHeight` attributes for both\nhandheld and tablet devices.\n\nThese values are based off Pixel devices. Use these sizes as a starting point\nfor your widget design. Thoroughly test your widget at different sizes and on\nvarious devices to ensure a quality user experience. \n\n### Handheld\n\n\n| Sizes | Min width | Max width | Min height | Max height |\n|-------|-----------|-----------|------------|------------|\n| 2x1 | 109 | 306 | 56 | 130 |\n| 2x2 | 109 | 306 | 115 | 276 |\n| 2x3 | 109 | 306 | 185 | 422 |\n| 4x1 | 245 | 624 | 56 | 130 |\n| 4x2 | 245 | 624 | 115 | 276 |\n| 4x3 | 245 | 624 | 185 | 422 |\n\n\u003cbr /\u003e\n\n### Tablet\n\n\n| Sizes | Min width | Max width | Min height | Max height |\n|-------|-----------|-----------|------------|------------|\n| 2x1 | 180 | 304 | 64 | 120 |\n| 2x2 | 180 | 304 | 184 | 304 |\n| 2x3 | 180 | 304 | 304 | 488 |\n| 3x1 | 328 | 488 | 64 | 120 |\n| 3x2 | 298 | 488 | 184 | 304 |\n| 3x3 | 298 | 488 | 304 | 488 |\n| 3x4 | 298 | 488 | 424 | 672 |\n\n\u003cbr /\u003e\n\n| **Note:** Widget dimensions in the table encompass all device orientations, including landscape mode on phones, to ensure optimal functionality in a variety of scenarios.\n\nBreakpoints\n-----------\n\nBreakpoints are essential for crafting adaptable, user-friendly resizable\nwidgets. By testing your design, you can pinpoint size thresholds where layout\nadjustments are necessary. Implement breakpoints to trigger these changes,\nensuring your widget maintains visual appeal and functionality at any size.\n\nBreakpoints also offer the flexibility to conditionally include or exclude\nsupplemental content, optimizing space utilization based on the widget's\ndimensions.\n**Figure 1:** Use breakpoints to make layout changes at different sizes.\n\nFill the bounds\n---------------\n\nOne of the primary reasons users remove widgets is due to misalignment with\nother home screen elements. To prevent this, ensure your widget always fills its\nallocated grid space completely. \ncheck_circle\n\n### Do\n\nMake sure the container stretches edge-to-edge at all sizes. \ncancel\n\n### Don't\n\nAdd custom padding. Your widget should go seamlessly edge-to-edge. \ncheck_circle\n\n### Do\n\nEnsure your non-rectangular shape touches the grid on either the vertical or horizontal axis for visual consistency. \ncancel\n\n### Don't\n\nUse fixed square shapes. Instead, use responsive rectangular containers that adapt to various grid dimensions."]]