B4A Library Android UI components 2024 - TUMMO UI

This is a collection of specialized tools for Android that programmers often use in the deployment of Android projects. While not a cross-platform tool, it will make B4A proficient members more convenient in creating professional and easily maintainable apps, saving a lot of time.
Below, I will provide a summary of the main functions of the TummoHelper toolkit - Release 1.62:

(1) ViewHelper: This tool serves as a bridge between resources and views, receiving resource IDs from the ResourceHelper class and connecting to views.
(2) ResourcesHelper: This class manages resources in a very easy way. Programmers can easily load any resources into views.
(3) RadialGradientHelper: A gradient color utility for Android. Besides helping to quickly and easily create gradient colors, the tool also integrates some available color templates for programmers to choose from.
(4) LayoutHelper: The LayoutHelper tool helps you load layouts into view groups like Panel, Activity, in a very convenient way.
(5) ColorsHelper: A tool that helps manage and convert various color types.
(6) AnimationHelper: Helps quickly create easy animations, which can be applied to almost any type of view.
-----------------------------------
Source code: https://github.com/tummosoft/TummoUI

1. Example: Animation loading...

Dim radius As Float
    Dim centerX As Float
    Dim centerY As Float
    Private xImageView1 As xImageView
 
    Dim anim As AnimationHelper
    anim.initialize("anim")

********
Sub SetAnimal(ball As Label)
    radius = 100dip
    centerX = (100dip + ball.Width) / 2.0
    centerY = (100dip + ball.Height) / 2.0
End Sub

Private Sub Button1_Click
    Dim target As Float = 0
    Dim theend As Float = 360
    SetAnimal(ball1)
    anim.startAccelerateDecelerateInterpolator(ball1,"anim", 1000, "rotation", target, theend)
 
End Sub

Sub anim_onAnimationUpdate(angle As Float)
    Log("rolate:" & angle)
    If ((angle > 160) And (angle < 180)) Then
        Dim target As Float = 0
        Dim theend As Float = 360
        SetAnimal(ball2)
        anim.startAccelerateDecelerateInterpolator(ball2,"anim2", 1000, "rotation", target, theend)
    End If
End Sub

Sub anim2_onAnimationUpdate(angle As Float)
 
    If ((angle > 160) And (angle < 180)) Then
        Dim target As Float = 0
        Dim theend As Float = 360
        SetAnimal(ball3)
        anim.startAccelerateDecelerateInterpolator(ball3,"anim3", 1000, "rotation", target, theend)
    End If
End Sub

Sub anim3_onAnimationUpdate(angle As Float)
 
    If ((angle > 160) And (angle < 180)) Then
        Dim target As Float = 0
        Dim theend As Float = 360
        SetAnimal(ball1)
        anim.startAccelerateDecelerateInterpolator(ball1,"anim", 1000, "rotation", target, theend)
    End If
 
End Sub

 

[tummosoft]

*******************
Updated: 2024/02/06
******************
DrawableHelper:
In the February 6, 2024 update I will add the DrawableHelper class.
These are method functions that help us draw Android vectors from xml format files without the need for resources.
With this function, we will help B4A's application have good resolution images.
For now, DrawableHelper only works well with ImageView (local).

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
    <path android:pathData="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10zM7.5 8.744C7.847 8.362 8.415 8 9.25 8c1.152 0 1.894 0.792 2.155 1.661 0.253 0.847 0.1 1.895-0.62 2.618-0.247 0.248-0.538 0.473-0.793 0.67l-0.04 0.031c-0.28 0.216-0.53 0.412-0.75 0.63-0.255 0.256-0.464 0.535-0.585 0.89h2.133c0.414 0 0.75 0.336 0.75 0.75S11.164 16 10.75 16h-3c-0.199 0-0.39-0.08-0.53-0.22C7.079 15.64 7 15.45 7 15.25c0-1.247 0.524-2.083 1.144-2.701 0.296-0.296 0.618-0.545 0.89-0.756l0.003-0.002c0.286-0.221 0.508-0.393 0.685-0.57 0.272-0.274 0.367-0.725 0.246-1.13C9.853 9.71 9.598 9.5 9.25 9.5c-0.353 0-0.535 0.137-0.64 0.253-0.06 0.065-0.1 0.132-0.125 0.18-0.012 0.024-0.02 0.041-0.022 0.049L8.46 9.985c-0.129 0.387-0.544 0.6-0.935 0.478-0.396-0.124-0.616-0.545-0.492-0.94L7.07 9.427C7.088 9.38 7.114 9.32 7.149 9.25 7.222 9.11 7.333 8.928 7.5 8.744zM13.25 8C13.664 8 14 8.336 14 8.75v2.75h1.5V8.75C15.5 8.336 15.836 8 16.25 8S17 8.336 17 8.75v6.47c0 0.415-0.336 0.75-0.75 0.75s-0.75-0.335-0.75-0.75V13h-2.25c-0.414 0-0.75-0.336-0.75-0.75v-3.5C12.5 8.336 12.836 8 13.25 8z" android:fillColor="@color/fluent_default_icon_tint"/>
</vector>

File.Copy(File.DirAssets, "ic_fluent_alert_24_regular.xml", File.DirInternalCache, "ic_fluent_alert_24_regular.xml")
    
    Dim f1 As String = File.Combine(File.DirInternalCache, "ic_fluent_alert_24_regular.xml")
    Dim bg5 As DrawableHelper
    bg5.initialize(f1)
    bg5.Width = 24dip
    bg5.Height = 24dip
    bg5.ViewportWidth = 24dip / 2
    bg5.ViewportHeight = 24dip / 2
    
    bg5.StrokeColor = Colors.Red
    ImageView4.Background = bg5.Drawable

 

[aeric]

*******************
Updated: 2024/02/06
******************
DrawableHelper:
In the February 6, 2024 update I will add the DrawableHelper class.
These are method functions that help us draw Android vectors from xml format files without the need for resources.
With this function, we will help B4A's application have good resolution images.
For now, DrawableHelper only works well with ImageView (local).

View attachment 150408

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
    <path android:pathData="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10zM7.5 8.744C7.847 8.362 8.415 8 9.25 8c1.152 0 1.894 0.792 2.155 1.661 0.253 0.847 0.1 1.895-0.62 2.618-0.247 0.248-0.538 0.473-0.793 0.67l-0.04 0.031c-0.28 0.216-0.53 0.412-0.75 0.63-0.255 0.256-0.464 0.535-0.585 0.89h2.133c0.414 0 0.75 0.336 0.75 0.75S11.164 16 10.75 16h-3c-0.199 0-0.39-0.08-0.53-0.22C7.079 15.64 7 15.45 7 15.25c0-1.247 0.524-2.083 1.144-2.701 0.296-0.296 0.618-0.545 0.89-0.756l0.003-0.002c0.286-0.221 0.508-0.393 0.685-0.57 0.272-0.274 0.367-0.725 0.246-1.13C9.853 9.71 9.598 9.5 9.25 9.5c-0.353 0-0.535 0.137-0.64 0.253-0.06 0.065-0.1 0.132-0.125 0.18-0.012 0.024-0.02 0.041-0.022 0.049L8.46 9.985c-0.129 0.387-0.544 0.6-0.935 0.478-0.396-0.124-0.616-0.545-0.492-0.94L7.07 9.427C7.088 9.38 7.114 9.32 7.149 9.25 7.222 9.11 7.333 8.928 7.5 8.744zM13.25 8C13.664 8 14 8.336 14 8.75v2.75h1.5V8.75C15.5 8.336 15.836 8 16.25 8S17 8.336 17 8.75v6.47c0 0.415-0.336 0.75-0.75 0.75s-0.75-0.335-0.75-0.75V13h-2.25c-0.414 0-0.75-0.336-0.75-0.75v-3.5C12.5 8.336 12.836 8 13.25 8z" android:fillColor="@color/fluent_default_icon_tint"/>
</vector>

File.Copy(File.DirAssets, "ic_fluent_alert_24_regular.xml", File.DirInternalCache, "ic_fluent_alert_24_regular.xml")
   
    Dim f1 As String = File.Combine(File.DirInternalCache, "ic_fluent_alert_24_regular.xml")
    Dim bg5 As DrawableHelper
    bg5.initialize(f1)
    bg5.Width = 24dip
    bg5.Height = 24dip
    bg5.ViewportWidth = 24dip / 2
    bg5.ViewportHeight = 24dip / 2
   
    bg5.StrokeColor = Colors.Red
    ImageView4.Background = bg5.Drawable

Great. This is similar to SVG.

 

[tummosoft]

Great. This is similar to SVG.

Yes, In addition, directly reading the xml file will be more useful.

 

[tummosoft]

UPDATED ON 2024-02-07
***********************
In this update we add 2 static classes, including: ResourcesHelper and ColorsHelper

* ResourcesHelper:
This is a class that helps applications work directly with Resources files like on Android Studio.
Using Resources has many benefits in cases where the app is complex, has a lot of resources, and also helps you easily design beautiful UI.
To use resource files with B4A, you need to copy the resource files into the Objects\res folder and set the ReadOnly property for the folder.
In the example, I have attached a set of resources that I tested with the example using B4A. If necessary, please download and test.

- Here are a few rules to get the resource ID:
+ ResourcesHelper.getResourceId(Resources Name, Resources Type):
All image, android vector, gradient color resources will be contained in the Redrawable folder
For Drawable, Resources Name = filename prefix;
Example:
ResourcesHelper.getResourceId("icon","drawable") -> icon.png
ResourcesHelper.getResourceId("test","drawable") -> test.xml

+ Get string id:
ResourcesHelper.getResourceId("app_name","string")

+ Get color id:
ResourcesHelper.getResourceId("black","color")

* ColorsHelper: Like its name, ColorsHelper helps convert color types.

Dim tuUtils As ResourcesHelper
    tuUtils.initialize
    
    Dim findIDDrawable As Int = tuUtils.getResourceId("icon","drawable")   
    Log("ID=" & findIDDrawable)
    ImageView1.Background = tuUtils.getDrawable(findIDDrawable)
    
    Dim findIDString As Int = tuUtils.getResourceId("app_name","string")   
    Log(findIDString)
    Log(tuUtils.getString(findIDString))
    
    Dim findIDColor As Int = tuUtils.getResourceId("black","color")
    Log(findIDColor)
    Log(tuUtils.getString(findIDColor))
    
    
    Dim findIDVector As Int = tuUtils.getResourceId("test","drawable")
    Log(findIDVector)
    TummoView1.ImageDrawable = tuUtils.getVectorDrawable(findIDVector)
    
    Dim gradientt As Int = tuUtils.getResourceId("gradientbg","drawable")
    Log(gradientt)
    Panel2.Background = tuUtils.getDrawable(gradientt)

 

[tummosoft]

UPDATED ON 2024-02-10
***********************
In the new update, we introduce a new functional class: ViewHelper.
ViewHelper static class is responsible for bridging between navite Android widget and B4XView. This way we can catch events, using native Android directly.

Mothod
*****************
ViewHelper.ViewHelperFromViewStub
ViewHelper.ViewHelperFromViewStub2
ViewHelper.ViewHelperFromViewStub3
ViewHelper.calculateViewScreenLocation
ViewHelper.clearAllViewLongClick
ViewHelper.clearValueAnimator
ViewHelper.clearViewLongClick
ViewHelper.expendTouchArea
ViewHelper.fadeIn
ViewHelper.fadeOut
ViewHelper.getActivityRoot
ViewHelper.playBackgroundBlinkAnimation
ViewHelper.requestApplyInsets
ViewHelper.safeSetImageViewSelected
ViewHelper.setBackground
ViewHelper.setBackgroundColorKeepPadding
ViewHelper.setBackgroundKeepingPadding
ViewHelper.setChecked
ViewHelper.setEnabled
ViewHelper.setImageDrawable
ViewHelper.setImageLevel
ViewHelper.setImageResource
ViewHelper.setImageTint
ViewHelper.setImageViewTintColor
ViewHelper.setOnCheckedChangeListener
ViewHelper.setPadding
ViewHelper.setPaddingBottom
ViewHelper.setPaddingRight
ViewHelper.setText
ViewHelper.setViewTextFont
ViewHelper.setViewsFont
ViewHelper.setVisibility
ViewHelper.slideIn
ViewHelper.slideOut
ViewHelper.textColorId

Activity.LoadLayout("testlayout")
    Dim cts As LayoutHelper
    cts.initialize
           
    tuUtils.initialize
    Dim layouID As Int = tuUtils.getResourceId("layout_ex","layout")
   
    Log(layouID)
   
    btnnewOK.Initialize("btnOK")
    cts.CustomLayout(Activity, layouID)
   
    For Each v As View In Activity.GetAllViewsRecursive
        Log("TAG=" & v.Tag)
        If v.Tag <>  Null Then
            If v.Tag = "Extends layout" Then
                v.BringToFront
                Dim findView As ViewHelper
                Dim textID As Int = tuUtils.getResourceId("txtextbox","id")
                Log("What's ID: " &  textID)
                Dim bv As B4XView = findView.findViewFromViewStub(v, textID, textID)
                bv.Color = Colors.Cyan
               
                'Find button
                Dim buttonid As Int = tuUtils.getResourceId("btnOK","id")
                btnnewOK = findView.findViewFromViewStub3("btnOK", v, buttonid, buttonid)
               
            End If
        End If
    Next

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.MainActivity" >

    <!--
         As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions.
    -->
    <TextView android:id="@+id/txtextbox"
        android:layout_width="wrap_content"
        android:layout_height="50dp"      
        android:text="hello_world" />
       
        <Button android:id="@+id/btnOK"
        android:layout_width="wrap_content"
        android:layout_height="50dp"      
        android:text="CLICK ME!" />
</RelativeLayout>

 

[tummosoft]

*******************
Updated: 2024/02/22
******************
In this update, we added 2 more components:
(1) ImageButton (No text)
(2) ImageButton (support text and custom icon font): You can use any icon font you like.R
Required extends: AppCompact, xButton.arr

 

[tummosoft]

*******************
Updated: 2024/02/23
******************
New component: Toast message

Private xToastView1 As xToastView
    xToastView1.initialize(25, 200)   
    xToastView1.BitmapIcon(LoadBitmap(File.DirAssets, "icons8-database-48.png"), 25dip, 25dip)
    Dim bg As ColorDrawable
    bg.Initialize(Colors.RGB(40,53,68), 18dip)   
    xToastView1.Background = bg   
    xToastView1.TextColor = Colors.RGB(255,127,59)
    xToastView1.TextSize = 10
        
    xToastView1.CreateView()
    xToastView1.Show("Database was not configured through database method", 200)

 

[tummosoft]

*******************
Updated: 2024/02/24
******************
New component: Grid layout

Grid layout will help you essay to manage item groups. It very simple and easy!

Private xGridView1 As xGridView
Dim lstItem As List
    lstItem.Initialize
    Dim w As Int = (100%x / 4) - 40
    Dim h As Int =  w * 1.5
    Dim bg As ColorDrawable
    bg.Initialize(Colors.RGB(34,52,90), 12dip)
   
    For i=0 To 15
        Dim pnl As Panel
        pnl.Initialize("")
        pnl.Width = w
        pnl.Height = h
        pnl.Background = bg
        pnl.Elevation = 2dip
       
        Dim img As ImageView
        img.Initialize("")
        img.Gravity = Gravity.FILL
        img.Bitmap = LoadBitmap(File.DirAssets, "icons8-google-96.png")
        pnl.AddView(img, 5dip, 5dip, w - 10dip, w - 10dip)
       
        Dim lbl As Label
        lbl.Initialize("")
        lbl.Text = "Grid layout - Item " & i
        lbl.TextSize = 12
        lbl.Color = Colors.RGB(63,213,52)
        lbl.TextColor = Colors.White
        lbl.Gravity = Gravity.CENTER
        pnl.AddView(lbl, 0,w, w,  30dip)
       
        lstItem.Add(pnl)
    Next
   
    xGridView1.ColumnWidth = 40%x
    xGridView1.NumColumns = 4
    xGridView1.Color = Colors.White
    xGridView1.VerticalSpacing = 10dip
    xGridView1.HorizontalSpacing = 10dip  
    xGridView1.Padding = 10dip
    xGridView1.Items = lstItem

 

[tummosoft]

*******************
Updated: 2024/02/24
******************
New component: Table layout

Private xTableLayout1 As xTableLayout

Dim colWidth() As Int = Array As Int(30dip,30%x,70%x - 30dip)
    
    Dim lblTitle As Label
    lblTitle.Initialize("")
    lblTitle.Text = "xTableLayout (TUMMO UI)"
    lblTitle.TextColor = Colors.Red
    
    lblTitle.Gravity = Gravity.CENTER
    
    xTableLayout1.AddRow(lblTitle)
    
    For i=0 To 25
        If (i Mod 3) = 0 Then
            Dim row1 As List
            row1.Initialize
            
            Dim img1 As ImageView
            img1.Initialize("")
            img1.Bitmap = LoadBitmap(File.DirAssets, "icons8-bell-96.png")
            img1.Width = 30dip
            img1.Height = 20dip           
            img1.tag = "Img " & i
            img1.Gravity = Gravity.FILL + Gravity.CENTER
            
            Dim Label2 As Label
            Label2.Initialize("")
            Label2.Text = "Key " & i
            Label2.tag = "Key " & i
            Label2.TextSize = 12
            Label2.Color = Colors.Transparent
            
            Dim Label3 As Label
            Label3.Initialize("")
            Label3.Text = "Value " & i
            Label3.TextSize = 12
            Label3.tag = "Value " & i
            Label3.Color = Colors.Transparent
            
            row1.Add(img1)
            row1.Add(Label2)
            row1.Add(Label3)
            xTableLayout1.RowColor = Colors.RGB(0,222,215)
            xTableLayout1.ColWidth = colWidth
            xTableLayout1.ColHeight = 25dip
            xTableLayout1.RowPadding(5dip)
            xTableLayout1.AddRows(row1)
            
        End If
        
    Next

 

[tummosoft]

*******************
Updated: 2024/02/27
******************
New component: ConstraintLayout
The next update today is ConstraintLayout, a new, modern layout that makes it possible to design complex interfaces.
I tried to create an programmatically layout, however, ConstraintLayout is a rather complex layout. And this intention is probably for next time.

Activity.LoadLayout("xConstraintLayout")
    Dim cts As LayoutHelper
    cts.initialize
Private xConstraintLayout2 As xConstraintLayout
    xConstraintLayout2.initialize("")
    Activity.AddView(xConstraintLayout2, 0, 0, 100%x, 100%y)
    Dim tuUtils As ResourcesHelper
    tuUtils.initialize
  
    Dim layouID As Int = tuUtils.getResourceId("constraintlayout","layout") 
    Log(layouID)
    cts.AddConstraintLayout(xConstraintLayout2, layouID)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#0D459B"
        android:text="Hero TextView"
        android:gravity="center"
        android:textColor="#ffffff"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#209B0D"
        android:text="I'm a center TextView"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="#EAEA1F"
        android:text="I am Textview 3"
        android:gravity="center"
        android:textColor="#fff"
        android:layout_marginLeft="10dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv2"
        app:layout_constraintLeft_toRightOf="@+id/tv2" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

[tummosoft]

*******************
Updated: 2024/03/10
******************
1- Animation Helper

anim.getAnim(resourceID As Int)
anim.getAnimatedStateListDrawable(resourceID As Int)
anim.getDrawableAnimation(resourceID As Int)
anim.setAnimatorOfFloat(view, duảtion, proper, frame1, frame2, frame3)
anim.setRotation(view, degree)
anim.slideIn(view, degree, duration, direction)
anim.slideOut(view, event, duration, direction)
anim.startAccelerateDecelerateInterpolator(view, event, duration, effect, start, EndP)
anim.startAccelerateInterpolator(view, event, duration, effect, start, EndP)
anim.startAlpha(view, event, duration, effect, start, EndP)
anim.startAnticipateInterpolator(view, event, duration, effect, start, EndP)
anim.startBounceInterpolator(view, event, duration, effect, start, EndP)
anim.startCollapse(view, event, duration, effect, start, EndP)
anim.startCycleInterpolator(view, event, duration, effect, start, EndP)
anim.startDecelerateInterpolator(view, event, duration, effect, start, EndP)
anim.startExpansion(view, event, duration, effect, start, EndP)
anim.startFlip(view, event, duration, effect, start, EndP)
anim.startFyling(view, event, duration, effect, start, EndP)
anim.startLinearInterpolator(view, event, duration, effect, start, EndP)
anim.startMoveX(view, event, duration, effect, start, EndP)
anim.startRotate(view,degree)
anim.stopRotate


2- Animation Example

Dim anim As AnimationHelper
Private hasstarted As Boolean
Private ball As ImageView

Activity.LoadLayout("Layout")
' ANIMATION EXAMPLE
' ------------------------------------
   
Dim clrshelp As ColorsHelper
anim.initialize("anim")
ball.Width =25dip
ball.Height = 25dip

Private Sub Button1_Click  
    anim.startAnticipateInterpolator(ball, "anim",2000, "scaleX", 0, 1)
    anim.startAnticipateInterpolator(ball, "anim",2000, "scaleY", 0, 1)
End Sub

Sub anim_OnAnimationupdate(anivalue As Float)
    'ball.Width = (anivalue / 50) * 100
    'ball.Height = (anivalue / 50) * 100
   
    If anivalue > 0.8 Then
        If hasstarted = False Then
            anim.startAnticipateInterpolator(ball, "anim2",3000, "translationY", 0, ball.Top + 50dip)
            hasstarted = True
        End If
       
    End If
End Sub

Sub anim2_OnAnimationupdate(anivalue As Float)  
    If anivalue > 0.8 Then
        If hasstarted = False Then
            hasstarted = True
            anim.startAnticipateOvershootInterpolator(ball, "",2000, "translationY", 0, ball.Top - 5dip)
        End If
       
    End If
End Sub

 

[tummosoft]

*******************
Updated: 2024/03/10
******************
1- RadialGradientHelper
There are B4A buttons custom by RadialGradient color

Dim clr As RadialGradientHelper
    clr.initialize()
    'mTopLeftRadius, mTopLeftRadius, mTopRightRadius, mTopRightRadius, mBottomRightRadius, mBottomRightRadius, mBottomLeftRadius, mBottomLeftRadius
    Dim radis() As Float  = Array As Float(16.0f,8.0f,8.0f,8.0f,8.0f,8.0f,8.0f,8.0f)
    clr.Radius = radis
    clr.setGradientCenter(5,5)
    clr.Orientation = clr.Orientation_TL_BR
    Dim cl() As String  = Array As String("#00F9E5","#6772FF","#4A54FF")
    clr.Colors = cl
    clr.setStroke(2dip, "#6772FF")
    Button1.Background = clr
   
    Dim clr1 As RadialGradientHelper
    clr1.initialize()
    'mTopLeftRadius, mTopLeftRadius, mTopRightRadius, mTopRightRadius, mBottomRightRadius, mBottomRightRadius, mBottomLeftRadius, mBottomLeftRadius
    Dim radis1() As Float  = Array As Float(16.0f,8.0f,8.0f,8.0f,8.0f,8.0f,8.0f,8.0f)
    clr1.Radius = radis
    clr1.setGradientCenter(10dip,5dip)
    clr1.Orientation = clr.Orientation_BOTTOM_TOP
    Dim cl1() As String  = Array As String("#1AB99E","#6BDFC9","#78FAE1","#1AB99E","#24B598")
    clr1.Colors = cl1
    clr1.setStroke(2dip, "#1FBA9A")
    Button2.Background = clr1

 

[tummosoft]

*******************
Updated: 2024/03/11
******************

1. Create a loadingview with TummoHelper (B4A code)

Activity.LoadLayout("layout_wellcome")
    Dim anim As AnimationHelper
    Dim cts As LayoutHelper
    cts.initialize
   
    Dim tuUtils As ResourcesHelper
    tuUtils.initialize
    Dim bgclrs As Int = tuUtils.getResourceId("background_wellcome","drawable")
   
    Activity.Background = tuUtils.getDrawable(bgclrs)
     
    Dim deltaX As Float = rec1.Width * 0.866f
    Dim deltaY As Float = rec1.Width * 0.5f '// sin(30)
   
    anim.initialize("anim")
    anim.startTranslateAnimation(rec1, "", 1000, - deltaX, - deltaY, False)
    anim.startTranslateAnimation(rec4, "anim1", 1000, deltaX, deltaY, False)
   
    Dim clrs As ColorsHelper
    clrs.initialize
    Dim vHelper As ViewHelper
    vHelper.init(Null)
   
    rec1.Color = clrs.ColorStringToINT("#F6995C")  
   
    rec2.Color = clrs.ColorStringToINT("#F7418F")  
    rec3.Color = clrs.ColorStringToINT("#003f5c")
    rec4.Color = clrs.ColorStringToINT("#FFF3C7")

Sub anim1_OnAnimationStart()
   
End Sub

Sub anim1_OnAnimationEnd()
    Dim deltaX As Float = rec2.Width * Sin(210)
    Dim deltaY As Float = rec3.Width * Cos(210) '// sin(30)
    anim.startTranslateAnimation(rec2, "", 1000, deltaX, deltaY, False)
    anim.startTranslateAnimation(rec3, "anim2", 1000, - deltaX, - deltaY, False)
End Sub

Sub anim2_OnAnimationEnd()
    Dim deltaX As Float = rec1.Width * 0.866f
    Dim deltaY As Float = rec1.Width * 0.5f '// sin(30)
   
    anim.initialize("anim")
    anim.startTranslateAnimation(rec1, "", 1000, - deltaX, - deltaY, False)
    anim.startTranslateAnimation(rec4, "anim1", 1000, deltaX, deltaY, False)
End Sub

 

[tummosoft]

This is the source codes, if you need to make changes according to personal requirements, please make a clone.
We are still developing these source code for our the project, and will continue to be updated!
Have a nice day!
https://github.com/tummosoft/TummoUI

 

[paragkini]

DrawableHelper:
In the February 6, 2024 update I will add the DrawableHelper class.
These are method functions that help us draw Android vectors from xml format files without the need for resources.
With this function, we will help B4A's application have good resolution images.
For now, DrawableHelper only works well with ImageView (local).

From Assets :
hinh-nen-hoa-bo-cong-anh-dep-nhat_104951494.jpg: Unable to find the specified file.
logo.png: Unable to find the specified file.
lotus.png: Unable to find the specified file.
OIP (1).jpg: Unable to find the specified file.
R.jpg: Unable to find the specified file.

#AdditionalJar: nio-1.0.4.jar - Unable to find.

 

[tummosoft]

From Assets :
hinh-nen-hoa-bo-cong-anh-dep-nhat_104951494.jpg: Unable to find the specified file.
logo.png: Unable to find the specified file.
lotus.png: Unable to find the specified file.
OIP (1).jpg: Unable to find the specified file.
R.jpg: Unable to find the specified file.

#AdditionalJar: nio-1.0.4.jar - Unable to find.

The nio-1.0.4.jar attached on this post, there are some images you can replace any photos.

 

[paragkini]

The nio-1.0.4.jar attached on this post, there are some images you can replace any photos.

Thanks. Have got it working without nio-1.0.4.jar just by commenting additional jar and it worked. Not sure what is the purpose of this jar though. App is working very well without the same.

Thanks again.

 

[Mehrzad238]

when I tried to run I ran into an error:

Could not find file 'C:\Program Files\Anywhere Software\B4A\libraries\constraintlayout-2.1.4.aar'.

something is missing

the libraries are:

 

[tummosoft]

Updated: 2024/11/30
Source: https://github.com/tummosoft/TummoUI
--------
1* New componnent: xButtonImage
- Event: Click (view as Object), LongClick (view as Object)

2* New componnent: xButton
- Event: Click (view as Object), LongClick (view as Object)

3* Examples: Create NavigationBar with TummoView, TummoHelper

Activity.LoadLayout("xConstraintLayout")
   
    Dim w As Int = 100%x / 4
    Dim left As Int = (w - 15dip) / 2
   
    Dim tuUtils As ResourcesHelper
    tuUtils.initialize
   
    Dim bottombar As xNavigationBar
    bottombar.initialize("bottombar")
    Dim iconhome As Int = tuUtils.getResourceId("home","drawable")
    Dim iconhistory As Int = tuUtils.getResourceId("clock","drawable")
    Dim iconfave As Int = tuUtils.getResourceId("fave","drawable")
    Dim iconbook As Int = tuUtils.getResourceId("book","drawable")
    Dim iconbg As Int = tuUtils.getResourceId("bg","drawable")
   
    Dim draw As DrawableHelper
    draw.initialize("draw")
   
    Dim clr2 As GradientHelper
    clr2.initialize(clr2.Orientation_BOTTOM_TOP)
    clr2.setGradientCenter(5,5)
    clr2.Orientation = clr2.Orientation_TL_BR
    Dim cl2() As String  = Array As String("#FAC54B","#FED26C","#C85637")
    clr2.Colors = cl2
    bottombar.BackgroundDrawable = clr2
   
    For i=0 To 3
        Dim buttonBar As xButtonImage
        buttonBar.initialize("buttonBar")      
        buttonBar.TagName = "Item " & i      
        If (i = 0) Then
            buttonBar.ImageResourceID = iconhome
        else if (i = 1) Then
            buttonBar.BackgroundDrawable = draw.getDrawable(iconhistory)
        else if (i = 2) Then
            buttonBar.BackgroundDrawable = draw.getDrawable(iconfave)
        else if (i = 3) Then
            buttonBar.BackgroundDrawable = draw.getDrawable(iconbook)
        End If
       
        Dim pnlWrapper As Panel
        pnlWrapper.Initialize("pnlWrapper")
        pnlWrapper.AddView(buttonBar, left,5dip,15dip, 15dip)
        pnlWrapper.Color = Colors.Transparent
       
        bottombar.AddView(pnlWrapper)
       
    Next
   
    bottombar.setPadding(0, 10dip, 0dip, 10dip)
    'bottombar.setMargins(30dip, 0, 30dip, 0)
    bottombar.Build()
   
    Activity.AddView(bottombar,0,100%y-35dip, 100%x, 35dip)

https://github.com/tummosoft/TummoUI