Share My Creation Project 8 - Exploring UI capabilities

Update!!!
I never really got to finish and clean up this project but you can download the source file here: Download Source file

-----------------------------------------------

Hi guys, I thought I should share what I've been exploring with the B4x community.

I recently set out to do some exploration to see how much I can achieve by using jut B4a internal tools(libraries) for an apps UI. The result is what you will see further in this post.

After I managed to create my first app ever using B4a 5 months ago, I took a short break because of work (my work has been more hectic during the pandemic than it was before the pandemic). I wasn't really satisfied with the app, the interface especially, so it has always been on my mind to explore creating UIs with B4a, and I must say that I think I achieved more than I expected with B4a.

In reality, this is not a fully thought-out app or a finished app, it started with me just trying to put together some cool UI components with B4a. It's not there yet, but it's a lot of steps further than what I did 5months ago. It is just a simple to-do app that I took too serious and complex??

Things I discovered during my exploration:
1. B4a Class modules are your best friend! ?If you are like me with experience in UI design, you will know how important it is making your designs as components that you can reuse. Classes make it easy to do this in code, you can even combine different components together to make a page by just calling the classes. It makes everything easier and faster.

2. It might take as much work working on your apps UI as it will take working on the app's logic. UI loves breaking at every opportunity it gets, that's what it does best. You think you've made da bomb until you check it on another device ?

3. My coding still sucks, you probably don't want to see the code base, it's rough. Good news, you get better at it a much as you work on it. I just got to understand how to use "Wait for" ?

4. You really can do so much more with your UI without external libraries, that' if you are ready to write from scratch though. (I wrote the calendar, clock and menu view, with help from documented solutions on the forum though)

5. TIP: If you have a hard time finding solutions on the forums search engine, just go on google, type the problem and end it with B4a e.g "Adjusting CLV height B4a". It works for me.

6. Lastly, try out what I've been working on here: Project 8 - APK


I will really appreciate feedbacks, screenshots and suggestions. I really want to see what it looks like on other devices.


Download APK here

I'm a UI/UX designer by the way. Now I pity the front end devs I've made miserable because of my design

 

[Mashiane]

Awesome!

Could add

• Page transitions
• Tooltips for guidance
• Un-archive
• Edit & "Incomplete" - keep task open (this limits the number of clicks)

Oops!

• Perhaps try and move the big blue to the side as soon as one selects Medium/High or automatic scroll up.
• The date header sometimes shows Year and sometimes not. September shows "Sep-"

Font Sizing for "No Tasks"

 

[Erel]

Very very nice layouts!

 

[AnandGupta]

WOW !

You mean, you managed to do all these beautiful UI with basic B4A code ? No 3rd party .jar library ?
Great. ?

Regards,

Anand

 

[LucaMs]

1. B4a Class modules are your best friend! ?If you are like me with experience in UI design, you will know how important it is making your designs as components that you can reuse. Classes make it easy to do this in code, you can even combine different components together to make a page by just calling the classes. It makes everything easier and faster.

I would say the custom view classes.

4. You really can do so much more with your UI without external libraries, that' if you are ready to write from scratch though.

Without...

 

[Marvel]

Awesome!

Could add

• Page transitions
• Tooltips for guidance
• Un-archive
• Edit & "Incomplete" - keep task open (this limits the number of clicks)

Oops!

• Perhaps try and move the big blue to the side as soon as one selects Medium/High or automatic scroll up.
• The date header sometimes shows Year and sometimes not. September shows "Sep-"

View attachment 101665

Font Sizing for "No Tasks"

View attachment 101666

Thanks for your comments ? I'll look into it.
For the page transitions, I've not been able to figure out a way to use transitions between B4xpages. The previous page disappears before the new one appears.

 

[Marvel]

Thanks Erel. You made it possible.

 

[Marvel]

I would say the custom view classes.


Without...
View attachment 101669

?? Exactly, with custom views, they're really powerful.

 

[Marvel]

WOW !

You mean, you managed to do all these beautiful UI with basic B4A code ? No 3rd party .jar library ?
Great. ?

Regards,

Anand

Thanks It's a lot of work but it's worth it.

 

[LucaMs]

For the page transitions, I've not been able to figure out a way to use transitions between B4xpages. The previous page disappears before the new one appears.

Nice question. I have to... think... for once ?

 

[Marvel]

Awesome!

Could add

• Page transitions
• Tooltips for guidance
• Un-archive
• Edit & "Incomplete" - keep task open (this limits the number of clicks)

Oops!

• Perhaps try and move the big blue to the side as soon as one selects Medium/High or automatic scroll up.
• The date header sometimes shows Year and sometimes not. September shows "Sep-"

View attachment 101665

Font Sizing for "No Tasks"

View attachment 101666

As regards the tooltip, I have it, it's not just implemented across board yet. It's currently only in front of priorities.

 

[LucaMs]

Nice question. I have to... think... for once ?

I thought ??

' B4XMainPage

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
   
    Public Page1 As clsPage1
    Public TransitionDuration As Int
End Sub

Public Sub Initialize
    Page1.Initialize
    TransitionDuration = 1000
End Sub

' + other

Private Sub B4XPage_Disappear
    Root.SetVisibleAnimated(TransitionDuration, False)
End Sub
Private Sub B4XPage_Appear
    Root.SetVisibleAnimated(TransitionDuration, True)
End Sub

' clsPage1

Private Sub B4XPage_Disappear
    Root.SetVisibleAnimated(B4XPages.MainPage.TransitionDuration, False)
End Sub
Private Sub B4XPage_Appear
    Root.SetVisibleAnimated(B4XPages.MainPage.TransitionDuration, True)
End Sub

 

[LucaMs]

I should think to the title too.

EDIT: I fear it is not possible.

 

[Xfood]

Hi guys, I thought I should share what I've been exploring with the B4x community.

I recently set out to do some exploration to see how much I can achieve by using jut B4a internal tools(libraries) for an apps UI. The result is what you will see further in this post.

After I managed to create my first app ever using B4a 5 months ago, I took a short break because of work (my work has been more hectic during the pandemic than it was before the pandemic). I wasn't really satisfied with the app, the interface especially, so it has always been on my mind to explore creating UIs with B4a, and I must say that I think I achieved more than I expected with B4a.

In reality, this is not a fully thought-out app or a finished app, it started with me just trying to put together some cool UI components with B4a. It's not there yet, but it's a lot of steps further than what I did 5months ago. It is just a simple to-do app that I took too serious and complex??

Things I discovered during my exploration:
1. B4a Class modules are your best friend! ?If you are like me with experience in UI design, you will know how important it is making your designs as components that you can reuse. Classes make it easy to do this in code, you can even combine different components together to make a page by just calling the classes. It makes everything easier and faster.

2. It might take as much work working on your apps UI as it will take working on the app's logic. UI loves breaking at every opportunity it gets, that's what it does best. You think you've made da bomb until you check it on another device ?

3. My coding still sucks, you probably don't want to see the code base, it's rough. Good news, you get better at it a much as you work on it. I just got to understand how to use "Wait for" ?

4. You really can do so much more with your UI without external libraries, that' if you are ready to write from scratch though. (I wrote the calendar, clock and menu view, with help from documented solutions on the forum though)

5. TIP: If you have a hard time finding solutions on the forums search engine, just go on google, type the problem and end it with B4a e.g "Adjusting CLV height B4a". It works for me.

6. Lastly, try out what I've been working on here: Project 8 - APK


I will really appreciate feedbacks, screenshots and suggestions. I really want to see what it looks like on other devices.


Download APK here


I'm a UI/UX designer by the way. Now I pity the front end devs I've made miserable because of my design

congratulations, do you also share the source? ?

 

[amaxco]

Hi guys, I thought I should share what I've been exploring with the B4x community.

I recently set out to do some exploration to see how much I can achieve by using jut B4a internal tools(libraries) for an apps UI. The result is what you will see further in this post.

After I managed to create my first app ever using B4a 5 months ago, I took a short break because of work (my work has been more hectic during the pandemic than it was before the pandemic). I wasn't really satisfied with the app, the interface especially, so it has always been on my mind to explore creating UIs with B4a, and I must say that I think I achieved more than I expected with B4a.

In reality, this is not a fully thought-out app or a finished app, it started with me just trying to put together some cool UI components with B4a. It's not there yet, but it's a lot of steps further than what I did 5months ago. It is just a simple to-do app that I took too serious and complex??

Things I discovered during my exploration:
1. B4a Class modules are your best friend! ?If you are like me with experience in UI design, you will know how important it is making your designs as components that you can reuse. Classes make it easy to do this in code, you can even combine different components together to make a page by just calling the classes. It makes everything easier and faster.

2. It might take as much work working on your apps UI as it will take working on the app's logic. UI loves breaking at every opportunity it gets, that's what it does best. You think you've made da bomb until you check it on another device ?

3. My coding still sucks, you probably don't want to see the code base, it's rough. Good news, you get better at it a much as you work on it. I just got to understand how to use "Wait for" ?

4. You really can do so much more with your UI without external libraries, that' if you are ready to write from scratch though. (I wrote the calendar, clock and menu view, with help from documented solutions on the forum though)

5. TIP: If you have a hard time finding solutions on the forums search engine, just go on google, type the problem and end it with B4a e.g "Adjusting CLV height B4a". It works for me.

6. Lastly, try out what I've been working on here: Project 8 - APK


I will really appreciate feedbacks, screenshots and suggestions. I really want to see what it looks like on other devices.


Download APK here


I'm a UI/UX designer by the way. Now I pity the front end devs I've made miserable because of my design

Marvel is marvelous!

 

[Kope]

Great one

 

[Marvel]

I should think to the title too.

View attachment 101678


EDIT: I fear it is not possible.

I fear so too, at least until Erel works his magic ?

 

[Marvel]

Marvel is marvelous!

? I love this
Thanks

 

[Marvel]

congratulations, do you also share the source? ?

I'm planning to share many of the classes later on,. like the Calendar, clock, tooltip and menu

 

[LucaMs]

I fear so too, at least until Erel works his magic

However, it is obviously possible that "method", use those two events, in full-screen apps, without having that problem with the title.