উইন্ডো আকার ক্লাস ব্যবহার করুন

Window size classes are a set of opinionated viewport breakpoints that help you design, develop, and test responsive/adaptive layouts. The breakpoints balance layout simplicity with the flexibility of optimizing your app for unique cases.

Window size classes categorize the display area available to your app as compact, medium, or expanded. Available width and height are classified separately, so at any point in time, your app has two window size classes—one for width, one for height. Available width is usually more important than available height due to the ubiquity of vertical scrolling, so the width window size class is likely more relevant to your app's UI.

Figure 1. Representations of width-based window size classes.
Figure 2. Representations of height-based window size classes.

As visualized in the figures, the breakpoints allow you to continue thinking about layouts in terms of devices and configurations. Each size class breakpoint represents a majority case for typical device scenarios, which can be a helpful frame of reference as you think about the design of your breakpoint-based layouts.

Size class Breakpoint Device representation
Compact width width < 600dp 99.96% of phones in portrait
Medium width 600dp ≤ width < 840dp 93.73% of tablets in portrait,

most large unfolded inner displays in portrait
Expanded width width ≥ 840dp 97.22% of tablets in landscape,

most large unfolded inner displays in landscape
Compact height height < 480dp 99.78% of phones in landscape
Medium height 480dp ≤ height < 900dp 96.56% of tablets in landscape,

97.59% of phones in portrait
Expanded height height ≥ 900dp 94.25% of tablets in portrait

Although visualizing size classes as physical devices can be useful, window size classes are explicitly not determined by the size of the device screen. Window size classes are not intended for isTablet‑type logic. Rather, window size classes are determined by the window size available to your application regardless of the type of device the app is running on, which has two important implications:

  • Physical devices do not guarantee a specific window size class. The screen space available to your app can differ from the screen size of the device for many reasons. On mobile devices, split‑screen mode can partition the screen between two applications. On ChromeOS, Android apps can be presented in desktop‑type windows that are arbitrarily resizable. Foldables can have two different‑sized screens individually accessed by folding or unfolding the device.

  • The window size class can change throughout the lifetime of your app. While your app is running, device orientation changes, multitasking, and folding/unfolding can change the amount of screen space available. As a result, the window size class is dynamic, and your app's UI should adapt accordingly.

Window size classes map to the compact, medium, and expanded breakpoints in the Material Design layout guidance. Use window size classes to make high‑level application layout decisions, such as deciding whether to use a specific canonical layout to take advantage of additional screen space.

androidx.compose.material3.adaptive লাইব্রেরির currentWindowAdaptiveInfo() শীর্ষ-স্তরের ফাংশন ব্যবহার করে বর্তমান WindowSizeClass গণনা করুন। ফাংশনটি WindowAdaptiveInfo এর একটি উদাহরণ প্রদান করে, যাতে windowSizeClass রয়েছে। নিচের উদাহরণটি দেখায় কিভাবে উইন্ডোর আকারের শ্রেণী গণনা করা যায় এবং যখনই উইন্ডোর আকারের শ্রেণী পরিবর্তিত হয় তখন আপডেটগুলি গ্রহণ করতে হয়: 

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

উইন্ডো সাইজ ক্লাস সহ লেআউট পরিচালনা করুন

আপনার অ্যাপে উপলব্ধ ডিসপ্লে স্পেস পরিবর্তিত হওয়ার সাথে সাথে উইন্ডোর আকারের ক্লাসগুলি আপনাকে আপনার অ্যাপের বিন্যাস পরিবর্তন করতে সক্ষম করে, উদাহরণস্বরূপ, যখন একটি ডিভাইস ভাঁজ বা খোলা হয়, ডিভাইসের অভিযোজন পরিবর্তিত হয় বা বহু-উইন্ডো মোডে অ্যাপ উইন্ডোর আকার পরিবর্তন করা হয়।

অন্য যেকোন অ্যাপ স্টেটের মতোই স্টেট টু নেস্টেড কম্পোজেবলে উইন্ডো সাইজ ক্লাস নিচে দিয়ে ডিসপ্লে সাইজ পরিবর্তন পরিচালনার জন্য লজিক স্থানীয়করণ করুন: 

@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Perform logic on the size class to decide whether to show the top app bar.
    val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT

    // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}
AdaptiveLayoutSnippets.kt

Test window size classes

As you make layout changes, test the layout behavior across all window sizes, especially at the compact, medium, and expanded breakpoint widths.

If you have an existing layout for compact screens, first optimize your layout for the expanded width size class, since this size class provides the most space for additional content and UI changes. Then decide what layout makes sense for the medium width size class; consider adding a specialized layout.

Next steps

To learn more about how to use window size classes to create responsive/adaptive layouts, see the following:

To learn more about what makes an app great on all devices and screen sizes, see:

পূর্ববর্তী
বিভিন্ন পর্দা মাপ সমর্থন
পরবর্তী
মাল্টি-উইন্ডো মোড সমর্থন করে