bagaimana mengubah warna label TextinputLayout dan teks edittline menggarisbawahi android


121

Saya menggunakan perpustakaan desain android TextinputLayout. Tapi tidak bisa menyesuaikan warna petunjuk, warna label dan warna garis bawah EditTextdi dalamnya TextinputLayout. Tolong bantu.


1
Ini harus memiliki warna aksen sesuai dengan pedoman desain bukan?
Raghunandan

ya, tapi saya akan memiliki banyak editText dengan warna yang berbeda dari warna aksen tema.
Nitesh Verma


Silakan periksa jawaban saya di sini untuk mengubah warna label
Dirangkum Jain

Saya dapat mengubah garis bawah dengan andal dalam keadaan fokus dan tidak fokus dengan menggunakan
drawable

Jawaban:


257

Ubah warna garis bawah:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

Untuk info lebih lanjut periksa utas ini .

Ubah warna petunjuk saat mengambang

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

dan gunakan seperti ini:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

Ubah warna petunjuk jika itu bukan label mengambang:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

Terima kasih kepada @AlbAtNf


Saya tidak dapat mengubah warna petunjuk (jika bukan label). Bisakah Anda membantu?
Nitesh Verma

Saya benar-benar prihatin tentang ukuran aplikasi saya, mengingat, apakah ada gagasan tentang berapa banyak ukuran tambahan yang diharapkan untuk dipasang di aplikasi saya?
Nitesh Verma

maaf, tidak mendapatkan pertanyaan Anda, tolong jelaskan lebih lanjut, ukuran dalam konteks apa, ukuran grafis dari berat aplikasi (Seperti apk di atas 20mb atau sesuatu), dan sebelumnya Anda menerima jawaban saya dan sekali lagi Anda menghapus penerimaan Anda, dapatkah saya bertanya , jadi?
Pankaj Arora

becoz, saya tidak bisa mengubah warna petunjuk setelah jawaban Anda. Beberapa bagian berhasil untuk saya tetapi ini bukan solusi lengkap untuk apa yang saya minta. Mengenai ukuran aplikasi, tidak menambahkan pustaka eksternal seperti Material EdiTText meningkatkan ukuran aplikasi?
Nitesh Verma

4
@NiteshVerma menemukan solusi untuk menyetel Warna Petunjuk, jika ini bukan label mengambang: cukup setel android:textColorHintke TextInputLayoutdalam XML.
AlbAtNf

30

Berdasarkan jawaban Fedor Kazakov dan lainnya, saya membuat konfigurasi default.

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Widget.Design.TextInputLayout" parent="AppTheme">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
        <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
        <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
        <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
        <!-- Floating label appearance here -->
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
        <!-- Error message appearance here -->
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">20sp</item>
    </style>

</resources>

activity_layout.xml

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text hint here"
        android:text="5,2" />

</android.support.design.widget.TextInputLayout>

Fokus:

Terfokus

Tanpa fokus:

Tanpa fokus

Pesan eror:

masukkan deskripsi gambar di sini


9
Apa yang harus saya lakukan agar mendapatkan warna pink juga untuk contoh "Tanpa fokus"?
John Smith

bagaimana cara menggunakan gaya ini?
Hanzala

24

Dengan Material Components Library Anda dapat menggunakan file com.google.android.material.textfield.TextInputLayout.

Anda dapat menerapkan gaya kustom untuk mengubah warna.

Untuk mengubah warna petunjuk Anda harus menggunakan atribut ini:
hintTextColordan android:textColorHint.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/selector_hint_text_color</item>
</style>

Anda harus menggunakan selektor untuk file android:textColorHint. Sesuatu seperti:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>

Untuk mengubah warna garis bawah Anda harus menggunakan atribut: boxStrokeColor.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    ....
    <item name="boxStrokeColor">@color/selector_stroke_color</item>
</style>

Juga dalam hal ini Anda harus menggunakan selektor. Sesuatu seperti:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

Anda juga dapat menerapkan atribut ini dalam tata letak Anda:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/selector_stroke_color"
    app:hintTextColor="?attr/colorPrimary"
    android:textColorHint="@color/selector_hint_text_color"
    ...>

1
Bagaimana cara mengubah warna garis bawah EditText di dalam TextinputLayout? Maksud saya keadaan tidak fokus.
Keabu-

@EvgeniiVorobei Dijelaskan dalam jawaban. Ini ditentukan oleh boxStrokeColor. Dalam contoh selector_stroke_colorkhususnya baris terakhir:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
Gabriele Mariotti

Terima kasih banyak! Saya tidak bisa memahaminya sendiri.
Evgenii Vorobei

masalah saya adalah saya ingin warna petunjuk menjadi abu-abu dan setelah teks edittext diisi saya ingin menjadi oranye tidak peduli apakah itu fokus atau tidak. saya bisa melakukannya saat fokus. tetapi tidak dapat melakukannya jika tidak. Jadi chan Anda membantu saya dengan itu @GabrieleMariotti
Anmol317

20

Tambahkan atribut ini di tag Edittext dan nikmati:

 android:backgroundTint="@color/colorWhite"

5
efek: mengubah warna garis pada perangkat dengan API level 21 ke atas
Someone Somewhere

17

Entri Blog ini menjelaskan berbagai aspek gaya EditTextdan AutoCompleteTextViewdibungkus oleh TextInputLayout.

Untuk EditTextdan AppCompat lib 22.1.0+ Anda dapat menyetel atribut tema dengan beberapa setelan terkait tema:

<style name="StyledTilEditTextTheme">
   <item name="android:imeOptions">actionNext</item>
   <item name="android:singleLine">true</item>
   <item name="colorControlNormal">@color/greyLight</item>
   <item name="colorControlActivated">@color/blue</item>
   <item name="android:textColorPrimary">@color/blue</item>
   <item name="android:textSize">@dimen/styledtil_edit_text_size</item>
</style>

<style name="StyledTilEditText">
    <item name="android:theme">@style/StyledTilEditTextTheme</item>
    <item name="android:paddingTop">4dp</item>
</style>

dan terapkan pada EditText:

<EditText
    android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

Untuk AutoCompleteTextViewhal-hal yang lebih rumit karena membungkusnya TextInputLayoutdan menerapkan tema ini merusak perilaku label mengambang. Anda perlu memperbaikinya dalam kode:

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

dan di Activity.onCreate:

setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
    if(hasFocus) {
        setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
    } else {
        if(autoCompleteTextView.getText().length() == 0) {  
              setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
        }
    }
});

8

Jika Anda ingin mengubah bar garis warna / dan warna sedikit teks dari TextInputLayout(apa warna aksen biasanya adalah), kemudian hanya menciptakan gaya ini:

<style name="MyStyle">
    <item name="colorAccent">@color/your_color</item>
</style>

Kemudian terapkan ke Anda TextInputLayoutsebagai tema :

<android.support.design.widget.TextInputLayout
    ...
    app:theme="@style/MyStyle" />

Ini pada dasarnya menetapkan tema (bukan gaya) ke satu tampilan (berlawanan dengan seluruh aktivitas).


SDK Min Anda harus berusia 21
Azizjon Kholmatov

5
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
</style>

Anda dapat mengganti gaya ini untuk tata letak

Dan Anda juga bisa mengubah gaya item EditText bagian dalam juga.


bagaimana cara menggunakan gaya ini? apakah ada cara untuk mengganti semua gaya aplikasi di satu tempat?
Hanzala

5
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@color/actionBar_background</item>
    <item name="colorControlActivated">@color/actionBar_background</item>
    <item name="colorControlHighlight">@color/actionBar_background</item>
    <item name="colorAccent">@color/actionBar_background</item>
    <item name="android:textColorHint">@color/actionBar_background</item>
</style>

menerapkan gaya ini ke TextInputLayout


2
hanya catatan singkat untuk menerapkan gaya ke TextInputLayout:android:theme="@style/EditScreenTextInputLayoutStyle"
jackycflau

5

A TextinputLayoutbukanlah sebuah pandangan, tapi sebuah Layout, seperti yang dijelaskan dengan sangat baik oleh Dimitrios Tsigouris dalam posting blognya di sini . Oleh karena itu, Anda tidak memerlukan file Style, yang Viewshanya untuk , tetapi gunakan file Theme. Mengikuti posting blog, saya berakhir dengan solusi berikut:

Mulailah styles.xmldengan Anda

<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="android:textColor">@color/your_colour_here</item>
        <item name="android:textColorHint">@color/your_colour_here</item>
        <item name="colorControlNormal">@color/your_colour_here</item>
        <item name="colorControlActivated">@color/your_colour_here</item>
        <item name="colorControlHighlight">@color/your_colour_here</item>
</style>

Dan dalam tata letak Anda tambahkan

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

1
Gunakan Widget.MaterialComponents.TextInputLayout.OutlinedBox di induk
Sudip Sadhukhan
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.