Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Projektowanie dostosowywalnych widżetów na Androida, które można łatwo skalować. Zacznij od naszych zalecanych domyślnych rozmiarów i przetestuj układy w różnych wymiarach, aby zapewnić optymalną czytelność i wygodę użytkowników.
Domyślne rozmiary
Zapewnij użytkownikom płynne korzystanie z widżetów, optymalizując ich układ pod kątem co najmniej jednego z zalecanych rozmiarów. Aby zapewnić prawidłowe umieszczenie i widoczność w selektorze widżetów, zdefiniuj atrybuty targetCellWidth i targetCellHeight zarówno dla urządzeń mobilnych, jak i tabletów.
Te wartości są oparte na urządzeniach Pixel. Użyj tych rozmiarów jako punktu wyjścia do zaprojektowania widżetu. Dokładnie przetestuj widżet w różnych rozmiarach i na różnych urządzeniach, aby zapewnić użytkownikom wygodę.
Kamera z ręki
Rozmiary
Minimalna szerokość
Maksymalna szerokość
Minimalna wysokość
Maksymalna wysokość
2 x 1
109
306
56
130
2 x 2
109
306
115
276
2 x 3
109
306
185
422
4 x 1
245
624
56
130
4 x 2
245
624
115
276
4 × 3
245
624
185
422
Tablet
Rozmiary
Minimalna szerokość
Maksymalna szerokość
Minimalna wysokość
Maksymalna wysokość
2 x 1
180
304
64
120
2 x 2
180
304
184
304
2 x 3
180
304
304
488
3 x 1
328
488
64
120
3 x 2
298
488
184
304
3 × 3
298
488
304
488
3 x 4
298
488
424
672
Punkty przerwania
Punkty przełamania są niezbędne do tworzenia dostosowujących się do ekranu i przyjaznych dla użytkownika widgetów, które można zmieniać rozmiarem. Testując projekt, możesz określić progi rozmiarów, w których przypadku konieczne są korekty układu. Wprowadź punkty przełamania, aby te zmiany były aktywne, dzięki czemu widget będzie atrakcyjny wizualnie i funkcjonalny w dowolnym rozmiarze.
Punkty graniczne umożliwiają też elastyczne uwzględnianie lub wykluczanie treści dodatkowych, co pozwala optymalizować wykorzystanie przestrzeni na podstawie wymiarów widżetu.
Ilustracja 1. Używaj punktów przerwania do wprowadzania zmian układu w różnych rozmiarach.
Wypełnianie ograniczeń
Jednym z głównych powodów usuwania widżetów jest ich niedopasowanie do innych elementów ekranu głównego. Aby tego uniknąć, zadbaj o to, aby widżet zawsze wypełniał w pełni przydzieloną mu przestrzeń na siatce.
check_circle
Tak
Upewnij się, że kontener rozciąga się od krawędzi do krawędzi we wszystkich rozmiarach.
cancel
Nie
Dodaj niestandardowe wypełnienie. Widżet powinien płynnie przechodzić od krawędzi do krawędzi.
check_circle
Tak
Aby zapewnić spójność wizualną, upewnij się, że kształt nieprostokątny dotyka siatki wzdłuż osi pionowej lub poziomej.
cancel
Nie
Używaj kwadratowych kształtów. Zamiast tego użyj elastycznych prostokątnych kontenerów, które dostosowują się do różnych wymiarów siatki.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 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."]]