Bagaimana mengubah warna garis di EditText


203

Saya membuat EditText di file xml layout saya

Tapi saya ingin mengubah garis warna di EditText dari Holo menjadi (misalnya) merah. Bagaimana itu bisa dilakukan?

masukkan deskripsi gambar di sini

Jawaban:


310

Ini adalah alat terbaik yang dapat Anda gunakan untuk semua tampilan dan banyak terima kasih GRATIS untuk @ Jérôme Van Der Linden .

Android Holo Colours Generator memungkinkan Anda untuk dengan mudah membuat komponen Android seperti EditTextatau pemintal dengan warna Anda sendiri untuk aplikasi Android Anda. Ini akan menghasilkan semua sembilan aset tambalan yang diperlukan ditambah drawable dan style XML terkait yang dapat Anda salin langsung ke proyek Anda.

http://android-holo-colors.com/

PEMBARUAN 1

Domain ini tampaknya kedaluwarsa tetapi proyek ini merupakan sumber terbuka yang dapat Anda temukan di sini

https://github.com/jeromevdl/android-holo-colors

Cobalah

gambar ini diletakkan di latar belakang EditText

android:background="@drawable/textfield_activated"

masukkan deskripsi gambar di sini


PEMBARUAN 2

Untuk API 21 atau lebih tinggi, Anda dapat menggunakan android:backgroundTint

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Underline color change"
        android:backgroundTint="@android:color/holo_red_light" />

Perbarui 3 Sekarang Kami memiliki dukungan punggungAppCompatEditText

Catatan: Kita perlu menggunakan aplikasi: backgroundTint bukan Android: backgroundTint

<android.support.v7.widget.AppCompatEditText
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Underline color change"
    app:backgroundTint="@color/blue_gray_light" />

Tautan sepertinya mati? Apakah perangkat lunaknya masih tersedia?
Pengkodean

1
@CodingJohn proyek ini bersumber terbuka, Anda dapat menemukan di sini github.com/jeromevdl/android-holo-colors
MilapTank

dan apakah ada yang mengatakan bahwa kita harus menggunakan "app: backgroundTint bukan android: backgroundTint" ??
user924

jika Anda ingin kompatibilitas mundur maka Anda dapat menggunakan aplikasi: *** OW android: ***
MilapTank

203

Saya tidak suka jawaban sebelumnya. Solusi terbaik adalah menggunakan:

<android.support.v7.widget.AppCompatEditText

      app:backgroundTint="@color/blue_gray_light" />

android:backgroundTintuntuk EditTextbekerja hanya di API21 + . Karena itu, kita harus menggunakan perpustakaan dukungan dan AppCompatEditText.

Catatan: kita harus menggunakan app:backgroundTintalih-alihandroid:backgroundTint

Versi AndroidX

<androidx.appcompat.widget.AppCompatEditText

      app:backgroundTint="@color/blue_gray_light" />

3
Ini solusi terbaik! Sederhana dan berfungsi di semua level API. Terima kasih!
Ivo Stoyanov

7
Anda tidak memerlukan itu, jika Anda menggunakan pustaka appcompat EdtiTexts secara otomatis diubah menjadi AppCompatEditText dan warna latar belakang diterapkan.
stephane k.

Saya pikir ini harus menjadi solusi tepat
Thuy Nguyen

Terima kasih banyak. Ini bekerja untuk API 16+. Solusi terbaik.
André Luiz Reis

2
mungkin untuk mengatur aplikasi: backgroundTint secara sistematis? Saya bisa menemukan metode 'setBackgroundTint'
Sarath Nagesh

75

Anda juga dapat dengan cepat mengubah warna garis bawah EditText dengan mewarnai latar belakang EditText seperti:

<EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Something or Other"
            android:backgroundTint="@android:color/holo_green_light" />

18
Hanya berfungsi di API 21 atau lebih tinggi. Adakah cara untuk membuat ini berfungsi untuk tingkat API yang lebih rendah?
Vucko


@ mladj0ni Keren, + 1d
Vucko

3
Untuk tingkat api yang lebih rendah, gunakan hanya "backgroundTint" daripada "android: backgroundTint" Kredit stackoverflow.com/a/29400711/1590911
Hasaan Ali

ini mengubah seluruh warna latar belakang, bukan warna garis
Kode Wiget

29

untuk API di bawah 21, Anda dapat menggunakan atribut tema dengan EditText memasukkan kode di bawah ini ke dalam file gaya

<style name="MyEditTextTheme">
    <item name="colorControlNormal">#FFFFFF</item>
    <item name="colorControlActivated">#FFFFFF</item>
    <item name="colorControlHighlight">#FFFFFF</item>
</style>

gunakan gaya ini EditTextsebagai

<EditText
    android:id="@+id/etPassword"
    android:layout_width="match_parent"
    android:layout_height="@dimen/user_input_field_height"
    android:layout_marginTop="40dp"
    android:hint="@string/password_hint"
    android:theme="@style/MyEditTextTheme"
    android:singleLine="true" />

Anda tahu cara menambahkan alpha / opacity ke file style? Seperti itu harus mengambil warna normal dengan opacity dan setelah mereka mulai mengetik, itu harus mengambil warna yang diaktifkan atau disorot
ASN

1
@ANS untuk itu Anda perlu menambahkan pendengar pengamat teks dan mengatur opacity dalam metode "onTextChanged" secara dinamis
Rahul

oh Jadi itu tidak dapat ditambahkan ke file styling atau pemilih dan harus dilakukan secara dinamis?
ASN

@ ASN opacity ditambahkan dalam hex color di dua karakter pertama 00-FF jadi misalnya: # A1FAFAFA
aimiliano

21

Secara pemrograman, Anda dapat mencoba:

editText.getBackground().mutate().setColorFilter(getResources().getColor(android.R.color.holo_red_light), PorterDuff.Mode.SRC_ATOP);

2
Jawaban terbaik untuk efek
Xamarin.Forms

11

saya pikir cara terbaik adalah dengan tema:

<style name="MyEditTextTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorControlNormal">@color/black</item>
        <item name="colorControlActivated">@color/action_blue</item>
        <item name="colorControlHighlight">@color/action_blue</item>
</style>

<style name="AddressBookStyle" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="android:layout_width">match_parent</item>
     <item name="android:layout_height">wrap_content</item>
     <item name="android:textSize">13sp</item>
     <item name="android:theme">@style/MyEditTextTheme</item>
</style>

<android.support.v7.widget.AppCompatEditText
            style="@style/AddressBookStyle"/>

2
ini tidak bekerja untuk saya dengan tag gaya tetapi dengan android: tag tema
aimiliano

9

Untuk mengubah warna garis bawah Edittext:

Jika Anda ingin seluruh aplikasi membagikan gaya ini, maka Anda dapat melakukan hal berikut.

(1) buka file styles.xml. AppTheme Anda yang mewarisi induk dari Theme.AppCompat.Light.DarkActionBar (dalam kasus saya) akan menjadi induk dari semua file gaya mereka di aplikasi Anda. Ubah namanya menjadi "AppBaseTheme '. Buat gaya lain tepat di bawahnya yang memiliki nama AppTheme dan mewarisi dari AppBaseTheme yang baru saja Anda edit. Ini akan terlihat seperti berikut:

<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="windowActionBar">false</item>
    <!--see http://www.google.com/design/spec/style/color.html#color-color-palette-->
    <item name="colorPrimary">@color/material_brown_500</item>
    <item name="colorPrimaryDark">@color/material_brown_700</item>
    <item name="colorAccent">@color/flamingo</item>

<style name="AppTheme" parent="AppBaseTheme">
    <!-- Customize your theme here. -->
</style>

Kemudian ubah "colorAccent" ke warna apa pun yang Anda inginkan menjadi warna garis EditText Anda.

(2) Jika Anda memiliki folder nilai lain dengan style.xml, langkah ini sangat penting. Karena file itu akan mewarisi dari file xml induk Anda sebelumnya. Sebagai contoh, saya memiliki nilai-19 / styles.xml. Ini khusus untuk Kitkat dan di atas. Ubah induknya ke AppBaseTheme dan pastikan untuk menyingkirkan "colorAccent" sehingga tidak menimpa warna induknya. Anda juga perlu menyimpan item yang khusus untuk versi 19. Maka akan terlihat seperti ini.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

9

Ini cukup sederhana (Diperlukan: Minimum API 21) ...

  1. Buka xml Anda dan pilih bidang EditText
  2. Di sisi kanan, Anda dapat melihat jendela 'Atribut'. Pilih 'Lihat Semua Atribut'
  3. Cukup cari 'tint'
  4. Dan tambahkan / ubah 'backgroundTint' ke hex warna yang diinginkan (katakanlah # FF0000)

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Keep Coding ........ :)


2
Minimum API 21.
Maihan Nijat

Mengubah warna latar belakang akan mengubah LATAR BELAKANG. Jawaban ini salah
Kode Wiget

6

Warna garis ditentukan oleh EditTextproperti latar belakang. Untuk mengubahnya, Anda harus mengubah android:backgroundfile tata letak.

Saya harus mencatat bahwa gaya ini dicapai dengan menggunakan drawable 9-patch. Jika Anda melihat di SDK, Anda dapat melihat bahwa latar belakang EditTextgambar ini:

textfield_activated_holo_light.9.png

Untuk mengubahnya, Anda bisa membukanya dalam program manipulasi gambar dan mewarnainya dengan warna yang diinginkan. Simpan sebagai bg_edit_text.9.pngdan kemudian taruh di folder yang dapat digambar. Sekarang Anda dapat menerapkannya sebagai latar belakang untuk yang Anda EditTextsukai:

android:background="@drawable/bg_edit_text"


4

Latar belakang widget bergantung pada level API .

ALTERNATIF 1

Anda dapat memberikan gambar khusus ke EditTextlatar belakang Anda dengan

android:background="@drawable/custom_editText"

Gambar Anda akan terlihat seperti ini. Ini akan memberi Anda efek yang diinginkan.

masukkan deskripsi gambar di sini

ALTERNATIF 2

Setel xml ini ke EditTextatribut latar belakang Anda .

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" android:padding="10dp">
<solid android:color="#4C000000"/>
    <corners android:bottomRightRadius="5dp"
             android:bottomLeftRadius="5dp"
             android:topLeftRadius="5dp"
             android:topRightRadius="5dp"/>
</shape>

Ini akan memiliki tampilan dan nuansa yang sama dengan Anda EditTextdi setiap API.


Saya tertarik dengan versi 4.0 ke atas. Artinya, saya hanya ingin mengubah warna garis saat aktif EditText
Alex

4

Anda dapat mengubah warna dengan mewarnai latar belakang <EditText android:backgroundTint="@color/red"/>


1
ini hanya berfungsi untuk api> 21 Anda harus mengikuti @Rahul menjawab untuk semua apis atau menambahkan tata letak yang berbeda untuk api> 21 di folder layout-21
aimiliano

4

drawable / bg_edittext.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="@color/colorDivider" />
        </shape>
    </item>
</layer-list>

Setel ke EditText

<android.support.v7.widget.AppCompatEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_edittext"/>

3

Gunakan metode ini .. dan modifikasi sesuai dengan nama tampilan Anda. Kode ini sangat bagus.

 private boolean validateMobilenumber() {
            if (mobilenumber.getText().toString().trim().isEmpty() || mobilenumber.getText().toString().length() < 10) {
                input_layout_mobilenumber.setErrorEnabled(true);
                input_layout_mobilenumber.setError(getString(R.string.err_msg_mobilenumber));
               // requestFocus(mobilenumber);
                return false;
            } else {
                input_layout_mobilenumber.setError(null);
                input_layout_mobilenumber.setErrorEnabled(false);
                mobilenumber.setBackground(mobilenumber.getBackground().getConstantState().newDrawable());
            }

2

Jika Anda menginginkan garis datar, Anda dapat melakukannya dengan mudah dengan xml. Berikut ini adalah contoh xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-1dp"
        android:left="-1dp"
        android:right="-1dp"
        android:bottom="1dp"
        >
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#6A9A3A"/>
        </shape>
    </item>
</layer-list>

Ganti bentuk dengan pemilih jika Anda ingin memberikan lebar dan warna yang berbeda untuk edittext fokus.


1
dengan desain material, ia menciptakan persegi panjang, dengan garis bawah yang lebih lebar
Filip Zymek

2

Pendekatan terbaik adalah dengan menggunakan AppCompatEditTextdengan backgroundTintatribut appnamespace. yaitu

    <android.support.v7.widget.AppCompatEditText
    android:layout_width="match_parent"      
    app:backgroundTint="YOUR COLOR"
    android:layout_height="wrap_content" />

ketika kami menggunakannya android:backgroundTinthanya akan berfungsi di API21 atau lebih tetapi app:backgroundTintberfungsi di semua level API aplikasi Anda.


1

Gunakan properti android: background untuk edittext itu. Lewati gambar folder yang dapat digambar ke sana. Sebagai contoh,

android:background="@drawable/abc.png"

1
 <EditText
        android:id="@+id/et_password_tlay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#9e9e9e"
        android:backgroundTint="#000"
        android:singleLine="true"
        android:drawableTint="#FF4081"
        android:paddingTop="25dp"
        android:textColor="#000"
        android:paddingBottom="5dp"
        android:inputType="textPassword"/>

    <View
        android:id="@+id/UnderLine"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/et_password_tlay"
        android:layout_centerHorizontal="true"
        android:background="#03f94e" />

** itu salah lakukan dengan tampilan **


1

Coba cara berikut, ini akan mengonversi warna garis bawah EditText, ketika digunakan sebagai properti latar belakang.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="@dimen/spacing_neg"
        android:right="@dimen/spacing_neg"
        android:top="@dimen/spacing_neg">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="@dimen/spacing_1"
                android:color="@android:color/black" />
        </shape>
    </item>
</layer-list>

0

Ini bisa dilakukan dengan memasukkan ini android:theme="@style/AppTheme.AppBarOverlaysebagai atribut untuk editText Anda dan menambahkan ini <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />ke gaya Anda

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.