我想样式一个寻求条,看起来像一个在下面的图像。
通过使用默认的搜索栏,我将得到这样的东西:
我只需要改变颜色。我不需要额外的款式。是否有任何直接的方法来做到这一点,或者我应该建立我的自定义绘图。?
我试着建立一个自定义的,但我不能得到上面所示的确切的一个。
使用自定义drawable后,我得到的是如下所示:
如果我需要建立一个自定义,那么请建议如何减少进度线的宽度和形状。
我的自定义实现:
background_fill.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:startColor="#FF555555" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FFB80000"
android:endColor="#FFFF4400"
android:startColor="#FF470000" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
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>
thumb.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="270"
android:endColor="#E5492A"
android:startColor="#E5492A" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
Seeekbar:
<SeekBar
android:id="@+id/seekBarDistance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="88dp"
android:progressDrawable="@drawable/progress"
android:thumb="@drawable/thumb" >
</SeekBar>
在材质组件库1.2.0版本中,你可以使用新的Slider组件。
<com.google.android.material.slider.Slider
android:valueFrom="0"
android:valueTo="300"
android:value="200"
android:theme="@style/slider_red"
/>
你可以使用如下方法覆盖默认颜色:
<style name="slider_red">
<item name="colorPrimary">#......</item>
</style>
否则,你可以在布局中使用这些属性来定义颜色或颜色选择器:
<com.google.android.material.slider.Slider
app:activeTrackColor="@color/...."
app:inactiveTrackColor="@color/...."
app:thumbColor="@color/...."
/>
或者你可以使用自定义样式:
<style name="customSlider" parent="Widget.MaterialComponents.Slider">
<item name="activeTrackColor">@color/....</item>
<item name="inactiveTrackColor">@color/....</item>
<item name="thumbColor">@color/....</item>
</style>
在材质组件库1.2.0版本中,你可以使用新的Slider组件。
<com.google.android.material.slider.Slider
android:valueFrom="0"
android:valueTo="300"
android:value="200"
android:theme="@style/slider_red"
/>
你可以使用如下方法覆盖默认颜色:
<style name="slider_red">
<item name="colorPrimary">#......</item>
</style>
否则,你可以在布局中使用这些属性来定义颜色或颜色选择器:
<com.google.android.material.slider.Slider
app:activeTrackColor="@color/...."
app:inactiveTrackColor="@color/...."
app:thumbColor="@color/...."
/>
或者你可以使用自定义样式:
<style name="customSlider" parent="Widget.MaterialComponents.Slider">
<item name="activeTrackColor">@color/....</item>
<item name="inactiveTrackColor">@color/....</item>
<item name="thumbColor">@color/....</item>
</style>
我想为搜索栏创建一个样式,然后将该样式添加到一个主题,这样我就可以将它应用到整个主题,同时仍然允许子样式覆盖它。以下是我所做的:
<!-- 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+包括三星(需要seekBarStyle除了android:seekBarStyle;不知道为什么,但我亲眼看到了这个问题)。如果你想让所有的搜索栏保持主题样式,只应用绿色的搜索栏样式到一些小部件,然后添加以下内容到你想要的小部件:
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.Green"/>