dynamically resized Thumb of SeekBar gets clipped above and below, how to draw on top (Z order)?

Question

Many stackoverflow questions related to thumb clipping are concerned with clipping to the left and right, which is not related to my question.

Thumb is an image. The image scale is reset onProgressChanged in order to scale up as the SeekBar slides right.

The issue is that when the image gets tall enough to touch the top of the SeekBar view, the image continues to scale while keeping the top touching the top. So visually it looks like the thumb image is moving down the page.

Desired is for (1) the image to stay centered on the bar as the image is slid right. (2) the thumb image to be drawn ON TOP of everything rather than clipped inside the SeekBar view.

I have tried bringToFront() with the SeekBar view but it doesn't change anything.

codes:

SeekBar.OnSeekBarChangeListener sbcl = new SeekBar.OnSeekBarChangeListener() {
                @Override
                public void onProgressChanged(SeekBar seekbar, int i, boolean b) {
                    Resources res = getResources();
                    int resID = (Integer)seekbar.getTag();
                  //  Log.i("R vals in Listener :"," "+resID);
                    Drawable thumb = res.getDrawable(resID);
                    double h = (double)thumb.getIntrinsicHeight();
                    double w = (double)thumb.getIntrinsicWidth();
                    double di = (double)i;
                    h = h * 0.2;  //scale for icons that are way to big
                    w = w * 0.2;
                    Log.i("seek 2"," h: "+h+" w: "+ w);
                    w = w * (di/200 + 0.5);
                    h = h * (di/200 + 0.5);
                    Log.i("seek 3"," h: "+h+" w: "+ w +" i: "+ i);
                    if (w<1) {w = 1;} if (h<1) {h = 1;}

                    Bitmap bmpOrg = ((BitmapDrawable)thumb).getBitmap();
                    Bitmap bmpScaled = Bitmap.createScaledBitmap(bmpOrg, (int)w, (int)h, true);
                    Drawable newThumb = new BitmapDrawable(res, bmpScaled);
                    newThumb.setBounds(0, 0, newThumb.getIntrinsicWidth(), newThumb.getIntrinsicHeight());
                    seekbar.setThumb(newThumb);
                }

.xml layout the maxHeight parameter (android:maxHeight="1000dp") is a workaround to keep the image vertically centered on the SeekBar

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="sic.emo.apptt.GetProtectorData$PlaceholderFragment">

    <sic.eco.appt.VerticalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:orientation="vertical"
        android:layout_weight="1">


            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="100dp">
              <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:text="@string/LabelSA"
                android:layout_gravity="center"
                    android:id="@+id/textLabelSA" />
              <SeekBar
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:id="@+id/seekBarPS"
                android:thumb="@drawable/dog"
                android:maxHeight="1000dp"
                android:hapticFeedbackEnabled="true"
                android:layout_gravity="center_horizontal" />

            </LinearLayout>

            etc. etc.

Answer 1

(1) no answer. using image drawable for the thumb, and scaling it dynamically, when it gets big it aligns its top with the top of the SeekBar view so not sure how to make that different. Padding the top will give more space for the image to grow, if there's enough screen space.

The answer to (2) is to have elements lay on top of each other, use RelativeLayout to contain all the elements rather than holding each "row of stuff" in LinearLayouts. The clipping comes from the row of stuff being in separate Linear Layouts.

So have a RelativeLayout with all the stuff and use the Layout tags to position everything like:

                    android:layout_alignTop="@+id/textLabel1"
                    android:src="@drawable/ic_action_about"
                    android:layout_alignParentRight="false"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentEnd="false"
                    android:paddingLeft="0dp"
                    android:layout_marginLeft="-10dp"
                    android:layout_marginTop="-18dp"

In the code the element (in this case SeekBar with images for thumbs) can be brought to the front with bringToFront() in the startTrackingTouch

 @Override
 public void onStartTrackingTouch(SeekBar seekBar) {
                    seekBar.bringToFront();
                }