Customizing SeekBar Style - transparency and size issue

喜夏-厌秋 提交于 2020-01-06 18:03:16

问题


This question is a follow-up from this. After following the suggestions in the answer, my SeekBar definition is:

<SeekBar
    android:id="@id/seek_bar_player"
    android:layout_width="match_parent"
    android:layout_height="12dp"
    android:layout_above="@id/player_container"
    android:layout_centerVertical="true"
    android:layout_marginBottom="-4.2dp"
    android:maxHeight="4dp"
    android:minHeight="4dp"
    android:padding="0dp"
    android:paddingEnd="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingStart="10dp"
    android:progressDrawable="@drawable/seekbar"
    android:thumb="@drawable/seekbar_thumb"
    android:background="@color/colorTransparent"
    />

seekbar.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="@color/seekbarBackground"/>

    <item
        android:id="@android:id/progress">
        <scale android:drawable="@color/seekbarProgressBackground"
            android:scaleWidth="100%"/>
    </item>
</layer-list>

seekbar_thumb.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:dither="false">
    <solid android:color="@color/seekbarProgressBackground"/>
    <size
        android:width="3dp"
        android:height="12dp"
        />
</shape>

The output is as follows:

The SeekBar is in a RelativeLayout and I want the bar to be at just top of player_container (which is some other container). I have two problems now:

1. The height of the bar (only bar, not thumb or seekbar etc.) is expected to be 4dp, induced by maxHeight property, and the height of the thumb is expected to be 12dp. Thus, I expect the thumb to be vertically centered and giving -4dp for the bottom margin should make the bar sit on top of player_container, since (12-4)/2 = 4. However, it outputs some gap between the bar and player_container, thus I set it -4.2dp (after a few trials) to get the expected output. I am not confident with this, i.e. it may behave weird on some devices. What is the reason of this? How can we make sure that thumb is vertically centered and of height 12dp?

2. The space above the bar -which is again expected to be of height 4dp- is not transparent, and in this way it seems quite amateur. I set the background of SeekBar to transparent but it apparently did not work. How can we make it transparent?

EDIT: Now I have tried on a Lenove Vibe C with API 22, and even -4.2dp for bottom margin is not enough. There is gap between bar and player_container. As I was afraid, it behaves differently in different devices. There should be a way to fix it.

EDIT: The layout that the seekbar lies in is as follows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp">

    <TabHost
        android:id="@+id/tab_host"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/seek_bar_player"
        android:layout_alignParentTop="true"
        android:layout_marginTop="4pt"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="8dp"
                android:showDividers="none" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </TabHost>

    <LinearLayout
        android:id="@+id/player_container"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentBottom="true"
        android:background="@color/playerBackground"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="0dp">

        <!--
            Five FrameLayouts here, each containing one control button. They 
            are not referenced elsewhere, so omiting them. Not important.
            I want the bar of the seekbar to be on top of this LinearLayout.
        -->
    </LinearLayout>

    <SeekBar
        android:id="@id/seek_bar_player"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:layout_above="@id/player_container"
        android:layout_centerVertical="true"
        android:layout_marginBottom="-4.2dp"
        android:maxHeight="4dp"
        android:minHeight="4dp"
        android:padding="0dp"
        android:paddingEnd="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingStart="10dp"
        android:progressDrawable="@drawable/seekbar"
        android:thumb="@drawable/seekbar_thumb"
        android:background="@color/colorTransparent"
        />
</RelativeLayout>

来源:https://stackoverflow.com/questions/42044781/customizing-seekbar-style-transparency-and-size-issue

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!