App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

_________________________________________________
127F.- Aplicación con fondo transparente. (II)

p127F_fondotransparente.aia

p127F_fondotransparenteA.apk

- Esto se trata de hacer una aplicación con fondo transparente. El efecto se verá cuando se Genere la aplicación.

____________________________________
- Diseño.

- Debemos poner las Propiedades de la Screen1:

ColordeFondo: ninguno (en inglés BackgroundColor: None)

También debemos poner ColorDeFondo: ninguno el VerticalArrangement, Etiqueta y el btn_close

____________________________________
- Bloques.

___________________________________

- Una vez creada la aplicación.

- La compilamos mediante Generar / Guardar .apk en mi ordenador.

- Ahora vamos al programa:

APK Editor Studio

- Cargamos el p127F_fondotransparente.apk

- Vamos al AndroidManifest.xml

y cambiamos esta parte:

android:theme="@android:style/Theme"

por esta:

android:theme="@android:style/Theme.Translucent.NoTitleBar">

- Guardar y Guardar .apk.

- Escribimos un nuevo nombre para este .apk

<?xml version="1.0" encoding="utf-8" standalone="no"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"
 android:compileSdkVersion="23" android:compileSdkVersionCodename="6.0-2438415" package="appinventor.ai_juan.p127F_fondotransparente"
platformBuildVersionCode="29" platformBuildVersionName="10">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<application android:debuggable="false" android:icon="@mipmap/ic_launcher"
android:label="p127F_fondotransparente" android:name="com.google.appinventor.components.runtime.multidex.MultiDexApplication"
android:networkSecurityConfig="@xml/network_security_config" android:requestLegacyExternalStorage="true"
android:roundIcon="@mipmap/ic_launcher" android:theme="@android:style/Theme.Translucent.NoTitleBar">
<uses-library android:name="org.apache.http.legacy" android:required="false"/>
<activity android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize" 
android:name=".Screen1" android:windowSoftInputMode="stateHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<provider android:authorities="appinventor.ai_juan.p127F_fondotransparente.provider" 
android:exported="false" android:grantUriPermissions="true" android:name="androidx.core.content.FileProvider">
<meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/provider_paths"/>
</provider>
</application>
</manifest>

- IMPORTANTE:

- Cargamos el nuevo .apk

- Cerramos y abrimos la aplicación.

_____________________________________________________
2.- Otro ejemplo un Splash Screen.

p127F_fondotransparente_Splash.aia

_____________________________________________________
3.- Minutero inverso de reloj.

p127F_fondotransparente_Reloj.aia

____________________________________
- Diseño.

- Aquí tenemos las dos imágenes con fondo transparente que vamos a utilizar.

- Observa que hemos puesto la Propiedad ColorDeFondo: Ninguno.

- Al Lienzo también le hemos puesto ColorDeFondo: Ninguno

____________________________________
- Bloques.

______________________________________
- Emulador.

- Así se vería en el Emulador:

- Generamos la aplicación. Guardamos el archivo p127F_fondotransparente_Reloj.apk en nuestro ordenador.

- Arrancamos el programa APK Editor Studio

- Vamos al AndroidManifest.xml y cambiamos:

android:theme="@android:style/Theme"

por esta:

android:theme="@android:style/Theme.Translucent.NoTitleBar">

- Guardamos.

- Instalamos la aplicación. La cerramos y la volvemos a abrir.

___________________________________________________________

- Propuesta.

- En vez de poner el fondo de la Screen1 y de los componentes totalmente transparente, podemos ponerlo semitransparente modificando las dos últimas cifras del código de color, por ejemplo 23993255

- Realiza una aplicación con un Lienzo y una bola rebotando contínuamente, con fondo transparente.

https://www.b4x.com/android/forum/pages/results/?query=translucent.Notitlebar+screen+b4a

https://www.b4x.com/android/forum/threads/sample-splash-screen.71517/#content

https://stackoverflow.com/questions/20862258/android-how-to-get-appcompat-translucent-type-theme-with-support-actionbar/21492572#21492572

___________________________________________________________

- Kodular.

p127F_fondotransparenteKod.aia

- Screen1.ColorDeFondo: None (#FFFFFF00)

- VerticalArrangement1.ColorDeFondo: None (#FFFFFF00)

- btn_close.ColorDeFondo: None (#FFFFFF00)

- Label1.ColorDeFondo: None (#FFFFFF00)

- Abrimos el archivo res/values/styles.xml y añadimos estas líneas:

<style name="AppTheme.Translucent" >
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:colorBackgroundCacheHint">@null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">@android:style/Animation</item>
</style>

- Abrimos el archivo AndroidManifest.xml y cambiamos estas líneas:

android:theme="@style/AppTheme.Translucent"

__________________________________