Cara mengubah warna label mengambang dari TextInputLayout

Dengan mengacu pada yang baru TextInputLayoutdirilis oleh Google, bagaimana cara mengubah warna teks label mengambang?

Pengaturan colorControlNormal, colorControlActivated, colorControlHighLightdalam gaya tidak membantu.

Inilah yang saya miliki sekarang:

Coba Kode Di Bawah Ini Berfungsi Dalam Keadaan Normal

 <android.support.design.widget.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:theme="@style/TextLabel">

     <android.support.v7.widget.AppCompatEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:hint="Hiiiii"
         android:id="@+id/edit_id"/>

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

Dalam Styles Folder Kode TextLabel

 <style name="TextLabel" parent="TextAppearance.AppCompat">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

Setel ke Tema Utama Aplikasi, Ini Bekerja Hanya Sorot Keadaan Saja

 <item name="colorAccent">@color/Color Name</item>

Memperbarui:

UnsupportedOperationException: Tidak dapat mengonversi ke warna: type = 0x2 di api 16 atau di bawah

Larutan

Memperbarui:

Apakah Anda menggunakan Perpustakaan Komponen Bahan

Anda dapat menambahkan baris di bawah ini ke tema utama Anda

 <item name="colorPrimary">@color/your_color</item> // Activated State
 <item name="colorOnSurface">@color/your_color</item> // Normal State

atau Anda ingin warna yang berbeda dalam keadaan noraml dan keadaan diaktifkan dan dengan kustomisasi ikuti kode di bawah ini

<style name="Widget.App.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputLayout</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item> //Changes the Shape Apperance
    <!--<item name="hintTextColor">?attr/colorOnSurface</item>-->   //When you added this line it will applies only one color in normal and activate state i.e colorOnSurface color
</style>

<style name="ThemeOverlay.App.TextInputLayout" parent="">
    <item name="colorPrimary">@color/colorPrimaryDark</item>  //Activated color
    <item name="colorOnSurface">@color/colorPrimary</item>    //Normal color
    <item name="colorError">@color/colorPrimary</item>        //Error color

    //Text Appearance styles
    <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
    <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>

    <!--Note: When setting a materialThemeOverlay on a custom TextInputLayout style, don’t forget to set editTextStyle to either a @style/Widget.MaterialComponents.TextInputEditText.* style or to a custom one that inherits from that.
    The TextInputLayout styles set materialThemeOverlay that overrides editTextStyle with the specific TextInputEditText style needed. Therefore, you don’t need to specify a style tag on the edit text.-->
    <item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
</style>

<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">4dp</item>
</style>

Tambahkan baris di bawah ini ke tema utama Anda atau Anda dapat mengatur style ke textinputlayout di xml Anda

<item name="textInputStyle">@style/Widget.App.TextInputLayout</item>

<style name="TextAppearance.App.TextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/red</item>
    <item name="android:textSize">14sp</item>
</style>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@color/gray"  //support 23.0.0
    app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" >

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint" />
</android.support.design.widget.TextInputLayout>

Temukan jawabannya, gunakan android.support.design:hintTextAppearanceatribut untuk mengatur tampilan label apung Anda sendiri.

Contoh:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:hintTextAppearance="@style/TextAppearance.AppCompat">

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/prompt_password"/>
</android.support.design.widget.TextInputLayout>

Anda tidak perlu menggunakan android:theme="@style/TextInputLayoutTheme"untuk mengubah warna label mengambang, karena itu akan mempengaruhi keseluruhan tema untuk TextView kecil yang digunakan sebagai label. Sebagai gantinya, Anda dapat menggunakan app:hintTextAppearance="@style/TextInputLayout.HintText"tempat:

<style name="TextInputLayout.HintText">
  <item name="android:textColor">?attr/colorPrimary</item>
  <item name="android:textSize">@dimen/text_tiny_size</item>
  ...
</style>

Beritahu saya jika solusinya bekerja :-)

bagaimana cara mengubah warna teks label mengambang?

Dengan pustaka Komponen Bahan, Anda dapat menyesuaikan TextInputLayoutwarna teks petunjuk menggunakan (memerlukan versi 1.1.0)

• Dalam tata letak:

  • app:hintTextColor atribut: warna label ketika diciutkan dan bidang teks aktif
  • android:textColorHint atribut: warna label di semua negara bagian bidang teks lainnya (seperti istirahat dan dinonaktifkan)

<com.google.android.material.textfield.TextInputLayout
     app:hintTextColor="@color/mycolor"
     android:textColorHint="@color/text_input_hint_selector"
     .../>

• memperluas gaya material Widget.MaterialComponents.TextInputLayout.* :

<style name="MyFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="hintTextColor">@color/mycolor</item>
    <item name="android:textColorHint">@color/text_input_hint_selector</item>
</style>

Selector default untuk android:textColorHintadalah:

<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>

Ok, jadi, saya menemukan jawaban ini sangat membantu dan terima kasih kepada semua orang yang berkontribusi. Hanya untuk menambahkan sesuatu. Jawaban yang diterima memang jawaban yang benar ... TAPI ... dalam kasus saya, saya ingin menerapkan pesan kesalahan di bawah EditTextwidget dengan app:errorEnabled="true"dan satu baris ini membuat hidup saya sulit. sepertinya ini mengesampingkan tema yang saya pilih android.support.design.widget.TextInputLayout, yang memiliki warna teks berbeda yang ditentukan olehandroid:textColorPrimary .

Pada akhirnya saya menerapkan warna teks langsung ke EditTextwidget. Kode saya terlihat seperti ini:

styles.xml

<item name="colorPrimary">@color/my_yellow</item>
<item name="colorPrimaryDark">@color/my_yellow_dark</item>
<item name="colorAccent">@color/my_yellow_dark</item>
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:textColorSecondary">@color/dark_gray</item>
<item name="android:windowBackground">@color/light_gray</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColorHint">@color/dark_gray</item>
<item name="android:colorControlNormal">@android:color/black</item>
<item name="android:colorControlActivated">@android:color/white</item>

Dan widget saya:

<android.support.design.widget.TextInputLayout
        android:id="@+id/log_in_layout_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true">

        <EditText
            android:id="@+id/log_in_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="@android:color/black"
            android:ems="10"
            android:hint="@string/log_in_name"
            android:inputType="textPersonName" />
</android.support.design.widget.TextInputLayout>

Sekarang ini menampilkan warna teks hitam, bukan textColorPrimaryputih.

Saya sarankan Anda membuat tema gaya untuk TextInputLayout dan hanya mengubah warna aksen. Tetapkan orang tua ke tema basis aplikasi Anda:

 <style name="MyTextInputLayout" parent="MyAppThemeBase">
     <item name="colorAccent">@color/colorPrimary</item>
 </style>

 <android.support.design.widget.TextInputLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:theme="@style/MyTextInputLayout">

Dalam versi terbaru dari perpustakaan dukungan (23.0.0+), TextInputLayoutambil atribut berikut dalam XML untuk mengedit warna label mengambang:android:textColorHint="@color/white"

Alih-alih Brahmam Yamani jawaban saya lebih suka menggunakan Widget.Design.TextInputLayout sebagai orangtua. Itu memastikan, bahwa semua item yang diperlukan ada, bahkan jika tidak semua item ditimpa. Dalam jawaban Yamanis, aplikasi akan macet dengan sumber daya yang tidak terselesaikan, jika setErrorEnabled (true) dipanggil.

Cukup ubah gaya menjadi yang berikut:

<style name="TextLabel" parent="Widget.Design.TextInputLayout">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

Dalam kasus saya, saya menambahkan ini " app:hintTextAppearance="@color/colorPrimaryDark"di widget TextInputLayout saya.

Secara terprogram Anda dapat menggunakan:

/* Here you get int representation of an HTML color resources */
int yourColorWhenEnabled = ContextCompat.getColor(getContext(), R.color.your_color_enabled);
int yourColorWhenDisabled = ContextCompat.getColor(getContext(), R.color.your_color_disabled);

/* Here you get matrix of states, I suppose it is a matrix because using a matrix you can set the same color (you have an array of colors) for different states in the same array */
int[][] states = new int[][]{new int[]{android.R.attr.state_enabled}, new int[]{-android.R.attr.state_enabled}};

/* You pass a ColorStateList instance to "setDefaultHintTextColor" method, remember that you have a matrix for the states of the view and an array for the colors. So the color in position "colors[0x0]" will be used for every states inside the array in the same position inside the matrix "states", so in the array "states[0x0]". So you have "colors[pos] -> states[pos]", or "colors[pos] -> color used for every states inside the array of view states -> states[pos] */
myTextInputLayout.setDefaultHintTextColor(new ColorStateList(states, new int[]{yourColorWhenEnabled, yourColorWhenDisabled})

Penjelasan:

Dapatkan nilai warna int dari sumber daya warna (cara menyajikan warna rgb yang digunakan oleh android). Saya menulis ColorEnabled, tetapi seharusnya, untuk jawaban ini, ColorHintExpanded & ColorViewCollapsed. Pokoknya ini adalah warna yang akan Anda lihat ketika petunjuk tampilan "TextInputLayout" dalam status Expanded atau Collapsed; Anda akan mengaturnya dengan menggunakan array berikutnya pada fungsi "setDefaultHintTextColor" tampilan. Referensi: Referensi untuk TextInputLayout - cari di halaman ini metode "setDefaultHintTextColor" untuk info lebih lanjut

Melihat ke dokumen di atas Anda dapat melihat bahwa fungsi mengatur warna untuk Diperluas & diciutkan petunjuk dengan menggunakan ColorStateList.

Dokumen ColorStateList

Untuk membuat ColorStateList, saya pertama kali membuat matriks dengan status yang saya inginkan, dalam kasus saya state_enabled & state_disabled (yang, dalam TextInputLayout, sama dengan Hint Expanded dan Hint Collapsed [Saya tidak ingat urutan lolnya, toh saya menemukannya) hanya melakukan tes]). Kemudian saya meneruskan ke konstruktor dari ColorStateList array dengan nilai-nilai int sumber daya warna, warna-warna ini memiliki korespondensi dengan matriks negara (setiap elemen dalam array warna sesuai dengan masing-masing array dalam keadaan matriks pada posisi yang sama). Jadi elemen pertama dari array warna akan digunakan sebagai warna untuk setiap negara dalam array pertama dari matriks state (dalam kasus kami array hanya memiliki 1 elemen: diaktifkan negara = petunjuk negara diperluas untuk TextInputLayut). Status hal terakhir memiliki nilai positif / negatif, dan Anda hanya memiliki nilai positif,

Semoga ini bisa membantu. Sampai jumpa memiliki coding yang bagus (:

Untuk mengubah warna petunjuk dan mengedit warna garis bawah teks: colorControlActivated

Untuk mengubah warna penghitung karakter: textColorSecondary

Untuk mengubah warna pesan kesalahan: colorControlNormal

Untuk mengubah warna tombol visibilitas kata sandi: colorForeground

Untuk info lebih lanjut tentang TextInputLayout, baca http://www.zoftino.com/android-textinputlayout-tutorial

<style name="MyAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorControlActivated">#e91e63</item>
    <item name="android:colorForeground">#33691e</item>
    <item name="colorControlNormal">#f57f17</item>
    <item name="android:textColorSecondary">#673ab7</item>
</style>

Anda harus mengubah warna Anda di sini

<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>

Sekarang, cukup gunakan colorAccentdan colorPrimaryakan bekerja dengan sempurna.

Saya memecahkan masalah. Ini Layout ：

 <android.support.design.widget.TextInputLayout
           android:id="@+id/til_username"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="@string/username"
           >

           <android.support.v7.widget.AppCompatEditText android:id="@+id/et_username"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:singleLine="true"
               />
       </android.support.design.widget.TextInputLayout>

Ini Gaya:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>
<!-- Application theme. -->


 <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="colorAccent">@color/pink</item>
        <item name="colorControlNormal">@color/purple</item>
        <item name="colorControlActivated">@color/yellow</item>
    </style>

Anda harus menggunakan tema Anda dalam aplikasi:

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
</application>

untuk mengubah warna label teks ketika Anda berfokus padanya. yaitu mengetik di dalamnya. Anda harus menambahkan tentukan

<item name="android:textColorPrimary">@color/yourcolorhere</item>

Hanya sebuah catatan: Anda harus menambahkan semua implementasi ini ke tema utama Anda.

Ini Bekerja untuk saya ..... tambahkan warna petunjuk di TextInputLayout

    <android.support.design.widget.TextInputLayout
        android:textColorHint="#ffffff"
        android:id="@+id/input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/edtTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:singleLine="true"
            />
    </android.support.design.widget.TextInputLayout>

Saya mencoba menggunakan android: textColorHint di android.support.design.widget.TextInputLayout berfungsi dengan baik.

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColorHint="@color/colorAccent">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Hello"
                android:imeActionLabel="Hello"
                android:imeOptions="actionUnspecified"
                android:maxLines="1"
                android:singleLine="true"/>

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

  <style name="AppTheme2" parent="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlActivated">#fff</item></style>    

tambahkan ini ke styles dan atur TextInputLayout Theam ke App2 dan itu akan berfungsi;)

<com.google.android.material.textfield.TextInputLayout
    android:hint="Hint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TextInputLayoutHint">

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:maxLines="1"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_5sdp"
        android:textColor="#000000"
        android:textColorHint="#959aa6" />

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

res / values ​​/ styles.xml

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">#545454</item>
    <item name="colorControlActivated">#2dbc99</item>
    <item name="android:textSize">11sp</item>
</style>

Dapat digunakan app:hintTextColorjika Anda menggunakan com.google.android.material.textfield.TextInputLayout, coba ini

 <com.google.android.material.textfield.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="@string/app_name" 
     app:hintTextColor="@android:color/white">                   

     <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
 </com.google.android.material.textfield.TextInputLayout>

Coba Kode Di Bawah Ini Berfungsi Dalam Keadaan Normal

<android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/TextLabel">

 <android.support.v7.widget.AppCompatEditText
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="Hiiiii"
     android:id="@+id/edit_id"/>


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

Dalam Styles Folder Kode TextLabel

 <style name="TextLabel" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">@color/Color Name</item> 
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">@color/Color Name</item>
<item name="colorControlNormal">@color/Color Name</item>
<item name="colorControlActivated">@color/Color Name</item>
 </style>

Dari dokumentasi:

Petunjuk harus ditetapkan pada TextInputLayout, bukan pada EditText. Jika sebuah petunjuk ditentukan pada EditText anak dalam XML, TextInputLayout mungkin masih berfungsi dengan benar; TextInputLayout akan menggunakan petunjuk EditText sebagai label apung. Namun, panggilan selanjutnya untuk memodifikasi petunjuk tidak akan memperbarui petunjuk TextInputLayout. Untuk menghindari perilaku yang tidak diinginkan, panggil setHint (CharSequence) dan getHint () di TextInputLayout, alih-alih di EditText.

Jadi saya menyalakan android:hintdan app:hintTextColormenghidupkan TextInputLayout, bukan menyalakan dan TextInputEditTextberhasil.

Karena Anda harus menambahkan colorControlNormal, colorControlActivated, colorControlHighLightitem dengan tema aplikasi utama:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlActivated">@color/yellow_bright</item>
        <item name="colorControlNormal">@color/yellow_black</item>

    </style>