Android材料设计文本框endIcon

Question

我从谷歌的Material库中添加了一个EditText视图，并将endIcon模式设置为clear_text。然而，endIcon太大了（它完全适合文本视图），而根据文档，我认为它应该小一点。我尝试在布局XML中进行调整，但似乎找不到原因。我还查看了Material存储库中的endIcon属性，但似乎没有endIconSize属性。如果有人能指出我的错误，我将不胜感激。

TextView XML

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/descriptionTextField"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:boxBackgroundColor="@android:color/white"
app:boxStrokeColor="@color/colorSecondaryLight"
app:boxStrokeWidth="2dp"
app:endIconMode="clear_text"
app:errorEnabled="false"
app:layout_constraintBottom_toBottomOf="@+id/taskConfirmedBtn"
app:layout_constraintEnd_toStartOf="@+id/taskConfirmedBtn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/taskConfirmedBtn">

<com.google.android.material.textfield.TextInputEditText
  android:id="@+id/descriptionInput"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:fontFamily="sans-serif"
  android:inputType="textCapSentences"
  android:singleLine="true"
  android:textColor="@color/colorOnSurface" />

样式 xml

<resources>
<!-- Base application theme -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:colorBackground">@color/background</item>

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryVariant">@color/colorPrimaryLight</item>
<item name="colorOnPrimary">@color/colorOnPrimary</item>

<item name="colorSecondary">@color/colorSecondary</item>
<item name="colorSecondaryVariant">@color/colorSecondaryLight</item>
<item name="colorOnSecondary">@color/colorOnSecondary</item>

<item name="toolbarStyle">@style/Widget.Taskeroo.Toolbar</item>
<item name="actionBarTheme">@style/Widget.Taskeroo.ActionBar</item>
<item name="floatingActionButtonStyle">@style/Widget.Taskeroo.FloatingActionButton</item>
<item name="imageButtonStyle">@style/Widget.Taskeroo.ImageButton</item>
<item name="materialCardViewStyle">@style/Widget.Taskeroo.CardView</item>
<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>

<item name="android:textViewStyle">@style/SanSerifLightTextView</item>
<item name="android:buttonStyle">@style/SansSerifLightButton</item>
<item name="android:radioButtonStyle">@style/SansSerifLightButton</item>

</style>

<!-- Themes -->

<style name="SplashScreenTheme" parent="AppTheme.NoActionBar">
<item name="android:windowBackground">@drawable/splash_screen_bitmap</item>
</style>

<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="AppTheme.NoActionBar.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.NoActionBar.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<!-- Widgets -->

<style name="Widget.Taskeroo.ActionBar" parent="Widget.MaterialComponents.ActionBar.Primary">
<item name="android:colorControlNormal">@color/colorOnPrimary</item>
<item name="android:iconTint">@color/colorOnPrimary</item>
</style>

<style name="Widget.Taskeroo.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
<item name="titleTextColor">@color/colorOnPrimary</item>
</style>

<style name="Widget.Taskeroo.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
<item name="android:backgroundTint">@color/colorSecondaryLight</item>
<item name="tint">@color/colorOnSecondary</item>
</style>

<style name="Widget.Taskeroo.CardView" parent="Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">@color/colorSurface</item>
<item name="cardElevation">10dp</item>
<item name="android:elevation">8dp</item>
</style>

<style name="DividerStyle">
<item name="android:background">@color/colorSecondary</item>
</style>

<style name="Widget.Taskeroo.ImageButton" parent="Widget.AppCompat.Button.Borderless.Colored">
<item name="tint">@color/colorSecondary</item>
</style>

<!-- Components -->

<style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheet</item>
</style>

<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
<item name="backgroundTint">@color/colorSurface</item>
</style>

<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>

<!-- Fonts -->

<style name="SanSerifLightTextView" parent="android:Widget.TextView">
<item name="android:fontFamily">sans-serif-light</item>
</style>

<style name="SansSerifLightButton" parent="android:Widget.Holo.Button">
<item name="android:fontFamily">sans-serif-light</item>
</style>

<style name="SansSerifLightRadioButton" parent="android:Widget.Holo.CompoundButton.RadioButton">
<item name="android:fontFamily">sans-serif-light</item>
</style>

<style name="AppTheme.NoActionBar.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>

- Andrea Cerasoni

---

你能发一下屏幕截图吗？ - Gabriele Mariotti

还有，您正在使用哪个版本的材料组件库？ - Gabriele Mariotti

第一步是迁移到稳定的 1.1.0 版本，然后再次检查问题是否仍然存在。 - Gabriele Mariotti

我无法复制这个问题。你的应用程序主题中是否使用了MaterialComponents主题？ - Gabriele Mariotti

是的。我也会在原问题中包含我的样式 XML。 - Andrea Cerasoni

Answer 1

Your issue is here:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
   <item name="imageButtonStyle">@style/Widget.Taskeroo.ImageButton</item>
</style>

<style name="Widget.Taskeroo.ImageButton" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="tint">@color/colorSecondary</item>
</style>

您正在使用Widget.AppCompat.Button.*，而不是Widget.AppCompat.ImageButton。

样式Widget.AppCompat.Button.Borderless.Colored具有自定义尺寸。

- Gabriele Mariotti

---

搞定了。非常感谢！ - Andrea Cerasoni

Answer 2

在 your_view.xml 中尝试这个解决方案

     <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/til_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorEnabled="true"
            app:hintEnabled="false"
            app:passwordToggleDrawable="@drawable/show_password_selector" <-- add this line
            app:endIconMode="password_toggle" <-- add this line
            app:passwordToggleEnabled="true"> <-- add this line

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_password"
                android:inputType="textPassword"/>

        </com.google.android.material.textfield.TextInputLayout>

您也可以使用此解决方案来设置启动图标

希望能够帮到您

- Javid Sattar

Answer 3

将代码更改为如下：

<com.google.android.material.textfield.TextInputLayout 
    app:endIconDrawable="@drawable/customDrawable"> 
    ...
</com.google.android.material.textfield.TextInputLayout>

其中自定义的drawable是您定义的任何形状和大小的矢量/PNG图像。

如果这仍然无法解决您的问题，请尝试降级到：

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

很可能它会解决你的问题。

- Ankit Gupta

---

我尝试使用自定义矢量资源并更改大小，但它总是完全适合视图。似乎有些东西正在扩展该资产。 - Andrea Cerasoni

嗨，你尝试过降低库的版本吗？ - Ankit Gupta

我已经降级到 'com.google.android.material:material:1.1.0'。 - Andrea Cerasoni

Answer 4

试试这个 -> 添加依赖项： Gradle：

allprojects {
repositories {
  ...
  maven { url 'https://jitpack.io' }
}
}

依赖项：

implementation 'com.github.HITGIF:TextFieldBoxes:1.4.3'

如果您想要在字段末尾显示一个图标，可以在XML中使用app:endIcon或setEndIcon（Int resourceID）来设置ImageButton的图标。

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:endIcon="@drawable/ic_mic_black_24dp"
>

在Java中：

final TextFieldBoxes textFieldBoxes = findViewById(R.id.text_field_boxes);
textFieldBoxes.getEndIconImageButton().setOnClickListener(new 
View.OnClickListener() {
@Override
public void onClick(View view) {
    // What you want to do when it's clicked
}
});

- Wini

---

我更喜欢使用Material库（我的主题、小部件和样式都基于Material）。 - Andrea Cerasoni