छोटे किए गए कंट्रोल बार का इस्तेमाल, कम से कम कंट्रोल और मेटाडेटा दिखाने के लिए किया जाता है. चुने जाने पर, इससे फ़ुल-स्क्रीन ओवरले खुलता है. इसमें, कंट्रोल के साथ ज़्यादा बड़ा कंट्रोल बार होता है.
उदाहरण के लिए, मीडिया ऐप्लिकेशन के लिए छोटा किया गया कंट्रोल बार, संगीत चलने के दौरान ऐप्लिकेशन में मौजूद प्लेबैक कंट्रोल और मेटाडेटा का एक छोटा सेट रखता है. साथ ही, इससे फ़ुल-स्क्रीन प्लेबैक व्यू भी खुल सकता है.
शरीर रचना
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-anatomy-1.png?authuser=0000&hl=hi)
2. मेटाडेटा
3. कंट्रोल
खास जानकारी
छोटा किया गया कंट्रोल बार
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-spec-1.png?authuser=0000&hl=hi)
टेक्स्ट ओवरफ़्लो के साथ छोटा कंट्रोल बार
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-spec-2.png?authuser=0000&hl=hi)
स्केलिंग लेआउट
ये रेफ़रंस लेआउट, छोटे किए गए कंट्रोल बार को अलग-अलग चौड़ाई और ऊंचाई वाली स्क्रीन में फ़िट करने का तरीका दिखाते हैं. (चौड़ाई और ऊंचाई की कैटगरी लेआउट सेक्शन में बताई गई हैं.) ध्यान दें कि डाउन-सैंपलिंग या अप-सैंपलिंग शुरू होने से पहले, सभी पिक्सल वैल्यू रेंडर किए गए पिक्सल में होती हैं.
मानक-चौड़ाई वाली स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-ar-2.png?authuser=0000&hl=hi)
चौड़ी स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-ar-3.png?authuser=0000&hl=hi)
ज़्यादा चौड़ी और सुपर वाइड स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-ar-4.png?authuser=0000&hl=hi)
स्टाइल
टाइपाेग्राफ़ी
टाइप करने का स्टाइल | टाइपफ़ेस | वज़न | साइज़ (dp) |
---|---|---|---|
मुख्य भाग एक | Roboto | सामान्य | 32 |
मुख्य भाग 3 | Roboto | सामान्य | 24 |
रंग
एलिमेंट | कलर(दिन मोड) | कलर (नाइट मोड) |
---|---|---|
मुख्य प्रकार | सफ़ेद | सफ़ेद @ 88% |
सेकंडरी टाइप | सफ़ेद @ 72% | सफ़ेद @ 60% |
आइकॉन | सफ़ेद | सफ़ेद @ 88% |
बीता समय दिखाने वाला इंडिकेटर | तीसरे पक्ष का लहजा | तीसरे पक्ष का लहजा |
शेष समय संकेतक | #464A4D | #464A4D |
छोटे किए गए कंट्रोल बार का बैकग्राउंड | #0E1013 @ 84% | #0E1013 @ 88% |
ग्रेडिएंट काटें | काला @ 0-100% टेक्स्ट स्पेस के 10% हिस्से में | काला @ 0-100% टेक्स्ट स्पेस के 10% हिस्से में |
साइज़ बदलना
एलिमेंट | साइज़ (dp) |
---|---|
आइकॉन | 44 |
कॉन्टेंट टाइल | 96 |
प्रोग्रेस दिखाने वाला इंंडिकेटर | 84 |
प्रगति संकेतक ट्रैक | 4 |
कम किए गए कंट्रोल बार की ऊंचाई | 128 |
गोल कोने की रेडियस (R1) | 4 |
उदाहरण
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-mock-1.png?authuser=0000&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-mock-2.png?authuser=0000&hl=hi)