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

rscheel

Well-Known Member
Licensed User
Longtime User
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

B4X:
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

B4X:
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

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


La estructura de nuestro Activity Main debiera ser la siguiente

B4X:
#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

libreria.PNG


* 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+.


extras.PNG


* 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
 

Attachments

  • Screenshot_2015-12-28-12-32-47.png
    Screenshot_2015-12-28-12-32-47.png
    47.6 KB · Views: 1,675
Last edited:

mvera

Active Member
Licensed User
Longtime User
hola , me pueden explicar en simple para que sirve esto?

gracias.
 

rscheel

Well-Known Member
Licensed User
Longtime User
@mvera para poder tener el diseño en tu aplicación material design, osea el diseño que tiene Android lollipop hacia arriba.

Screenshot_2015-12-28-12-32-47.png
 

ebqlabs

Active Member
Licensed User
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

Well-Known Member
Licensed User
Longtime User
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.
 

ebqlabs

Active Member
Licensed User
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.

B4X:
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

Active Member
Licensed User
zu0952.png


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

ebqlabs

Active Member
Licensed User
Faltan los archivos
android-support-v4.jar y android-support-v7-appcompat.jar
 

rscheel

Well-Known Member
Licensed User
Longtime User
Por favor lee las instrucciones de la publicación ahí esta toda la información.

Saludos.
 

ebqlabs

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

npq1s3.jpg
 

rscheel

Well-Known Member
Licensed User
Longtime User
@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

Active Member
Licensed User
Te muestro las imágenes de los paso, saludos
 

Attachments

  • imagenes.zip
    398.4 KB · Views: 658
  • images2.zip
    378.8 KB · Views: 596

rscheel

Well-Known Member
Licensed User
Longtime User
Puedes colocar una captura del codigo donde estas dando la ruta a las librerías y una captura de Manifest Editor?
 

ebqlabs

Active Member
Licensed User
es el mismo codigo, solo que yo le cambie la ruta hacia la mía
B4X:
#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:

2u9u58m.jpg


Saludos
 

rscheel

Well-Known Member
Licensed User
Longtime User
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

Captura.PNG

Prueba con eso y me cuentas.
 

ebqlabs

Active Member
Licensed User
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
 
Top