Kutengeneza Splash Screen & App Icon kwa App ya Website | hatua ya 4

Splash Screen ni ukurasa wa kwanza unaoonekana mara tu app inapofunguliwa.
App Icon ni alama ya app inayotokea kwenye simu.

Katika hatua hii utajifunza:

Kutengeneza App Icon

Kutengeneza Splash Screen

Kuziunganisha ndani ya project ya App yako (PWA au WebView App)

🟦 1. Tengeneza App Icon (512×512 px)

Unaweza kutumia Canva au Photopea (online editor free).

✔️ Muundo bora wa App Icon

Size: 512×512 px

Aina: PNG

Background: isiwe transparent (weke background ya rangi)

Tumia logo yako iliyo center

▶️ Mfano wa icon ya Faulink

Logo ya Faulink center

Background ya blue (#0066ff)

Rounded edges (optional)

🟪 2. Tengeneza Splash Screen (1080×1920 px)

Size bora:

Width: 1080 px

Height: 1920 px

Color: brand color yako

Logo: iwe katikati

Mfano wa Splash Screen (Faulink)

Background: Blue (#0066ff)

Logo: Faulink logo katikati

Text ndogo chini:
"Powered by Faulink"

🟩 3. Weka Splash & Icon kwenye Project ya App
A: Kama Unatengeneza WebView App (Android Studio)

👉 Weka Icon ndani ya folder:

app/src/main/res/mipmap-xxxhdpi/ic_launcher.png


👉 Weka Splash Screen ndani ya:

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

Mfano wa splash_screen.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android&quot;&gt;
<item android:drawable="@color/white"/>
<item>
<bitmap
android:gravity="center"
android:src="@drawable/splash"/>
</item>
</layer-list>

Mfano wa kutumia Splash Screen (Java)
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.splash_screen);

new Handler().postDelayed(() -> {
startActivity(new Intent(SplashActivity.this, MainActivity.class));
finish();
}, 2000);
}
}

🟨 4. Kama Unatengeneza PWA (Progressive Web App)

Hariri fail manifest.json:

{
"name": "Faulink App",
"short_name": "Faulink",
"icons": [
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": "true",
"background_color": "#0066ff",
"theme_color": "#0066ff"
}


👉 Kisha upload picha 2:

/icon-512.png

/splash.png

🟧 5. Test Splash Screen na Icon
✔ Android

Tumia Chrome → Add to Home Screen

Fungua app kama native app

✔ WebView App

Run kwenye emulator

Install kwenye simu test

🔥 Hatua inayofuata (Hatua ya 4)

“Ku-set Offline Mode (PWA) au In-App Navigation”
🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming:
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509