如何在AppCompat下设置SearchView的光标颜色样式

时间:2015-01-01 11:15:40

标签: android android-appcompat android-styles

我的SearchView是android.support.v7.widget.SearchView,AppTheme如下所示。

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
</style>

<style name="AppTheme" parent="AppBaseTheme">
</style>

SearchView的颜色看起来很奇怪,它的光标和底线显示为白色并快速转换为强调色,如何处理呢?我想让光标和底线保持白色。

5 个答案:

答案 0 :(得分:54)

经过大量实验,我终于可以使用autoCompleteTextViewStyle属性以及自定义光标Drawable来更改光标颜色。修改示例中提供的代码,您将执行以下操作。首先,将上述属性添加到主题中,如下所示:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
    <item name="autoCompleteTextViewStyle">@style/cursorColor</item>
</style>

然后为&#34; cursorColor&#34;创建样式。它将引用您将创建的光标Drawable(下一步):

<style name="cursorColor" parent="Widget.AppCompat.AutoCompleteTextView">
        <item name="android:textCursorDrawable">@drawable/cursor</item>
</style>

最后要做的是创建将用作替换游标的游标drawable(cursor.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#FFFFFF" />
    <size android:width="1dp" />
</shape>

这是分别在应用新主题之前和之后光标的样子......

<强>之前

enter image description here

<强>后

enter image description here

最后一点,您可以通过修改Drawable中的相应字段来改变新光标的宽度和颜色:

<!-- Change this to increase the width -->
<size android:width="1dp"/>
<!-- Change this to change the color -->
<solid android:color="#FFFFFF" />

答案 1 :(得分:21)

如果您想要更改的是search-editText的插入符/光标的颜色,您可以使用:

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="actionBarTheme">@style/AppTheme.ActionBarTheme</item>
.... 

<style name="AppTheme.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlActivated">#FFffffff</item>
</style>

答案 2 :(得分:20)

我通过在工具栏主题中专门添加colorAccent来解决这个问题,这与我应用程序其余部分的colorAccent不同。

例如。对于应用程序库,我在整个应用程序中都有一定的强调颜色:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
</style>

然后对于包含searchview的工具栏,我设置了一个android主题:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/toolBarBackgroundColor"
    android:theme="@style/ToolbarStyle"
    app:popupTheme="@style/ThemeOverlay.AppCompat" />

在该工具栏主题中,我使用另一种颜色重音来专门为工具栏中的重音元素(在我的例子中只是光标)着色:

<style name="ToolbarStyle" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    ...
    <item name="colorAccent">@color/cursorAccent</item>
</style>

答案 3 :(得分:3)

我是如何解决它的。

我的SearchView代码:

<android.support.v7.widget.SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/WallSearchView"
                app:queryHint="@string/action_search"
                app:searchIcon="@drawable/ic_search" />

我的WallSearchView风格是:

<style name="WallSearchView" parent="Widget.AppCompat.SearchView">
        ...
        <item name="iconifiedByDefault">false</item>
        <item name="colorControlActivated">#FFffffff</item>
    </style>

**注意:仅适用于v21及以上版本。

答案 4 :(得分:2)

这个简单的解决方案对我有用:


1-在Styles.xml文件中定义样式

<!DOCTYPE html>
<html>

<head>
  <title>GOOGLE Map</title>
  <link rel="icon" href="google.jpg" type="image/gif" sizes="16x16">
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    #map {
      height: 100%;
    }
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map">
  </div>
  <script>
    var map;
    var TILE_SIZE = 256;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lng: 73.76606472,
          lat: 46.7578125
        },
        zoom: 21
      });

      var geoJSON = {
        "type": "Feature",
        "id": "red_line.963",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [72.76606472, 44.7578125],
            [73.76606472, 46.7578125]
          ]
        },
        "geometry_name": "geometry",
        "properties": {
          "text_value": null,
          "redline_id": 146
        }
      };
      map.data.addGeoJson(geoJSON); //adding data layer
      map.addListener('click', identifyFeatures);


      function identifyFeatures(evt) {
        var featuresHits = [];
        map.data.forEach(function(feature) {
          var type = feature.getGeometry().getType();
          if ("LineString" == type) {
            var polygonCords = [];
            var pointOnLine = null;
            feature.getGeometry().forEachLatLng(function(latlng) {
              polygonCords.push(latlng);
            });
            var polyline = new google.maps.Polyline({
              path: polygonCords,
            });
            if (google.maps.geometry.poly.isLocationOnEdge(evt.latLng, polyline, 0.123444)) {
              featuresHits.push(feature);
            }
          }
        });
        alert("Total Features: " + featuresHits.length);
      };
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxBykE_KdCA6Etkewrera3hO3qep0IOxM&callback=initMap" async defer></script>
</body>

</html>

2-将该样式应用于您的SearchView

<style name="WhiteCursorSearchView" parent="Widget.AppCompat.SearchView">
    <item name="colorControlActivated">#FFFFFF</item>
</style>