0

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:

enter image description here

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>
Community
  • 1
  • 1
ram
  • 1,099
  • 1
  • 7
  • 22
  • Please post a fuller example of the layout. Doesn't have to be the exact layout, just a minimal one that exposes the issue, so I can play with it. – weston Feb 05 '17 at 01:17
  • @weston I updated the question with additional information. – ram Feb 05 '17 at 10:43

0 Answers0