Share My Creation Project 8 - Exploring UI capabilities

Marvel

Member
Licensed User
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:cool:)

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

Attachments

Mashiane

Expert
Licensed User
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-"

1603000808680.png


Font Sizing for "No Tasks"

1603001347453.png
 
Last edited:

AnandGupta

Well-Known Member
Licensed User
WOW !

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

Regards,

Anand
 

LucaMs

Expert
Licensed User
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...
1603017402395.png
 

Marvel

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

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

Expert
Licensed User
Nice question. I have to... think... for once πŸ˜„
I thought πŸ˜²πŸ˜„

' B4XMainPage
B4X:
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
B4X:
Private Sub B4XPage_Disappear
    Root.SetVisibleAnimated(B4XPages.MainPage.TransitionDuration, False)
End Sub
Private Sub B4XPage_Appear
    Root.SetVisibleAnimated(B4XPages.MainPage.TransitionDuration, True)
End Sub
 

Attachments

Xfood

Active Member
Licensed User
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:cool:)

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:confused:
congratulations, do you also share the source? 😜
 

amaxco

Member
Licensed User
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:cool:)

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:confused:
Marvel is marvelous!
 
Top