5

I'm trying to create a TextInputLayout with Outline Boarder. But whenever I use the,following style, it malfunction(crash) the app.
Before posting I have tried every solution that listed in and outside the stackoverflow, but nothing fixed the issue so far.

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Current layout

<ScrollView... <LinearLayout android: layout_width = "200dp" android: layout_height = "wrap_content" android: orientation = "vertical" android: layout_marginTop = "2dp" > <com.google.android.material.textfield.TextInputLayout android: id = "@+id/outlinedTextField" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: hint = "@string/label" style = "@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" app: boxStrokeWidthFocused = "2dp" app: boxStrokeColor = "@color/border_primary" > <com.google.android.material.textfield.TextInputEditText android: layout_width = "match_parent" android: layout_height = "wrap_content" /> </LinearLayout> </ScrollView>

Complete Layout:

 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".user.userprofile.UserProfileFragment"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/user_profile_header"/> <LinearLayout android:layout_width="200dp" android:layout_height="wrap_content" android:orientation="vertical"> <com.google.android.material.textfield.TextInputLayout android:id="@+id/outlinedTextField" android:layout_width="match_parent" android:layout_height="wrap_content" android: hint = "@string/label" app:hintTextColor="@color/text_primary" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" app:boxStrokeWidthFocused="2dp" app:hintTextColor="@color/text_primary" app:boxStrokeColor="@color/border_primary"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout> </ScrollView>

More Info : when style is added hint goes out of focus. Also border doesn't appear.

Improve this question
3
  • Hey @Rootster , I do not know what specifically you meant when you said malfunction but, TextInputEditText is meant to be used inside of TextInputEditText. please paste in your full xml and what exactly is your malfunction. Maybe I can help Commented Aug 10, 2020 at 16:32
  • It's indeed neccesarry to know what the exact "malfunction" is. And @ravi means that TextInputEditText must be inside TextInputLayout (he made a small typo) Commented Aug 10, 2020 at 17:16
  • malfunction as in app crashes everytime when i start it. but when i remove the style = "@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"it works fine. Also i would like to add when I use the above style, "hint" also goes out of focus. Commented Aug 10, 2020 at 17:57

2 Answers 2

Reset to default
5

You need to check a couple of things:

  1. Make sure that your AppTheme is a child of Theme.MaterialComponents (or a descendant).

So, your style.xml should be something like

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents"> <!-- rest of your style items--> </style> </resources>
  1. You add the material components library in module gradle file

implementation 'com.google.android.material:material:1.2.0'

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

current gradle version implementation 'com.google.android.material:material:1.1.0'
@Rooster No problem whether version you use, just make sure you add it
i have checked my AppTheme in style. I have something like this. <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> could you please share me how it should look like with Theme.MaterialComponents
Your AppTheme's parent is set AppCompat. Since you're using Material Components, set the parent to Theme.MaterialComponents.Light.DarkActionBar
It worked!!! Both of you, really thank you! with this, Zain you fixed my most painful problem, and Dev, you fixed the other. Thanks for helping out.
4

TextInputLayout is not a self closing tag. Edit your code and enclose TextInputEditText within TextInputLayout..

<com.google.android.material.textfield.TextInputLayout android:id="@+id/outlinedTextField" android:layout_width="match_parent" android:layout_height="wrap_content" android: hint = "@string/label" app:hintTextColor="@color/text_primary" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" app:boxStrokeWidthFocused="2dp" app:hintTextColor="@color/text_primary" app:boxStrokeColor="@color/border_primary"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout>
Improve this answer

2 Comments

@Hi Dev this is right, but the poster already added that their app launches when they remove style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox".. I think this is just a typo in their post
yeah that is a typo. sorry about that. it's not in the actual code. i will fix it in the question

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.