我想样式一个寻求条,看起来像一个在下面的图像。

通过使用默认的搜索栏,我将得到这样的东西:

我只需要改变颜色。我不需要额外的款式。是否有任何直接的方法来做到这一点,或者我应该建立我的自定义绘图。?

我试着建立一个自定义的,但我不能得到上面所示的确切的一个。 使用自定义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>

当前回答

首先使用以下步骤创建Drawble文件

命名drawble并指定根元素为layer-list ->,点击OK。将创建一个新文件custom_seek .xml

现在在custom_seek .xml中,在图层列表中添加一个项目并给它一个形状。指定SeekBar的颜色,高度,角。另外,添加另一个相同形状和大小的项目,但你可以改变颜色,左侧的SeekBar的拇指将是这种颜色。

现在再次单击drawable -> new -> drawable资源文件,将文件命名为thumb.xml,并指定根元素为shape ->,单击OK。将创建一个新文件thumb.xml。在这个文件中给出拇指的高度、半径和颜色。这些事情是可以改变的。这完全取决于你想如何设计。

现在转到activity_main.xml创建一个布局,并在布局中添加一个SeekBar。指定SeekBar的高度和宽度,以及要使用的最大进度,将progress设置为0。

android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb" 
android:max="50"
android:progress="0"

这将在activity_main.xml中创建一个定制的搜索栏。

现在打开MainActivity.java类,声明SeekBar和TextView的对象,在onCreate方法中使用findViewById()方法初始化两个对象。执行一个包含进度值的SeekBar更改侦听器事件,并使用该事件在TextView中设置进度值。

   seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");

                
            }..

构建并运行应用程序。将拇指放在搜索栏上,向前或向后移动它,它将显示进程。

上述实现的代码如下所示:

下面是MainActivity.java文件的代码。代码中添加了注释,以便更详细地理解代码。

    package com.abhi.customseekbar;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    SeekBar seekBar;
    TextView value;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // initialize the seekBar object
        seekBar=findViewById(R.id.seekbar);
        value=findViewById(R.id.progress);
        // calling the seekbar event change listener
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");           
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                // This method will automatically
                // called when the user touches the SeekBar
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                // This method will automatically
                // called when the user
                // stops touching the SeekBar
            }
        });
    }
}

下面是activity_main.xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#458C85"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/Relative_1"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:layout_weight="2">

        <TextView
            android:id="@+id/textViewSelectSizeOfArray"
            android:layout_width="273dp"
            android:layout_height="wrap_content"
            android:layout_above="@+id/seekbar"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"

            android:layout_marginBottom="9dp"
            android:text="Custom Seek Bar"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="25dp" />

        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:indeterminate="false"
            android:max="50"
            android:progress="0"
            android:progressDrawable="@drawable/custom_seekbar"
            android:thumb="@drawable/thumb" />

        <TextView
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="0dp"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="199dp"
            android:padding="10dp"
            android:text="0"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="30dp"
            android:textStyle="bold">

        </TextView>

    </RelativeLayout>

</LinearLayout>

下面是custom_seek .xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- color, size, shape height of seekbar -->
    <item android:gravity="center_vertical">
        <shape android:shape="rectangle">
            <solid android:color="#605A5C"/>
            <size android:height="30dp"/>
            <corners android:radius="9dp"/>
        </shape>
    </item>
    <!-- color, size, shape height of seekbar when u drag it-->
    <item android:gravity="center_vertical">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false"
                    android:drawable="@color/purple_200"/>
                <item>
                    <shape android:shape="rectangle">
                        <solid android:color="@color/black"/>
                        <size android:height="30dp"/>
                        <corners android:radius="9dp"/>
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

下面是thumb.xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/purple_200"/>
    <size android:height="30dp" android:width="25dp"/>
    <corners android:radius="5dp"/>
</shape>

其他回答

我改变了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高度的背景和进度。

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

这是所有

简单的方法来改变寻找条的颜色…

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

首先使用以下步骤创建Drawble文件

命名drawble并指定根元素为layer-list ->,点击OK。将创建一个新文件custom_seek .xml

现在在custom_seek .xml中,在图层列表中添加一个项目并给它一个形状。指定SeekBar的颜色,高度,角。另外,添加另一个相同形状和大小的项目,但你可以改变颜色,左侧的SeekBar的拇指将是这种颜色。

现在再次单击drawable -> new -> drawable资源文件,将文件命名为thumb.xml,并指定根元素为shape ->,单击OK。将创建一个新文件thumb.xml。在这个文件中给出拇指的高度、半径和颜色。这些事情是可以改变的。这完全取决于你想如何设计。

现在转到activity_main.xml创建一个布局,并在布局中添加一个SeekBar。指定SeekBar的高度和宽度,以及要使用的最大进度,将progress设置为0。

android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb" 
android:max="50"
android:progress="0"

这将在activity_main.xml中创建一个定制的搜索栏。

现在打开MainActivity.java类,声明SeekBar和TextView的对象,在onCreate方法中使用findViewById()方法初始化两个对象。执行一个包含进度值的SeekBar更改侦听器事件,并使用该事件在TextView中设置进度值。

   seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");

                
            }..

构建并运行应用程序。将拇指放在搜索栏上,向前或向后移动它,它将显示进程。

上述实现的代码如下所示:

下面是MainActivity.java文件的代码。代码中添加了注释,以便更详细地理解代码。

    package com.abhi.customseekbar;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    SeekBar seekBar;
    TextView value;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // initialize the seekBar object
        seekBar=findViewById(R.id.seekbar);
        value=findViewById(R.id.progress);
        // calling the seekbar event change listener
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");           
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                // This method will automatically
                // called when the user touches the SeekBar
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                // This method will automatically
                // called when the user
                // stops touching the SeekBar
            }
        });
    }
}

下面是activity_main.xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#458C85"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/Relative_1"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:layout_weight="2">

        <TextView
            android:id="@+id/textViewSelectSizeOfArray"
            android:layout_width="273dp"
            android:layout_height="wrap_content"
            android:layout_above="@+id/seekbar"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"

            android:layout_marginBottom="9dp"
            android:text="Custom Seek Bar"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="25dp" />

        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:indeterminate="false"
            android:max="50"
            android:progress="0"
            android:progressDrawable="@drawable/custom_seekbar"
            android:thumb="@drawable/thumb" />

        <TextView
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="0dp"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="199dp"
            android:padding="10dp"
            android:text="0"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="30dp"
            android:textStyle="bold">

        </TextView>

    </RelativeLayout>

</LinearLayout>

下面是custom_seek .xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- color, size, shape height of seekbar -->
    <item android:gravity="center_vertical">
        <shape android:shape="rectangle">
            <solid android:color="#605A5C"/>
            <size android:height="30dp"/>
            <corners android:radius="9dp"/>
        </shape>
    </item>
    <!-- color, size, shape height of seekbar when u drag it-->
    <item android:gravity="center_vertical">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false"
                    android:drawable="@color/purple_200"/>
                <item>
                    <shape android:shape="rectangle">
                        <solid android:color="@color/black"/>
                        <size android:height="30dp"/>
                        <corners android:radius="9dp"/>
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

下面是thumb.xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/purple_200"/>
    <size android:height="30dp" android:width="25dp"/>
    <corners android:radius="5dp"/>
</shape>

输出:

更改进度颜色:

int normalColor = ContextCompat.getColor(context, R.color.normal_color);
int selectedColor = ContextCompat.getColor(context, R.color.selected_color);
Drawable normalDrawable = new ColorDrawable(normalColor);
Drawable selectedDrawable = new ColorDrawable(selectedColor);
ClipDrawable clipDrawable = new ClipDrawable(selectedDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
Drawable[] layers = {normalDrawable, clipDrawable, clipDrawable};
LayerDrawable seekbarDrawable = new LayerDrawable(layers);
seekBar.setProgressDrawable(seekbarDrawable);

改变拇指颜色:

int thumbColor = ContextCompat.getColor(context, R.color.thumb_color);
Drawable unwrappedDrawable = AppCompatResources.getDrawable(context, R.drawable.ic_seekbar_thumb);
assert unwrappedDrawable != null;
Drawable wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable);
DrawableCompat.setTint(wrappedDrawable, thumbColor);
seekBar.setThumb(wrappedDrawable);