如何将自定义搜索栏的ProgressDrawable大小设置为小于ProgressBackground

时间:2015-12-14 09:47:08

标签: android android-layout

我有一个不太适用的自定义seekbar

我希望seekbar看起来像这样:

Notice the progress bar is 'skinnier' than the background

但这与我能够得到的一样接近

The progress bar and background are the same size

忽略轻微的颜色和尺寸问题,我遇到的问题是绿色progress尺寸。有没有办法让它比背景小?我在size中尝试了paddingXML标记,甚至尝试使用剪辑gravity摆弄两个矩形,但是还没有运气。< / p>

这是我的Seekbar drawable

<?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">
            <corners android:radius="20dp" />
            <solid android:color="@color/fofo_grey" />

        </shape>
    </item>

    <item android:id="@android:id/progress">

        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="20dp" />
                  <solid android:color="@color/signup_green" />
            </shape>
    </clip>
    </item>

</layer-list>  

布局片段中的Seekbar

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/seekBar"
    android:layout_below="@+id/textView6"
    android:layout_centerHorizontal="true"
    android:splitTrack="false"
    android:progressDrawable="@drawable/custom_seekbar"
    android:thumb="@drawable/thumb_seekbar"
    android:max="100"
    android:progress="50"
    android:indeterminate="false" />

3 个答案:

答案 0 :(得分:17)

更改高度进度绘图只需将android:minHeight="2dp"android:maxHeight="2dp"添加到布局。

<强>更新

<androidx.appcompat.widget.AppCompatSeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:max="100"
    android:minHeight="2dp"
    android:maxHeight="2dp"
    android:background="@android:color/transparent"
    android:progressDrawable="@drawable/sb_progress_drawable"
    android:progress="0"
    android:secondaryProgress="0"
    android:thumbOffset="0dp"
    android:thumb="@drawable/sb_thumb" />

sb_progress_drawable.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">
        <shape android:shape="rectangle">
            <solid android:color="#26FFFFFF"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <scale
            android:scaleWidth="100%" >
            <shape android:shape="rectangle">
                <solid android:color="#26FFFFFF"/>
            </shape>
        </scale>
    </item>

    <item android:id="@android:id/progress">
        <scale
            android:scaleWidth="100%" >
            <shape android:shape="rectangle">
                <solid android:color="#FFFFFF"/>
            </shape>
        </scale>
    </item>

</layer-list>

sb_thumb.xml

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

答案 1 :(得分:11)

    <?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">
            <corners android:radius="20dp"/>
            <solid android:color="@color/fofo_grey" />

        </shape>
    </item>

    <item android:id="@android:id/progress">

        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="20dp"/>
                  <solid android:color="@color/signup_green" />
                <stroke android:width="6dp"
                        android:color="@color/fofo_grey" />
            </shape>
    </clip>
    </item>

</layer-list>

只需在搜索栏中添加笔画属性

答案 2 :(得分:7)

管理来解决这个问题。不敢相信我花了这么长时间才想到解决方案......

 <clip>
            <shape android:shape="rectangle">
                <stroke android:color="@color/fofo_grey" android:width="6dp"/>
                <corners android:radius="20dp" />
                <solid android:color="@color/signup_green" />
            </shape>
        </clip>

添加了与背景元素颜色相同的stroke,并调整了stroke width以达到预期的效果。

Finished effect