Зміна фонового малюнка віджета searchview

Я намагаюся змінити графічний параметр, який знаходиться у віджеті пошуку на панелі дій Android.

Наразі це виглядає приблизно так:

але мені потрібно змінити блакитний фон, який малюється, на червоний.

Я спробував багато речей, ніж прокрутити власний віджет пошуку, але, здається, нічого не виходить.

Чи може хтось вказати мені в правильному напрямку, щоб змінити це?

Вступ

На жаль, немає можливості встановити SearchViewстиль текстового поля за допомогою тем, стилів та успадкування в XML, як це можна зробити з фоном елементів у спадному меню ActionBar . Це відбувається тому , що selectableItemBackground перераховано як styleable дюйма R.stylable, в той час як searchViewTextField(атрибут теми , що ми зацікавлені в) немає. Таким чином, ми не можемо легко отримати доступ до нього з ресурсів XML (ви отримаєте No resource found that matches the given name: attr 'android:searchViewTextField'помилку).

Налаштування фону тексту коду SearchView з коду

Отже, єдиний спосіб належним чином замінити тло SearchViewтекстового поля - це потрапити у його внутрішні місця, отримати доступ до перегляду, який має фон, встановлений на основі, searchViewTextFieldі встановити власний.

ПРИМІТКА. Рішення нижче залежить лише від id ( android:id/search_plate) елемента всередині SearchView, тому вона є більш незалежною від SDK-версії, ніж прохідність дітей (наприклад, searchView.getChildAt(0)для отримання потрібного вигляду всередині SearchView), але це не є кулезахисним. Особливо, якщо якийсь виробник вирішить повторно заповнити внутрішні SearchViewелементи та елемента з вищезгаданим ідентифікатором, немає - код не працює.

У SDK фон для текстового поля в SearchViewдекларується через дев'ять патчів , тому ми будемо робити це так само. Ви можете знайти оригінальні зображення у форматі png у каталозі Dravable-mdpi у сховищі Android git . Нас цікавлять два зображення. Одне для стану, коли вибрано текстове поле (з ім'ям textfield_search_selected_holo_light.9.png ), і те, де його немає (з ім'ям textfield_search_default_holo_light.9.png ).

На жаль, вам доведеться створити локальні копії обох зображень, навіть якщо ви хочете налаштувати лише зосереджений стан. Це тому textfield_search_default_holo_light, що немає у R.drawable . Таким чином, це нелегко доступно через @android:drawable/textfield_search_default_holo_light, що може бути використане у показаному нижче селекторі, замість посилання на локальний малюнок.

ПРИМІТКА: Я використовував тему Holo Light як основу, але ви можете зробити те ж саме з Holo Dark . Здається, що немає жодної реальної різниці у вибраних станах 9-патчів між темами Light і Dark . Однак є різниця у 9-патчах за станом за замовчуванням (див. Світло проти Темного ). Тому, ймовірно, немає необхідності робити локальні копії 9-патчів для вибраного стану для темних і світлих тем (якщо припустити, що ви хочете обробити обидва та зробити так, щоб обидва виглядали так само, як у темі Holo ). Просто зробіть одну локальну копію та використовуйте їїперемикач для обох тем.

Тепер вам потрібно буде відредагувати завантажені дев'ять патчів відповідно до ваших потреб (тобто змінити синій колір на червоний). Ви можете переглянути файл за допомогою інструмента малювання 9-патчів, щоб перевірити, чи правильно він визначений після редагування.

Я редагував файли, використовуючи GIMP, інструментом для олівців з одним пікселем (досить легко), але ви, ймовірно, використовуєте власний інструмент. Ось мій індивідуальний 9-патч для зосередженого стану :

ПРИМІТКА. Для простоти я використовував лише зображення для щільності mdpi . Вам доведеться створити 9 патчів для різної щільності екрана, якщо ви хочете отримати найкращий результат на будь-якому пристрої. Зображення для Холо SearchView можуть бути знайдені в MDPI , ІПЧР і xhdpi витяжці.

Тепер нам знадобиться створити перетягувальний селектор, щоб правильно відображатись зображення залежно від стану перегляду. Створіть файл res/drawable/texfield_searchview_holo_light.xmlіз наступним вмістом:

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

Ми будемо використовувати створений вище файл для LinearLayoutперегляду для встановлення фону для перегляду, який містить текстове поле в межах SearchView- його ідентифікатор є android:id/search_plate. Ось ось як це швидко зробити в коді під час створення меню параметрів:

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);
    }

}

Кінцевий ефект

Ось скріншот кінцевого результату:

Як я дійшов до цього

Я думаю, що варто згадати, як я дійшов до цього, щоб цей підхід можна було використовувати при налаштуванні інших поглядів.

Перевірка макета перегляду

Я перевірив, як SearchViewвиглядає макет. У конвекторі SearchView можна знайти лінію, що надуває макет:

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

Тепер ми знаємо, що SearchViewмакет знаходиться у файлі з назвою res/layout/search_view.xml. Заглянувши в search_view.xml, ми можемо знайти внутрішній LinearLayoutелемент (з id search_plate), який є android.widget.SearchView$SearchAutoCompleteвсередині нього (виглядає як наше текстове поле перегляду пошуку):

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

Тепер ми тепер встановили фон на основі searchViewTextFieldатрибуту поточної теми .

Досліджуючий атрибут (чи легко його встановити?)

Щоб перевірити, як встановлено searchViewTextFieldатрибут, ми досліджуємо res / values ​​/ themes.xml . Існує група атрибутів, пов’язаних із SearchViewзамовчуванням 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>

Ми бачимо, що для теми за замовчуванням це значення @drawable/textfield_searchview_holo_dark. У цьому файлі також встановленоTheme.Light значення .

Тепер було б чудово, якби цей атрибут був доступний через R.styleable , але, на жаль, це не так. Для порівняння див. Інші атрибути теми, які присутні як у themes.xml та R.attr, як textAppearance або selectableItemBackground . Якщо він searchViewTextFieldбув присутній в R.attr(і R.stylable), ми можемо просто використовувати наш графічний селектор, визначаючи тему для всієї нашої програми в XML. Наприклад:

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

Що слід змінити?

Тепер ми знаємо, що нам доведеться отримати доступ search_plateчерез код. Однак ми досі не знаємо, як це має виглядати. Коротше кажучи, ми шукаємо рисунки, які використовуються як значення у темах за замовчуванням: textfield_searchview_holo_dark.xml та textfield_searchview_holo_light.xml . Дивлячись на вміст, ми бачимо, що тематичне зображення, selectorяке посилається на два інші малюнки (які, можливо, пізніше будуть 9-латними), базується на стані перегляду. На сайті androiddrawables.com ви можете знайти зведені 9 патчі з чернетки (майже) всієї версії Android

Налаштування

Ми розпізнаємо синю лінію в одному з 9-ти патчів , тому створюємо локальну її копію та змінюємо кольори за бажанням.

Вищезазначені рішення можуть не працювати, якщо ви використовуєте бібліотеку appcompat. Можливо, вам доведеться змінити код, щоб він працював для бібліотеки додатків.

Ось робоче рішення для бібліотеки 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);
}

Ваш onCreateOptionsMenuметод повинен бути:

@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);
    }

де ваш пошуковий елемент menu_searchпоза курсом

і ось searchviewredversion(це версія xhdpi): http://img836.imageshack.us/img836/5964/searchviewredversion.png

Наведене вище рішення не працює з ActionBarSherlock 4.2, і тому воно не сумісне з Android 2.x. Ось робочий код, який налаштовує фон SearchView та натяк на текст 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));
}

Я також втомився робити це і використовую v7. Програма перестала працювати, коли я спробував захопити searchPlateчерез, getIdentifier()тому я зробив це так:

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

Я також зіткнувся з тією ж проблемою. Я використав бібліотеку appcompat v7 і визначив для неї власний стиль. У папку, що витягується, помістіть файл bottom_border.xml, який виглядає приблизно так:

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

У папці значень 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>

Я визначив файл custommenu.xml для відображення меню:

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

Ваша діяльність повинна розширювати ActionBarActivity замість 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);
}

У файлі маніфесту:

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

Для отримання додаткової інформації дивіться тут:
тут http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Оновлення

Якщо ви використовуєте AndroidX, ви можете зробити це так

    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);
        }
    }

По-перше, давайте створимо XML-файл під назвою search_widget_background.xml, який буде використовуватися як графічний, тобто під каталог, що малюється.

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

Цей малюнок буде використаний як фон для нашого віджету пошуку. Я встановив колір червоний, тому що це ви просили, але ви можете встановити його будь-якого кольору, визначеного тегом @color. Ви можете навіть змінити його додатково, використовуючи атрибути, визначені для тегу форми (зробіть закруглені кути, зробіть овальний фон тощо).

Наступним кроком є ​​встановлення фону нашого пошукового віджета на цей. Це можна досягти за допомогою наступного:

    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 );
........
    }

і це файл searchcablecolor.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>

Я пояснив наприкінці цієї публікації із зображеннями, що це стосується форм xamarin. Але я думаю, ви можете це зрозуміти, оскільки він заснований на вихідному коді searchview для android

Як змінити зображення кнопки скасування панелі пошуку у формах xamarin

Якщо ви надуваєте Searchview на зразок цього "getMenuInflater (). Inflate (R.menu.search_menu, меню);". Потім ви можете налаштувати цей перегляд пошуку за допомогою style.xml, як показано нижче.

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

Я багато копався про це і, нарешті, знайшов це рішення, і воно працює для мене!
Ви можете використовувати це

Якщо ви використовуєте appcompat, спробуйте це:

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

Якщо ви використовуєте androidx, спробуйте це:

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

Це змінить значок serchview за замовчуванням.

Сподіваюся, це допомагає!