Mengubah drawable latar belakang widget tampilan pencarian

Saya mencoba mengubah drawable yang ada di widget tampilan pencarian bilah tindakan Android.

Saat ini terlihat seperti ini:

tapi saya perlu mengubah drawable latar belakang biru menjadi warna merah.

Saya sudah mencoba banyak hal selain menjalankan widget pencarian saya sendiri, tetapi tidak ada yang berhasil.

Bisakah seseorang mengarahkan saya ke arah yang benar untuk mengubah ini?

Intro

Sayangnya, tidak ada cara untuk menyetel SearchViewgaya bidang teks menggunakan tema, gaya, dan warisan dalam XML seperti yang dapat Anda lakukan dengan latar belakang item di tarik-turun ActionBar . Hal ini karena selectableItemBackground terdaftar sebagai styleable di R.stylable, sedangkan searchViewTextField(atribut tema yang kita tertarik) tidak. Jadi, kami tidak dapat mengaksesnya dengan mudah dari dalam sumber daya XML (Anda akan mendapatkan No resource found that matches the given name: attr 'android:searchViewTextField'kesalahan).

Mengatur latar belakang bidang teks SearchView dari kode

Jadi, satu-satunya cara untuk mengganti latar belakang SearchViewbidang teks dengan benar adalah dengan masuk ke bagian dalamnya, memperoleh akses ke tampilan yang memiliki latar belakang berdasarkan searchViewTextFielddan menetapkan milik kita sendiri.

CATATAN: Solusi di bawah ini hanya bergantung pada id ( android:id/search_plate) elemen di dalamnya SearchView, jadi ini lebih independen dari versi SDK daripada traversal turunan (misalnya menggunakan searchView.getChildAt(0)untuk mendapatkan tampilan yang benar di dalamnya SearchView), tetapi ini bukan anti peluru. Terutama jika beberapa pabrikan memutuskan untuk menerapkan ulang internal dari SearchViewdan elemen dengan id yang disebutkan di atas tidak ada - kode tidak akan berfungsi.

Di SDK, latar belakang untuk bidang teks di SearchViewdideklarasikan melalui sembilan tambalan , jadi kami akan melakukannya dengan cara yang sama. Anda dapat menemukan gambar png asli di direktori drawable-mdpi dari repositori git Android . Kami tertarik pada dua gambar. Satu untuk status ketika bidang teks dipilih (dinamai textfield_search_selected_holo_light.9.png ) dan satu untuk tempat yang bukan (dinamai textfield_search_default_holo_light.9.png ).

Sayangnya, Anda harus membuat salinan lokal dari kedua gambar tersebut, meskipun Anda hanya ingin menyesuaikan status fokus . Ini karena textfield_search_default_holo_lighttidak ada di R.drawable . Oleh karena itu, ini tidak mudah diakses melalui @android:drawable/textfield_search_default_holo_light, yang dapat digunakan dalam selektor yang ditunjukkan di bawah, alih-alih merujuk drawable lokal.

CATATAN: Saya menggunakan tema Holo Light sebagai dasar, tetapi Anda dapat melakukan hal yang sama dengan Holo Dark . Tampaknya tidak ada perbedaan nyata dalam memilih negara 9-patch antara Cahaya dan gelap tema. Namun, ada perbedaan dalam 9-patch untuk status default (lihat Terang vs Gelap ). Jadi, mungkin tidak perlu membuat salinan lokal 9-patch untuk status yang dipilih , untuk tema Gelap dan Terang (dengan asumsi Anda ingin menangani keduanya, dan membuat keduanya terlihat sama seperti di Tema Holo ). Cukup buat satu salinan lokal dan gunakan didrawable pemilih untuk kedua tema.

Sekarang, Anda harus mengedit sembilan-patch yang diunduh sesuai kebutuhan Anda (yaitu, mengubah warna biru menjadi merah). Anda dapat melihat file menggunakan alat draw 9-patch untuk memeriksa apakah sudah ditentukan dengan benar setelah Anda mengedit.

Saya telah mengedit file menggunakan GIMP dengan alat pensil satu piksel (cukup mudah) tetapi Anda mungkin akan menggunakan alat Anda sendiri. Inilah 9-patch saya yang disesuaikan untuk keadaan terfokus :

CATATAN: Untuk kesederhanaan, saya hanya menggunakan gambar untuk kepadatan mdpi . Anda harus membuat 9-patch untuk beberapa kepadatan layar jika Anda menginginkan hasil terbaik pada perangkat apa pun. Gambar untuk Holo SearchView dapat ditemukan dalam mdpi , hdpi , dan xhdpi drawable .

Sekarang, kita perlu membuat pemilih drawable, sehingga gambar yang tepat ditampilkan berdasarkan status tampilan. Buat file res/drawable/texfield_searchview_holo_light.xmldengan konten berikut:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"
        android:drawable="@drawable/textfield_search_selected_holo_light" />
    <item android:drawable="@drawable/textfield_search_default_holo_light" />
</selector>

Kami akan menggunakan drawable yang dibuat di atas untuk mengatur latar belakang untuk LinearLayouttampilan yang menampung bidang teks di dalamnya SearchView- id-nya adalah android:id/search_plate. Jadi, inilah cara melakukan ini dengan cepat dalam kode, saat membuat menu opsi:

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }       

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);

        // Getting SearchView from XML layout by id defined there - my_search_view in this case
        SearchView searchView = (SearchView) menu.findItem(R.id.my_search_view).getActionView();
        // Getting id for 'search_plate' - the id is part of generate R file,
        // so we have to get id on runtime.
        int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        // Getting the 'search_plate' LinearLayout.
        View searchPlate = searchView.findViewById(searchPlateId);
        // Setting background of 'search_plate' to earlier defined drawable.            
        searchPlate.setBackgroundResource(R.drawable.textfield_searchview_holo_light);          

        return super.onCreateOptionsMenu(menu);
    }

}

Efek akhir

Berikut tangkapan layar dari hasil akhirnya:

Bagaimana saya bisa melakukan ini

Saya pikir ada baiknya mengukur bagaimana saya sampai ini, sehingga pendekatan ini dapat digunakan saat menyesuaikan tampilan lain.

Memeriksa tata letak tampilan

Saya telah memeriksa tampilan SearchViewtata letak. Di kontraktor SearchView, seseorang dapat menemukan baris yang mengembangkan tata letak:

inflater.inflate(R.layout.search_view, this, true);

Sekarang kita tahu bahwa SearchViewlayout dalam file bernama res/layout/search_view.xml. Melihat ke dalam search_view.xml kita dapat menemukan LinearLayoutelemen dalam (dengan id search_plate) yang ada android.widget.SearchView$SearchAutoCompletedi dalamnya (terlihat seperti bidang teks tampilan pencarian kita):

    <LinearLayout
        android:id="@+id/search_plate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:background="?android:attr/searchViewTextField">

Sekarang, kita sekarang latar belakang diatur berdasarkan searchViewTextFieldatribut tema saat ini .

Investigasi atribut (apakah mudah diatur?)

Untuk memeriksa bagaimana searchViewTextFieldatribut disetel, kami menyelidiki res / values ​​/ themes.xml . Ada sekelompok atribut yang terkait SearchViewsecara default Theme:

<style name="Theme">
    <!-- (...other attributes present here...) -->

    <!-- SearchView attributes -->
    <item name="searchDropdownBackground">@android:drawable/spinner_dropdown_background</item>
    <item name="searchViewTextField">@drawable/textfield_searchview_holo_dark</item>
    <item name="searchViewTextFieldRight">@drawable/textfield_searchview_right_holo_dark</item>
    <item name="searchViewCloseIcon">@android:drawable/ic_clear</item>
    <item name="searchViewSearchIcon">@android:drawable/ic_search</item>
    <item name="searchViewGoIcon">@android:drawable/ic_go</item>
    <item name="searchViewVoiceIcon">@android:drawable/ic_voice_search</item>
    <item name="searchViewEditQuery">@android:drawable/ic_commit_search_api_holo_dark</item>
    <item name="searchViewEditQueryBackground">?attr/selectableItemBackground</item>

Kami melihat bahwa untuk tema default nilainya adalah @drawable/textfield_searchview_holo_dark. Untuk Theme.Lightnilai juga diatur dalam file itu .

Sekarang, akan sangat bagus jika atribut ini dapat diakses melalui R.styleable , tetapi sayangnya tidak. Sebagai perbandingan, lihat atribut tema lain yang ada di themes.xml dan R.attr seperti textAppearance atau selectableItemBackground . Jika searchViewTextFieldada di R.attr(dan R.stylable) kami cukup menggunakan pemilih drawable kami saat menentukan tema untuk seluruh aplikasi kami dalam XML. Sebagai contoh:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppTheme" parent="android:Theme.Light">
        <item name="android:searchViewTextField">@drawable/textfield_searchview_holo_light</item>
    </style>
</resources>

Apa yang harus diubah?

Sekarang kita tahu, bahwa kita harus mengakses search_platemelalui kode. Namun, kami masih belum tahu bagaimana seharusnya tampilannya. Singkatnya, kami mencari drawable yang digunakan sebagai nilai dalam tema default: textfield_searchview_holo_dark.xml dan textfield_searchview_holo_light.xml . Melihat konten, kita melihat bahwa drawable selectormerujuk pada dua drawable lainnya (yang nantinya merupakan 9-patch) berdasarkan status tampilan. Anda dapat menemukan agregat 9-patch drawable dari (hampir) semua versi Android di androiddrawables.com

Menyesuaikan

Kami mengenali garis biru di salah satu dari 9-patch , jadi kami membuat salinan lokalnya dan mengubah warna sesuai keinginan.

Solusi di atas mungkin tidak berfungsi jika Anda menggunakan pustaka appcompat. Anda mungkin harus mengubah kode agar berfungsi untuk pustaka appcompat.

Berikut adalah solusi yang berfungsi untuk pustaka appcompat.

  @Override
  public boolean onCreateOptionsMenu(Menu menu)
  {

    getMenuInflater().inflate(R.menu.main_menu, menu); 

    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    MenuItem searchMenuItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchMenuItem);
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

    SearchView.SearchAutoComplete searchAutoComplete = (SearchView.SearchAutoComplete)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchAutoComplete.setHintTextColor(Color.WHITE);
    searchAutoComplete.setTextColor(Color.WHITE);

    View searchplate = (View)searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
    searchplate.setBackgroundResource(R.drawable.texfield_searchview_holo_light);

    ImageView searchCloseIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchCloseIcon.setImageResource(R.drawable.abc_ic_clear_normal);

    ImageView voiceIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_voice_btn);
    voiceIcon.setImageResource(R.drawable.abc_ic_voice_search);

    ImageView searchIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
    searchIcon.setImageResource(R.drawable.abc_ic_search);


    return super.onCreateOptionsMenu(menu);
}

onCreateOptionsMenuMetode Anda harus:

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.option, menu);
        SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        ViewGroup v = (ViewGroup) searchView.findViewById(linlayId);
        v.setBackgroundResource(R.drawable.searchviewredversion);
        return super.onCreateOptionsMenu(menu);
    }

di mana item pencarian Anda menu_searchkeluar jalur

dan inilah searchviewredversion(yang ini adalah versi xhdpi): http://img836.imageshack.us/img836/5964/searchviewredversion.png

Solusi di atas tidak berfungsi dengan ActionBarSherlock 4.2 dan oleh karena itu tidak kompatibel dengan Android 2.x. Berikut adalah kode kerja yang menyiapkan latar belakang SearchView dan teks petunjuk di ActionBarSherlock 4.2:

public static void styleSearchView(SearchView searchView, Context context) {
    View searchPlate = searchView.findViewById(R.id.abs__search_plate);
    searchPlate.setBackgroundResource(R.drawable.your_custom_drawable);
    AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
    searchText.setHintTextColor(context.getResources().getColor(R.color.your_custom_color));
}

Saya lelah melakukan ini juga dan saya menggunakan v7. Aplikasi macet ketika saya mencoba mengambil searchPlatevia getIdentifier()jadi saya melakukannya dengan cara ini:

View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);

Saya juga menghadapi masalah yang sama. Saya menggunakan pustaka appcompat v7 dan menentukan gaya khusus untuknya. Di folder drawable, letakkan file bottom_border.xml yang terlihat seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
  <shape >
      <solid android:color="@color/blue_color" />
  </shape>
</item>
<item android:bottom="0.8dp"
  android:left="0.8dp"
  android:right="0.8dp">
  <shape >
      <solid android:color="@color/background_color" />
  </shape>
</item>

<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="2.0dp">
  <shape >
      <solid android:color="@color/main_accent" />
  </shape>
 </item>
</layer-list>

Dalam folder nilai styles_myactionbartheme.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="AppnewTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowBackground">@color/background</item>
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:actionBarWidgetTheme">@style/ActionBarWidget</item>
</style> 
<!-- Actionbar Theme -->
<style name="ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/main_accent</item>
    <!-- <item name="android:icon">@drawable/abc_ic_ab_back_holo_light</item> -->
</style> 
<style name="ActionBarWidget" parent="Theme.AppCompat.Light">
    <!-- SearchView customization-->
     <!-- Changing the small search icon when the view is expanded -->
    <!-- <item name="searchViewSearchIcon">@drawable/ic_action_search</item> -->
     <!-- Changing the cross icon to erase typed text -->
  <!--   <item name="searchViewCloseIcon">@drawable/ic_action_remove</item> -->
     <!-- Styling the background of the text field, i.e. blue bracket -->
    <item name="searchViewTextField">@drawable/bottom_border</item>
     <!-- Styling the text view that displays the typed text query -->
    <item name="searchViewAutoCompleteTextView">@style/AutoCompleteTextView</item>        
</style>

  <style name="AutoCompleteTextView" parent="Widget.AppCompat.Light.AutoCompleteTextView">
    <item name="android:textColor">@color/text_color</item>
  <!--   <item name="android:textCursorDrawable">@null</item> -->
    <!-- <item name="android:textColorHighlight">@color/search_view_selected_text</item> -->
</style>
</resources>

Saya mendefinisikan file custommenu.xml untuk menampilkan menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:com.example.actionbartheme="http://schemas.android.com/apk/res-auto" >  

<item android:id="@+id/search"
      android:title="@string/search_title"
      android:icon="@drawable/search_buttonn" 
     com.example.actionbartheme:showAsAction="ifRoom|collapseActionView"   
                 com.example.actionbartheme:actionViewClass="android.support.v7.widget.SearchView"/>

Aktivitas Anda harus memperluas ActionBarActivity, bukan Activity.

@Override
public boolean onCreateOptionsMenu(Menu menu) 
{
    // Inflate the menu; this adds items to the action bar if it is present.
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.custommenu, menu);
}

Dalam file manifes:

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

Untuk informasi lebih lanjut lihat di sini:
Di sini http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Memperbarui

Jika Anda menggunakan AndroidX, Anda dapat melakukannya seperti ini

    View searchPlate = svSearch. findViewById(androidx.appcompat.R.id.search_plate);
    if (searchPlate != null) {
        AutoCompleteTextView searchText = searchPlate.findViewById(androidx.appcompat.R.id.search_src_text);
        if (searchText != null){
            searchText.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.edittext_text_size));
            searchText.setMaxLines(1);
            searchText.setSingleLine(true);
            searchText.setTextColor(getResources().getColor(R.color.etTextColor));
            searchText.setHintTextColor(getResources().getColor(R.color.etHintColor));
            searchText.setBackground(null);
        }
    }

Pertama, mari buat file XML bernama search_widget_background.xml, untuk digunakan sebagai drawable, yaitu di bawah direktori drawable.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="@color/red" />

</shape>

Drawable ini akan digunakan sebagai latar belakang widget pencarian kita. Saya mengatur warna menjadi merah karena itulah yang Anda minta, tetapi Anda dapat mengaturnya ke warna apa pun yang ditentukan oleh tag @color. Anda bahkan dapat memodifikasinya lebih lanjut menggunakan atribut yang ditentukan untuk tag bentuk (membuat sudut membulat, membuat latar belakang oval, dll.).

Langkah selanjutnya adalah mengatur latar belakang widget pencarian kita ke widget ini. Ini dapat dicapai dengan yang berikut:

    public boolean onCreateOptionsMenu(Menu menu) {

        SearchView searchView = (SearchView)menu.findItem(R.id.my_search_view).getActionView();
        Drawable d = getResources().getDrawable(R.drawable.search_widget_background);
        searchView.setBackground(d);
...
    }

public boolean onCreateOptionsMenu(Menu menu) {
........

        // Set the search plate color
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        View view = searchView.findViewById(linlayId);
        Drawable drawColor = getResources().getDrawable(R.drawable.searchcolor);
        view.setBackground( drawColor );
........
    }

dan ini adalah file searchablecolor.xml

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

  <!-- main color -->
  <item android:bottom="1.5dp"
      android:left="1.5dp"
      android:right="1.5dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>

  <!-- draw another block to cut-off the left and right bars -->
  <item android:bottom="18.0dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>
</layer-list>

Saya menjelaskan di akhir posting ini dengan gambar ini berlaku untuk formulir xamarin. Tetapi saya pikir Anda bisa memahaminya, karena ini didasarkan pada kode sumber dari tampilan pencarian android

Bagaimana mengubah gambar tombol batal searchbar dalam bentuk xamarin

Jika Anda meluaskan Searchview seperti ini "getMenuInflater (). Inflate (R.menu.search_menu, menu);". Kemudian Anda dapat menyesuaikan tampilan pencarian ini melalui style.xml seperti di bawah ini.

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <item name="searchViewStyle">@style/SearchView.ActionBar</item>
</style>

<style name="SearchView.ActionBar" parent="Widget.AppCompat.SearchView.ActionBar">
      <item name="queryBackground">@drawable/drw_search_view_bg</item>
      <item name="searchHintIcon">@null</item>
      <item name="submitBackground">@null</item>
      <item name="closeIcon">@drawable/vd_cancel</item>
      <item name="searchIcon">@drawable/vd_search</item>
</style>

Saya banyak menggali tentang itu dan akhirnya saya menemukan solusi ini dan itu berhasil untuk saya!
Anda bisa menggunakan ini

Jika Anda menggunakan appcompat coba ini:

ImageView searchIconView = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
searchIconView.setImageResource(R.drawable.yourIcon);

Jika Anda menggunakan androidx coba ini:

ImageView searchIconView = (ImageView) searchView.findViewById(androidx.appcompat.R.id.search_button);
    searchIconView.setImageResource(R.drawable.yourIcon);

Ini akan mengubah ikon tampilan layar default.

Semoga membantu!