2

I have used a seekbar in my application. How do i increase touch area for seekbar thumb, without increasing its width and height? User finds it difficult to use the default thumb size, so have to increase touch area for a good user experience.

  <SeekBar
                android:id="@+id/seek_bar_song_progress"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/padding_left_margin"
                android:layout_weight="2.8"
                android:gravity="center_vertical"
                android:maxHeight="@dimen/slider_width"
                android:progress="0"
                style="?attr/seekbar_style"
                android:thumbOffset="0dp" 
                 android:max="@integer/song_progress_bar_upper_range"
                android:contentDescription="@string/img_volumeslider"/>
Shalini
  • 151
  • 1
  • 2
  • 9

1 Answers1

2

With below code any view clickable area can be increased :

public static void increaseClickArea(View parent, View child) {

        // increase the click area with delegateArea, can be used in + create
        // icon
        final View chicld = child;
        parent.post(new Runnable() {
            public void run() {
                // Post in the parent's message queue to make sure the
                // parent
                // lays out its children before we call getHitRect()
                Rect delegateArea = new Rect();
                View delegate = chicld;
                delegate.getHitRect(delegateArea);
                delegateArea.top -= 600;
                delegateArea.bottom += 600;
                delegateArea.left -= 600;
                delegateArea.right += 600;
                TouchDelegate expandedArea = new TouchDelegate(delegateArea,
                        delegate);
                // give the delegate to an ancestor of the view we're
                // delegating the
                // area to
                if (View.class.isInstance(delegate.getParent())) {
                    ((View) delegate.getParent())
                            .setTouchDelegate(expandedArea);
                }
            };
        });

    }

Here is complete demo code

KOTIOS
  • 11,177
  • 3
  • 39
  • 66
  • This i have tried, it works only for one seekbar. I have 2 seekbars in the same layout and am not able to apply touch delegate for the second seekbar. Can u please help me out? – Shalini Jan 16 '15 at 12:58
  • it get applies to multiple view in layout..make sure u don't have same referance – KOTIOS Jan 17 '15 at 04:02
  • i have one relative layout and 2 seekbars inside that layout, So parent for these 2 seekbar views are same and thus am not able to add delegate for both seekbars. Any solution to increase both seekbar's touchable area? – Shalini Jan 19 '15 at 10:03
  • Added demo code , plz refer and let me know if it usefull – KOTIOS Jan 23 '15 at 07:55
  • I did the same way as in demo code.. Thanks for the code! But if we apply touch area for both the image views then it works only for the first one. This the problem which am facing too.. – Shalini Jan 27 '15 at 06:58
  • the area u r trying to set is definatly more than second one hence overlapping and it get called only for the first touch – KOTIOS Jan 27 '15 at 07:42
  • the value u r trying to use may be delegateArea.top -= 600; chnage the values as 100.....600 is tomuch as compared to 100 for small buttons – KOTIOS Jan 27 '15 at 08:01
  • i reduced it to delegateArea.top,bottom,left,right=50 each. Still it works only for the first one n not the second one – Shalini Jan 27 '15 at 09:22
  • I tried with the code which u have shared. Just added increase touch area for both img1 and img2. increaseClickArea(parent, img2); increaseClickArea(parent, img1); – Shalini Jan 27 '15 at 11:12
  • not sure until and unless i see ur code executing, this is what i can help you – KOTIOS Jan 27 '15 at 11:19