B4A Library [B4X] [XUI] AS AppSummary

This library is used to describe the 3 or 4 most important functions of the app to the user the first time they use it, as an onboarding measure.

The library can also be used as an update log if you have released a major update and want to inform the user which new things are now in the app.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee. :)

(51) mage.png
(52) mage.png
1743422289771.png

Examples
Code: Copy 
    AS_AppSummary1.SetTitleText("Welcome to"," Parcel ","!")
 
    AS_AppSummary1.AddItem("Supported worldwide","With more than 320 delivery agents supported, you can be sure that your next delivery will be tracked via Parcel.",AS_AppSummary1.FontToBitmap(Chr(0xE894),True,35,AS_AppSummary1.ItemIconProperties.Color),"")
    AS_AppSummary1.AddItem("Powerful functions","Daily payers, barcode scanners, card support and many other functions make tracking much easier.",AS_AppSummary1.FontToBitmap(Chr(0xF02A),False,35,AS_AppSummary1.ItemIconProperties.Color),"")
    AS_AppSummary1.AddItem("Push notifications","With a Premium subscription, receive push notifications when there is news about the delivery.",AS_AppSummary1.FontToBitmap(Chr(0xE7F4),True,35,AS_AppSummary1.ItemIconProperties.Color),"")
 
    AS_AppSummary1.ConfirmButtonText = "Start using Parcel"
 
    AS_AppSummary1.Refresh
B4X: Copy 
    AS_AppSummary1.SetTitleText("Welcome to"," Parcel ","!")
 
    Dim Item_Feature1 As AS_AppSummary_Item : Item_Feature1.Initialize
    Item_Feature1.Name = "Supported worldwide"
    Item_Feature1.Description = "With more than 320 delivery agents supported, you can be sure that your next delivery will be tracked via Parcel."
    Item_Feature1.Icon = AS_AppSummary1.FontToBitmap(Chr(0xE894),True,35,AS_AppSummary1.ItemIconProperties.Color)
    AS_AppSummary1.AddItemAdvanced(Item_Feature1)
 
    Dim Item_Feature2 As AS_AppSummary_Item : Item_Feature2.Initialize
    Item_Feature2.Name = "Powerful functions"
    Item_Feature2.Description = "Daily payers, barcode scanners, card support and many other functions make tracking much easier."
    Item_Feature2.Icon = AS_AppSummary1.FontToBitmap(Chr(0xF02A),False,35,AS_AppSummary1.ItemIconProperties.Color)
    AS_AppSummary1.AddItemAdvanced(Item_Feature2)
 
    Dim Item_Feature3 As AS_AppSummary_Item : Item_Feature2.Initialize
    Item_Feature3.Name = "Push notifications"
    Item_Feature3.Description = "With a Premium subscription, receive push notifications when there is news about the delivery."
    Item_Feature3.Icon = AS_AppSummary1.FontToBitmap(Chr(0xE7F4),True,35,AS_AppSummary1.ItemIconProperties.Color)
    AS_AppSummary1.AddItemAdvanced(Item_Feature3)
 
    AS_AppSummary1.ConfirmButtonText = "Start using Parcel"
 
    AS_AppSummary1.Refresh

Images, Placeholder, Title and Descriptions

[B4X] AS AppSummary - Images, Placeholder, Title and Descriptions

https://www.b4x.com/android/forum/threads/b4x-xui-as-appsummary.158433/ In this example I will show you how you can use the new blocks in the AS_AppSummary to add something like this to your app: Yes, more code is not needed for this result ;) AS_AppSummary1.TitleTop = 0...
www.b4x.com www.b4x.com

AS_AppSummary
Author: Alexander Stolte
Version: 2.00
  • AS_AppSummary
    • Events:
      • ConfirmButtonClick
      • CustomDrawItem (Item As AS_AppSummary_Item, ItemViews As AS_AppSummary_ItemViews)
      • ItemClicked (Item As AS_AppSummary_Item)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddItem (Name As String, Description As String, Icon As B4XBitmap, Value As Object) As AS_AppSummary_Item
      • AddItemAdvanced (Item As AS_AppSummary_Item)
      • Base_Resize (Width As Double, Height As Double)
      • ClearItems
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
        Base type must be Object
      • FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color As Int) As B4XBitmap

        FontAwesome To Bitmap

        Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...
        www.b4x.com www.b4x.com
      • GetItemAt (Index As Int) As AS_AppSummary_Item
      • GetItemViews (Value As Object) As AS_AppSummary_ItemViews
        Gets the item views for a value
      • GetItemViews2 (Index As Int) As AS_AppSummary_ItemViews
        Gets the item views for a index
      • Initialize (Callback As Object, EventName As String)
      • Refresh
      • SetTitleText (Text1 As String, ColoredText As String, Text2 As String)
    • Properties:
      • BackgroundColor As Int
        Call Refresh if you change something
      • ConfirmButton As B4XView [read only]
      • ConfirmButtonColor As Int
        Call Refresh if you change something
      • ConfirmButtonText As String [write only]
      • ConfirmButtonTextColor As Int
        Call Refresh if you change something
      • HapticFeedback As Boolean
      • ItemDescriptionTextColor As Int
        Call Refresh if you change something
      • ItemIconProperties As AS_AppSummary_ItemIconProperties [read only]
        Call Refresh if you change something
      • ItemNameTextColor As Int
        Call Refresh if you change something
      • Theme As AS_AppSummary_Theme [write only]
      • Theme_Dark As AS_AppSummary_Theme [read only]
      • Theme_Light As AS_AppSummary_Theme [read only]
      • ThemeChangeTransition As String
        Fade or None
      • TitleColoredTextColor As Int
        Call SetTitleText if you change this property
      • TitleGap As Float
        Gap between list and title
        Default: 20dip
        Call Refresh if you change something
      • TitleTextColor As Int
        Call SetTitleText if you change this property
      • TitleTop As Float
        Default: 100dip
        Call Refresh if you change something
Changelog
  • 1.00
    • Release
  • 1.01
    • Add AddItemAdvanced
    • Add get ConfirmButton
    • Title Text BugFix
  • 2.00 (read more)
    • BugFixes
    • Breaking Change - Add Parameter "Value" to AddItem
    • Changed the items base to xCustomListView
      • You can now add as many items as you like, it is scrollable
    • Add get and set TitleTop
    • Add get and set TitleGap - Gap between list and title
    • Add set Theme
    • Add get Theme_Dark
    • Add get Theme_Light
    • Add Designer Property ThemeChangeTransition
      • Default: Fade
    • Add GetItemAt
    • Add Event ItemClicked
    • Add Designer Property HapticFeedback
      • Default: True
    • Add Event CustomDrawItem
    • Add Type AS_AppSummary_ItemViews
    • Add GetItemViews - Gets the item views for a value
    • Add GetItemViews2 - Gets the item views for a index
  • 2.01
    • New Designer Property ItemBackground
      • Default: None
      • Card - The item is displayed as a card with round borders
    • New Type AS_AppSummary_CardProperties
    • BugFix Title is now multiline
    • BugFixes and Improvements
  • 2.02
    • BugFixes and Improvements
    • Change Default Value to "None" for the ThemeChangeTransition property
    • New AddImageItem
    • New AddDescriptionItem
    • New AddTitleItem
    • New AddPlaceholder
    • New CreateViewPerCode
    • New Type AS_AppSummary_ImageItem
    • New Type AS_AppSummary_TitleItem
    • New Type AS_AppSummary_TitleProperties
    • New Type AS_AppSummary_DescriptionItem
    • New Type AS_AppSummary_DescriptionProperties
Have Fun :)
 

Attachments

Last edited:
Click to expand...
Another great lib. Thanks!

Can I scroll the information in the screen?
I tried to put more items, but is I can't scroll.

1704464742345.png
 
asales said:
Can I scroll the information in the screen?
Click to expand...
No, because this page should be compact and concise. You can display several AS_AppSummary views one after the other if you really want to display so many things to the user.
 
Alexander Stolte said:
This library is used to describe the 3 or 4 most important functions of the app to the user the first time they use it, as an onboarding measure.

The library can also be used as an update log if you have released a major update and want to inform the user which new things are now in the app.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee. :)

View attachment 149292 View attachment 149293
Examples
Code: Copy 
    AS_AppSummary1.SetTitleText("Welcome to"," Parcel ","!")
 
    AS_AppSummary1.AddItem("Supported worldwide","With more than 320 delivery agents supported, you can be sure that your next delivery will be tracked via Parcel.",AS_AppSummary1.FontToBitmap(Chr(0xE894),True,35,AS_AppSummary1.ItemIconProperties.Color))
    AS_AppSummary1.AddItem("Powerful functions","Daily payers, barcode scanners, card support and many other functions make tracking much easier.",AS_AppSummary1.FontToBitmap(Chr(0xF02A),False,35,AS_AppSummary1.ItemIconProperties.Color))
    AS_AppSummary1.AddItem("Push notifications","With a Premium subscription, receive push notifications when there is news about the delivery.",AS_AppSummary1.FontToBitmap(Chr(0xE7F4),True,35,AS_AppSummary1.ItemIconProperties.Color))
 
    AS_AppSummary1.ConfirmButtonText = "Start using Parcel"
 
    AS_AppSummary1.Refresh
B4X: Copy 
    AS_AppSummary1.SetTitleText("Welcome to"," Parcel ","!")
 
    Dim Item_Feature1 As AS_AppSummary_Item : Item_Feature1.Initialize
    Item_Feature1.Name = "Supported worldwide"
    Item_Feature1.Description = "With more than 320 delivery agents supported, you can be sure that your next delivery will be tracked via Parcel."
    Item_Feature1.Icon = AS_AppSummary1.FontToBitmap(Chr(0xE894),True,35,AS_AppSummary1.ItemIconProperties.Color)
    AS_AppSummary1.AddItemAdvanced(Item_Feature1)
   
    Dim Item_Feature2 As AS_AppSummary_Item : Item_Feature2.Initialize
    Item_Feature2.Name = "Powerful functions"
    Item_Feature2.Description = "Daily payers, barcode scanners, card support and many other functions make tracking much easier."
    Item_Feature2.Icon = AS_AppSummary1.FontToBitmap(Chr(0xF02A),False,35,AS_AppSummary1.ItemIconProperties.Color)
    AS_AppSummary1.AddItemAdvanced(Item_Feature2)
   
    Dim Item_Feature3 As AS_AppSummary_Item : Item_Feature2.Initialize
    Item_Feature3.Name = "Push notifications"
    Item_Feature3.Description = "With a Premium subscription, receive push notifications when there is news about the delivery."
    Item_Feature3.Icon = AS_AppSummary1.FontToBitmap(Chr(0xE7F4),True,35,AS_AppSummary1.ItemIconProperties.Color)
    AS_AppSummary1.AddItemAdvanced(Item_Feature3)
 
    AS_AppSummary1.ConfirmButtonText = "Start using Parcel"
 
    AS_AppSummary1.Refresh
AS_AppSummary
Author: Alexander Stolte
Version: 1.00
  • AS_AppSummary
    • Events:
      • ConfirmButtonClick
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddItem (Name As String, Description As String, Icon As B4XBitmap) As String
      • Class_Globals As String
      • ClearItems As String
      • CreateAS_AppSummary_ItemIconProperties (Width As Float, Color As Int, BackgroundColor As Int, CornerRadius As Float, Alignment As String, SideGap As Float) As AS_AppSummary_ItemIconProperties
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color As Int) As B4XBitmap

        FontAwesome To Bitmap

        Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...
        www.b4x.com www.b4x.com
      • getBackgroundColor As Int
      • getConfirmButtonColor As Int
      • getConfirmButtonTextColor As Int
      • getItemDescriptionTextColor As Int
      • getItemIconProperties As AS_AppSummary_ItemIconProperties
        Call Refresh if you change something
      • getItemNameTextColor As Int
      • getTitleColoredTextColor As Int
      • getTitleTextColor As Int
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Refresh As String
      • setBackgroundColor (Color As Int) As String
        Call Refresh if you change something
      • setConfirmButtonColor (Color As Int) As String
        Call Refresh if you change something
      • setConfirmButtonText (Text As String) As String
      • setConfirmButtonTextColor (Color As Int) As String
        Call Refresh if you change something
      • setItemDescriptionTextColor (Color As Int) As String
        Call Refresh if you change something
      • setItemNameTextColor (Color As Int) As String
        Call Refresh if you change something
      • setTitleColoredTextColor (Color As Int) As String
        Call SetTitleText if you change this property
      • SetTitleText (Text1 As String, ColoredText As String, Text2 As String) As String
      • setTitleTextColor (Color As Int) As String
        Call SetTitleText if you change this property
    • Properties:
      • BackgroundColor As Int
        Call Refresh if you change something
      • ConfirmButtonColor As Int
        Call Refresh if you change something
      • ConfirmButtonText
      • ConfirmButtonTextColor As Int
        Call Refresh if you change something
      • ItemDescriptionTextColor As Int
        Call Refresh if you change something
      • ItemIconProperties As AS_AppSummary_ItemIconProperties [read only]
        Call Refresh if you change something
      • ItemNameTextColor As Int
        Call Refresh if you change something
      • TitleColoredTextColor As Int
        Call SetTitleText if you change this property
      • TitleTextColor As Int
        Call SetTitleText if you change this property
  • AS_AppSummary_Item
    • Fields:
      • Description As String
      • Icon As B4XBitmap
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Name As String
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_AppSummary_ItemIconProperties
    • Fields:
      • Alignment As String
      • BackgroundColor As Int
      • Color As Int
      • CornerRadius As Float
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • SideGap As Float
      • Width As Float
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
Have Fun :)
Click to expand...
Your library is so cool.But I have tried with Thai language,it has the problem about manage text, please see my picture.
 

Attachments

  • Screenshot_20240107_111107.png
    Screenshot_20240107_111107.png
    165.4 KB · Views: 696
Theera said:
Your library is so cool.But I have tried with Thai language,it has the problem about manage text, please see my picture.
Click to expand...
The font size of the phone is the default?
I see this behaviour when the font is bigger.
 
asales said:
The font size of the phone is the default?
I see this behaviour when the font is bigger.
Click to expand...
I use default font. But Thai language has 4 levels of line ( i.e. " สัมฤทธิ์ผล " )
 
Alexander Stolte said:
I use the MeasureMultilineTextHeight function from the StringUtils. There is nothing I can fix.
Click to expand...
There is something you can do.
See this :

Resizing Text Control Custom View - Set text control size based on text - Non Latin Text fix

There are many occasions when you need to have multiple labels which all size themselves to their contents and also align with each other with no space. The solution to this is to use MeasureMultiLineText within the StringUtils Library. To make this easy to use I created a CustomView...
www.b4x.com www.b4x.com
You need to setFallBackLineSpacing to true. This will solve the problem.
 
Update
  • 2.00
    • BugFixes
    • Breaking Change - Add Parameter "Value" to AddItem
    • Changed the items base to xCustomListView
      • You can now add as many items as you like, it is scrollable
    • Add get and set TitleTop
    • Add get and set TitleGap - Gap between list and title
    • Add set Theme
    • Add get Theme_Dark
    • Add get Theme_Light
    • Add Designer Property ThemeChangeTransition
      • Default: Fade
    • Add GetItemAt
    • Add Event ItemClicked
    • Add Designer Property HapticFeedback
      • Default: True
    • Add Event CustomDrawItem
    • Add Type AS_AppSummary_ItemViews
    • Add GetItemViews - Gets the item views for a value
    • Add GetItemViews2 - Gets the item views for a index
Changed the items base to xCustomListView
You can now add as many items as you want, the item base is now a xCustomListView and can be scrolled if the items are more than the screen size.

TitleTop
By default, the title is now at a height of 100dip. The list of items starts below the title, depending on the value specified for the TitleGap property. So you can now determine the height of the title yourself

TitleGap
This property is simply the space between the title and the list, so that it is not so close together.
By default, a value of 20dip is set.

Theming
as in almost all of my views, there is now a built-in dark/light mode that you can easily customize yourself
B4X: Copy 
AS_AppSummary1.Theme = AS_AppSummary1.Theme_Light
B4X: Copy 
AS_AppSummary1.Theme = AS_AppSummary1.Theme_Dark

CustomDrawItem
The event is triggered as soon as an item is built, it contains all views that are in the item and can be customized to your own needs.
A more detailed tutorial will follow later.

GetItemViews and GetItemViews2
As in the CustomDrawItem event, but you can call up the views for an item at any time.
B4X: Copy 
AS_AppSummary1.GetItemViews2(1).NameLabel.Text = "Test"
 
Update
  • 2.01
    • New Designer Property ItemBackground
      • Default: None
      • Card - The item is displayed as a card with round borders
    • New Type AS_AppSummary_CardProperties
    • BugFix Title is now multiline
    • BugFixes and Improvements
ItemBackground
You can now display the items as a “card” (left picture) for reference on the right picutre, the same content with "None"

(85) mage.png
(86) mage.png


If you want to adjust the card properties:
B4X: Copy 
    AS_AppSummary1.CardProperties.CornerRadius = 15dip
    AS_AppSummary1.CardProperties.TextGap = 10dip
    AS_AppSummary1.CardProperties.BackgroundColor = xui.Color_Red
 
Update
  • 2.02
    • BugFixes and Improvements
    • Change Default Value to "None" for the ThemeChangeTransition property
    • New AddImageItem
    • New AddDescriptionItem
    • New AddTitleItem
    • New AddPlaceholder
    • New CreateViewPerCode
    • New Type AS_AppSummary_ImageItem
    • New Type AS_AppSummary_TitleItem
    • New Type AS_AppSummary_TitleProperties
    • New Type AS_AppSummary_DescriptionItem
    • New Type AS_AppSummary_DescriptionProperties
Example of the new blocks:

[B4X] AS AppSummary - Images, Placeholder, Title and Descriptions

https://www.b4x.com/android/forum/threads/b4x-xui-as-appsummary.158433/ In this example I will show you how you can use the new blocks in the AS_AppSummary to add something like this to your app: Yes, more code is not needed for this result ;) AS_AppSummary1.TitleTop = 0...
www.b4x.com www.b4x.com
1743422227628.png
 
You must log in or register to reply here.

Similar Threads

Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS BottomAppSummary
Replies
0
Views
2K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article Article
Android Example [B4X] AS AppSummary - Images, Placeholder, Title and Descriptions
Replies
0
Views
2K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS PremiumSummary [Payware]
Replies
4
Views
5K
Alexander Stolte
Alexander Stolte
klaus
  • Sticky
  • Article Article
Android Tutorial [B4X] Documentation Booklets
7 8 9
Replies
166
Views
165K
klaus
klaus
HotShoe
Custom types (Structures)
Replies
10
Views
13K
LucaMs
LucaMs
Back
Top