Zmiana tła, które można rysować w widżecie widoku wyszukiwania

Próbuję zmienić element do rysowania, który znajduje się w widżecie widoku paska akcji systemu Android.

Obecnie wygląda to tak:

ale muszę zmienić niebieskie tło do rysowania na kolor czerwony.

Próbowałem wielu rzeczy poza rozwijaniem własnego widgetu wyszukiwania, ale wydaje się, że nic nie działa.

Czy ktoś może wskazać mi właściwy kierunek, aby to zmienić?

Intro

Niestety nie ma sposobu na ustawienie SearchViewstylu pola tekstowego za pomocą motywów, stylów i dziedziczenia w XML, tak jak można to zrobić z tłem elementów w menu rozwijanym ActionBar . Dzieje się tak, ponieważ selectableItemBackground jest wymieniony jako podlegający stylizacji w R.stylable, podczas gdy searchViewTextField(atrybut motywu, który nas interesuje) nie. Dlatego nie możemy uzyskać do niego łatwego dostępu z zasobów XML (pojawi się No resource found that matches the given name: attr 'android:searchViewTextField'błąd).

Ustawianie tła pola tekstowego SearchView z kodu

Tak więc jedynym sposobem na poprawne podstawienie tła SearchViewpola tekstowego jest wejście do jego wnętrza, uzyskanie dostępu do widoku, który ma ustawione tło searchViewTextFieldi ustawienie własnego.

UWAGA: Poniższe rozwiązanie zależy tylko od id ( android:id/search_plate) elementu wewnątrz SearchView, więc jest bardziej niezależne od wersji SDK niż przechodzenie dzieci (np. Użycie, searchView.getChildAt(0)aby uzyskać właściwy widok wewnątrz SearchView), ale nie jest kuloodporne. Zwłaszcza jeśli jakiś producent zdecyduje się na ponowne zaimplementowanie elementów wewnętrznych SearchViewi brak elementu o podanym powyżej id - kod nie zadziała.

W SDK tło pola tekstowego w SearchViewjest deklarowane za pomocą dziewięciu łat , więc zrobimy to w ten sam sposób. Oryginalne obrazy png można znaleźć w katalogu drawable-mdpi repozytorium git systemu Android . Interesują nas dwa obrazy. Jeden dla stanu, gdy zaznaczone jest pole tekstowe (o nazwie textfield_search_selected_holo_light.9.png ), a drugi dla miejsca, w którym go nie ma (o nazwie textfield_search_default_holo_light.9.png ).

Niestety, będziesz musiał utworzyć lokalne kopie obu obrazów, nawet jeśli chcesz dostosować tylko stan skupienia . Dzieje się tak, ponieważ textfield_search_default_holo_lightnie ma go w R.drawable . W związku z tym nie jest łatwo dostępny za pomocą @android:drawable/textfield_search_default_holo_light, którego można użyć w selektorze pokazanym poniżej, zamiast odwoływania się do lokalnego drawable.

UWAGA: użyłem motywu Holo Light jako podstawy, ale możesz zrobić to samo z Holo Dark . Wydaje się, że nie ma istotnej różnicy w wybranych państwowych 9-łaty między Światła i Ciemności tematów. Istnieje jednak różnica w 9 łatach dla stanu domyślnego (patrz Jasny kontra Ciemny ). Więc prawdopodobnie nie ma potrzeby tworzenia lokalnych kopii 9 poprawek dla wybranego stanu , zarówno dla motywów Dark i Light (zakładając, że chcesz obsłużyć oba i sprawić, by wyglądały tak samo jak w Holo Theme ). Po prostu wykonaj jedną lokalną kopię i użyj jej wselektor do rysowania dla obu tematów.

Teraz musisz edytować pobrane dziewięć poprawek według swoich potrzeb (tj. Zmieniając kolor niebieski na czerwony). Możesz rzucić okiem na plik za pomocą narzędzia Draw 9-patch, aby sprawdzić, czy jest poprawnie zdefiniowany po edycji.

Edytowałem pliki za pomocą GIMP-a z jednym pikselowym narzędziem ołówka (dość łatwe), ale prawdopodobnie użyjesz własnego narzędzia. Oto moja dostosowana łatka 9 dla stanu skupienia :

UWAGA: Dla uproszczenia użyłem tylko obrazów dla gęstości mdpi . Będziesz musiał utworzyć 9 łatek dla wielu gęstości ekranu, jeśli chcesz uzyskać najlepszy wynik na dowolnym urządzeniu. Obrazy dla Holo SearchView można znaleźć w formacie mdpi , hdpi i xhdpi do rysowania.

Teraz musimy utworzyć selektor do rysowania, aby odpowiedni obraz był wyświetlany na podstawie stanu widoku. Utwórz plik res/drawable/texfield_searchview_holo_light.xmlz następującą zawartością:

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

Użyjemy powyższego utworzonego drawable, aby ustawić tło dla LinearLayoutwidoku, który zawiera pole tekstowe SearchView- jego identyfikator to android:id/search_plate. Oto jak to zrobić szybko w kodzie podczas tworzenia menu opcji:

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

}

Efekt końcowy

Oto zrzut ekranu końcowego wyniku:

Jak do tego doszedłem

Myślę, że warto poznać, jak do tego doszedłem, aby to podejście można było wykorzystać podczas dostosowywania innych widoków.

Sprawdzam układ widoku

Sprawdziłem, jak SearchViewwygląda układ. W konstruktorze SearchView można znaleźć wiersz, który zawyża układ:

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

Teraz wiemy, że SearchViewukład znajduje się w pliku o nazwie res/layout/search_view.xml. Spoglądając na search_view.xml , możemy znaleźć wewnętrzny LinearLayoutelement (z id search_plate), który ma android.widget.SearchView$SearchAutoCompletewewnątrz (wygląda jak nasze pole tekstowe widoku wyszukiwania):

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

Teraz wiemy, że tło jest ustawione na podstawie searchViewTextFieldatrybutu bieżącego motywu .

Badanie atrybutu (czy jest to łatwe do ustalenia?)

Aby sprawdzić, jak searchViewTextFieldustawiany jest atrybut, sprawdzamy plik res / values ​​/ themes.xml . Istnieje grupa atrybutów powiązanych SearchViewdomyślnie 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>

Widzimy, że dla motywu domyślnego wartością jest @drawable/textfield_searchview_holo_dark. Dla Theme.Lightwartości jest także ustawić w tym pliku .

Byłoby wspaniale, gdyby ten atrybut był dostępny przez R.styleable , ale niestety tak nie jest. Dla porównania zobacz inne rozrywki atrybuty, które są obecne zarówno w themes.xml i R.attr jak textAppearance lub selectableItemBackground . Gdyby searchViewTextFieldbył obecny w R.attr(i R.stylable), moglibyśmy po prostu użyć naszego selektora do rysowania podczas definiowania motywu dla całej naszej aplikacji w XML. Na przykład:

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

Co należy zmodyfikować?

Teraz wiemy, że będziemy musieli uzyskać dostęp search_plateprzez kod. Jednak nadal nie wiemy, jak to powinno wyglądać. Krótko mówiąc, wyszukujemy obiekty do rysowania używane jako wartości w domyślnych motywach: textfield_searchview_holo_dark.xml i textfield_searchview_holo_light.xml . Patrząc na treść, widzimy, że to, selectorco można rysować, odnosi się do dwóch innych rysunków (które później są 9-łatkami) w oparciu o stan widoku. Zagregowane elementy do rysowania z 9 łatkami z (prawie) wszystkich wersji Androida można znaleźć na androiddrawables.com

Dostosowywanie

Rozpoznajemy niebieską linię w jednej z 9 łat , więc tworzymy jej lokalną kopię i zmieniamy kolory według potrzeb.

Powyższe rozwiązania mogą nie działać, jeśli używasz biblioteki appcompat. Być może będziesz musiał zmodyfikować kod, aby działał dla biblioteki appcompat.

Oto działające rozwiązanie dla biblioteki 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);
}

Twoja onCreateOptionsMenumetoda musi być:

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

gdzie poszukiwany element nie jest menu_searchwłaściwy

a oto searchviewredversion(ta jest wersją xhdpi): http://img836.imageshack.us/img836/5964/searchviewredversion.png

Powyższe rozwiązanie nie działa z ActionBarSherlock 4.2 i dlatego nie jest wstecznie kompatybilne z Androidem 2.x. Oto działający kod, który konfiguruje tło SearchView i tekst podpowiedzi w 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));
}

Jestem zmęczony, aby to zrobić i używam v7. Aplikacja uległa awarii, kiedy próbowałem złapać searchPlateprzez the, getIdentifier()więc zrobiłem to w ten sposób:

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

Aktualizacja

Jeśli używasz AndroidX, możesz to zrobić w ten sposób

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

Ja też napotkałem ten sam problem, użyłem biblioteki appcompat v7 i zdefiniowałem dla niej własny styl. W folderze do rysowania umieść plik bottom_border.xml, który wygląda następująco:

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

W folderze wartości 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>

Zdefiniowałem plik custommenu.xml do wyświetlania 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"/>

Twoja aktywność powinna rozszerzać ActionBarActivity zamiast 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);
}

W pliku manifestu:

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

Więcej informacji można znaleźć tutaj:
tutaj http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Najpierw utwórzmy plik XML o nazwie search_widget_background.xml, który będzie używany jako plik do rysowania, tj. W katalogu do rysowania.

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

Ten element do rysowania będzie używany jako tło dla naszego widżetu wyszukiwania. Ustawiłem kolor na czerwony, ponieważ o to prosiłeś, ale możesz ustawić dowolny kolor zdefiniowany przez tag @color. Możesz nawet zmodyfikować go dalej, używając atrybutów zdefiniowanych dla etykiety kształtu (wykonaj zaokrąglone rogi, zrób owalne tło itp.).

Następnym krokiem jest ustawienie tła naszego widżetu wyszukiwania na to. Można to osiągnąć w następujący sposób:

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

a to jest plik 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>

Wyjaśniłem na końcu tego posta za pomocą obrazów, które dotyczą formularzy Xamarin. Ale myślę, że możesz to zrozumieć, ponieważ jest oparty na kodzie źródłowym searchview na Androida

Jak zmienić obraz przycisku anulowania paska wyszukiwania w formularzach Xamarin

Jeśli zawyżasz Searchview w ten sposób "getMenuInflater (). Inflate (R.menu.search_menu, menu);". Następnie możesz dostosować ten widok wyszukiwania za pomocą style.xml, jak poniżej.

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

Dużo nad tym grzebałem iw końcu znalazłem to rozwiązanie i na mnie działa!
Możesz tego użyć

Jeśli używasz appcompat, spróbuj tego:

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

Jeśli używasz androidx, spróbuj tego:

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

Spowoduje to zmianę domyślnej ikony widoku usługi.

Mam nadzieję, że to pomoże!