PAS 1: Traslladar el projecte

Mètode 1: Copiar i obrir

1. Tanca Android Studio si està obert
2. Copia la carpeta:

• Des de: C:\Users\urte\AndroidStudioProjects\00sapi_tts
• A: S:\AndroidStudioProjects\00sapi_tts

1. Obre Android Studio
2. File > Open
3. Navega fins a S:\AndroidStudioProjects\00sapi_tts
4. Selecciona la carpeta i fes OK

Mètode 2: Moure (si prefereixes moure en comptes de copiar)

1. Tanca Android Studio
2. Retalla la carpeta 00sapi_tts de C:\Users\urte\AndroidStudioProjects\
3. Enganxa-la a S:\AndroidStudioProjects\
4. Obre Android Studio i obre el projecte des de la nova ubicació

PAS 2: Canviar la icona per un altaveu

1. Un cop obert el projecte a Android Studio
2. Ves al menú: File > New > Image Asset
3. A l’assistent que apareix:

• Icon Type: selecciona Launcher Icons (Adaptive and Legacy)
• Name: ic_launcher (per substituir la icona actual)
• Asset Type: selecciona Clip Art
• Fes clic a la icona de clip art (la lupa)
• Busca “speaker” o “volume” o “audio”
• Selecciona una icona d’altaveu que t’agradi
• Pots ajustar el color a Foreground Color

1. Fes clic a Next
2. Fes clic a Finish

PAS 3: Verificar el canvi

1. Executa l’app al teu dispositiu Xiaomi
2. Comprova que la nova icona (amb l’altaveu) apareix al menú d’aplicacions

Notes importants:

• El projecte mantindrà totes les seves funcionalitats
• La nova ubicació serà S:\AndroidStudioProjects\00sapi_tts
• L’icona d’altaveu substituirà la icona anterior

Vols que t’expliqui algun pas amb més detall? O tens alguna imatge d’altaveu personalitzada que vulguis utilitzar?

✅ OBJECTIU:

Crear una app Android que:

• Es mostri com una app normal (amb nom i icona personalitzats).
• Carregui automàticament la web especificada dins un WebView.
• Funcioni sense mostrar la barra d’adreces.
• Opcional: funcioni a pantalla completa, sense toolbar.

Qwen3-Coder

Perfecte! Et guiaré pas a pas per crear una app Android que carregui la calculadora web en un WebView amb els requisits que has especificat.

PAS 1: Crear el Projecte

1. Obre Android Studio
2. Create New Project
3. Selecciona Empty Activity
4. Nom del projecte: “CalculadoraWebView”
5. Package name: com.example.calculadorawebview
6. Language: Kotlin (el tipic d’Android)
7. Finish

PAS 2: Configurar els Permisos

A AndroidManifest.xml, afegeix el permís d’Internet abans de l’etiqueta <application>:

xml

<uses-permission android:name="android.permission.INTERNET" />

PAS 3: Crear la MainActivity (Kotlin)

Substitueix el contingut de MainActivity.kt amb aquest codi:

kotlin

package com.example.calculadorawebview

import android.os.Bundle
import android.view.View
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Amaga la barra d'estat (pantalla completa)
        window.decorView.systemUiVisibility = (
            View.SYSTEM_UI_FLAG_IMMERSIVE
            or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            or View.SYSTEM_UI_FLAG_FULLSCREEN
        )
        
        setContent {
            WebViewApp()
        }
    }
}

@Composable
fun WebViewApp() {
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                webViewClient = object : WebViewClient() {
                    override fun shouldOverrideUrlLoading(
                        view: WebView?,
                        url: String?
                    ): Boolean {
                        // Carrega totes les URLs dins del mateix WebView
                        return false
                    }
                }
                
                webChromeClient = WebChromeClient()
                settings.javaScriptEnabled = true
                settings.domStorageEnabled = true
                settings.mediaPlaybackRequiresUserGesture = false
                
                // Carrega la URL sense barra d'adreces
                loadUrl("https://www.beseit.net/calculadora/")
            }
        },
        modifier = Modifier.fillMaxSize()
    )
}

PAS 4: Personalitzar el Nom de l’App

A app/src/main/res/values/strings.xml, canvia el nom:

<resources>
    <string name="app_name">Calculadora</string>
</resources>

PAS 5: Personalitzar la Icona de l’App

1. Ves a File > New > Image Asset
2. Icon Type: Launcher Icons
3. Name: ic_launcher
4. Asset Type: Clip Art
5. A Clip Art, fes clic a la icona i busca “calculator”
6. Background Layer: Tria un color de fons
7. Next > Finish

PAS 6: Configurar Pantalla Completa (opcional)

Per assegurar que sempre sigui pantalla completa, afegeix això a themes.xml:

A app/src/main/res/values/themes.xml:

xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.CalculadoraWebView" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:windowFullscreen">true</item>
    </style>
</resources>

PAS 7: Executar l’App

1. Connecta el teu dispositiu Xiaomi (que ja sabem que funciona)
2. Fes clic al botó ▶ (Run)
3. Selecciona el teu dispositiu

Resultat:

L’app:

• ✅ Té un nom personalitzat (“Calculadora”)
• ✅ Té una icona personalitzada
• ✅ Carrega automàticament la web de la calculadora
• ✅ No mostra la barra d’adreces
• ✅ Funciona a pantalla completa (sense toolbar ni barra d’estat)

Un cop verificat això, ja pots executar l’app al teu dispositiu Xiaomi i hauria de mostrar la calculadora web en pantalla completa! 📱

Per a reflectir la Pantalla del Xiaomi a windows 11:

PS C:\WINDOWS\system32> C:\Users\urqte\Desktop\scrcpy-win64-v3.3.1\scrcpy.exe

C:\Users\urqte\Desktop\scrcpy-win64-v3.3.1\scrcpy.exe

PS C:\WINDOWS\system32> C:\Users\urqte\Desktop\scrcpy-win64-v3.3.1\scrcpy.exe
scrcpy 3.3.1 https://github.com/Genymobile/scrcpy
INFO: ADB device found:
INFO: –> (usb) 1472b067 device 24115RA8EG
C:\Users\urqte\Desktop\scrcpy-win64-v3.3.1\scrcpy-server: 1 file pushed, 0 skipped. 37.5 MB/s (90788 bytes in 0.002s)
[server] INFO: Device: [Xiaomi] Redmi 24115RA8EG (Android 15)
INFO: Renderer: direct3d
INFO: Texture: 1224×2712

El que vols fer és duplicar o emular un dispositiu físic Android a Android Studio, és a dir, crear una imatge de dispositiu (AVD – Android Virtual Device) que reflecteixi les característiques del teu dispositiu real. Això és útil per provar l’aplicació en un entorn que simula exactament el teu mòbil o tauleta.

A continuació t’explico pas a pas com fer-ho:

🧰 Requisits previs:

• Tener instal·lat Android Studio (última versió recomanada).
• Tener el dispositiu físic connectat via USB o Wi-Fi amb depuració USB activada.

✅ PAS 1: Connecta el dispositiu físic

1. Activa “Opcions de desenvolupador” al teu dispositiu:

• Ves a Configuració > Quant a i toca diverses vegades “Número de compilació” fins que activis les opcions de desenvolupador.

1. Activa la depuració USB:

• Ves a Configuració > Opcions de desenvolupador > Depuració USB.

1. Connecta el dispositiu a l’ordinador mitjançant un cable USB.
2. Accepta l’autorització de depuració a la pantalla del dispositiu.

✅ PAS 2: Obtenir informació del dispositiu

1. Obre una terminal o la finestra de Terminal dins d’Android Studio.
2. Escriu la comanda:

adb devices

Si el dispositiu apareix, està correctament connectat.

3. Per obtenir informació detallada del dispositiu:

adb shell getprop

Pots guardar aquesta informació si vols crear un AVD molt fidel.

✅ PAS 3: Crear un nou dispositiu AVD (Android Virtual Device)

1. A Android Studio, ves a: Tools > AVD Manager
2. Fes clic a Create Virtual Device…
3. Selecciona una categoria (Phone, Tablet, etc.) i fes clic a New Hardware Profile
4. Aquí pots configurar manualment el nou perfil amb les característiques del teu dispositiu:

• Nom del dispositiu
• Dimensions de pantalla
• Resolució
• Densitat (dpi)
• RAM, ROM, etc.

1. Després de configurar el perfil de maquinari, selecciona una System Image (versió d’Android). Si no tens cap descarregada, fes clic a Download.
2. Finalitza la creació del dispositiu.

✅ PAS 4: (Opcional) Copiar propietats exactes del dispositiu

Per fer un AVD encara més fidel:

1. A la finestra de Terminal, pots obtenir propietats específiques com:

adb shell getprop ro.product.model
adb shell getprop ro.build.version.sdk
adb shell getprop ro.product.manufacturer

2. Pots utilitzar aquestes dades per ajustar millor el teu AVD.

✅ PAS 5: Provar l’AVD

Un cop creat, pots:

• Llençar l’emulador des de AVD Manager
• Executar la teva app seleccionant aquest AVD com a dispositiu de destí

🧠 Consell extra:

Si el que vols és veure la pantalla del dispositiu físic dins l’ordinador (com duplicar la pantalla), pots utilitzar eines com:

• Scrcpy (gratuït, de codi obert): https://github.com/Genymobile/scrcpy
• Vysor (versió gratuïta limitada)

Aquestes eines et permeten mirar i controlar el dispositiu des de l’ordinador, però no creen un AVD.

🔚 Resum

Si vols, puc ajudar-te a crear un AVD específic amb les dades del teu dispositiu. Només digues-me la marca, model i versió d’Android!

Vols que t’ajudi a crear un AVD per un dispositiu concret?