Guide - Custom Title Bar

Hello Koders,
In this tutorial i will show you how to make a Custom Action Bar In :kodular:

Components Needed

  • Vertical Arrangement x1(size : if the mode is portrait then use 56px size and if the mode is landscape then use 48 px size
  • Horizontal Arrangement x1 ( I Used Scroll Arrangement By Mistake :stuck_out_tongue_winking_eye:)
  • Label x3
  • Space x1

11

Extensions Needed

Popup Menu Extension By @DevYB
Android Themes Extension By @Andres_Cotes

Capture

Step 1

Take A Vertical Arrangement At The Top Of The Screen
Height ~ 58px

Step 2

Insert A Horizontal Arrangement In Vertical Arrangement

Step 3

Insert Labels And Spaces In Horizontal Arrangement As Shown In The Image
111

Make A Layout Like This Using Material Icons
Capture

Step 4

Make Label 1 and label 3 Clickable (you can use buttons also)

Capture
because we want to use these labels as sidemenu button and 3 dot menu button

Step 5

To Open Sidemenu By Clicking On Label 1 Use This Blocks

blocks

Step 6

To Create Custom 3 dot menu i have used DevYBPopUpMenu Extension

Properties :-
Capture
Blocks :-
blocks (2)

Step 7

To Change The Background Color Of Popup Menu I Have Used Android Themes Extension By Andreas Cotes
blocks (1)

Using Material Light Theme The Color Of Menu Will Be Change To White

Result

Credit

Thanks @The_K_Studio to suggest me to use buttons instead of labels
Thanks @Boban For suggesting me the correct size of actionbar in both orientation
Thank @DevYB For His Popup Menu Extension
Thanks @Andres_Cotes For His Android Themes Extension
Thanks @Kodular For Providing Us A Great Platform To Create Android Apps

18 Likes

Nice guide for newbies

3 Likes

Nice guide… This is what I wanted!!

4 Likes

Nice guide. Good work!

2 Likes

Thanks @Xoma @Soham_Shah and @The_K_Studio

1 Like

:+1: :+1: :+1:
I think you should remove for beginners

2 Likes

Good Guide but…

1 Like

Nice, Guide :100:

3 Likes

Thanks

:thinking:

2 Likes

Thanks @Maayur

2 Likes

Time will tell you everything.

1 Like

Nice guide @Techno_Vedang

2 Likes

Thank you @techVsurya

2 Likes

When you use default the menu popup is on action bar
But when we use your way it’s not
Difference -
Default

1 Like

Wdym?

1 Like

He means when using the default action bar the popup appears on it whereas using your the poppup comes little down

2 Likes

Because its not the default :wink:

1 Like

Nice Guide @Techno_Vedang :ok_hand: :ok_hand: :ok_hand:

But i want to know that what height % did you put on the Vertical Arrangement

1 Like

58 pixels.

Thank you @AbhishekPratapSingh