Android - 造型搜索栏

22 回答

• 58

  我将从Android源代码中提取drawables和xml并将其颜色更改为红色 . 以下是我为mdpi drawables完成此操作的示例：

  自定义 red_scrubber_control.xml （添加到res / drawable）：

  <selector xmlns:android="http://schemas.android.com/apk/res/android">
  
      <item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
      <item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
      <item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
      <item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
  </selector>
  

  自定义： red_scrubber_progress.xml

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <item
          android:id="@android:id/background"
          android:drawable="@drawable/red_scrubber_track_holo_light"/>
      <item android:id="@android:id/secondaryProgress">
          <scale
              android:drawable="@drawable/red_scrubber_secondary_holo"
              android:scaleWidth="100%" />
      </item>
      <item android:id="@android:id/progress">
          <scale
              android:drawable="@drawable/red_scrubber_primary_holo"
              android:scaleWidth="100%" />
      </item>
  
  </layer-list>
  

  然后从Android源代码中复制所需的drawables，我拿了from this link

  最好为每个hdpi，mdpi，xhdpi复制这些drawable . 例如，我只使用mdpi：

  然后使用Photoshop将颜色从蓝色变为红色：

  red_scrubber_control_disabled_holo.png：
  

  red_scrubber_control_focused_holo.png：
  

  red_scrubber_control_normal_holo.png：
  

  red_scrubber_control_pressed_holo.png：
  

  red_scrubber_primary_holo.9.png：
  

  red_scrubber_secondary_holo.9.png：
  

  red_scrubber_track_holo_light.9.png：
  

  将SeekBar添加到布局：

  <SeekBar
      android:id="@+id/seekBar1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:progressDrawable="@drawable/red_scrubber_progress"
      android:thumb="@drawable/red_scrubber_control" />
  

  结果：

  

  回复于 2024-05-14T08:42:43+08:00
• 2

  如果您想要完全相同的条形但是红色，则可以以编程方式添加PorterDuff颜色过滤器 . 您可以通过ProgressBar基类的方法获取要着色的每个可绘制对象 . 然后为它设置color filter .

  mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));
  

  如果无法通过Porter Duff过滤器进行所需的颜色调整，则可以specify your own color filter .

  回复于 2024-05-14T08:42:43+08:00
• 34

  我的答案来自AndrasBalázsLajtha的答案，它允许在没有xml文件的情况下工作

  seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
  seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
  

  回复于 2024-05-14T08:42:43+08:00
• 8

  我改了 background_fill.xml

  <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="line" >
  <size android:height="1dp" />
  <gradient
      android:angle="0"
      android:centerColor="#616161"
      android:endColor="#616161"
      android:startColor="#616161" />
  <corners android:radius="0dp" />
  <stroke
      android:width="1dp"
      android:color="#616161" />
  <stroke
      android:width="1dp"
      android:color="#616161" />
  </shape>
  

  和 progress_fill.xml

  <?xml version="1.0" encoding="UTF-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="line" >
  <size android:height="1dp" />
  <gradient
      android:angle="0"
      android:centerColor="#fafafa"
      android:endColor="#fafafa"
      android:startColor="#fafafa" />
  <corners android:radius="1dp" />
  <stroke
      android:width="1dp"
      android:color="#cccccc" />
  <stroke
      android:width="1dp"
      android:color="#cccccc" />
   </shape>
  

  使背景和进度 1dp 高度 .

  回复于 2024-05-14T08:42:43+08:00
• 3

  只需用颜色替换颜色分布即可

  background.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="line">
  
      <stroke android:width="1dp" android:color="#D9D9D9"/>
      <corners android:radius="1dp" />
  
  </shape>
  

  progress.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="line">
  
      <stroke android:width="1dp" android:color="#2EA5DE"/>
      <corners android:radius="1dp" />
  
  </shape>
  

  style.xml

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <item
          android:id="@android:id/background"
          android:drawable="@drawable/seekbar_background"/>
      <item android:id="@android:id/progress">
          <clip android:drawable="@drawable/seekbar_progress" />
      </item>
  
  </layer-list>
  

  thumb.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
  
      <size android:height="30dp" android:width="30dp"/>
      <stroke android:width="18dp" android:color="#882EA5DE"/>
      <solid android:color="#2EA5DE" />
      <corners android:radius="1dp" />
  
  </shape>
  

  回复于 2024-05-14T08:42:43+08:00
• 1

  Google已经在SDK 21中简化了这一过程 . 现在我们有了指定拇指色调颜色的属性：

  android:thumbTint
  android:thumbTintMode
  android:progressTint
  

  http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTint http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTintMode

  回复于 2024-05-14T08:42:43+08:00
• 0

  Android搜索栏自定义材质样式，用于其他搜索栏自定义http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

  <style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
      <item name="android:progressBackgroundTint">#f4511e</item>
      <item name="android:progressTint">#388e3c</item>
      <item name="android:colorControlActivated">#c51162</item>
  </style>
  

  

  回复于 2024-05-14T08:42:43+08:00
• 11

  如上所述（@andrew），使用此站点创建自定义SeekBar非常简单 - http://android-holo-colors.com/

  只需在那里启用SeekBar，选择颜色，并接收所有资源并复制到项目 . 然后将它们应用于xml中，例如：

  android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
    android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"
  

  回复于 2024-05-14T08:42:43+08:00
• 0

  刚设置

  android:maxHeight="3dp"
  android:minHeight="3dp"
  

  就这样

  回复于 2024-05-14T08:42:43+08:00
• 3

  <SeekBar
  android:id="@+id/seekBar1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:progressTint="@color/red"
  android:thumbTint="@color/red" />
  

  与所选答案相同 . 无需制作任何可绘制的文件或其他 . （仅限IN 5.0）问候

  回复于 2024-05-14T08:42:43+08:00
• 287

  默认情况下，android会将滑块的进度颜色与之匹配

  `<item name="colorAccent">`
  

  styles.xml 中的值 . 然后，要设置自定义滑块拇指图像，只需在 SeekBar xml布局的块中使用此代码：

  android:thumb="@drawable/slider"
  

  回复于 2024-05-14T08:42:43+08:00
• 0

  如果您使用的是Android Sdk提供的默认SeekBar，那么它们是一种改变颜色的简单方法 . 只需转到/res/values/colors.xml里面的color.xml并更改colorAccent .

  <resources>
      <color name="colorPrimary">#212121</color>
      <color name="colorPrimaryDark">#1e1d1d</color>
       <!-- change below line -->
      <color name="colorAccent">#FF4081</color>
  </resources>
  

  回复于 2024-05-14T08:42:43+08:00
• 58

  LayerDrawable progressDrawable = (LayerDrawable) mSeekBar.getProgressDrawable();
  
  // progress bar line *progress* color
  Drawable processDrawable = progressDrawable.findDrawableByLayerId(android.R.id.progress);
  
  // progress bar line *background* color
  Drawable backgroundDrawable = progressDrawable.findDrawableByLayerId(android.R.id.background);
  
  // progress bar line *secondaryProgress* color
  Drawable secondaryProgressDrawable = progressDrawable.findDrawableByLayerId(android.R.id.secondaryProgress);
  processDrawable.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
  
  // progress bar line all color
  mSeekBar.getProgressDrawable().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_IN);
  
  // progress circle color
  mSeekBar.getThumb().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
  

  回复于 2024-05-14T08:42:43+08:00
• 39

  输出：

  

  在布局文件中：

  <android.support.v7.widget.AppCompatSeekBar
              android:id="@+id/seekBar_bn"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="center"
              android:max="25"
              android:minHeight="10dp"
              android:progress="10"
              android:progressDrawable="@drawable/progress"
              android:thumb="@drawable/custom_thumb" />
  

  绘制/ progress.xml

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <item
          android:id="@android:id/background"
          android:drawable="@drawable/background_fill"/>
      <item android:id="@android:id/progress">
          <clip android:drawable="@drawable/progress_fill" />
      </item>
  
  </layer-list>
  

  绘制/ background_fill.xml

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item
          android:bottom="6dp"
          android:left="-6dp"
          android:right="-6dp"
          android:top="6dp">
  
          <shape android:shape="rectangle">
              <solid android:color="#888888" />
              <stroke
                  android:width="5dp"
                  android:color="@android:color/transparent" />
          </shape>
      </item>
  </layer-list>
  

  绘制/ progress_fill.xml

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item
          android:bottom="6dp"
          android:left="-6dp"
          android:right="-6dp"
          android:top="6dp">
  
          <shape android:shape="rectangle">
              <solid android:color="@color/myPrimaryColor" />
              <stroke
                  android:width="5dp"
                  android:color="@android:color/transparent" />
          </shape>
      </item>
  </layer-list>
  

  绘制/ custom_thumb.xml

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
          <shape android:shape="oval">
              <solid android:color="@color/myPrimaryColor"/>
              <size
                  android:width="22dp"
                  android:height="22dp"/>
          </shape>
      </item>
  </layer-list>
  

  colors.xml

  <color name="myPrimaryColor">#660033</color>
  

  回复于 2024-05-14T08:42:43+08:00
• 10

  简单的方法来改变搜索栏颜色......

  <ProgressBar
              android:id="@+id/progress"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="center"
              android:theme="@style/Progress_color"/>
  

  风格：Progress_color

  <style name="Progress_color">
      <item name="colorAccent">@color/white</item> <!-- Whatever color you want-->
  </style>
  

  java类更改ProgressDrawable（）

  seek_bar.getProgressDrawable().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.MULTIPLY);
  

  回复于 2024-05-14T08:42:43+08:00
• -1

  所有这些答案都已弃用 .

  在2019年，通过将 ProgressBar 更改为此，可以更轻松地将搜索栏设置为您喜欢的颜色

  <SeekBar
              android:id="@+id/seekBar"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:progressTint="#36970f"
              android:thumbTint="#36970f"
              />
  

  以编程方式设置搜索条颜色样式，请尝试以下代码

  seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
          seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
  

  回复于 2024-05-14T08:42:43+08:00
• 0

  如果您查看Android资源，搜索栏实际上会使用图像 .

  您必须制作一个可在顶部和底部透明的可绘制，例如10px，并且可以看到中心的5px线 .

  参考附图 . 您需要将其转换为NinePatch .

  

  回复于 2024-05-14T08:42:43+08:00
• 2

  对于那些使用数据绑定：

  • 将以下静态方法添加到任何类

  @BindingAdapter("app:thumbTintCompat")
  public static void setThumbTint(SeekBar seekBar, @ColorInt int color) {
      seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
  }
  

  • 将 app:thumbTintCompat 属性添加到SeekBar

  <SeekBar
         android:id="@+id/seek_bar"
         style="@style/Widget.AppCompat.SeekBar"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:thumbTintCompat="@{@android:color/white}"
  />
  

  而已 . 现在你可以使用 app:thumbTintCompat 与任何 SeekBar . 可以以相同的方式配置进度色调 .

  Note: 此方法也适用于预棒棒糖设备 .

  回复于 2024-05-14T08:42:43+08:00
• 5

  @ arnav-rao对答案的小修正：

  要确保拇指正确着色，请使用：

  <style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
      <item name="android:progressBackgroundTint">@color/colorBgTint</item>
      <item name="android:progressTint">@color/colorProgressTint</item>
      <item name="android:thumbTint">@color/colorThumbTint</item>
  </style>
  

  android：thumbTint实际上为“拇指”着色

  回复于 2024-05-14T08:42:43+08:00
• 24

  检查本教程非常好

  https://www.lvguowei.me/post/customize-android-seekbar-color/

  简单：

  <SeekBar
                  android:id="@+id/seekBar"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:max="100"
                  android:maxHeight="3dp"
                  android:minHeight="3dp"
                  android:progressDrawable="@drawable/seekbar_style"
                  android:thumbTint="@color/positive_color"/>
  

  然后是一个样式文件：

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
      <item android:id="@android:id/background">
          <shape android:shape="rectangle" >
              <solid
                  android:color="@color/positive_color" />
          </shape>
      </item>
      <item android:id="@android:id/progress">
          <clip>
              <shape android:shape="rectangle" >
                  <solid
                      android:color="@color/positive_color" />
              </shape>
          </clip>
      </item>
  </layer-list>
  

  回复于 2024-05-14T08:42:43+08:00
• 3

  我想为搜索栏创建一个样式，然后将样式添加到主题中，这样我就可以将它应用于整个主题，同时仍允许子类覆盖它 . 这是我做的：

  <!-- Blue App Theme -->
      <style name="AppTheme.Blue" parent="BaseTheme.Blue">        
          <item name="android:seekBarStyle">@style/SeekbarStyle.Blue</item>
          <item name="seekBarStyle">@style/SeekbarStyle.Blue</item> <!--This is essential for some devices, e.g. Samsung-->
  </style>
  
  <!-- Slider Styles -->
  <style name="SeekbarStyle.Blue" parent="Widget.AppCompat.SeekBar">
          <item name="android:progressBackgroundTint">@color/material_blue_a700_pct_30</item>
          <item name="android:thumbTint">@color/material_blue_a700</item>
          <item name="android:thumbTintMode">src_in</item>
          <item name="android:progressTint">@color/material_blue_a700</item>
  </style>
  
  <style name="SeekbarStyle.Green" parent="Widget.AppCompat.SeekBar">
          <item name="android:progressBackgroundTint">@color/material_green_a700_pct_30</item>
          <item name="android:thumbTint">@color/material_green_a700</item>
          <item name="android:thumbTintMode">src_in</item>
          <item name="android:progressTint">@color/material_green_a700</item>
  </style>
  

  以上为包括三星在内的所有设备21设置了主题搜索栏样式为蓝色（除了android：seekBarStyle之外还需要seekBarStyle;不确定为什么，但我亲眼看到了这个问题） . 如果您希望所有搜索栏保留主题样式并仅将绿色搜索栏样式应用于几个小部件，则将以下内容添加到您想要的小部件中：

  <SeekBar
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:theme="@style/AppTheme.Green"/>
  

  回复于 2024-05-14T08:42:43+08:00
• 2

  你也可以这样做：

  <SeekBar
      android:id="@+id/redSeekBar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:progressDrawable="@color/red"
      android:maxHeight="3dip"/>
  

  希望它会有所帮助！

  回复于 2024-05-14T08:42:43+08:00