Android Question Design with Material 3?

pliroforikos

Active Member
Licensed User
Dear all,

Lately I've been trying to visually improve my applications using elements from material.io. Although I have searched a lot on the forum I have not been able to find anything that can help me on how to start using colors I have made in material.
What I have understood is that I can declare the colors in the manifest but from there I don't understand how it will be assigned to each object I put into my application. For example labels, panels, text boxes, custom list views or even the very nice libraries of many you.

So, i would be grategfull If you know any point to look and read about using the colors I declare in the manifes and If there is any tutorial related.

Thank you very much for any help.
 

pliroforikos

Active Member
Licensed User
I had a thought about making a theme file in material web page and the import it in files folder in my b4a. Then parse the xml file into a map and use it for coloring objects.
 
Upvote 0

pliroforikos

Active Member
Licensed User
I' ve made some work.
So bellow there is a class that opens a material-theme.json file as the one you can produce from material.io. You can use it in order to get all colors from json and use it as you like. The purpose of this is to change colors without writing code. Or you can have many jsons to change. Remember to put json file in 'files' folder.

Class themColors:
Sub Class_Globals
    Private xui As XUI
    Public themeStyle As String
    Public palettes As Map
    Public palettesPrimary As Map
    Public palettesSecondary As Map
    Public palettesTertiary As Map
    Public palettesNeutral As Map
    Public palettesNeutralvariant As Map
    
    Public schemes As Map
    
    Public light As Map
    Public light_medium_contrast As Map
    Public light_high_contrast As Map
    
    Public dark As Map
    Public dark_medium_contrast As Map
    Public dark_high_contrast As Map
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize()
    palettes.Initialize
    palettesPrimary.Initialize
    palettesSecondary.Initialize
    palettesTertiary.Initialize
    palettesNeutral.Initialize
    palettesNeutralvariant.Initialize

    schemes.Initialize

    light.Initialize
    light_medium_contrast.Initialize
    light_high_contrast.Initialize
    
    dark.Initialize
    dark_medium_contrast.Initialize
    dark_high_contrast.Initialize
End Sub

Public  Sub getFile(fn As String) As String
    Private strFileContent As String
    strFileContent = File.ReadString(File.DirAssets, fn)
    Log("File contains")
'    Log(strFileContent)
    Return(strFileContent)
End Sub


Public Sub getColors(fn As String)
    Dim json_str As String = getFile(fn)
    Dim parser As JSONParser
    parser.Initialize(json_str)
    
    Dim jRoot As Map = parser.NextObject
    Dim extendedColors As List = jRoot.Get("extendedColors")     'ignore
    Dim seed As String = jRoot.Get("seed")                         'ignore
    palettes                 = jRoot.Get("palettes")
    palettesSecondary         = palettes.Get("secondary")             'ignore
    palettesTertiary         = palettes.Get("tertiary")              'ignore
    palettesNeutral          = palettes.Get("neutral")                  'ignore
    palettesNeutralvariant     = palettes.Get("neutralvariant")          'ignore
    palettesPrimary         = palettes.Get("primary")                  'ignore
    
    Dim coreColors As Map = jRoot.Get("coreColors")                      'ignore
    LogColor(coreColors, xui.Color_Green)
    
    schemes = jRoot.Get("schemes")
    Log(schemes.Get("light"))
    
    light                      = schemes.Get("light")                      'ignore
    light_medium_contrast      = schemes.Get("light-medium-contrast")      'ignore
    light_high_contrast     = schemes.Get("light-high-contrast")        'ignore
    dark                     = schemes.Get("dark")                          'ignore
    dark_medium_contrast     = schemes.Get("dark-medium_contrast")          'ignore
    dark_high_contrast         = schemes.Get("dark-high_contrast")          'ignore
    
    LogColor(light, xui.Color_Cyan)
    LogColor(light_medium_contrast, xui.Color_Magenta)
    LogColor(light_high_contrast, xui.Color_Cyan)

End Sub



Public Sub ColorToHex(clr As Int) As String
    Dim bc As ByteConverter
    Return bc.HexFromBytes(bc.IntsToBytes(Array As Int(clr)))
End Sub

Public Sub HexToColor(Hex As String) As Int
    Dim bc As ByteConverter
    If Hex.StartsWith("#") Then
        Hex = Hex.SubString(1)
    Else If Hex.StartsWith("0x") Then
        Hex = Hex.SubString(2)
    End If
    If Hex.Length = 6 Then
        Hex = "FF" & Hex
    End If
    Dim ints() As Int = bc.IntsFromBytes(bc.HexToBytes(Hex))
    Return ints(0)
End Sub

Here is a small example
 

Attachments

  • Project.zip
    20.6 KB · Views: 35
Upvote 0

Spavlyuk

Active Member
Licensed User
As far as I know, to use the Material 3 theme in B4A you need to write custom wrappers for the material components.
These components make use of the colors as defined in the application's theme. It's certainly not an easy task but can be done.
 
Upvote 0
Top