How to Make TextBox with Raised Hint

Hey Koders, i today present a Small Guide to make TextBox like -

Few More TextBox Design References


Will Add More Soon. :wink:


Components

Extension :dove: Floating View: float your component. [FREE] :dove:

Component Properties

CardView1
ContentPaddingTop = 0
ContentPaddingBottom = 0
ContentPaddingLeft - According to your Needs;
ContentPaddingLeft Value will set this Gap.


ContentPaddingRight - According to your Needs;
ContentPaddingRight Value will set this Gap.

Rest All Properties Remains Default.


Label1
All Properties According to your Needs;
This is Going to be the Raised Hint.



CardView2
ContentPaddingTop - Read 2nd point of NOTE.
ContentPaddingBottom = 0
ContentPaddingLeft = 0
ContentPaddingRight = 0
Elevation = 0
Width - According to your Needs; CardView2 Width will be the Total TextBox Width.
Rest All Properties Remains Default.


CardView3
ContentPaddingTop = 0
ContentPaddingBottom = 0
ContentPaddingLeft = 0
ContentPaddingRight = 0
Elevation = 0
Width = FillParent.
CornerRadius - According to your Needs; CardView3 CornerRadius Value will set how Round you want TextBox to be from all the sides.
StrokeColor - According to your Needs; CardView3 StrokeColor will be the Outline Color of the TextBox.
StrokeWidth - According to your Needs; CardView3 StrokeWidth will be the Outline Width of the TextBox.
Rest All Properties Remains Default.


TextBox1
Width = FillParent.
HintText = Empty.
BackgroundColor - BackgroundColor of Screen /ParentArrangement.
Rest All Properties - According to your Needs like FontSize, Bold, Italic, etc.

Blocks

blocks

How This All Works

CardView1 carries Hint Label (Label1).
OverlapView Block Overlaps the CardView1 on CardView2 making the whole Raised Hint Design.
And the ContentPaddingTop Property of CardView2 Helps in Keeping CardView1 Level of Rise Correct to the Required Point.
CardView3 StrokeColor and StrokeWidth sets the BorderColor and BorderWidth of TextBox.


#off-topic

This method is not exclusively for the TextBox Design.
You can use the same Method to Overlap Any Component over the Other.
For Example -
My Proposed Solution in this Topic uses the Same method.
How to Do this . Overlap


.aia

TextBox.aia (20.5 KB)


And Check This Topic For Some :v: Phased Improvements :+1:

[ Free Aia ] Textbox with raised & animated hint


NOTE

  1. To Change the Right Margin -


    According to your Needs, just Icrease or Decrease this value :point_down:
    blocks

  2. if we change the Hint Label (Label1) FontSize,
    We also need to change the ContentPaddingTop Property of CardView2 accordingly.
    Use Hit and Trial until you feel /observe that the Hint Label (CardView1) raised to the Desired Level.

42 Likes

Nice Guide !! Very Helpful โ€ฆ Great Workโ€ฆ:+1:

1 Like

Thank you for your guide. This is how we want to see a guide.

We see to many guides that just have some block images and a result image. So mods and devs will discuss the minimum requirements for a guide.

13 Likes

Awesome :heart:

1 Like

Nice, very detailed guide :blush:
Keep it up @ADDYLIN

This is also possible if you use this extension :upside_down_face:

2 Likes

We can not set the Right Margin.
:shushing_face:

3 Likes

Ohh I donโ€™t know that :sweat_smile:
But yes a custom way is also good, we can do whatever we want.
In your style :grin:

You keep this

:heart:

2 Likes

Great guide !

1 Like

It is being created dynamically, not even I can fix it. Again as I said in a previous post from another topic, I will take a look. But thereโ€™s no point in not using it just because the hint is a bit off to the right. Thank you.

2 Likes

:heart::heart::heart::heart::heart::heart::heart::heart::heart::heart::heart::heart:

1 Like

For example my Guide :shushing_face:

1 Like

Very helpful guide
Keep up the good workโ€‹:confetti_ball::confetti_ball:

1 Like

i also think :wink:

2 Likes

i just send you a PM about OverlapView block @ADDYLIN

Congratulations @ADDYLIN

1 Like

Willi it works same in all device :slightly_frowning_face: :slightly_frowning_face:

Yes it Looks same in all the Devices.

:slightly_smiling_face: :slightly_smiling_face:

i love you too much br o

1 Like

I Think I Really Create A Great Design With Help Of This Guide Thanks To Respected Koder @ADDYLIN

9 Likes

Wow :upside_down_face:

The Design is looking Great :clap:

1 Like