الإعداد اليدوي للشاشة الممتدة من الحافة إلى الحافة
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يمكنك تفعيل ميزة "العرض حتى حافة الشاشة" في تطبيقك من خلال استدعاء enableEdgeToEdge.
من المفترض أن يكون ذلك كافيًا لمعظم التطبيقات. يوضّح هذا الدليل كيفية تفعيل وضع العرض من الحافة إلى الحافة إذا كان تطبيقك يحتاج إلى ذلك بدون استخدام enableEdgeToEdge.
عند التشغيل في تنسيق من الحافة إلى الحافة، يجب أن يغيّر تطبيقك ألوان أشرطة النظام ليتمكّن المستخدم من رؤية المحتوى الموجود أسفلها. بعد أن ينفّذ تطبيقك هذه الخطوة، سيتولّى النظام جميع إجراءات الحماية المرئية لواجهة المستخدم في وضع التنقّل بالإيماءات ووضع الأزرار.
وضع التنقّل بالإيماءات: يطبّق النظام ميزة "تكييف الألوان الديناميكي"، حيث يتغيّر لون محتوى أشرطة النظام استنادًا إلى المحتوى الذي يظهر خلفها. في المثال التالي، يتغيّر لون المقبض في شريط التنقّل إلى لون داكن عندما يكون فوق محتوى فاتح، وإلى لون فاتح عندما يكون فوق محتوى داكن.
الشكل 1. تغييرات الألوان في وضع التنقّل بالإيماءات
وضع الزر: يطبّق النظام طبقة تعتيم شفافة
خلف أشرطة النظام (في المستوى 29 من واجهة برمجة التطبيقات أو الإصدارات الأحدث) أو شريط نظام شفاف (في المستوى 28 من واجهة برمجة التطبيقات أو الإصدارات الأقدم).
الشكل 2. حاجب شفاف خلف أشرطة النظام
لون محتوى شريط الحالة: يتحكّم في لون محتوى شريط الحالة، مثل الوقت والرموز.
الشكل 3. لون محتوى شريط الحالة
يمكنك تعديل ملف themes.xml لضبط لون شريط التنقّل، ويمكنك أيضًا ضبط شريط الحالة ليكون شفافًا وضبط لون محتوى شريط الحالة ليكون داكنًا.
يمكنك استخدام واجهة برمجة التطبيقات
WindowInsetsController
مباشرةً، ولكن ننصحك بشدة باستخدام مكتبة الدعم
WindowInsetsControllerCompat
حيثما أمكن ذلك. يمكنك استخدام واجهة برمجة التطبيقات WindowInsetsControllerCompat بدلاً من theme.xml للتحكّم في لون محتوى شريط الحالة. لإجراء ذلك، استخدِم الدالة
setAppearanceLightNavigationBars()
مع تمرير true لتغيير لون المقدّمة في شريط التنقّل إلى لون فاتح أو false للرجوع إلى اللون التلقائي.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-08-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Manually set up the edge-to-edge display\n\nYou can enable the edge-to-edge display in your app by calling\n[`enableEdgeToEdge`](/reference/androidx/activity/ComponentActivity#(androidx.activity.ComponentActivity).enableEdgeToEdge(androidx.activity.SystemBarStyle,androidx.activity.SystemBarStyle)).\nThis should be sufficient for most apps. This guide describes how to enable\nedge-to-edge if your app needs to do so without using `enableEdgeToEdge`.\n\nLay out your app in full screen\n-------------------------------\n\nUse [`WindowCompat.setDecorFitsSystemWindows(window,\nfalse)`](/reference/androidx/core/view/WindowCompat#setDecorFitsSystemWindows(android.view.Window,%20boolean))\nto lay out your app behind the system bars, as shown in the following code\nexample: \n\n### Kotlin\n\n```kotlin\noverride fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n WindowCompat.setDecorFitsSystemWindows(window, false)\n}\n```\n\n### Java\n\n```java\n@Override\npublic void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n WindowCompat.setDecorFitsSystemWindows(getWindow(), false);\n}\n```\n\nChange the color of the system bars\n-----------------------------------\n\nWhen operating in an edge-to-edge layout, your app needs to change the colors of\nthe system bars to let the content underneath be visible. After your app\nperforms this step, the system handles all visual protection of the user\ninterface in gesture navigation mode and in button mode.\n\n- **Gesture navigation mode:** the system applies dynamic color adaptation in which the contents of the system bars change color based on the content behind them. In the following example, the handle in the navigation bar changes to a dark color when it's above light content and to a light color when it's above dark content.\n\n**Figure 1.** Color changes in gesture navigation mode.\n\n- **Button mode:** the system applies a translucent [scrim](https://m2.material.io/design/environment/surfaces.html#attributes) behind the system bars (for API level 29 or later) or a transparent system bar (for API level 28 or earlier).\n\n**Figure 2.** Translucent scrim behind system bars.\n\n- **Status bar content color:** controls the color of status bar content, such as the time and icons.\n\n**Figure 3.** Status bar content color.\n\nYou can edit the `themes.xml` file to set the color of the navigation bar and,\noptionally, to set the status bar as transparent and status bar content color as\ndark. \n\n \u003c!-- values-v29/themes.xml --\u003e\n \u003cstyle name=\"Theme.MyApp\"\u003e\n \u003citem name=\"android:navigationBarColor\"\u003e\n @android:color/transparent\n \u003c/item\u003e\n\n \u003c!-- Optional: set to transparent if your app is drawing behind the status bar. --\u003e\n \u003citem name=\"android:statusBarColor\"\u003e\n @android:color/transparent\n \u003c/item\u003e\n\n \u003c!-- Optional: set for a light status bar with dark content. --\u003e\n \u003citem name=\"android:windowLightStatusBar\"\u003e\n true\n \u003c/item\u003e\n \u003c/style\u003e\n\n| **Note:** If you prefer to disable automatic content protection on Android 10 (API level 29) or later, set [`android:enforceNavigationBarContrast`](/reference/android/view/Window#isNavigationBarContrastEnforced()), [`android:enforceStatusBarContrast`](/reference/android/view/Window#isStatusBarContrastEnforced()), or both to `false` in your theme.\n\nYou can use the\n[`WindowInsetsController`](/reference/android/view/WindowInsetsController) API\ndirectly, but we strongly recommend using the Support Library\n[`WindowInsetsControllerCompat`](/reference/androidx/core/view/WindowInsetsControllerCompat)\nwhere possible. You can use the `WindowInsetsControllerCompat` API instead of\n`theme.xml` to control the status bar's content color. To do so, use the\n[`setAppearanceLightNavigationBars()`](/reference/androidx/core/view/WindowInsetsControllerCompat#setAppearanceLightNavigationBars(boolean))\nfunction, passing in `true` to change the foreground color of the navigation to\na light color or `false` to revert to the default color. \n\n### Kotlin\n\n```kotlin\nval windowInsetsController =\n ViewCompat.getWindowInsetsController(window.decorView)\n\nwindowInsetsController?.isAppearanceLightNavigationBars = true\n```\n\n### Java\n\n```java\nWindowInsetsControllerCompat windowInsetsController =\n ViewCompat.getWindowInsetsController(getWindow().getDecorView());\nif (windowInsetsController == null) {\n return;\n}\n\nwindowInsetsController.setAppearanceLightNavigationBars(true);\n```"]]