Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Progetta widget Android adattabili che si adattano perfettamente alle dimensioni dello schermo. Utilizza le dimensioni predefinite consigliate come punto di partenza e testa i layout su diverse dimensioni per garantire una leggibilità e un'esperienza utente ottimali.
Dimensioni predefinite
Offri un'esperienza con i widget raffinata ottimizzando il layout per almeno una delle nostre dimensioni consigliate. Assicurati il posizionamento e la visibilità corretti nel selettore di widget definendo gli attributi targetCellWidth e targetCellHeight sia per i dispositivi palmari sia per i tablet.
Questi valori si basano sui dispositivi Pixel. Utilizza queste dimensioni come punto di partenza per il design del widget. Testa accuratamente il widget in dimensioni diverse e su vari dispositivi per garantire un'esperienza utente di qualità.
A mano
Dimensioni
Larghezza minima
Larghezza massima
Altezza minima
Altezza massima
2x1
109
306
56
130
2x2
109
306
115
276
2x3
109
306
185
422
4x1
245
624
56
130
4x2
245
624
115
276
4x3
245
624
185
422
Tablet
Dimensioni
Larghezza minima
Larghezza massima
Altezza minima
Altezza massima
2x1
180
304
64
120
2x2
180
304
184
304
2x3
180
304
304
488
3x1
328
488
64
120
3x2
298
488
184
304
3x3
298
488
304
488
3x4
298
488
424
672
Punti di interruzione
I punti di interruzione sono essenziali per creare widget adattabili e ridimensionabili facili da usare. Testando il design, puoi individuare le soglie di dimensioni in cui sono necessari aggiustamenti del layout. Implementa i breakpoint per attivare queste modifiche,
assicurandoti che il widget mantenga l'aspetto e la funzionalità indipendentemente dalle dimensioni.
I breakpoint offrono anche la flessibilità di includere o escludere condizionatamente i contenuti aggiuntivi, ottimizzando l'utilizzo dello spazio in base alle dimensioni del widget.
Figura 1: utilizza i punti di interruzione per apportare modifiche al layout in base a dimensioni diverse.
Compila i limiti
Uno dei motivi principali per cui gli utenti rimuovono i widget è il mancato allineamento con gli altri elementi della schermata Home. Per evitare che ciò accada, assicurati che il widget riempia sempre completamente lo spazio della griglia allocato.
check_circle
Cosa fare
Assicurati che il contenitore si estenda da un bordo all'altro in tutte le dimensioni.
cancel
Cosa non fare
Aggiungi un'area di a capo personalizzata. Il widget deve essere visualizzato senza interruzioni da un'estremità all'altra dello schermo.
check_circle
Cosa fare
Per una maggiore coerenza visiva, assicurati che la forma non rettangolare tocchi la griglia sull'asse verticale o orizzontale.
cancel
Cosa non fare
Utilizza forme quadrate fisse. Utilizza invece contenitori rettangolari adattabili che si adattano a varie dimensioni della griglia.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 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."]]