डेवलपर्स के लिए, एंड्रॉइड ऐप बनाना एक आसान प्रक्रिया है - एक आकर्षक यूआई डिजाइन करना वास्तव में मुश्किल है। इसलिए हमने उन डेवलपर्स के लिए गाइड "हाउ टू डिज़ाइन ए एंड्रॉइड ऐप यूआई दैट डोंट सॉक" लिखा है, जिन्हें सरल लेकिन आकर्षक यूआई बनाने में कुछ प्रेरणा की आवश्यकता है। उस गाइड में हमने संक्षेप में आपके ऐप्स में एक डार्क / नाइट मोड थीम जोड़ने का उल्लेख किया है, और इस गाइड में हम आपको इसके माध्यम से बताएंगे।
अपने ऐप में एक डार्क / नाइट मोड थीम जोड़ना आपके उपयोगकर्ताओं के लिए एक बढ़िया विकल्प हो सकता है - यह बैटरी जीवन बचाता है, और रात में आंखों पर बहुत आसान होता है। काले पाठ पर एक सफेद पृष्ठभूमि, या आपके UI में 'उज्ज्वल' रंगों का कोई भी संयोजन, आंखों पर वास्तव में तनावपूर्ण है, खासकर रात में। इस प्रकार, हल्के टेक्स्ट के साथ एक डार्क बैकग्राउंड आंखों के लिए बहुत कम तनावपूर्ण और हानिकारक होता है, यही वजह है कि हाल ही में एक डार्क थीम - यूट्यूब और रेडिट सहित कई लोकप्रिय ऐप शुरू हो गए हैं, हालांकि फेसबुक ने अभी भी एक बार वापस आने का वादा करने के बाद भी उन्हें प्रकाशित नहीं किया है। मई।
अगर आप आसानी से अपने एंड्रॉइड ऐप में टॉगल करने योग्य डार्क मोड जोड़ना चाहते हैं, तो इस ऐपुअल गाइड का पालन करें और अगर आपको कोई समस्या आती है तो टिप्पणी करें!
XML विशेषताएँ बनाना
सबसे पहले आपको एक XML विशेषता फ़ाइल बनाने की आवश्यकता है जो थीम को संभाल लेगी। यह दो अलग-अलग थीम के लिए आपके एपीके में संसाधनों के दो सेट को शामिल करने और इस प्रकार आपके एपीके आकार को बढ़ाने से बेहतर है, क्योंकि एंड्रॉइड इस एक्सएमएल के माध्यम से विशेषताओं पर रंग बदल सकता है।
इसलिए अपने ऐप्लिकेशन के 'संसाधन' फ़ोल्डर में 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>
लॉलीपॉप से पहले हम ड्रॉएबल्स के लिए एट्रिब्यूट्स निर्दिष्ट नहीं कर सकते थे, इसलिए हमें ड्रॉएबल्स के लिए रिसोर्स आईडी निर्दिष्ट करनी पड़ी - हालांकि, अब ऐसा नहीं है।
शैलियां जोड़ना
इस काम को करने के लिए, हमें दो अलग-अलग शैलियाँ बनाने की ज़रूरत है जो समान आधार साझा करेंगी। पहला स्पष्ट रूप से आपकी प्राथमिक 'प्रकाश' थीम होगी, और दूसरी आपकी 'डार्क' थीम होगी।
<!-- 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>
ऐप की गतिविधि के लिए आपको इनमें से किसी एक थीम को मेनिफेस्ट में निर्दिष्ट करना होगा, जो इस मामले में 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 वैल्यू को लोड करना है जिसका उपयोग सिंगलटन पैटर्न का उपयोग करके सेटिंग को एप्लिकेशन इंस्टेंस में स्टोर करने के लिए किया जाता है, जिसका अर्थ है कि हमें इसे प्रत्येक गतिविधि की शुरुआत में नहीं करना होगा।
public class App extends Application {
public static final String TAG = "App";
private boolean isNightModeEnabled = false;
@Override
public void onCreate() {
super.onCreate();
// We load the Night Mode state here
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);
}
} हालांकि, यदि आप मेनिफेस्ट फ़ाइल में निर्दिष्ट थीम से भिन्न थीम लागू करना चाहते हैं, तो इसे पहले किया जाना चाहिए माता-पिता को ऑनक्रेट() विधि को कॉल करना।
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 ऐप में डार्क थीम।