ডেভেলপারদের জন্য, একটি অ্যান্ড্রয়েড অ্যাপ তৈরি করা একটি সহজ প্রক্রিয়া - একটি আকর্ষণীয় UI ডিজাইন করা সেটিই আসলে কঠিন। সেটিই কারণ আমরা গাইডটি লিখলাম "How to Design an Android App UI That Doesn't Suck", ডেভেলপারদের জন্য যাদের কিছু ইনস্পিরেশনের প্রয়োজন সিম্পল কিন্তু আকর্ষণীয় UI তৈরি করতে। সেই গাইডে আমরা সংক্ষেপে ডার্ক / নাইট মোড থিম অ্যাপে যোগ করার কথা বললাম, এবং এই গাইডে আমরা আপনাকে এর মধ্য দিয়ে হাঁটিয়ে যাব।
আপনার অ্যাপে একটি ডার্ক / নাইট মোড থিম যোগ করা আপনার ব্যবহারকারীদের জন্য একটি গ্রেট অপশন হতে পারে - এটি ব্যাটারি লাইফ বাঁচায়, এবং রাতে চোখের জন্য অনেক সহজ। সাদা ব্যাকগ্রাউন্ডে কালো টেক্সট, বা আপনার UI-তে যেকোনো 'ব্রাইট' কালারের কম্বিনেশন, চোখের জন্য খুব স্ট্রেসফুল, বিশেষ করে রাতে। তাই, হালকা টেক্সটের সাথে গাঢ় ব্যাকগ্রাউন্ড অনেক কম স্ট্রেসফুল এবং চোখের জন্য ক্ষতিকর নয়, এটাই কারণ অনেক পপুলার অ্যাপ ডার্ক থিম অন্তর্ভুক্ত করা শুরু করেছে - YouTube এবং Reddit সম্প্রতি, যদিও ফেসবুক এখনও তাদের পাবলিশ করেনি মেয়ে প্রমিস করার পর।
আপনি যদি সহজে একটি টগলযোগ্য ডার্ক মোড আপনার অ্যান্ড্রয়েড অ্যাপে যোগ করতে চান, তবে এই Appuals গাইড ফলো করুন এবং কোনো সমস্যা হলে কমেন্ট করুন!
XML অ্যাট্রিবিউট তৈরি করা
প্রথমে আপনাকে একটি XML অ্যাট্রিবিউট ফাইল তৈরি করতে হবে যা থিমিং হ্যান্ডল করবে। এটি আপনার APK-এ দুটি সেট রিসোর্স অন্তর্ভুক্ত করার চেয়ে অনেক ভালো দুটি ভিন্ন থিমের জন্য, এবং এইভাবে আপনার APK সাইজ ফুলে যাবে না, কারণ অ্যান্ড্রয়েড নেটিভলি এই 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-এর আগে আমরা ড্রয়েবলসের জন্য অ্যাট্রিবিউট স্পেসিফাই করতে পারতাম না, তাই আমাদের ড্রয়েবলসের জন্য রিসোর্স আইডি স্পেসিফাই করতে হতো - যাইহোক, এখন এটা আর সেটি নয়।
স্টাইলগুলো যোগ করা
এটি কাজ করতে দোর জন্য, আমাদের দুটি আলাদা স্টাইল তৈরি করতে হবে যেগুলো একই বেস শেয়ার করবে। প্রথমটি ਜाहিরুরূপে আপনার প্রাইমারি 'লাইট' থিম, এবং দ্বিতীয়টি আপনার 'ডার্ক' থিম।
<!-- 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>
এখানে একটিgeven অ্যাক্টিভিটির জন্য আসল স্টাইলগুলো:
<!-- 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।
ভিউগুলো স্টাইল করা
আপনার ভিউগুলো স্টাইল করার একটি উদাহরণ - এই উদাহরণে, এটি একটি "Page not found" রিডাইরেক্ট এররর জন্য।
<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 instance-এ Singleton প্যাটার্ন ব্যবহার করে, যাতে আমাদের প্রতিটি অ্যাক্টিভিটির শুরুতে এটি করতে হবে না।
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; } }
কারণ এই instance সবকিছুর আগে লঞ্চ হচ্ছে, এটি আপনাকে 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 অনেক জিনিসের জন্য খুব উপকারী, এবং এই কেসে, আমরা এটিকে ব্যবহার করব মোড স্টেট সেট করার জন্য। এর মানে আপনাকে আর অ্যাপ instance ব্যবহার করতে হবে না ক্যাশড স্টেট তৈরি করার জন্য, এইভাবে অ্যাপ ক্যাশ ব্লোট কাটা যাচ্ছে (খুব ছোট মার্জিন থেকেও)।
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); } }
এটা যেন সেটি - আপনি ভ্যালুগুলো কাস্টমাইজ এবং টুইক করতে থাকুন আপনার পছন্দ অনুযায়ী, কিন্তু এই গাইড আপনাকে আপনার অ্যান্ড্রয়েড অ্যাপে একটি নেটিভ ডার্ক থিম অন্তর্ভুক্ত করার জন্য একটি গ্রেট ইন্ট্রোডাকশন দেয়।
