डेवलपर्स के लिए, Android ऐप बनाना एक आसान प्रक्रिया है - एक आकर्षक UI डिजाइन करना वास्तव में मुश्किल है। इसलिए हमने गाइड "How to Design an Android App UI That Doesn't Suck" लिखा, उन डेवलपर्स के लिए जिन्हें सरल लेकिन आकर्षक UI बनाने में कुछ प्रेरणा की आवश्यकता है। उस गाइड में हमने संक्षेप में अपने ऐप्स में डार्क/नाइट मोड थीम जोड़ने का उल्लेख किया था, और इस गाइड में हम आपको इसके माध्यम से चलाएंगे।
अपने ऐप में डार्क/नाइट मोड थीम जोड़ना आपके उपयोगकर्ताओं के लिए एक बढ़िया विकल्प हो सकता है - यह बैटरी लाइफ बचाता है, और रात में आंखों पर बहुत आसान होता है। काले टेक्स्ट पर सफेद बैकग्राउंड, या आपके UI में 'चमकीले' रंगों का कोई भी संयोजन, वास्तव में आंखों पर तनावपूर्ण होता है, विशेष रूप से रात में। इस प्रकार, हल्के टेक्स्ट के साथ डार्क बैकग्राउंड बहुत कम तनावपूर्ण और आंखों के लिए हानिकारक होता है, यही कारण है कि कई लोकप्रिय ऐप्स ने डार्क थीम शामिल करना शुरू कर दिया है - YouTube और Reddit सबसे हाल ही में, हालांकि Facebook ने मई में वादा करने के बाद अभी तक अपना प्रकाशित नहीं किया है।
यदि आप अपने Android ऐप में आसानी से टॉगल करने योग्य डार्क मोड जोड़ना चाहते हैं, तो इस Appuals गाइड का पालन करें और यदि आप किसी समस्या में पड़ते हैं तो कमेंट करें!
XML एट्रिब्यूट्स बनाना
सबसे पहले आपको एक XML एट्रिब्यूट्स फाइल बनाने की आवश्यकता है जो थीमिंग को संभालेगी। यह आपके APK में दो अलग-अलग थीम के लिए संसाधनों के दो सेट शामिल करने से कहीं बेहतर है, और इस प्रकार आपके APK आकार को फुलाता है, क्योंकि Android इस XML के माध्यम से एट्रिब्यूट्स पर नेटिव रूप से रंग बदल सकता है।
तो अपने ऐप के 'resources' फोल्डर में, attrs.xml नाम की एक फाइल बनाएं और ये लाइनें जोड़ें (ये स्टाइल करने योग्य एट्रिब्यूट्स हैं):
<declare-styleable name="CTAppTheme"> <attr name="primaryTextColor" format="color"/> <attr name="secondaryTextColor" format="color"/> <attr name="dividerColor" format="color"/> <attr name="backgroundCardColor" format="color"/> <attr name="iconPlaceholder" format="integer"/> </declare-styleable>
Lollipop से पहले हम ड्रॉएबल्स के लिए एट्रिब्यूट्स निर्दिष्ट नहीं कर सकते थे, इसलिए हमें ड्रॉएबल्स के लिए रिसोर्स IDs निर्दिष्ट करने पड़ते थे - हालांकि, अब ऐसा नहीं है।
स्टाइल्स जोड़ना
इसे काम करने के लिए, हमें दो अलग-अलग स्टाइल्स बनाने की आवश्यकता है जो एक ही बेस साझा करेंगे। पहला स्पष्ट रूप से आपकी प्राथमिक 'लाइट' थीम होगी, और दूसरी आपकी 'डार्क' थीम होगी।
<!-- Light base activity theme --> <style name="ActivityTheme.Primary.Base.Light" parent="Theme.AppCompat.NoActionBar"> <item name="primaryTextColor">#F4F4F6</item> <item name="secondaryTextColor">#96F4F4F6</item> <item name="backgroundCardColor">#FFFF</item> <item name="dividerColor">#F2F2F3</item> <item name="iconPlaceholder">@drawable/i_light_plholder</item> </style> <!-- Dark base activity theme --> <style name="ActivityTheme.Primary.Base.Dark" parent="Theme.AppCompat.NoActionBar"> <item name="primaryTextColor">#33343B/item> <item name="secondaryTextColor">#8033343B</item> <item name="backgroundCardColor">#28292e</item> <item name="dividerColor">#F2F2F3</item> <item name="iconPlaceholder">@drawable/i_dark_pholder</item> </style>
यहां एक दी गई गतिविधि के लिए वास्तविक स्टाइल्स हैं:
<!-- Specific Feed activity theme --> <style name="FeedActivityThemeLight" parent="ActivityTheme.Primary.Base.Light"> <item name="android:windowBackground">#F4F4F6</item> </style> <style name="FeedActivityThemeDark" parent="ActivityTheme.Primary.Base.Dark"> <item name="android:windowBackground">#33343B</item> </style>
आपको ऐप की गतिविधि के लिए Manifest में इनमें से एक थीम निर्दिष्ट करने की आवश्यकता है, जो इस मामले में FeedActivity है।
व्यूज़ को स्टाइल करना
यहां आपके व्यूज़ को स्टाइल करने का एक उदाहरण है - इस उदाहरण में, यह "पेज नहीं मिला" रीडायरेक्ट त्रुटि के लिए है।
<ImageView android:id="@+id/placeHolderAssetImageView" android:layout_width="100dp" android:layout_height="100dp" android:src="?attr/iconPlaceholder" android:layout_marginBottom="8dp" /> <TextView android:id="@+id/placeHolderTitleTextView" android:text="Page not found." android:textSize="16dp" android:textColor="?attr/primaryTextColor" android:layout_margin="16dp" />
डायनामिक थीम स्विचिंग कैसे सक्षम करें
डायनामिक थीम स्विचिंग सक्षम करने का सबसे अच्छा और सबसे कुशल तरीका है SharedPreference मान को लोड करना जिसका उपयोग सेटिंग को स्टोर करने के लिए किया जाता है, Application इंस्टेंस में Singleton पैटर्न का उपयोग करके, जिसका अर्थ है कि हमें इसे प्रत्येक Activity की शुरुआत में नहीं करना पड़ेगा।
public class App extends Application { public static final String TAG = "App"; private boolean isNightModeEnabled = false; @Override public void onCreate() { super.onCreate(); // हम यहां नाइट मोड स्थिति लोड करते हैं SharedPreferences mPrefs = PreferenceManager.getDefaultSharedPreferences(this); this.isNightModeEnabled = mPrefs.getBoolean("NIGHT_MODE", false); } public boolean isNightModeEnabled() { return isNightModeEnabled; } public void setIsNightModeEnabled(boolean isNightModeEnabled) { this.isNightModeEnabled = isNightModeEnabled; } }
क्योंकि यह इंस्टेंस किसी भी चीज़ से पहले लॉन्च हो रहा है, यह आपको isNightModeEnabled() बूलियन को जब भी चाहें, ऐप से संबंधित किसी भी गतिविधि में कॉल करने की अनुमति देता है, एक बार जब इसे खोल दिया गया हो।
public final class FeedActivity extends AppCompatActivity { private final static String TAG = "FeedActivity"; @Override protected void onCreate(Bundle savedInstanceState) { if (MyApplication.getInstance().isNightModeEnabled()) { setTheme(R.style.FeedActivityThemeDark); } super.onCreate(savedInstanceState); setContentView(R.layout.activity_feed); } }
हालांकि, यदि आप Manifest फ़ाइल में निर्दिष्ट थीम से अलग थीम लागू करना चाहते हैं, तो यह पैरेंट onCreate() विधि को कॉल करने से पहले किया जाना चाहिए।
AppCompat का उपयोग करके स्थिति सेट करना
AppCompat बहुत सी चीजों के लिए वास्तव में उपयोगी है, और इस मामले में, हम मोड स्थिति सेट करने के लिए इसका उपयोग करेंगे। इसका मतलब है कि आपको ऐप इंस्टेंस का उपयोग करके कैश्ड स्थिति बनाने की आवश्यकता नहीं है, इस प्रकार ऐप कैश ब्लोट को कम करना (भले ही बहुत छोटे अंतर से)।
AppCompatDelegate .setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
यहां, आप या तो उपयोग कर सकते हैं:
- AppCompatDelegate.MODE_NIGHT_YES
AppCompatDelegate.MODE_NIGHT_NO
AppCompatDelegate.MODE_NIGHT_AUTO
स्थिति पुनर्प्राप्त करना
AppCompatDelegate.getDefaultNightMode(); public final class FeedActivity extends AppCompatActivity { private final static String TAG = "FeedActivity"; @Override protected void onCreate(Bundle savedInstanceState) { if (AppCompatDelegate.getDefaultNightMode() ==AppCompatDelegate.MODE_NIGHT_YES) { setTheme(R.style.FeedActivityThemeDark); } super.onCreate(savedInstanceState); setContentView(R.layout.activity_feed); } }
यह होना चाहिए - आप अपनी पसंद के अनुसार मूल्यों को अनुकूलित और ट्वीक करना जारी रख सकते हैं, लेकिन यह गाइड आपके Android ऐप में एक नेटिव डार्क थीम शामिल करने के साथ शुरुआत करने के लिए एक बेहतरीन परिचय है।
