Ändern des Hintergrunds, der vom Suchansichts-Widget gezeichnet werden kann

Ich versuche, das Drawable zu ändern, das sich im Suchansichts-Widget der Android-Aktionsleiste befindet.

Derzeit sieht es so aus:

aber ich muss den blauen Hintergrund, der gezeichnet werden kann, in eine rote Farbe ändern.

Ich habe viele Dinge versucht, ohne mein eigenes Such-Widget zu rollen, aber nichts scheint zu funktionieren.

Kann mich jemand in die richtige Richtung weisen, um dies zu ändern?

Intro

Leider gibt es keine Möglichkeit, den SearchViewTextfeldstil mithilfe von Themen, Stilen und Vererbung in XML festzulegen, wie dies mit dem Hintergrund von Elementen in der Dropdown-Liste "ActionBar" möglich ist . Dies liegt daran , selectableItemBackground wie styleable aufgeführt wird in R.stylable, während searchViewTextField(Thema Attribut , das uns interessiert) nicht. Daher können wir nicht einfach aus XML-Ressourcen darauf zugreifen (es wird eine No resource found that matches the given name: attr 'android:searchViewTextField'Fehlermeldung angezeigt).

Festlegen des SearchView-Textfeldhintergrunds aus dem Code

Die einzige Möglichkeit, den Hintergrund eines SearchViewTextfelds richtig zu ersetzen, besteht darin, in die Interna zu gelangen, Zugriff auf eine Ansicht zu erhalten, für die der Hintergrund basierend auf searchViewTextFieldunserem eigenen festgelegt und festgelegt wurde.

ANMERKUNG: Die unten stehende Lösung hängt nur von der ID ( android:id/search_plate) des darin enthaltenen Elements ab. Daher SearchViewist die SDK-Version unabhängiger als das Durchlaufen von Kindern (z. B. Verwenden searchView.getChildAt(0), um zur richtigen Ansicht innerhalb des Elements zu gelangen SearchView), sie ist jedoch nicht kugelsicher. Insbesondere wenn ein Hersteller beschließt, Interna von neu zu implementieren SearchViewund ein Element mit der oben genannten ID nicht vorhanden ist, funktioniert der Code nicht.

Im SDK wird der Hintergrund für das Textfeld in SearchViewdurch neun Patches deklariert , sodass wir es auf die gleiche Weise tun. Sie können Original finden png Bilder in ziehbar-MDPI Verzeichnis von Android Git Repository . Wir sind an zwei Bildern interessiert. Eine für den Status, wenn ein Textfeld ausgewählt ist (mit dem Namen textfield_search_selected_holo_light.9.png ) und eine für den Ort, an dem es nicht ausgewählt ist (mit dem Namen textfield_search_default_holo_light.9.png ).

Leider müssen Sie lokale Kopien beider Bilder erstellen, auch wenn Sie nur den fokussierten Status anpassen möchten . Dies liegt daran, dass textfield_search_default_holo_lightin R.drawable nicht vorhanden ist . Daher ist es nicht leicht zugänglich über @android:drawable/textfield_search_default_holo_light, was in der unten gezeigten Auswahl verwendet werden könnte, anstatt auf lokale Zeichen zu verweisen.

HINWEIS: Ich habe das Holo Light- Thema als Basis verwendet, aber Sie können dasselbe mit Holo Dark tun . Es scheint, dass es in ausgewählten Status- 9-Patches keinen wirklichen Unterschied zwischen hellen und dunklen Themen gibt. Es gibt jedoch einen Unterschied bei 9 Patches für den Standardstatus (siehe Hell gegen Dunkel ). Daher ist es wahrscheinlich nicht erforderlich, lokale Kopien von 9 Patches für den ausgewählten Status sowohl für dunkle als auch für helle Themen zu erstellen (vorausgesetzt, Sie möchten beide behandeln und beide sehen genauso aus wie im Holo-Thema ). Erstellen Sie einfach eine lokale Kopie und verwenden Sie sie inAuswahl für beide Themen zeichnbar .

Jetzt müssen Sie die heruntergeladenen neun Patches nach Ihren Wünschen bearbeiten (dh die blaue Farbe in eine rote ändern). Sie können die Datei mit dem Draw 9-Patch-Tool überprüfen, um zu überprüfen, ob sie nach der Bearbeitung korrekt definiert ist.

Ich habe Dateien mit GIMP mit einem Ein-Pixel-Stift-Werkzeug bearbeitet (ziemlich einfach), aber Sie werden wahrscheinlich Ihr eigenes Werkzeug verwenden. Hier ist mein angepasster 9-Patch für den fokussierten Zustand :

HINWEIS: Der Einfachheit halber habe ich nur Bilder für die MDPI- Dichte verwendet. Sie müssen 9 Patches für mehrere Bildschirmdichten erstellen , wenn Sie auf jedem Gerät das beste Ergebnis erzielen möchten. Bilder für Holo SearchView finden Sie in mdpi , hdpi und xhdpi drawable.

Jetzt müssen wir einen zeichnbaren Selektor erstellen, damit das richtige Bild basierend auf dem Ansichtsstatus angezeigt wird. Erstellen Sie eine Datei res/drawable/texfield_searchview_holo_light.xmlmit folgendem Inhalt:

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

Wir werden das oben erstellte Drawable verwenden, um den Hintergrund für die LinearLayoutAnsicht festzulegen, in der sich das Textfeld befindet SearchView- seine ID ist android:id/search_plate. So geht's im Code beim Erstellen des Optionsmenüs schnell:

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

}

Endeffekt

Hier ist der Screenshot des Endergebnisses:

Wie ich dazu gekommen bin

Ich denke, es lohnt sich zu überlegen, wie ich dazu gekommen bin, damit dieser Ansatz beim Anpassen anderer Ansichten verwendet werden kann.

Ansichtslayout auschecken

Ich habe überprüft, wie das SearchViewLayout aussieht. Im SearchView-Konstruktor finden Sie eine Linie, die das Layout aufbläst :

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

Jetzt wissen wir, dass das SearchViewLayout in der Datei mit dem Namen ist res/layout/search_view.xml. Wenn wir in search_view.xml schauen , können wir ein inneres LinearLayoutElement (mit ID search_plate) finden, das android.widget.SearchView$SearchAutoCompletedarin enthalten ist (sieht aus wie unser Textfeld in der Suchansicht ):

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

Jetzt, da der Hintergrund basierend auf dem searchViewTextFieldAttribut des aktuellen Themas festgelegt ist .

Untersuchungsattribut (ist es leicht einstellbar?)

Um zu überprüfen, wie das searchViewTextFieldAttribut festgelegt ist, untersuchen wir res / values ​​/ theme.xml . SearchViewStandardmäßig gibt es eine Gruppe von Attributen 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>

Wir sehen, dass für das Standardthema der Wert ist @drawable/textfield_searchview_holo_dark. Für Theme.LightWert wird auch in dieser Datei gesetzt .

Nun, es wäre großartig, wenn dieses Attribut über R.styleable zugänglich wäre , aber leider nicht. Zum Vergleich : Andere Thema Attribute , die vorhanden sind beide in themes.xml und R.attr wie textAppearance oder selectableItemBackground . Wenn searchViewTextFieldin R.attr(und R.stylable) vorhanden, könnten wir einfach unseren zeichnbaren Selektor verwenden, um das Thema für unsere gesamte Anwendung in XML zu definieren. Beispielsweise:

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

Was sollte geändert werden?

Jetzt wissen wir, dass wir search_plateüber Code zugreifen müssen. Wir wissen jedoch immer noch nicht, wie es aussehen soll. Kurz gesagt, wir suchen nach Drawables, die in Standardthemen als Werte verwendet werden: textfield_searchview_holo_dark.xml und textfield_searchview_holo_light.xml . Wenn wir uns den Inhalt ansehen, sehen wir, dass das Drawable selectorzwei andere Drawables (die später 9 Patches sind) basierend auf dem Ansichtsstatus referenziert. Auf androiddrawables.com finden Sie aggregierte 9-Patch-Drawables von (fast) allen Android- Versionen

Customizing

Wir erkennen die blaue Linie in einem der 9 Patches , erstellen also eine lokale Kopie davon und ändern die Farben nach Wunsch.

Die oben genannten Lösungen funktionieren möglicherweise nicht, wenn Sie die Appcompat-Bibliothek verwenden. Möglicherweise müssen Sie den Code ändern, damit er für die Appcompat-Bibliothek funktioniert.

Hier ist die Arbeitslösung für die Appcompat-Bibliothek.

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

Ihre onCreateOptionsMenuMethode muss sein:

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

wo Ihr Suchbegriff menu_searchvom Kurs abweicht

und hier ist die searchviewredversion(dies ist die xhdpi-Version): http://img836.imageshack.us/img836/5964/searchviewredversion.png

Die obige Lösung funktioniert nicht mit ActionBarSherlock 4.2 und ist daher nicht abwärtskompatibel mit Android 2.x. Hier ist Arbeitscode, der den SearchView-Hintergrund und den Hinweistext in ActionBarSherlock 4.2 einrichtet:

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

Ich habe es auch satt und benutze v7. Die Anwendung stürzte ab, als ich versuchte, die searchPlateVia zu greifen, getIdentifier()also habe ich es so gemacht:

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

Ich hatte auch das gleiche Problem. Ich habe die Appcompat v7-Bibliothek verwendet und einen benutzerdefinierten Stil dafür definiert. Legen Sie in einem zeichnbaren Ordner die Datei bottom_border.xml ab, die folgendermaßen aussieht:

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

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

Ich habe die Datei custommenu.xml für die Anzeige des Menüs definiert:

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

Ihre Aktivität sollte ActionBarActivity anstelle von Activity erweitern.

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

In der Manifestdatei:

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

Weitere Informationen finden Sie hier:
Hier http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Aktualisieren

Wenn Sie AndroidX verwenden, können Sie dies folgendermaßen tun

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

Zuerst erstellen wir eine XML-Datei mit dem Namen search_widget_background.xml, die als Drawable verwendet werden soll, dh unter einem Drawable-Verzeichnis.

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

Dieses Zeichen wird als Hintergrund für unser Such-Widget verwendet. Ich habe die Farbe auf Rot gesetzt, weil Sie danach gefragt haben, aber Sie können sie auf jede Farbe setzen, die durch das @ color-Tag definiert ist. Sie können es sogar mithilfe der für das Form-Tag definierten Attribute weiter ändern (abgerundete Ecken erstellen, einen ovalen Hintergrund erstellen usw.).

Der nächste Schritt besteht darin, den Hintergrund unseres Such-Widgets auf diesen zu setzen. Dies kann durch Folgendes erreicht werden:

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

und dies ist die Datei 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>

Ich habe am Ende dieses Beitrags mit Bildern erklärt, dass dies für Xamarin-Formen gilt. Aber ich denke, Sie können es verstehen, weil es auf dem Quellcode der Suchansicht von Android basiert

So ändern Sie das Bild der Schaltfläche zum Abbrechen der Suchleiste in Xamarin-Formularen

Wenn Sie Searchview wie folgt aufblasen "getMenuInflater (). Inflate (R.menu.search_menu, menu);". Anschließend können Sie diese Suchansicht über style.xml wie unten angepasst anpassen.

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

Ich habe viel darüber nachgedacht und schließlich habe ich diese Lösung gefunden und sie funktioniert für mich!
Sie können dies verwenden

Wenn Sie appcompat verwenden, versuchen Sie Folgendes:

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

Wenn Sie Androidx verwenden, versuchen Sie dies:

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

Das Standard-Serchview-Symbol wird geändert.

Ich hoffe es hilft!