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

rscheel · Dec 28, 2015

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

* 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 · Dec 28, 2015

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

gracias.

rscheel · Dec 28, 2015

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

ebqlabs · Jan 8, 2016

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 · Jan 8, 2016

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 · Jan 8, 2016

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

LayoutPrueba

ebqlabs · Jan 8, 2016

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 · Jan 8, 2016

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

ebqlabs · Jan 8, 2016

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

rscheel · Jan 8, 2016

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

Saludos.

ebqlabs · Jan 11, 2016

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

rscheel · Jan 11, 2016

@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 · Jan 11, 2016

Te muestro las imágenes de los paso, saludos

rscheel · Jan 11, 2016

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

ebqlabs · Jan 11, 2016

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:

Saludos

rscheel · Jan 11, 2016

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

ebqlabs · Jan 11, 2016

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

rscheel · Jan 12, 2016

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

ebqlabs said:
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 · Jan 13, 2016

rscheel said:
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 · Jan 13, 2016

ebqlabs said:
Toda la razón, FUNCIONA !! gracias... saludos

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

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

Well-Known Member

Attachments

Active Member

Well-Known Member

Active Member

Well-Known Member

Well-Known Member

Active Member

Active Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Attachments

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Similar Threads