{"id":16687,"date":"2025-07-27T10:26:36","date_gmt":"2025-07-27T08:26:36","guid":{"rendered":"https:\/\/www.beseit.net\/?p=16687"},"modified":"2026-04-09T09:23:41","modified_gmt":"2026-04-09T07:23:41","slug":"app-android-feta-amb-android-studio-que-carrega-la-web-via-webview","status":"publish","type":"post","link":"http:\/\/www.beseit.net\/?p=16687","title":{"rendered":"app Android feta amb Android Studio que carrega la web (via WebView)"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/2721.svg\" alt=\"\u2721\ufe0f\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/2721.svg\" alt=\"\u2721\ufe0f\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>? Apartat<\/th><th>? Qu\u00e8 mostra<\/th><\/tr><\/thead><tbody><tr><td><strong>Project<\/strong><\/td><td>Vista general del projecte amb carpetes reals (carpeta res\/ values-&gt; nom projecte<\/td><\/tr><tr><td><strong>Packages<\/strong><\/td><td>Agrupa fitxers per package (m\u00e9s \u00fatil per Java\/Kotlin)<\/td><\/tr><tr><td><strong>Project Files<\/strong><\/td><td>Tots els fitxers incloent ocults i de configuraci\u00f3<\/td><\/tr><tr><td><strong>Production<\/strong><\/td><td>Fitxers que es compilen (activitats, fragments, etc.)<\/td><\/tr><tr><td><strong>Tests<\/strong><\/td><td>Fitxers de proves unit\u00e0ries o d\u2019integraci\u00f3<\/td><\/tr><tr><td><strong>Project Source Files<\/strong><\/td><td>Fonts del projecte (codi font, layouts&#8230;)<\/td><\/tr><tr><td><strong>Project Non-Source Files<\/strong><\/td><td>Recursos i configuraci\u00f3 (manifest, icones&#8230;)<\/td><\/tr><tr><td><strong>Open Files<\/strong><\/td><td>Fitxers oberts actualment a l&#8217;editor<\/td><\/tr><tr><td><strong>Scratches and Consoles<\/strong><\/td><td>Notes temporals, proves r\u00e0pides, scripts&#8230;<\/td><\/tr><tr><td><strong>Android<\/strong><\/td><td>Vista m\u00e9s clara: mostra nom\u00e9s el contingut rellevant<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 <strong>OBJECTIU:<\/strong><\/h2>\n\n\n\n<p>Crear una app Android que:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Es mostri com una app normal (amb nom i icona personalitzats).<\/li>\n\n\n\n<li>Carregui autom\u00e0ticament la web especificada dins un WebView.<\/li>\n\n\n\n<li>Funcioni sense mostrar la barra d&#8217;adreces.<\/li>\n\n\n\n<li>Opcional: funcioni a pantalla completa, sense toolbar.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Qwen3-Coder<\/strong><\/p>\n\n\n\n<p>Perfecte! Et guiar\u00e9 pas a pas per crear una app Android que carregui la calculadora web en un WebView amb els requisits que has especificat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PAS 1: Crear el Projecte<\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Obre Android Studio<\/strong><\/li>\n\n\n\n<li><strong>Create New Project<\/strong><\/li>\n\n\n\n<li>Selecciona <strong>Empty Activity<\/strong><\/li>\n\n\n\n<li><strong>Nom del projecte<\/strong>: &#8220;CalculadoraWebView&#8221;<\/li>\n\n\n\n<li><strong>Package name<\/strong>: <code>com.example.calculadorawebview<\/code><\/li>\n\n\n\n<li><strong>Language<\/strong>: Kotlin (el tipic d&#8217;Android)<\/li>\n\n\n\n<li><strong>Finish<\/strong><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">PAS 2: Configurar els Permisos<\/h2>\n\n\n\n<p>A <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#e91a1a\" class=\"has-inline-color\">AndroidManifest.xml<\/mark><\/code>, afegeix el perm\u00eds d&#8217;Internet abans de l&#8217;etiqueta <code>&lt;application&gt;<\/code>:<\/p>\n\n\n\n<p>xml<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>&lt;uses-permission android:name=\"android.permission.INTERNET\" \/&gt;<\/strong><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">PAS 3: Crear la MainActivity (Kotlin)<\/h2>\n\n\n\n<p>Substitueix el contingut de <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#f50d0d\" class=\"has-inline-color\">MainActivity.kt<\/mark><\/code> amb aquest codi:<\/p>\n\n\n\n<p>kotlin<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>package com.example.calculadorawebview\n<\/strong>\nimport android.os.Bundle\nimport android.view.View\nimport android.webkit.WebChromeClient\nimport android.webkit.WebView\nimport android.webkit.WebViewClient\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.compose.foundation.layout.fillMaxSize\nimport androidx.compose.runtime.Composable\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.viewinterop.AndroidView\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        \n        \/\/ Amaga la barra d'estat (pantalla completa)\n        window.decorView.systemUiVisibility = (\n            View.SYSTEM_UI_FLAG_IMMERSIVE\n            or View.SYSTEM_UI_FLAG_LAYOUT_STABLE\n            or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION\n            or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN\n            or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION\n            or View.SYSTEM_UI_FLAG_FULLSCREEN\n        )\n        \n        setContent {\n            WebViewApp()\n        }\n    }\n}\n\n@Composable\nfun WebViewApp() {\n    AndroidView(\n        factory = { context -&gt;\n            WebView(context).apply {\n                webViewClient = object : WebViewClient() {\n                    override fun shouldOverrideUrlLoading(\n                        view: WebView?,\n                        url: String?\n                    ): Boolean {\n                        \/\/ Carrega totes les URLs dins del mateix WebView\n                        return false\n                    }\n                }\n                \n                webChromeClient = WebChromeClient()\n                settings.javaScriptEnabled = true\n                settings.domStorageEnabled = true\n                settings.mediaPlaybackRequiresUserGesture = false\n                \n                \/\/ Carrega la URL sense barra d'adreces\n                loadUrl(\"https:\/\/www.beseit.net\/calculadora\/\")\n            }\n        },\n        modifier = Modifier.fillMaxSize()\n    )\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">PAS 4: Personalitzar el Nom de l&#8217;App<\/h2>\n\n\n\n<p>A <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#f51a1a\" class=\"has-inline-color\">app\/src\/main\/res\/values\/strings.xml<\/mark><\/code>, <strong>canvia el nom<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;resources&gt;\n    &lt;string name=\"app_name\"&gt;Calculadora&lt;\/string&gt;\n&lt;\/resources&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">PAS 5: Personalitzar la Icona de l&#8217;App<\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Ves a <strong>File<\/strong> &gt; <strong>New<\/strong> &gt; <strong>Image Asset<\/strong><\/li>\n\n\n\n<li><strong>Icon Type<\/strong>: Launcher Icons<\/li>\n\n\n\n<li><strong>Name<\/strong>: ic_launcher<\/li>\n\n\n\n<li><strong>Asset Type<\/strong>: Clip Art<\/li>\n\n\n\n<li>A <strong>Clip Art<\/strong>, fes clic a la icona i busca &#8220;calculator&#8221;<\/li>\n\n\n\n<li><strong>Background Layer<\/strong>: Tria un color de fons<\/li>\n\n\n\n<li><strong>Next<\/strong> &gt; <strong>Finish<\/strong><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">PAS 6: Configurar Pantalla Completa (opcional)<\/h2>\n\n\n\n<p>Per assegurar que sempre sigui pantalla completa, afegeix aix\u00f2 a <code>themes.xml<\/code>:<\/p>\n\n\n\n<p>A <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ee0303\" class=\"has-inline-color\">app\/src\/main\/res\/values\/themes.xml<\/mark><\/code>:<\/p>\n\n\n\n<p>xml<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;resources xmlns:tools=\"http:\/\/schemas.android.com\/tools\"&gt;\n    &lt;style name=\"Theme.CalculadoraWebView\" parent=\"android:Theme.Material.Light.NoActionBar\"&gt;\n        &lt;item name=\"android:windowFullscreen\"&gt;true&lt;\/item&gt;\n    &lt;\/style&gt;\n&lt;\/resources&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">PAS 7: Executar l&#8217;App<\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Connecta el teu dispositiu Xiaomi (que ja sabem que funciona)<\/li>\n\n\n\n<li>Fes clic al bot\u00f3 \u25b6 (Run)<\/li>\n\n\n\n<li>Selecciona el teu dispositiu<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Resultat:<\/h2>\n\n\n\n<p>L&#8217;app:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 T\u00e9 un nom personalitzat (&#8220;Calculadora&#8221;)<\/li>\n\n\n\n<li>\u2705 T\u00e9 una icona personalitzada<\/li>\n\n\n\n<li>\u2705 Carrega autom\u00e0ticament la web de la calculadora<\/li>\n\n\n\n<li>\u2705 No mostra la barra d&#8217;adreces<\/li>\n\n\n\n<li>\u2705 Funciona a pantalla completa (sense toolbar ni barra d&#8217;estat)<\/li>\n<\/ul>\n\n\n\n<p>Un cop verificat aix\u00f2, ja pots executar l&#8217;app al teu dispositiu Xiaomi i hauria de mostrar la calculadora web en pantalla completa! ?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>? Apartat ? Qu\u00e8 mostra Project Vista general del projecte amb carpetes reals (carpeta res\/ values-&gt; nom projecte Packages Agrupa fitxers per package (m\u00e9s \u00fatil per Java\/Kotlin) Project Files Tots els fitxers incloent ocults i de configuraci\u00f3 Production Fitxers que &hellip; <a href=\"http:\/\/www.beseit.net\/?p=16687\">Continua llegint <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":3169,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[189],"tags":[],"class_list":["post-16687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android-estudio"],"_links":{"self":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16687"}],"version-history":[{"count":13,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16687\/revisions"}],"predecessor-version":[{"id":17957,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16687\/revisions\/17957"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/media\/3169"}],"wp:attachment":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16687"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}