XtraViews

[Periklis Koutsogiannis]

version 2.6 requires B4A 3.20​

Introduction

Since I discovered b4a, I got lost in its wonderland. The possibilities are endless and the RAD factor is HUGE. So me and my team started preparing our codebase and environment for the upcoming android transition using the amazing b4a speed wagon!

The first step was to ensure that we have a consistent user experience which is compliant with the android guidelines. The second step was to encapsulate as much code as possible. Our moto is more RAD and less code. In that spirit we started XtraViews which will be constantly updated as long as we build our front end android library.

Latest package (library files and samples)
https://www.dropbox.com/s/ywdrytrg4fxfg83/xtraviews.zip
The library files are ultra small and less that 50K. The rest are animated gifs.

Compiled demos (apk)
LayoutView1, DialogView1, DialogView2, DialogView3, DialogView4, DialogView Tutorial, MovieView1, MovieView2


Classes

XtraViews currently consists of the following powerful classes:

LayoutView
An alternative way of loading and accessing activity layouts with fully automated layout translation capability!

Tutorial threads:

• The alternative way to load and use your layouts
• Automatic translation of layout views

DialogView
Use the powerful b4a layout designer to visually design your modal custom dialogs. Use a singe line of code with the least possible parameters to invoke the dialog and your main activity as you already know to control its behavior.

Tutorial thread: http://www.b4x.com/android/forum/threads/dialogview-a-complete-walk-through-guide.43034/#post-261037


MovieView
Use (transparent) animated gifs in your app. Resize them freely while retaining the original aspect ratio.

Tutorial thread: http://www.b4x.com/android/forum/threads/xtraviews-movieview-tutorial.42830/


CheatSheetView
Long press on an element and a 'cheat sheet' (tooltip toast) will appear describing the action. Original code: https://plus.google.com/ RomanNurik/posts/QrMMFNck5MA


ToastView
A flexible native and cancelable toast.


How to use

1. Extract the contents of the library package anywhere on your hard disk.
2. Copy the xtraviews jar+xml to your B4A libraries folder.
3. Explore the samples.

Enjoy!

Version history

2.6

• [DialogView] Refactored: Enabled automatic translation by refactoring the BaseLayoutView class

2.5

• [LayoutView] Added: Automated translation using standard android resources

2.4

• Renamed: DialogViewViews class renamed to LayoutView
• Added: LayoutView is now an activity object

2.3

• Added: DialogViewViews object with all known ViewWrapper members
• Changed: DialogLayoutView.GetView and DialogView.GetView changed to DialogLayoutView.Views.Get and DialogView.Views.Get

2.2

• Added: DialogView.Options.Dimensions.MODE_STRETCH_TEXT to allow textsize adjustment of buttons and textviews while scaled
• Fixed: Panels are now being resized properly while scaled

2.1

• Added: DialogView.Options.Dimensions.MODE_STRETCH and DialogView.Options.Dimensions.MODE_ANCHORS

2.0

• finalized object model, samples and tutorials

1.0

• Initial version

 

[NJDude]

If I may give you a suggestion, it would be better if you didn't bundled these views, if in the future you add more, this library might become very large, and why should someone need a large library when maybe the user is interested in only 1 view?, it is more convenient to release them individually.

If you are trying to keep things organized, then you could prefix your views with "xtra" for example, so you would have: xtraMovieView, xtraDialogView, etc etc, that way they will group together in the IDE, just an idea.

Awesome work by the way.

 

[Periklis Koutsogiannis]

Thank you for the suggestion and the nice words

We will try to keep the library under 100K in the worst case (like we did with the SocialApi library). We hate bloatware as well. The current size of the library is less than 20K

If it will go out of control, we will break it in smaller libraries

 

[Periklis Koutsogiannis]

Btw, we are very fond of library sets. We pay great attention in what we include so that we have libraries with relevant with each other content. That means that we break our codebase in smaller clearly defined libraries and not components.

This is the main reason why component libraries exist. Take as an example the google services package.

Consider the XtraViews library as a UI component set with small and easy to use views that in most cases are all of them used in a single project. Currently, DialogView is used for dialogs and MovieView for ajax loaders/spinners. We will never add an OCR component in that package. And based in our plans, it will not contain more than 5 everyday/project use views.

 

[NJDude]

If it will go out of control, we will break it in smaller libraries

Sure, I understand your point, but I'm just trying to avoid some kind of confusion in the future, like you mentioned above, you might break the library into smaller ones, that might cause confusion, one quick example, I downloaded your AnimatedGifView, now, basically it doesn't exist because is part of the set, see what I mean? so now I have to install the set just to get the one I want/need. It's just personal preference at the end, just voicing my opinion.

 

[Periklis Koutsogiannis]

Your opinion is always welcome.

That would have been an issue if you had to include a 1MB library for just 1 component. In your case (since you mentioned) including a 15K library instread of 10K hasn't any impact. And as I already mentioned, the logic is to build libraries that all of its components can be used in every project. We all need dialogs and spinners in most of our projects

We pay attention in creating small same-scoped UI libraries. Don't worry, we have the same concerns

 

[NJDude]

Agreed, if the components are similar then I'm with you 100%

 

[NJDude]

One interesting thing I found out, on Samsung devices (Galaxy tab for example) this library doesn't work if you load the GIFs from DirDefaultExternal, only works from DirAssets, and by not working I mean it doesn't show the GIF.

 

[Periklis Koutsogiannis]

Wicked demo!

About the issue. In order to get the stream, I am using:

anywheresoftware.b4a.objects.streams.File.OpenInput(pathName, fileName);

which should normally access any file in any location (after following Erel's public advice). The weird thing is that if there was a problem accessing the stream, there should be an Exception raised.

I have a Note 3 and I will check this later. Thanks for the report.

 

[JakeBullet70]

Very cool!
Can you change colors of the header and bottom buttons?

I want to use in my project!

 

[Periklis Koutsogiannis]

Hey!

It is very easy. Since the b4a very powerful designer is used, you can fully customize your dialog design. Do not forget to add the relevant tag ids to the buttons in order to dismiss the dialog. Just call the Dialog.Show with empty strings and define only the layout file.

Dialog.Show("dialog1", "", "", "", "", True, Null)

I have attached a sample project with sources and the compiled apk to start with. Try to resize the panel in dialog1 layout. We are using anchors everywhere so that your design stays consistent

 

[Douglas Farias]

@Periklis Koutsogiannis

its possible to make or add ballons at the dialogviews? *-*
like this

or this

? *-*

 

[Periklis Koutsogiannis]

Maybe ... have to think about it a bit

 

[JakeBullet70]

Hey!

It is very easy. Since the b4a very powerful designer is used, you can fully customize your dialog design. Do not forget to add the relevant tag ids to the buttons in order to dismiss the dialog. Just call the Dialog.Show with empty strings and define only the layout file.

Dialog.Show("dialog1", "", "", "", "", True, Null)

I have attached a sample project with sources and the compiled apk to start with. Try to resize the panel in dialog1 layout. We are using anchors everywhere so that your design stays consistent

View attachment 26319View attachment 26320View attachment 26321

Great!!! Thanks so much for sharing this.

 

[Periklis Koutsogiannis]

You are most welcome

 

[JakeBullet70]

Ok, one more thing.
For me, I am going to use this on a tablet. My program

It seems like it centers on the screen, can the dialog be positioned say from the left side?

Again, thanks

 

[Periklis Koutsogiannis]

I'll add a gravity property in the next version

 

[Periklis Koutsogiannis]

This is how it will work.

 

[JakeBullet70]

This is such perfect timing. I was getting ready to tear out my dialog's from my program as they are a disaster of programming methods. I was going to have to write something like this but now... I can work on other features of my program.

Again, THANKS!!!

 

[Periklis Koutsogiannis]

Sneak peak of the new features

https://www.dropbox.com/s/iyg83vyvgnrwiyp/dialogview-animated-custom-dialog.avi

Gravity + Animations