Android Example Creative UI/UX Designs + Source Code

Well, from today I am here to help you create more beautiful applications.
B4X Family is a wonderful yet very simple tool for designing functional and beautiful applications
I have been acquainted with B4A since 2010 and whenever I wanted to migrate I could not go to Android Studio and I did not really find a reason to migrate.
From today and from this moment.
I am here with my many years of experience in UI/UX Design.
As the first beautiful source design for the user profile section in the Online Food Ordering App
I will attach it for you.

1. No Library Needed
2. You can apply any changes you like to these sources and designs and use them commercially and non-commercially.
3. Will upload more designs in the same thread

 

[kimstudio]

Thanks for sharing. A small comment is regarding the bottom navigation, the buttons are not centered and spread evenly.

 

[PaulMeuris]

A great designer doesn't make a great programmer and a great programmer isn't always a great designer as some colleagues have pointed out.
The comment from @kimstudio is correct and the example code isn't all that great.

    Private btnBack As Label
    Private btnFAQ As Panel
    Private btnOrders As Panel
    Private btnWishList As Panel

The buttons in the layout overlap each other so that if you click or tap on btnOrders the code from btnFAQ (btnFAQ_Click) is executed.
The buttons in the layout are not necessary, you can click or tap on a panel or label too. When generating the members from the layout you just have to check the event.
The second example (Navigations) is quite good.
The panels are not identical: some panels have 3 labels, some have 2. If the layout is used in a program the programmer would want to change the active selection by setting the colors. An example:

#Region  Project Attributes
    #ApplicationLabel:             Navigations
    #VersionCode:                 1
    #VersionName:                 1.0.0
    #SupportedOrientations:         Portrait
    #CanInstallToExternalStorage:         False
    #MultiDex:                     True
    #FullScreen:                 False
    #IncludeTitle:                 False
#End Region

'Hi, my friend
'If you like my design style, you can get help from Me To design your own applications
'[email protected]

Sub Process_Globals
    Private xui As XUI
End Sub

Sub Globals
    Private Panel2 As Panel
    Private Panel3 As Panel
    Private Panel4 As Panel
    Private Panel5 As Panel
    Private Panel6 As Panel
    Private activepanel As Panel
    Private activetheme As Int
    Private clrsactive As List
    Private clrsnonactive As List
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ' 1 to 4 For View Navigations
    ' 5 For Dark View -> Set android:statusBarColor To 414141 theme In Manifest Editor :)
    activetheme = 2
    Activity.LoadLayout(activetheme)
    activepanel = Panel4
    clrsactive.Initialize
    clrsnonactive.Initialize
    Select activetheme
        Case 1
            clrsactive = Array As Int(Colors.Red,Colors.Red)
            clrsnonactive = Array As Int(Colors.Gray,Colors.Gray)          
        Case 2
            clrsactive = Array As Int(Colors.Green,Colors.Green)
            clrsnonactive = Array As Int(Colors.Gray,Colors.Gray)
        Case 3
            clrsactive = Array As Int(Colors.Blue,Colors.Blue)
            clrsnonactive = Array As Int(Colors.Gray,Colors.Gray)
        Case 4
            clrsactive = Array As Int(Colors.Magenta,Colors.Magenta)
            clrsnonactive = Array As Int(Colors.Gray,Colors.Gray)
        Case 5
            clrsactive = Array As Int(Colors.White,Colors.Red)
            clrsnonactive = Array As Int(Colors.Gray,Colors.Black)                      
        Case Else
            clrsactive = Array As Int(Colors.Yellow,Colors.Yellow)
            clrsnonactive = Array As Int(Colors.Gray,Colors.Gray)
    End Select
'    Activity.LoadLayout(activetheme)
'    Activity.LoadLayout(activetheme)
'    Activity.LoadLayout(activetheme)
    'Activity.LoadLayout(activetheme)
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Private Sub Panel6_Click
    xui.MsgboxAsync("Setting clicked","Setting")
    set_panel_colors(activepanel,clrsnonactive)
    set_panel_colors(Panel6,clrsactive)
    activepanel = Panel6
End Sub

Private Sub Panel5_Click
    xui.MsgboxAsync("Order clicked","Order")
    set_panel_colors(activepanel,clrsnonactive)
    set_panel_colors(Panel5,clrsactive)
    activepanel = Panel5
End Sub

Private Sub Panel4_Click
    xui.MsgboxAsync("Home clicked","Home")
    set_panel_colors(activepanel,clrsnonactive)
    set_panel_colors(Panel4,clrsactive)
    activepanel = Panel4
End Sub

Private Sub Panel3_Click
    xui.MsgboxAsync("Recent clicked","Recent")
    set_panel_colors(activepanel,clrsnonactive)
    set_panel_colors(Panel3,clrsactive)
    activepanel = Panel3
End Sub

Private Sub Panel2_Click
    xui.MsgboxAsync("Profile clicked","Profile")
    set_panel_colors(activepanel,clrsnonactive)
    set_panel_colors(Panel2,clrsactive)
    activepanel = Panel2
End Sub

Private Sub set_panel_colors(pnl As Panel,clrlst As List)
    Dim lbl As Label = pnl.GetView(0).As(Label)
    lbl.TextColor = clrlst.Get(0)
    Dim lbl As Label = pnl.GetView(1).As(Label)
    lbl.TextColor = clrlst.Get(0)
    If pnl.NumberOfViews > 2 Then
        Dim lbl As Label = pnl.GetView(2).As(Label)
        lbl.Color = clrlst.Get(1)
    End If
End Sub

I have adjusted the layouts (1 - 5) by adding a label for the line at the botton of the panels for the non-active panels.
It's not perfect yet because the lines or dots not always 'disappear' when the panel is not active.
One last tip: try to use meaningful names for the panels or labels that will be used to click or tap on.
Keep up the good work!
Greetings,
Paul

 

[Reckless]

Thanks for sharing. A small comment is regarding the bottom navigation, the buttons are not centered and spread evenly.

Thank you
You are right, I focus more on designing and publishing the source
My expectation from you and other friends is that you develop this design according to your project
For example you can use % in layout scripting for every panel and adjust it (Designer Script Panel)

 

[Reckless]

@PaulMeuris

thank you
My goal is to show more beautiful features and designs that can be done with B4X Family.
I suggest to all friends that before using it in their own projects, they should first arrange the design with clean codes and then use it.

Regarding your codes, I suggest that you follow the following codes and avoid repeating the codes

1. Set Tag to every panel (Tab)
2. Set All Panel Event Name to pnlNavigation
3. Handle all Click Event in One Sub and use Sender Object to get Tag

Private Sub pnlNavigation_Click
    Dim pnlClicked as Panel = Sender
    Select pnlClicked.Tag
        Case "Profile"
        Case "Recent"
        Case "Home"
        Case "Order"
        Case "Search"
    End Select
End Sub

 

[Alexander Stolte]

An alternative would be the AS_TabMenuAdvanced, this is already a fully functional TabMenu which can look exactly like in the example.

 

[PaulMeuris]

Thank you @Reckless,
When testing code I tend to copy/paste too much.
Here is a cleaned up version for those who want to use the navigation design:

Sub Globals
    Private Panel2 As Panel
    Private Panel3 As Panel
    Private Panel4 As Panel
    Private Panel5 As Panel
    Private Panel6 As Panel
    Private activepanel As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    activepanel = Panel4
    set_panel_colors(activepanel,Colors.Red,Colors.Red)
End Sub

Private Sub pnlNavigation_Click
    Dim pnlClicked As Panel = Sender
    set_colors(pnlClicked)
    activepanel = pnlClicked
    take_action(pnlClicked.Tag)
End Sub

Private Sub set_panel_colors(pnl As Panel,clr1 As Int,clr2 As Int)
    Dim lbl As Label = pnl.GetView(0).As(Label)
    lbl.TextColor = clr1
    Dim lbl As Label = pnl.GetView(1).As(Label)
    lbl.TextColor = clr1
    If pnl.NumberOfViews > 2 Then
        Dim lbl As Label = pnl.GetView(2).As(Label)
        lbl.Color = clr2
    End If
End Sub

Private Sub set_colors(pnl As Panel)
    set_panel_colors(activepanel,Colors.Gray,Colors.Gray)
    set_panel_colors(pnl,Colors.Red,Colors.Red)
End Sub

Private Sub take_action(tag As String)
    Select tag
        Case "Profile"
            Log(tag)
            ' TODO: show a B4X page or B4X dialog
        Case "Recent"
            ' TODO: show a B4X page or B4X dialog
        Case "Home"
            ' TODO: show a B4X page or B4X dialog
        Case "Order"
            ' TODO: show a B4X page or B4X dialog
        Case "Setting"
            ' TODO: show a B4X page or B4X dialog
    End Select
End Sub

In the screen shots you can see the effect.

If you need more functionalities then you could consider the AS_TabMenuAdvanced menu.
Greetings,
Paul