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

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


ezgif-5-510b1fddb7.gif
 

Attachments

  • Animation_xample1.zip
    4.2 KB · Views: 33
  • Android_Library.zip
    101.9 KB · Views: 54
Last edited:

tummosoft

Member
Licensed User
Longtime User
*******************
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).

drawablehelper - Copy.png


Android XML Vector:
<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>

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

Attachments

  • TummoUI-2024-02-26.zip
    21.9 KB · Views: 45
  • Example_2.zip
    19.1 KB · Views: 47

aeric

Expert
Licensed User
Longtime User
*******************
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

Android XML Vector:
<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>

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

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

test.png


ResourcesHelper:
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)
 

Attachments

  • res.zip
    10.9 KB · Views: 47
  • Exeample.zip
    11.4 KB · Views: 37
  • B4Alib_2023_02_07.zip
    28.5 KB · Views: 43

tummosoft

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

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


XML layout:
<!-- 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>
 

Attachments

  • TummoUI-2024-02-10.zip
    46.9 KB · Views: 53
Last edited:
  • Like
Reactions: byz

tummosoft

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


button.png


profiles.png
 

Attachments

  • xbutton.zip
    167.2 KB · Views: 44
  • TummoUI.zip
    55.2 KB · Views: 41
  • Example.zip
    401.6 KB · Views: 45

tummosoft

Member
Licensed User
Longtime User
*******************
Updated: 2024/02/23
******************
New component: Toast message

toast1.png


toast2.png



ToastView:
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)
 

Attachments

  • TUMMO_UI.zip
    56.2 KB · Views: 33

tummosoft

Member
Licensed User
Longtime User
*******************
Updated: 2024/02/24
******************
New component: Grid layout

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

gridlayout.png


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

Attachments

  • Example.zip
    407.3 KB · Views: 37
  • TUMMO_UI.zip
    64.6 KB · Views: 36

tummosoft

Member
Licensed User
Longtime User
*******************
Updated: 2024/02/24
******************
New component: Table layout


table2.png


table1.png


Private xTableLayout1 As xTableLayout:
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
 

Attachments

  • TUMMO_UI.zip
    68 KB · Views: 38
  • Example.zip
    408.6 KB · Views: 32

tummosoft

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

ConstraintLayout:
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)

ConstraintLayout.xml:
<?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>

layout.png
 

Attachments

  • layout.png
    layout.png
    15.8 KB · Views: 21
  • TUMMO_UI.zip
    78.2 KB · Views: 27

tummosoft

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

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

v11.gif
 

Attachments

  • Android_Library.zip
    101.9 KB · Views: 22
  • Examp_Animation.zip
    45.9 KB · Views: 24

tummosoft

Member
Licensed User
Longtime User
*******************
Updated: 2024/03/10
******************
1- RadialGradientHelper
There are B4A buttons custom by RadialGradient color
button.png

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

Attachments

  • Examples.zip
    3.5 KB · Views: 28

tummosoft

Member
Licensed User
Longtime User
*******************
Updated: 2024/03/11
******************

1. Create a loadingview with TummoHelper (B4A code)

ezgif-5-aa493244b0.gif


LoadingView:
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")

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

Attachments

  • res.zip
    54.9 KB · Views: 35
  • BALibrary.zip
    106.3 KB · Views: 38
  • Example_2.zip
    21 KB · Views: 34

paragkini

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

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

Attachments

  • nio-1.0.4.jar
    8.2 KB · Views: 34

paragkini

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

Member
when I tried to run I ran into an error:
B4X:
Could not find file 'C:\Program Files\Anywhere Software\B4A\libraries\constraintlayout-2.1.4.aar'.

something is missing

the libraries are:

Screenshot 2024-03-21 192936.png
 
Top