Hey Koders, i today present a Small Guide to make TextBox like -
Components
Extension Floating View: float your component. [FREE]
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
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 Phased Improvements
[ Free Aia ] Textbox with raised & animated hint
NOTE
-
To Change the Right Margin -
According to your Needs, just Icrease or Decrease this value
-
if we change the Hint Label (Label1) FontSize,
We also need to change theContentPaddingTop
Property of CardView2 accordingly.
Use Hit and Trial until you feel /observe that the Hint Label (CardView1) raised to the Desired Level.