FS Splash Screen XML

August 7, 2025 · AI Conversations

User
generate splashscreen.xml for world "FS"
Assistant
Here’s a simple `splashscreen.xml` layout for an Android Cordova app splash screen displaying the letters **FS** in the center. This assumes you're placing it in `res/layout/splashscreen.xml`.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/splash_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#007bff"
    android:gravity="center">

    <TextView
        android:id="@+id/splash_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FS"
        android:textSize="64sp"
        android:textStyle="bold"
        android:textColor="#FFFFFF"
        android:layout_centerInParent="true" />
</RelativeLayout>

### Notes:
– **Text `FS`** is centered and large.
– **Background** is blue (`#007bff`).
– You can change the font, add a logo, or animate it if needed.

Let me know if you want an image logo instead of text or need to match a specific design.

User
How to use it config.xml to replace efault cordova splash screen
Assistant
To replace the **default Cordova splash screen** with your **custom `splashscreen.xml`** layout (like the one showing “FS”), follow these steps:

—

### ✅ Step-by-Step Guide

#### 1. **Create Your Layout File**
Place your `splashscreen.xml` in:

platforms/android/app/src/main/res/layout/splashscreen.xml

This is where Android expects custom layout resources.

—

#### 2. **Override Cordova Splash Screen Activity**

You need to create a **custom activity** that uses your custom layout.

##### ✅ Create a new Java class:
In your Cordova Android project, create:

platforms/android/app/src/main/java/<your/package>/CustomSplashActivity.java

Example (assuming package is `com.example.hello`):

package com.example.hello;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class CustomSplashActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splashscreen);

        new Handler().postDelayed(() -> {
            Intent intent = new Intent(CustomSplashActivity.this, MainActivity.class);
            startActivity(intent);
            finish();
        }, 3000); // Show splash for 3 seconds
    }
}

—

#### 3. **Update `AndroidManifest.xml`**

In `platforms/android/app/src/main/AndroidManifest.xml`, set your splash activity as the launcher:

<activity
    android:name=".CustomSplashActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    android:label="@string/app_name">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

<!-- Remove or change MainActivity launcher if needed -->

—

#### 4. **Update `config.xml` (Optional)**

If you want to **disable Cordova’s default splash screen**, add:

<preference name="SplashScreen" value="none" />
<preference name="SplashScreenDelay" value="0" />

This ensures the default splash plugin doesn’t interfere.

—

### 🚫 Disable or Remove the Cordova Splash Plugin (if used)

If you're not using it anymore:

cordova plugin remove cordova-plugin-splashscreen

—

### 🧪 Final Notes

– This approach bypasses the Cordova splash plugin completely.
– You have **full control** via Android native code (more customization).
– You **must rebuild** your project after modifying platform-specific files:

cordova build android

—

Let me know your package name if you want the Java code fully adapted.

User
Fossettscircus Scanner

Thenet

but above spashcreen not working

Assistant
Thanks for sharing your full `config.xml`. Based on what you’re doing, here’s a **clear fix**:

—

### 🛠️ Problem Summary

You're using:

<preference name="AndroidWindowSplashScreenStaticIcon" value="@drawable/splash_logo" />

This config uses **Cordova 11+'s built-in splash screen support**, but your intent seems to be using **a custom splash layout (`splashscreen.xml`)** — which **Cordova does not support natively** via `config.xml`.

—

### ✅ The Correct Way to Show a Custom `splashscreen.xml` in Cordova

Cordova does **not** support `splashscreen.xml` through `config.xml`. If you want full control using an XML layout (`splashscreen.xml` with "FS"), you need to:

—

## ✅ Option 1: Override the Launcher Activity (Recommended for full control)

### 1. **Create `splashscreen.xml`**

<!-- platforms/android/app/src/main/res/layout/splashscreen.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#007bff"
    android:gravity="center">

    <TextView
        android:text="FS"
        android:textColor="#FFFFFF"
        android:textSize="64sp"
        android:textStyle="bold"
        android:layout_centerInParent="true" />
</RelativeLayout>

—

### 2. **Create `CustomSplashActivity.java`**

// platforms/android/app/src/main/java/com/fossettscircus/scanner/CustomSplashActivity.java
package com.fossettscircus.scanner;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class CustomSplashActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splashscreen);

        new Handler().postDelayed(() -> {
            Intent intent = new Intent(CustomSplashActivity.this, MainActivity.class);
            startActivity(intent);
            finish();
        }, 3000); // 3 sec delay
    }
}

—

### 3. **Update `AndroidManifest.xml`**

Edit this file:

platforms/android/app/src/main/AndroidManifest.xml

Change the launcher activity from `MainActivity` to `CustomSplashActivity`:

<activity android:name=".CustomSplashActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

<!-- Make MainActivity a regular activity -->
<activity android:name=".MainActivity" />

—

### 4. **Disable Default Cordova Splash Plugin (Optional but Recommended)**

In `config.xml`:

<preference name="SplashScreen" value="none" />
<preference name="SplashScreenDelay" value="0" />

Also run:

cordova plugin rm cordova-plugin-splashscreen

—

### 🔄 Rebuild Your App

cordova clean
cordova build android

—

## ✅ Option 2: Use Cordova Splash Plugin with Static Icon (Limited)

If you want to **stick with Cordova’s splash plugin**, it does **not** support `splashscreen.xml`. Instead, use an image (e.g., `splash.png`) placed in `res/drawable/`, and reference it like this:

<preference name="SplashScreen" value="screen" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashScreenBackgroundColor" value="#007bff" />

Then place the image in:

platforms/android/app/src/main/res/drawable/splash.png

—

### 🔍 Summary

| Option | Use Case | Supports XML (`splashscreen.xml`) | Setup Difficulty |
|——-|———-|——————————-|——————|
| ✅ Custom Activity | Full control with layout, animations, text | ✅ Yes | Medium |
| ❌ Cordova Splash Plugin | Basic image-based splash | ❌ No | Easy |

—

Let me know if you want me to generate the Java file or XML folder structure based on your current app.

User
Cordova Splash Plugin
Assistant
If you want to use the **Cordova Splash Screen Plugin** (and not a custom `splashscreen.xml`), here’s exactly how to **properly configure it** in your `config.xml` and file system.

—

## ✅ Step-by-Step: Cordova Splash Screen Plugin Setup

—

### 1. ✅ Install the Plugin

If not already installed:

cordova plugin add cordova-plugin-splashscreen

—

### 2. ✅ Add Preferences to `config.xml`

Make sure you have these preferences set correctly:

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" /> <!-- Duration in ms -->
<preference name="FadeSplashScreenDuration" value="300" /> <!-- Fade duration -->
<preference name="AutoHideSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashScreenBackgroundColor" value="#007bff" />

—

### 3. ✅ Provide Splash Images

Cordova requires platform-specific splash images.

Put splash images in:

res/screen/android/

Example structure:

res/screen/android/splash-land-hdpi.png
res/screen/android/splash-port-hdpi.png
res/screen/android/splash-land-mdpi.png
res/screen/android/splash-port-mdpi.png
res/screen/android/splash-land-xhdpi.png
res/screen/android/splash-port-xhdpi.png
res/screen/android/splash-land-xxhdpi.png
res/screen/android/splash-port-xxhdpi.png

Then link them in `config.xml` like this:

<platform name="android">
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
    <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi"/>
    <splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi"/>
</platform>

—

### 4. ✅ Use Splash Screen in JavaScript (optional)

You can hide the splash manually when needed:

document.addEventListener('deviceready', function () {
  navigator.splashscreen.hide(); // Hides it manually (if AutoHideSplashScreen = false)
}, false);

—

### 5. ✅ Rebuild Your App

cordova clean
cordova build android

—

### 🧪 Tip for "FS"-only Splash

Create a **single splash image** with big white letters `FS` on blue background (`#007bff`). Then scale and export it in multiple densities (`mdpi`, `hdpi`, etc.).

You can use tools like [https://romannurik.github.io/AndroidAssetStudio/](https://romannurik.github.io/AndroidAssetStudio/) to generate them automatically.

—

### ❗ Common Pitfall

Don’t place `splashscreen.xml` in your config.xml — it is **ignored** by Cordova's splash plugin. The plugin works **only with splash images**, not layout files.

—

Let me know if you want a ready-made ZIP of all required splash images for "FS".

User
The "AndroidWindowSplashScreenAnimatedIcon" value does not exist. Cordova's default will be used.
Assistant
The warning you’re seeing:

The "AndroidWindowSplashScreenAnimatedIcon" value does not exist. Cordova's default will be used.

means that the file path you're providing for the animated splash screen icon:

<preference name="AndroidWindowSplashScreenAnimatedIcon" value="www/res/icon/android/icon-36splashscreen.xml-ldpi.png" />

is **not valid** or **not supported**.

—

## 🔴 Why This Doesn’t Work

Cordova expects:
– The **icon file to be in the correct Android `res/drawable` folder**.
– The icon to be a **valid Android resource (like a PNG or Vector Drawable)**.
– **`.xml` splash screens are *not* supported** via this preference.

You're giving it a file:

www/res/icon/android/icon-36splashscreen.xml-ldpi.png

That name implies confusion: it's a `.png` file with `.xml` in the name — likely a typo or invalid file path.

—

## ✅ How to Fix It

If you're using Cordova 10+ with the `AndroidWindowSplashScreenAnimatedIcon` preference, here's the correct setup:

—

### ✅ Step-by-Step Fix

### 1. **Place a Valid Drawable**

Put a valid drawable (e.g. `splash_logo.png`) into:

platforms/android/app/src/main/res/drawable/splash_logo.png

> ✅ The file must exist **before building**.

—

### 2. **Update `config.xml`**

Use this:

<preference name="AndroidWindowSplashScreenAnimatedIcon" value="@drawable/splash_logo" />
<preference name="AndroidWindowSplashScreenBackground" value="#6DADDF" />

> ⚠️ `@drawable/filename` — without file extension — is the correct format.

—

### 3. ✅ Clean & Rebuild

cordova clean android
cordova build android

—

### ✅ Example Working Setup

<preference name="SplashScreen" value="screen" />
<preference name="AndroidWindowSplashScreenAnimatedIcon" value="@drawable/splash_logo" />
<preference name="AndroidWindowSplashScreenBackground" value="#6DADDF" />
<preference name="AndroidWindowSplashScreenIconBackgroundColor" value="#ffffff" />
<preference name="AndroidWindowSplashScreenDuration" value="3000" />

—

## ✅ Optional: Show "FS" as an Icon

If you want "FS" to appear on the splash screen:

– Design an image with **big "FS" text** on your preferred background
– Export it as `splash_logo.png`
– Put it in `res/drawable/` as explained

—

Would you like me to generate a ready "FS splash_logo.png" in your preferred style and size?

User
document.addEventListener('deviceready', function()
{
var TOKEN = 'fossettscircustoken';

$(document).ready(function()
{
var eventId = -1;
var eventDateId = -1;
let ApiUrl = 'https://staging.fossettscircus.com/boxoffice/index.php/api/';
let loader=`
Loading…
`;
var scanConfig = {
preferFrontCamera : false, // iOS and Android
showFlipCameraButton : true, // iOS and Android
showTorchButton : true, // iOS and Android
torchOn: false, // Android, launch with the torch switched on (if available)
saveHistory: false, // Android, save scan history (default false)
prompt : "Place a code inside the scan area", // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats : "QR_CODE", // default: all but PDF_417 and RSS_EXPANDED
//orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations : true, // iOS
disableSuccessBeep: false // iOS and Android
};

var sendCode = function(code)
{
$('.scan').prop('disabled', true);
$('.manually').prop('disabled', true);
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html('Code '+ code +' sent to boxoffice, plase wait…');

$.ajax({
url: `${ApiUrl}scan`,
method: 'POST',
data: {
token: TOKEN,
event_date_id: eventDateId,
order_code: code
},
success: function(result,status,xhr)
{
var apiResult = JSON.parse(result);

if ( apiResult.result )
{
$('#scan-result').removeClass('bg-dark').addClass('bg-success').html(apiResult.message+''+apiResult.seating+''+apiResult.tickets);

// reset input to set next code
$('[name="code"]').val(eventId +'.'+ eventDateId +'.');
}
else
{
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html(apiResult.message);
}
},
error: function(xhr,status,error)
{
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html('Code '+ result.text +' could not be sent to boxoffice, please try again');
},
complete: function()
{
$('.scan').prop('disabled', false);
$('.manually').prop('disabled', false);
}
});
}

var scanError = function (error)
{
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html("Scanning failed: " + error);

$('#modal-scan-result').modal('show');
};

var scanSuccess = function(result)
{
if (! result.cancelled )
{
if (eventDateId > -1)
{
sendCode(result.text);
}
else
{
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html('You must select an event date to scan tickets');
}
}
else
{
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html('Scan was cancelled');
}

$('#modal-scan-result').modal('show');
};

$(document).on('click', '.reload-events', function()
{
$('ul.events').html(loader);

$.ajax({
url: `${ApiUrl}today`,
method: 'POST',
data: {
token: TOKEN
},
success: function(result,status,xhr)
{
console.log(result);
var events = JSON.parse(result);
if (events.result) {
$('ul.events').html('');

$.each(events.data, function(i, val)
{
var eventDatetime = new Date(val.event_datetime);
var dateOptions = { year: '2-digit', month: '2-digit', day: '2-digit' };
var timeOptions = { hour12: true, hour: '2-digit', minute: '2-digit' };

$('.events').append(''+eventDatetime.toLocaleDateString('en-GB', dateOptions)+' – '+ eventDatetime.toLocaleTimeString('en-US', timeOptions) +' Wednesday – '+ val.venue_full +'');
});
}else{
$('.events').html(`${events.message}`);
}
},
error: function(xhr,status,error)
{
console.log(error);
}
});
});

// load events click
$('.reload-events').trigger('click');

$(document).on('click', '.events .list-group-item', function()
{
$('.events .list-group-item').removeClass('active');
$(this).addClass('active');

$('#scan-info').html($(this).html());

eventId = $(this).attr('data-event-id');
eventDateId = $(this).attr('data-event-date-id');

$('[name="code"]').val(eventId +'.'+ eventDateId +'.');

// first scan on event date click
//cordova.plugins.barcodeScanner.scan(scanSuccess, scanError, scanConfig);
$('#modal-scan-result').modal('show');
});

$(document).on('click', '.scan', function()
{
cordova.plugins.barcodeScanner.scan(scanSuccess, scanError, scanConfig);
});

$(document).on('click', '.manually', function()
{
sendCode($('[name="code"]').val());
});
});
}, false);

ask camera permission when app launces

Assistant
To **ask for camera permission** on app launch in a Cordova app, especially when using the `cordova-plugin-barcodescanner`, you must explicitly request runtime permissions using the `cordova-plugin-android-permissions`.

—

### ✅ Step-by-Step: Ask Camera Permission on App Launch

—

### 1. **Install the Permissions Plugin**

Run this in your project root:

cordova plugin add cordova-plugin-android-permissions

—

### 2. **Modify Your JavaScript to Request Camera Permission**

Update your `deviceready` handler like this:

document.addEventListener('deviceready', function() {
    var permissions = cordova.plugins.permissions;
    
    // Request camera permission
    permissions.requestPermission(permissions.CAMERA, function(status) {
        if (status.hasPermission) {
            console.log("Camera permission granted");
            initializeApp(); // your existing jQuery document.ready logic
        } else {
            alert("Camera permission is required to scan QR codes.");
        }
    }, function(error) {
        console.warn("Camera permission error", error);
    });
}, false);

—

### 3. **Move Your jQuery Setup into a Function**

Wrap your existing logic inside `initializeApp()`:

function initializeApp() {
    $(document).ready(function() {
        // all your scanning + AJAX + UI code here...
    });
}

—

### 🔍 Why This Is Needed

– From **Android 6.0 (API 23+)**, permissions like `CAMERA` must be requested at runtime.
– The `barcodeScanner` plugin doesn't always auto-request permission anymore due to platform changes.

—

### ✅ Optional: Check & Request Multiple Permissions

If your plugin also needs `WRITE_EXTERNAL_STORAGE`, you can request both like this:

permissions.requestPermissions(
  [permissions.CAMERA, permissions.WRITE_EXTERNAL_STORAGE],
  successCallback,
  errorCallback
);

—

Let me know if you want to:
– **Auto-close the app if permission is denied**
– **Customize the permission prompt message**
– Or add **support for iOS camera permissions** too.

Leave a Comment

Your email address will not be published. Required fields are marked *