move image with seekbar

Question

How could I move image when scrolling seekbar? I want to move this indicator image when changing seekbar thumb position.

Here is image.

Answer 1

Some adjustments may need to be made depending upon your choice of image and/or its alignment with the seekbar. I am sure someone else here will come up with a better approach, but here's my take on it:

// Declare global variables
SeekBar sb;
LinearLayout.LayoutParams params;
Point p;
ImageView iv;

// Initialize the widgets
sb = (SeekBar) findViewById(....);

iv = (ImageView) findViewById(....);

// Since I added SeekBar and ImageView to a LinearLayout.
// Use LayoutParams for whichever container you use.
params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
            LinearLayout.LayoutParams.WRAP_CONTENT);

// Starting position
params.leftMargin = 0;

// Decide the value based on where you wish to place the image w.r.t the SeekBar
params.topMargin = ...;

iv.setLayoutParams(params);

// You will use this to get the width of the screen
p = new Point();

getWindowManager().getDefaultDisplay().getSize(p);


sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {}

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {}

    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {        
        // ((float)progress * p.x) / 100): "p.x" holds the screen's width.
        //                                 The expression computes the percentage of
        //                                 screen width given the "progress" value

        // (progress * 0.5): This is being used to offset image position.
        //                   I am using the offset because it seemed that the image 
        //                   was leading the SeekBar at higher progress values. 
        //                   You can try different values to see which one works best.
        int measure = (int)((((float)progress * p.x) / 100) - (progress * 0.5));

        // When "measure" will become equal to "p.x"(at progress = 100),
        // the image will be outside the view when we set its "leftMargin".
        // But, the image will start disappearing before that.
        // When this situation comes, set the "leftMargin" to a maximum value
        // which is the screen width - ImageView' width
        if (p.x - measure < iv.getWidth()) {
            params.leftMargin = p.x - iv.getWidth();
        } else {
            params.leftMargin = measure ;
        }

        // Set the "topMargin" to the value you decided upon before  
        params.topMargin = ...;

       // Set LayoutParams
       iv.setLayoutParams(params);
    }
});

Edit (for user Shripal's comment) -- above the SeekBar (Y-axis):

layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp" >   <!-- adjust this in java code -->

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/some_drawable" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="50" />

    </RelativeLayout>

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Answer 2

Here is the xml code

 <SeekBar
                        android:id="@+id/seek_bar"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:thumb="@drawable/seek_thumb_icon"
                        android:progressDrawable="@drawable/progress"/>

Heres the java code

@Override
    public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
        mSeekBarProgressText.setText(String.valueOf(i) + " %");
        mParcentValue = i;
        setPercent(mDiscountPercentText , "-" + i , getResources().getDimension(R.dimen.discount_percent_text));
        if (i > 0){
            findMGTextView(R.id.card_without_discount).setVisibility(View.GONE);
        } else {
            findMGTextView(R.id.card_without_discount).setVisibility(View.VISIBLE);
        }
        int measure = (int)((((float)i * point.x) / 100) - (i * 0.5));

        if (i < 50){
            mSeekBarProgressText.setBackgroundResource(R.drawable.cucich1);
            params.leftMargin = measure ;
        } else {
            mSeekBarProgressText.setBackgroundResource(R.drawable.cucich_reverse1);
            params.leftMargin = measure - (mSeekBarProgressText.getWidth() + 20);
        }
        params.topMargin = 0;

        mSeekBarProgressText.setLayoutParams(params);
        findMGTextView(R.id.card_without_discount1).setLayoutParams(params);
    }