Android TextInputLayout and TextInputEditText with outlined border and show hint text above outlined box

Viewed 313

I am using TextInputLayout and TextInputEditText for my user input in my app, But now we need different design as like below screen. I mean hint text should be above outlined box instead of within outline border. I did tried few ways but unable to figure exact attribute or style that help me to achieve this kind of UI.

  • Expected UI:

Expected UI wireframe

  • Current UI:

Current UI

  • Styles:
    <style name="TextInputLayoutAppearance"parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
         <item name="boxStrokeColor">@color/text_input_box_stroke_color</item>
         <item name="shapeAppearanceOverlay">
             @style/TextInputLayoutMaterialThemeRoundedShapeAppearanceOverlay
         </item>
         <item name="hintTextColor">@color/hint_color</item>
         <item name="android:textColorHint">@color/hint_text</item>
    </style>
    
    <style name="TextInputLayoutMaterialThemeRoundedShapeAppearanceOverlay" parent="">
         <item name="cornerFamily">rounded</item>
         <item name="cornerSize">@dimen/_8sdp</item>
    </style>
    

I am not sure if this is something achievable by style or need to develop custom control with combination of TextView and TextInput controls.

0 Answers
Related