How to set your custom logo and splash screen in a Apache Cordova app

Cordova app me apna custom logo aur splash screen (jo app start hone par dikhata hai) add karna bahut aasan hai. Iske liye aapko Cordova plugins ka use karna hoga, jaise **cordova-plugin-splashscreen**. Neeche step-by-step guide diya gaya hai: --- ### **Step 1: Splash Screen Plugin Install Kijiye** Pehle, aapko Cordova ke splash screen plugin ko install karna hoga. ```bash cordova plugin add cordova-plugin-splashscreen ``` Ye plugin splash screen aur app icon ko manage karne me madad karega. --- ### **Step 2: Apne Logo Aur Splash Screen Images Prepare Kijiye** Aapko apne logo aur splash screen ke images ko prepare karna hoga. Ye images multiple resolutions me honi chahiye kyunki Android devices alag-alag screen sizes support karte hain. #### **Splash Screen Image Requirements** - Format: PNG - Background transparent ho sakta hai ya solid color. - Recommended sizes: - `ldpi`: 200x320 - `mdpi`: 320x480 - `hdpi`: 480x800 - `xhdpi`: 720x1280 - `xxhdpi`: 960x1600 - `xxxhdpi`: 1280x1920 #### **App Icon Requirements** - Format: PNG - Background transparent nahi hona chahiye. - Recommended sizes: - `ldpi`: 36x36 - `mdpi`: 48x48 - `hdpi`: 72x72 - `xhdpi`: 96x96 - `xxhdpi`: 144x144 - `xxxhdpi`: 192x192 --- ### **Step 3: Config.xml File Update Kijiye** Cordova project ke root folder me `config.xml` file hoti hai. Is file me aapko splash screen aur app icon ke settings add karni hongi. #### **3.1 Splash Screen Settings Add Kijiye** `config.xml` me neeche diye gaye lines add kijiye: ```xml ``` Yahan `src` attribute me image files ke paths mention karein. Aapko `res/screen/android/` folder create karna hoga aur usme saari splash screen images rakhni hongi. #### **3.2 App Icon Settings Add Kijiye** `config.xml` me app icon ke liye bhi settings add kijiye: ```xml ``` Yahan bhi `src` attribute me icon files ke paths mention karein. Aapko `res/icon/android/` folder create karna hoga aur usme saari icon images rakhni hongi. --- ### **Step 4: Splash Screen Configuration Add Kijiye** Splash screen plugin ke behavior ko customize karne ke liye `config.xml` me ye settings add kijiye: ```xml ``` - `SplashScreenDelay`: Splash screen kitni der tak dikhaye (milliseconds me). - `AutoHideSplashScreen`: Splash screen automatically hide ho jaye ya nahi. - `FadeSplashScreen`: Splash screen fade-in/out effect show ho. --- ### **Step 5: Build Process Run Kijiye** Ab aap apne project ko rebuild karenge taaki changes apply ho jaye. ```bash cordova build android ``` Agar APK generate karna hai to: ```bash cordova build android --release ``` --- ### **Step 6: Test Kijiye** Apne APK file ko emulator ya physical device par test kijiye aur dekhein ki splash screen aur app icon sahi se load ho rahe hain. --- ### **Optional: Automated Tools Use Karke Images Generate Kijiye** Agar aap manually saari resolutions ke images create nahi karna chahte, to automated tools ka use karein: 1. [Android Asset Studio](https://romannurik.github.io/AndroidAssetStudio/) - Ye tool aapko ek hi image upload karne par saari resolutions ke icons aur splash screens generate kar deta hai. 2. Generated files ko download karke `res/icon/android/` aur `res/screen/android/` folders me paste karein. --- ### **Conclusion** Is process ko follow karke aap apne Cordova app me custom splash screen aur app icon add kar sakte hain. Agar aapko koi step samajh nahi aaya ho ya problem aa rahi ho, to comment kijiye aur hum aapki help karenge! 😊 **Final Output:** - Splash screen aur app icon successfully configure honge aur app start hone par splash screen dikhayi dega. --- Cordova project me `res/icon/android/` aur `res/screen/android/` folders **main root folder** ke andar create karna hota hai, **nahi ki `www` folder ke andar**. Ye folders Cordova build process ke liye specific hote hain, aur unme aapke app icons aur splash screen images store kiye jate hain. --- ### **Folder Structure Explanation** Ek typical Cordova project ka folder structure neeche diya gaya hai: ``` MyApp/ ├── config.xml <-- App configuration file ├── hooks/ <-- Custom scripts (optional) ├── platforms/ <-- Platform-specific code (e.g., Android, iOS) ├── plugins/ <-- Installed plugins ├── res/ <-- Resources folder (create this manually) │ ├── icon/ <-- Icons for different platforms │ │ └── android/ <-- Android-specific icons │ └── screen/ <-- Splash screens for different platforms │ └── android/ <-- Android-specific splash screens ├── www/ <-- Web assets (HTML, CSS, JS files) └── package.json <-- Node.js package file (optional) ```

फ़रवरी 11, 2025 Tags : android

Subscribe by Email

Follow Updates Articles from This Blog via Email