Seekbar in the middle of two layers with different background

Question

I use a Seekbar in the middle of two layers with different background colors.

In normal state it's OK. here's the picture:

When holding down the Seekbar, it has a wrong background in the top half:

Here is the code in layout file:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout ...    
android:background="#23232C"
tools:context=".MainActivity">

<android.support.constraint.ConstraintLayout
    android:id="@+id/player"
    android:layout_width="0dp"
    android:layout_height="56dp"
    android:background="#2F2F38"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/imageViewAlbumArt">

    <!-- ... some views ...-->

</android.support.constraint.ConstraintLayout>

<SeekBar
    android:paddingStart="0dp"
    android:paddingEnd="0dp"
    android:id="@+id/seekbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@id/player"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/player" />

<View
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@id/player"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

I found that the problem is that when Seekbar is above any view the background not shown. Here's the simple layout that show the case:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<View
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#3b3930" />

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="45dp" />

</FrameLayout>

I follow the instruction in this stackoverflow link and this is the result:

Is there anyway to remove the default background color behavior?

I gave background color to the bottom view and seekbar background color behavior gone.

The only solution for know.

actually the thumb should show the highlight when being selected/dragged. So the top is not behaving correctly. Can you post your layout please, otherwise it will be hard to help you. — JDurstberger, Jan 05 '19 at 10:45
Thanks @Altoyyr i change question and ask for problem in top half. — Mohammad Reza Khahani, Jan 05 '19 at 11:03
Seems like the problem is, that the second constraint layout and the seekbar are on the same level and you have no padding between them and therefore the seekbar highlight can't be drawn over the constraint layout. Unfortunately I don't know what the solution would be except maybe overriding the thumb style for the seekbar and removing the highlight all together — JDurstberger, Jan 05 '19 at 11:03
Also another tip, try not to nest constraint layouts. This has relatively big performance impacts and normally you should be able to work around nesting constraint layouts with the right constraints — JDurstberger, Jan 05 '19 at 11:04

Seekbar in the middle of two layers with different background

0 Answers0