Spanish [B4A] [Tutorial] Material Design - Actualizado AppCompact v3.30+ y B4A v6+

[rscheel]

Debido a que realizaron una consulta sobre este tema en el foro decidí hacer este breve turorial sobre Material Design. Para que todos tengan acceso a esta información.

Utilizar B4A v6+

Importante Es necesario actualizar su ANDROID SDK.

Tener en la biblioteca de librería b4a las siguientes librerías

* AppCompat => Descargar AppCompat_v3.52 Copiar en la carpeta de librería donde tengan instalado b4a, o en su carpeta de librerías adicionales.

Ej. C:\Program Files (x86)\Anywhere Software\B4A\Basic4android\Libraries.

* El siguiente paso es agregar a Manifest Editor

SetApplicationAttribute(android:theme, "@style/MyAppTheme")

CreateResource(values, theme.xml,
<resources>
    <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#0098FF</item>
        <item name="colorPrimaryDark">#007CF5</item>
        <item name="colorAccent">#AAAA00</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
</resources>
)

Tu Manifest Editor debería quedar mas o menos de la siguiente manera

AddManifestText(
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22"/>
<supports-screens android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
'End of default text.

SetApplicationAttribute(android:theme, "@style/MyAppTheme")

CreateResource(values, theme.xml,
<resources>
    <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#0098FF</item>
        <item name="colorPrimaryDark">#007CF5</item>
        <item name="colorAccent">#AAAA00</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
</resources>
)

* Al haber realizado lo anterior, en nuestro activity main debemos agregar la siguiente linea de código

#Extends: android.support.v7.app.AppCompatActivity

La estructura de nuestro Activity Main debiera ser la siguiente

#Region  Project Attributes
    #ApplicationLabel: AppCompat
    #VersionCode: 2
    #VersionName: 3.30
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Extends: android.support.v7.app.AppCompatActivity

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("layout1")
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

* Recuerden que deben tener seleccionado en Libraries Manager AppCompat(version: 3.30+) como muestra la imagen

* Muy importante que en su Android SDK Manager deben tener instalado Android Support Repository v36+
En la imagen se muestra v34, pero es necesario v36+ con la nueva version de AppCompact v3.30+.

* En este link encontraran un ejemplo completo.

* Y acá el tutorial de AppCompat original en ingles https://www.b4x.com/android/forum/t...compatible-with-older-android-versions.48423/

* Tutorial extra en Ingles

DesignSupport - Additional Material Design components

Todo esto es posible gracias al gran trabajo de @corwin42

 

[mvera]

hola , me pueden explicar en simple para que sirve esto?

gracias.

 

[rscheel]

@mvera para poder tener el diseño en tu aplicación material design, osea el diseño que tiene Android lollipop hacia arriba.

 

[ebqlabs]

pero si creo un diseño adecuado a una pantalla se vera bien. y que pasara si la pantalla de mi móvil es mas grande o pequeña, se deformara el diseño.

tienes alguna solucion? saludos..

 

[rscheel]

Utilizas el diseñador de B4A igual que al crear una app normal, o insertando por codigo, es lo mismo lo único que cambia es el diseño, el diseño material es el actual de android, y el antiguo diseño Holo ya esta quedando obsoleto. Y se te vera bien en cualquier pantalla.

 

[rscheel]

@ebqlabs prueba esta app de prueba mi me cuentas como se te ve.

LayoutPrueba

 

[ebqlabs]

te entiendo.

te preguntaba por que cuando realizaba mi app en diseño, en las otras pantallas se desformaba todo.
ahora realizo todo a codigo, ejemplo.

Dim titulo As Label
Activity.AddView(titulo,0%x,20%y,100%x,20%y)    
    titulo.Text = "Bienvenido Sistema"
    titulo.TextSize = 30
    titulo.Gravity = Gravity.CENTER_HORIZONTAL 'centrado
    titulo.TextColor = Colors.RGB (255, 255, 255) 'color de texto

Voy a probar el ejemplo que me mandaste y te adjunto la imagen, saludos

 

[ebqlabs]

se ve bien. pero si te fijas no se ve el botón. hay que realizar un srcoll para visualizarlo

 

[ebqlabs]

Faltan los archivos
android-support-v4.jar y android-support-v7-appcompat.jar

 

[rscheel]

Por favor lee las instrucciones de la publicación ahí esta toda la información.

Saludos.

 

[ebqlabs]

Seguí las instrucciones. la dirección la cambie según a mi carpeta. Mira el error

 

[rscheel]

@ebqlabs
Podrías adjuntar el codigo para revisarlo, y también si me puedes indicar si actualizaste primero la sdk y luego copiaste los archivos android-support-v4.jar y android-support-v7-appcompat.jar a tu carpeta de librería.

 

[ebqlabs]

Te muestro las imágenes de los paso, saludos

 

[rscheel]

Puedes colocar una captura del codigo donde estas dando la ruta a las librerías y una captura de Manifest Editor?

 

[ebqlabs]

es el mismo codigo, solo que yo le cambie la ruta hacia la mía

#Region  Project Attributes
    #ApplicationLabel: LayoutPrueba
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#AdditionalRes: ..\resource

'#AdditionalRes: C:\Program Files (x86)\Anywhere Software\B4A_5.5\Basic4android\Libraries\b4a_appcompat, de.amberhome.objects.appcompat
'#AdditionalRes: C:\SDK ANDROID\extras\android\support\v7\appcompat\res, android.support.v7.appcompat

#AdditionalRes:  C:\Program Files (x86)\Anywhere Software\Basic4android\Libraries\b4a_appcompat, de.amberhome.objects.appcompat
#AdditionalRes:     C:\Android\extras\android\support\v7\appcompat\res, android.support.v7.appcompat                  

#Extends: android.support.v7.app.ActionBarActivity

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

#If Java
public boolean _onCreateOptionsMenu(android.view.Menu menu) {
    if (processBA.subExists("activity_createmenu")) {
        processBA.raiseEvent2(null, true, "activity_createmenu", false, new de.amberhome.objects.appcompat.ACMenuWrapper(menu));
        return true;
    }
    else
        return false;
}
#End If

Sub Process_Globals
  
End Sub

y copio el link del error y me muestra esto:

Saludos

 

[rscheel]

A simple vista no se ve nada raro.
revisa lo de las imágenes.

 

[ebqlabs]

NO FUNCIONA, ME BAJE EL PROYECTO QUE SUBISTE COMO EJEMPLO. PERO NO FUNCIONA :/

 

[rscheel]

Dice que el appcompat que tienes es de la v21, y necesitas copiar el appcompat, v23, luego de actualizar una SDK siempre necesitas

NO FUNCIONA, ME BAJE EL PROYECTO QUE SUBISTE COMO EJEMPLO. PERO NO FUNCIONA :/

El problema esta en Configure Paths en android.jar me imagino que tu tienes la 21, necesitas colocar la ruta de la del 23

seria algo asi C:\SDK ANDROID\platforms\android-23\android.jar



Prueba con eso y me cuentas.

 

[ebqlabs]

Dice que el appcompat que tienes es de la v21, y necesitas copiar el appcompat, v23, luego de actualizar una SDK siempre necesitas


El problema esta en Configure Paths en android.jar me imagino que tu tienes la 21, necesitas colocar la ruta de la del 23

seria algo asi C:\SDK ANDROID\platforms\android-23\android.jar

View attachment 40527

Prueba con eso y me cuentas.

Toda la razón, FUNCIONA !! gracias... saludos

 

[rscheel]

Toda la razón, FUNCIONA !! gracias... saludos

Que bueno que funcionara, pronto agregare mas funcionalidades, como el menú drawer, etc.