While using TextInputLayout with app:passwordToggleEnabled="true" EditText text gravity isn't centered well as shown in the photo. Any help?
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<EditText
android:gravity="center"
android:id="#+id/passwordEt"
style="#style/editTextStyle"
android:layout_marginBottom="20dp"
android:hint="#string/password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
and for the text style
<style name="editTextStyle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">50dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:background">#drawable/text_fields</item>
<item name="android:padding">15dp</item>
</style>
Just add transparent drawable to the left side of EditText.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_password_space"
android:drawableStart="#drawable/ic_password_space"
android:gravity="center" />
</android.support.design.widget.TextInputLayout>
For transparent drawable you can use whatever you want with android:width="48dp".
Create drawable resource file #drawable/ic_password_space.xml.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="1dp"
android:viewportWidth="1.0"
android:viewportHeight="1.0">
<path
android:pathData="M"
android:fillColor="#0000"/>
</vector>
Add empty 48dp drawable on both sides of the edit text if you hiding passwordToggle when the editText is empty, Otherwise, the cursor would not be in center initially.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_password_toggle_space"
android:drawableEnd="#drawable/ic_password_toggle_space"
android:gravity="center" />
for creating empty drawable you can add a blank vector ic_password_toggle_space.xml file in drawable resources:-
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="1dp"
android:viewportWidth="1.0"
android:viewportHeight="1.0">
<path
android:pathData="M"
android:fillColor="#0000"/>
</vector>
Adding left-drawable to inner EditText won't take effect (at least as for support lib. v26.1.0).
Adding left-padding to inner EditText takes some effect, but contents of EditText still won't be centered properly - no matter what value you will use for padding.
The only working solution I found (except subclassing or using 3rd party libs) - is to add negative drawablePadding to EditText. So in xml it will look like:
android:drawablePadding="-48dp"
But it is kind of hacky, because implementation of InputTextLayout might change in future. So use it at your own risk.
Related
I have a layout with several TextInputEditText fields nested in TextInputLayouts. I also have one dropdown menu using AutoCompleteTextView, also nested in a TextInputLayout. I use a custom background drawable on the fields to create a rounded field. Unfortunately, I cannot for the life of me figure out how to get rid of the little outline around the AutoCompleteTextView.
With the TextInputEditText fields, I can eliminate the outlines by setting the background on it. Doing this on the AutoCompleteTextView does nothing, and I have to set it on the parent TextInputLayout to see the background. But yet, the outline remains.
I believe this has something to do with material design (and its styles?) because when you press on the field, the outline turns orange, which is the primary color in our app's theme as set in the styles.xml.
Here is a relevant snippet of the XML layout in question. For comparison, the first part is the city field, and the second is the state field:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_city"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:visibility="#{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
app:endIconMode="clear_text"
app:hintEnabled="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/input_apartment">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_city_edit_text"
style="#style/AppFont500.DarkGrey.EditTextHint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:visibility="#{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
android:imeOptions="actionDone"
android:inputType="number"
android:text="#={viewModel.addDevice.city}"
android:hint="#string/hint_city"
android:background="#drawable/rounded_edittext_states"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_state"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:visibility="#{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
app:endIconMode="dropdown_menu"
app:hintEnabled="false"
app:layout_constraintEnd_toStartOf="#id/input_zip_code"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/input_city"
android:background="#drawable/rounded_edittext_states"
>
<AutoCompleteTextView
android:id="#+id/input_state_edit_text"
style="#style/AppFont500.DarkGrey.EditTextHint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:layout_marginEnd="4dp"
android:visibility="#{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
android:imeOptions="actionDone"
android:inputType="none"
android:text="#={viewModel.addDevice.state}"
android:hint="#string/hint_state"
/>
</com.google.android.material.textfield.TextInputLayout>
I believe the key here involves styles and themes. Here are the custom styles and theme used within this snippet:
<style name="AppMaterialTheme" parent="#style/Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/primaryOrange</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="AppFont500">
<item name="fontFamily">#font/poppins_medium_500</item>
</style>
<style name="AppFont500.DarkGrey">
<item name="android:textColor">#color/secondaryDarkGrey</item>
</style>
<style name="AppFont500.DarkGrey.EditTextHint">
<item name="android:textSize">16sp</item>
</style>
The background comes from this selector. It previously had more items, but right now just has one:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:drawable="#drawable/rounded_edittext" />
</selector>
And the drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#FFFFFF" />
<corners
android:radius="30dp" />
</shape>
Mainly, what I have seen in questions related to outlines around edit texts is to either edit the stroke or boxStroke. I tried both and set them to an invisible value, but it does not change the stroke at all.
Here is how you remove this outline.
In your TextInputLayout XML code add the following snippet:
app:boxStrokeWidth="0dp"
I can't seem to get rid of the black underline from Exposed Dropdown Menu done according to material design guide in my android UI.
The dropdown looks like this:
I have tried setting background to null, transparent or custom shape. app:boxBackgroundMode="none" doesn't work either.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/spinner_age"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_rounded_button"
android:hint="Age">
<AutoCompleteTextView
android:id="#+id/age_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"/>
</com.google.android.material.textfield.TextInputLayout>
Ideally the dropdown would look like a button without the underline. How do I get rid of it?
Please change your this line
android:background="#android:color/transparent"
With
android:background="#00000000"
Make background = null
<AutoCompleteTextView
android:id="#+id/age_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"/>
just add this line to remove the underline
android:inputType="textNoSuggestions"
Just use the standard style #style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu and
You don't need to use a custom background shape, you can just use the
app:boxCornerRadius* attributes to define the rounded shape.
Something like:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
app:boxCornerRadiusBottomEnd="32dp"
app:boxCornerRadiusTopEnd="32dp"
app:boxCornerRadiusBottomStart="32dp"
app:boxCornerRadiusTopStart="32dp"
app:boxStrokeColor="#color/myselector"
...>
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
/>
</com.google.android.material.textfield.TextInputLayout>
To change the color of the line under the component, you have to change the app:boxStrokeColor attribute. Just customize the selector as you prefer:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0" android:color="?attr/colorOnSurface"/>
</selector>
This is the result:
Pay attention to this note in doc:
Note: When using a filled text field with an EditText child that is not a TextInputEditText, make sure to set the EditText's android:background to #null. This allows TextInputLayout to set a filled background on the EditText.
Alternative:
With the new version 1.1.0 you can also use the shapeAppearanceOverlay attribute to customize the shape of your component.
Just use:
<com.google.android.material.textfield.TextInputLayout
style="#style/MyFilledBox_ExposedDropdownMenu
...>
<AutoCompleteTextView
android:background="#null"
... />
</com.google.android.material.textfield.TextInputLayout>
and this style:
<!-- Rounded -->
<style name="MyFilledBox_ExposedDropdownMenu" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu">
<item name="shapeAppearanceOverlay">#style/ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded</item>
<item name="boxStrokeColor">#color/myselector</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">32dp</item>
</style>
Setting boxStrokeWidth = 0dp would solve it
Is there way to remove floating label (hint) when the TextInputLayout is in focused mode?
When I try to set app:hintEnabled="false" and hint inside TextInputeEditText, the TextInputLayout behaves weird by hiding top stroke.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Important thing is that I use Material Components in version 1.1.0-alpha01.
Edit
This is what it looks like (when input is not focused):
Top stroke is cut.
Yes there's a rather simple way to remove the floating label hint and only have a hint inside your TextInputLayout.
This can be easily achieved by disabling the hint in the TextInputLayout, and setting the hint on the TextInputEditText instead of the TextInputLayout like this:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint text comes here" />
</com.google.android.material.textfield.TextInputLayout>
The result looks something like this:
And when some text is added, it will look like this:
I tried this out in Material Components v1.2.0
Just set hint for EditText programmatically and remove app:hintEnabled="false" from your TextInputLayout if you have, in my case worked :)
Try to set hint empty of both text layout and edit text:-
<com.google.android.material.textfield.TextInputLayout
app:boxBackgroundMode="outline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:hint=""
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
If you want to use hint then you can use custom drawable as background of EditText :-
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp"/>
<solid android:color="#ffffff"/>
<stroke android:color="#000000"
android:width="2dp"/>
</shape>
You should use this style in first :
<style name="TextInputLayoutOutlinedBoxStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textColorHint">#F5F5F5</item>
<item name="hintTextAppearance">#style/HintTextAppearance</item>
<item name="boxCornerRadiusBottomEnd">20dp</item>
<item name="boxCornerRadiusBottomStart">20dp</item>
<item name="boxCornerRadiusTopEnd">20dp</item>
<item name="boxCornerRadiusTopStart">20dp</item>
</style>
And you should have textinputlayout that contain this style like this :
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayoutOutlinedBoxStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/relativelayout_activatetoken_main"
android:layout_marginStart="20dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"
android:hint="#string/activatetoken_passwordhint"
android:textColorHint="#color/colorText"
app:helperText="#string/activatetoken_passwordhelpertext"
app:helperTextTextAppearance="#style/TextAppearanceHelper"
app:hintTextAppearance="#style/TextAppearanceBase"
app:passwordToggleTint="#color/text_50">
And for the border color use this in colors :
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#F5F5F5</color>
Android support library added TextInputLayout adding several features like floating label and password toggle visisbilty
My problem is How to customize passwordVisisbilityDrawable so my own icons for visible and hidden state will be displayed.
Also when I enable passwordToggleVisibility, height will increase.
for change drawable, create a selector like below
password_toggle_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_password_visible" android:state_checked="true"/>
<item android:drawable="#drawable/ic_password_hidden"/>
</selector>
then assign to TextInputLayout like below:
<android.support.design.widget.TextInputLayout
android:id="#+id/PasswordLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
app:passwordToggleEnabled="true"
**app:passwordToggleDrawable="#drawable/password_toggle_drawable"**
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CommonTextInputEditText
android:id="#+id/PasswordEditText"
android:padding="0dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
for height, I used below code after inflating:
CheckableImageButton text_input_password_toggle = (CheckableImageButton) PasswordLayout().findViewById(android.support.design.R.id.text_input_password_toggle);
text_input_password_toggle.setMinimumHeight(0);
PasswordEditText().setMinHeight(0);
PasswordEditText().setMinimumHeight(0);
I am trying to create an button which is attached to the TextView above the button as shown in the below image.
The above screenshot is taken from the Note 4 and the OS version is 5.0.1.
Below is the code is used to achieve the UI.
layout/xyz.xml
<Button
android:layout_width="250dp"
android:layout_height="50dp"
android:theme="#style/myButton"
android:text="Cancel"/>
values-v21/style.xml
<style name="myButton" parent="#style/Base.Widget.AppCompat.Button">
<item name="android:colorButtonNormal">#3578A9</item>
<item name="android:inset">0dp</item>
</style>
But if I run the same code in Nexus4 OS verison 5.1.1, the button is taking the margin for all the 4 sides and the screenshot looks like below.
If I remove the "android:theme" and provide the "android:background", the UI looks like the first image. But It won't give the ripple effect. So how the achieve the UI as first image with the ripple effect.
android:insetBottom="0dp"
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="56dp"
android:text="Edit"
app:cornerRadius="0dp"
android:insetBottom="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
Step 1: Put the below code in styles.xml
<style name="myColoredButton">
<item name="android:textColor">#FF3E96</item>
<item name="android:padding">0dp</item>
<item name="android:minWidth">88dp</item>
<item name="android:minHeight">36dp</item>
<item name="android:elevation">1dp</item>
<item name="android:translationZ">1dp</item>
<item name="android:background">#FF0000</item>
</style>
Here you can change the textColor( I have used #FF3E96 above) and background color (I have used #FF0000) for your button. You can also override textColor values from your Button related layout xml by using android:colorButtonNormal.
Step 2:Create a new XML file under drawables folder and add the following code: I named my XML file as primary.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimary">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp" />
<solid android:color="#8B8386" />
</shape>
</item>
</ripple>
Step 3: Use the style and drawable in your Button as follows.
<Button
style="#style/myColoredButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:text="Cancel"
android:gravity="center"
android:background="#drawable/primary_round"
android:colorButtonNormal="#3578A9" />
Hope it solves your problem.
I also had issue related to top and bottom spacing for Apply button as you can see above image.
I wanted to show button with uniform background without any spacing as you can see for "Reset" button.
But I have to set both property button background as well as background Tint to same color to achieve this.
If I reuse this buttons at more than one place then I have to programmatically change 2 property to change background color of button.
You can try below solution:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.google.android.material.button.MaterialButton
android:id="#+id/btnLeftOk"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:filterTouchesWhenObscured="true"
android:gravity="center"
android:text="#string/apply"
android:textColor="#color/white"
app:backgroundTint="#color/primary_dark_gray"
app:cornerRadius="0dp" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnRightCancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:filterTouchesWhenObscured="true"
android:gravity="center"
android:text="#string/reset"
android:insetTop="0dp"
android:insetBottom="0dp"
android:textColor="#color/white"
app:cornerRadius="0dp"
app:backgroundTint="#color/btn_background_gray" />
</LinearLayout>
After applying below property to "Reset" button.
android:insetTop="0dp"
android:insetBottom="0dp"
Button spacing will be removed from top and bottom. It will occupy spacing with button color. (like in Reset button)
Button background can be changed using one property app:backgroundTint.