I have a class that simply displays an image. And I want to implement zoom in/out effect by pinch, so I refer to the code here.
public class FullScreenImageActivity extends AppCompatActivity {
public static final String IMAGE = "IMAGE";
public static Bitmap image;
private float mScaleFactor = 1.0f;
private ScaleGestureDetector mScaleGestureDetector;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_full_screen_image);
ConstraintLayout fullscreen_background = findViewById(R.id.fullscreen_background);
fullscreen_background.setOnClickListener(v -> finish());
ImageView fullscreen_image = findViewById(R.id.fullscreen_image);
mScaleGestureDetector = new ScaleGestureDetector(this, new ScaleGestureDetector.OnScaleGestureListener() {
#Override
public void onScaleEnd(ScaleGestureDetector detector) {
Log.d("fuck", "onScaleEnd");
}
#Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
Log.d("fuck", "onScaleBegin");
return true;
}
#Override
public boolean onScale(ScaleGestureDetector detector) {
Log.d("fuck", "onScale");
mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor * detector.getScaleFactor(), 10.0f));
fullscreen_image.setScaleX(mScaleFactor);
fullscreen_image.setScaleY(mScaleFactor);
return true;
}
});
if (image == null) Helper.LoadImage(Glide.with(this), getIntent().getStringExtra(IMAGE), fullscreen_image);
else fullscreen_image.setImageBitmap(image);
}
#Override
public boolean onTouchEvent(MotionEvent motionEvent) {
Log.d("fuck", "onTouchEvent");
return mScaleGestureDetector.onTouchEvent(motionEvent);
}
#Override
public void finish() {
super.finish();
image = null;
}
}
But my code doesn't seem to work. None of the logs is printed out. Any ideas?
I also have another question, how can I finish this activity only when not tapping on the image?
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fullscreen_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<ImageView
android:id="#+id/fullscreen_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/food_image_place_holder" />
</android.support.constraint.ConstraintLayout>
My project is here.
Try using this custom image view i have created to handle pinch and drag operaions on image.
ZoomDragImageView
Related
I am working on images, I am going to display image in full screen, as user touches on screen then some controls will be shown. So I want to disable zooming when controls are on the screen.
Or somebody tell me how to detect the image is zoom or not?
activity_image.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/imgSelected"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:src="#drawable/placeholder"
android:contentDescription="#string/image" />
<LinearLayout
android:id="#+id/imageControls"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:weightSum="9"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:orientation="horizontal"
android:visibility="gone"
android:background="#drawable/image_controls">
<Button
android:id="#+id/btnSetAsBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="left|center_vertical"
android:background="#00000000"
style="#style/ImageControls"
android:text="Set"/>
<Button
android:id="#+id/btnFavorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#00000000"
style="#style/ImageControls"
android:text="Favourite"/>
<Button
android:id="#+id/btnShare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="right|center_vertical"
android:background="#00000000"
style="#style/ImageControls"
android:text="Share"/>
</LinearLayout>
</RelativeLayout>
activity_zoom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >
</LinearLayout>
ImageActivity.java
public class ImageActivity extends Activity {
private int imageId;
private int categoryId;
private String imageUrl;
private ZoomView zoomView;
private ImageView imageView;
private LinearLayout main_container;
private boolean controlFlag;
private LinearLayout imageControls;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_zoom);
if (Build.VERSION.SDK_INT < 16) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
final View convertView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.activity_image, null, false);
convertView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
imageControls = (LinearLayout) convertView.findViewById(R.id.imageControls);
controlFlag = false;
zoomView = new ZoomView(this);
imageId = getIntent().getExtras().getInt("image");
categoryId = getIntent().getExtras().getInt("category");
imageView = (ImageView) convertView.findViewById(R.id.imgSelected);
imageUrl = SplashActivity.urlList.get(categoryId).get(imageId);
Log.e(String.valueOf(categoryId),imageUrl);
Picasso
.with(this)
.load(imageUrl)
.placeholder(R.drawable.placeholder)
.into(imageView, new Callback() {
#Override
public void onError() {
}
#Override
public void onSuccess() {
imageView.setScaleType(ScaleType.FIT_CENTER);
}
});
zoomView.addView(convertView);
main_container = (LinearLayout) findViewById(R.id.main_container);
main_container.addView(zoomView);
convertView.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
if(controlFlag) {
imageControls.setVisibility(View.GONE);
controlFlag = false;
} else {
imageControls.setVisibility(View.VISIBLE);
controlFlag = true;
}
return false;
}
});
}
}
I am using android-zoom-view.jar library for zooming. I want to display LinearLayout (imageControls) only if image is not zoom Or disable zooming if LinearLayout (imageControls) is visible. Because ZoomView instance perform zooming on all over activity so the imageControls will also be zoom. This is not a good user friendly design.
So please help me to make this layout better.
Thanks...
In zoomview class thinking you using this https://github.com/Polidea/android-zoom-view/blob/master/src/pl/polidea/view/ZoomView.java
just add this
boolean isZoomEnable= true;
public void setIsZoomEnable(boolean value){
isZoomEnable = value;
}
#Override
public boolean dispatchTouchEvent(final MotionEvent ev) {
if(!isZoomEnable) return false;
// single touch
if (ev.getPointerCount() == 1) {
processSingleTouchEvent(ev);
}
// // double touch
if (ev.getPointerCount() == 2) {
processDoubleTouchEvent(ev);
}
// redraw
getRootView().invalidate();
invalidate();
return true;
}
Then in your code
convertView.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
if(controlFlag) {
imageControls.setVisibility(View.GONE);
controlFlag = false;
} else {
imageControls.setVisibility(View.VISIBLE);
controlFlag = true;
}
zoomView.setIsZoomEnable(!controlFlag);
return false;
}
});
I've written a small activity that uses fragments with a ViewPager to show images.
I've also implemented a custom GestureListener to catch the swipe up and swipe down gestures without interferring with the ViewPager's own gesture handling. What I want to achieve is to show a layout when the user swipes down.
Problem is, I haven't found out how to execute the animation when the gesture listener detects the swipe down gesture.
EDIT: Added context and view to MyGestureListener to reference the view and context. Logging shows that the gesture is detected correctly and the view inside MyGestureListener is the correct one but nothing gets animated.
Code as follows.
Activity:
public class MainActivity extends FragmentActivity {
private GestureDetector gestureDetector;
private ViewPager vwpMain;
private PagerAdapter pgaMain;
private RelativeLayout layout;
private LinearLayout topLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
layout = (RelativeLayout) findViewById(R.id.container);
topLayout = (LinearLayout) findViewById(R.id.topPanel);
vwpMain = (ViewPager) findViewById(R.id.vwpMain);
pgaMain = new MyPagerAdapter(getSupportFragmentManager());
vwpMain.setAdapter(pgaMain);
gestureDetector = new GestureDetector(this, new MyGestureListener(getApplicationContext(), topLayout));
layout.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
gestureDetector.onTouchEvent(event);
return true;
}
});
}
public boolean dispatchTouchEvent(MotionEvent ev) {
super.dispatchTouchEvent(ev);
return gestureDetector.onTouchEvent(ev);
}
private class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fragmentManager) {
super(fragmentManager);
}
#Override
public Fragment getItem(int pos) {
return ImageFragment.create(pos);
}
#SuppressLint("SdCardPath")
#Override
public int getCount() {
File f = new File("/mnt/sdcard/FragmentImages/");
return f.listFiles().length;
}
}
Fragment:
public class ImageFragment extends Fragment {
private int pageNumber;
private ImageView i;
public static ImageFragment create(int pageNumber) {
ImageFragment f = new ImageFragment();
Bundle b = new Bundle();
b.putInt("index", pageNumber);
int indice = pageNumber + 1;
String ruta = Environment.getExternalStorageDirectory().getPath()
+ "/FragmentImages/imagen_" + indice + ".jpg";
b.putString("file", ruta);
f.setArguments(b);
return f;
}
public ImageFragment() {
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
pageNumber = getArguments().getInt("index");
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout containing a title and body text.
ViewGroup rootView = (ViewGroup) inflater.inflate(
R.layout.fragment_image, container, false);
i = (ImageView) rootView.findViewById(R.id.imgImagen);
BitmapWorkerTask task = new BitmapWorkerTask(i);
task.execute(getArguments().getString("file"));
return rootView;
}
public int getPageNumber() {
return pageNumber;
}
public class BitmapWorkerTask extends AsyncTask<String, Void, Bitmap> {
private final WeakReference<ImageView> imageViewReference;
private String data;
public BitmapWorkerTask(ImageView imageView) {
imageViewReference = new WeakReference<ImageView>(imageView);
}
#Override
protected Bitmap doInBackground(String... params) {
data = params[0];
return BitmapFactory.decodeFile(data);
}
#Override
protected void onPostExecute(Bitmap bitmap) {
if (imageViewReference != null && bitmap != null) {
final ImageView imageView = imageViewReference.get();
if (imageView != null) {
imageView.setImageBitmap(bitmap);
}
}
}
}
}
Gesture listener:
public class MyGestureListener extends SimpleOnGestureListener {
private static final int SWIPE_MIN_DISTANCE = 75;
private static final int SWIPE_MAX_OFF_PATH = 100;
private static final int SWIPE_THRESHOLD_VELOCITY = 50;
public Context context;
public View view;
public MyGestureListener() {
super();
context = _context;
view = _view;
}
#Override
public boolean onDown(MotionEvent event) {
return true;
}
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
float dX = e2.getX() - e1.getX();
float dY = e1.getY() - e2.getY();
if (Math.abs(dY) < SWIPE_MAX_OFF_PATH
&& Math.abs(velocityX) >= SWIPE_THRESHOLD_VELOCITY
&& Math.abs(dX) >= SWIPE_MIN_DISTANCE) {
if (dX > 0) {
Log.d("Fragment", "Swiping right");
} else {
Log.d("Fragment", "Swiping left");
}
} else if (Math.abs(dX) < SWIPE_MAX_OFF_PATH
&& Math.abs(velocityY) >= SWIPE_THRESHOLD_VELOCITY
&& Math.abs(dY) >= SWIPE_MIN_DISTANCE) {
if (dY > 0) {
Log.d("Fragment", "Swiping up");
} else {
Log.d("Fragment", "Swiping down");
Animation a = AnimationUtils.loadAnimation(context, R.anim.show_top);
Log.d("Fragment", view.toString());
view.startAnimation(a);
}
}
return false;
}
}
Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/topPanel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="horizontal"
android:visibility="gone" >
<TextView
android:id="#+id/topPanelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/topPanelText"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/black" />
</LinearLayout>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/vwpMain"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Animation:
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromYDelta="-100%"
android:toYDelta="0%" >
</translate>
Found a solution. I changed the swiping down detection code to this:
Log.d("Fragment", "Swiping down");
Animation showTopPanel = AnimationUtils.loadAnimation(context, R.anim.show_top);
topView.bringToFront();
topView.setVisibility(View.VISIBLE);
topView.startAnimation(showTopPanel);
Then the animation showed correctly.
I'd like to use ImageViewZoom with Universal Image Loader in ImagePagerActivity.
I am able to zoom the image, Swipe to the next image. But i am facing problem when image is in Zoom position.
if an image is zoomed and i am at center position, if i want to see the right side part of the same image and swipe left it is going to the next image. Please help me in doing this.
here is my XML code:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="1dip" >
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:layout_weight="1"
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter" />
<ProgressBar
android:id="#+id/loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
EDIT:
Thank you NOSTRA, Now i am able to control the zoom and slide with the below code. But the problem with Multi touch zoom. I am not able to zoom with two fingers.
Here is my previous code(working fine with two finger):
public class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
#Override
public boolean onScale( ScaleGestureDetector detector ) {
Log.d( LOG_TAG, "onScale" );
float span = detector.getCurrentSpan() - detector.getPreviousSpan();
float targetScale = mCurrentScaleFactor * detector.getScaleFactor();
if ( mScaleEnabled ) {
targetScale = Math.min( getMaxZoom(), Math.max( targetScale, getMinZoom()-0.1f ) );
zoomTo( targetScale, detector.getFocusX(), detector.getFocusY() );
mCurrentScaleFactor = Math.min( getMaxZoom(), Math.max( targetScale, getMinZoom()-1.0f ) );
mDoubleTapDirection = 1;
invalidate();
return true;
}
return false;
}
}
And here is the Modified one:
public class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
#Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
externalScaleListener.onScaleBegin();
return super.onScaleBegin(detector);
}
#Override
public void onScaleEnd(ScaleGestureDetector detector) {
externalScaleListener.onScaleEnd(mCurrentScaleFactor);
}
}
First you must be able to listen scaling of image. ImageViewTouch doesn't support this feature (e.g gesture-imageview support it) so you should implement it yourself.
Change ImageViewTouch.java like this:
public class ImageViewTouch extends ImageViewTouchBase {
...
private OnPageScaleListener externalScaleListener;
public void setOnScaleListener(OnPageScaleListener onScaleListener) {
this.externalScaleListener = onScaleListener;
}
public interface OnPageScaleListener {
void onScaleBegin();
void onScaleEnd(float scale);
}
#Override
protected void onZoom(float scale) {
super.onZoom(scale);
if (!mScaleDetector.isInProgress()) {
mCurrentScaleFactor = scale;
externalScaleListener.onScaleEnd(scale);
}
}
public class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
#Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
externalScaleListener.onScaleBegin();
return super.onScaleBegin(detector);
}
...
#Override
public void onScaleEnd(ScaleGestureDetector detector) {
externalScaleListener.onScaleEnd(mCurrentScaleFactor);
}
}
...
}
Then use next implementation of ViewPager in your application:
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/**
* {#link ViewPager} which can be deactivated (ignore touch events)
*
* #author Sergey Tarasevich
* #created 19.07.2012
*/
public class DeactivableViewPager extends ViewPager {
private boolean activated = true;
public DeactivableViewPager(Context context) {
super(context);
}
public DeactivableViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void activate() {
activated = true;
}
public void deactivate() {
activated = false;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
if (activated) {
try {
return super.onInterceptTouchEvent(event);
} catch (Exception e) { // sometimes happens
return true;
}
} else {
return false;
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
try {
return super.onTouchEvent(event);
} catch (Exception e) {
return true;
}
}
}
Then in your ViewPager's adapter you should set next scale listener for your ImageViewTouch:
ImageViewTouch imageView = ...;
imageView.setOnScaleListener(new OnPageScaleListener() {
#Override
public void onScaleBegin() {
viewPager.deactivate();
}
#Override
public void onScaleEnd(float scale) {
if (scale > 1.0) {
viewPager.deactivate();
} else {
viewPager.activate();
}
}
});
imageLoader.displayImage(url, imageView, ...);
And don't forget set big values for maxImage***ForMemoryCache in ImageLoader's configuration so UIL won't downscale original images during decoding to Bitmaps:
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext())
...
.memoryCacheExtraOptions(3000, 3000)
...
.build();
I was having trouble with pre-zoomed images in viewPager, but now its alright and solved the problem.
You have to search the ImageViewTouchBase class for this line:
protected DisplayType mScaleType = DisplayType.NONE;
then change it to:
protected DisplayType mScaleType = DisplayType.FIT_TO_SCREEN;
By default, DisplayType is set to NONE, its simple, just use FIT_TO_SCREEN and your images will be in the default size when sliding in viewPager.
Cheers
You can set those properties to make image fit to screen always
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/iv_pager_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="matrix" />
So I'm realy confused
I am having a View(R.layout.main) which includes a custom view (canvas)
this View contains a button which is overlayed over the canvas
but when I click the button the OnClicklistener fires the event but after that button is doing nothing when clicked
Activity :
public class RunActivity extends Activity implements OnTouchListener, OnClickListener {
static int width;
static int height;
static boolean reset=false;
//draw d;
View d;
Button jump_button;
//jump
float last_touchpos=0;
static boolean jump=false;
private static Context mContext;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//d = new draw(this);
d = getLayoutInflater().inflate(R.layout.main, null);
d.setOnTouchListener(this);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
mContext = this;
//get screen size
WindowManager wm = (WindowManager) this.getContext().getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
width = display.getWidth(); // deprecated
height = display.getHeight(); // deprecated
setContentView(d);
jump_button = (Button) findViewById(R.id.jump);
jump_button.setOnClickListener(this);
}
public static Context getContext(){
return mContext;
}
#Override
public boolean onTouch(View v, MotionEvent event) {
Log.d("touch","touched");
if (draw.end == true)
{
reset=true;
}
else
{
if(last_touchpos != 0)
{
if(last_touchpos < event.getY())
{
jump = true;
last_touchpos = 0;
}
}
else
{
last_touchpos = event.getY();
}
}
return false;
}
#Override
public void onClick(View arg0) {
jump = true;
}
}
Layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<run.alexander.fuchs.draw
android:id="#+id/canvasview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/jump"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Jump" />
</RelativeLayout>
static boolean jump=false;
remove static from this statement
boolean jump=false;
How can you sure your onClick is called once. Use a log print message within onClick method to make sure that it is called once. Your code is okay, and I hope your onClick works properly and check your rest of code.
I want to implement a slider, which is basically two lines, one vertical and one horizontal, crossing where the screen is touched. I have managed to make one but I have to issues:
The slider is not very smooth, there is a slight delay when I'm moving the finger
If I place two sliders it is not multitouch, and I'd like to use both of them simultaneously
Here is the code:
public class Slider extends View {
private Controller controller = new Controller();
private boolean initialisedSlider;
private int sliderWidth, sliderHeight;
private Point pointStart;
private Paint white;
private int mode;
final static int VERTICAL = 0, HORIZONTAL = 1, BOTH = 2;
public Slider(Context context) {
super(context);
setFocusable(true);
// TODO Auto-generated constructor stub
}
public Slider(Context context, AttributeSet attrs) {
super(context, attrs);
setFocusable(true);
pointStart = new Point();
initialisedSlider = false;
mode = Slider.BOTH;
}
#Override
protected void onDraw(Canvas canvas) {
if(!initialisedSlider) {
initialisedSlider = true;
sliderWidth = getMeasuredWidth();
sliderHeight = getMeasuredHeight();
pointStart.x = (int)(sliderWidth/2.0);
pointStart.y = (int)(sliderHeight/2.0);
controller = new Controller(pointStart, 3);
white = new Paint();
white.setColor(0xFFFFFFFF);
}
canvas.drawLine(controller.getCoordX(),0,
controller.getCoordX(),sliderHeight,
white);
canvas.drawLine(0, controller.getCoordY(),
sliderWidth, controller.getCoordY(),
white);
}
public boolean onTouchEvent(MotionEvent event) {
int eventaction = event.getAction();
int X = (int)event.getX();
int Y = (int)event.getY();
switch (eventaction) {
case MotionEvent.ACTION_DOWN:
if(isInBounds(X,Y)) {
updateController(X, Y);
}
break;
case MotionEvent.ACTION_MOVE:
if(isInBounds(X,Y)) {
updateController(X, Y);
}
break;
case MotionEvent.ACTION_UP:
if(isInBounds(X,Y)) {
updateController(X, Y);
}
break;
}
invalidate();
return true;
}
private boolean isInBounds(int x, int y) {
return ((x<=(sliderWidth)) && (x>=(0))
&& (y<=(sliderHeight)) && (y>=(0)));
}
private void updateController(int x, int y) {
switch(mode) {
case Slider.HORIZONTAL:
controller.setCoordX(x);
break;
case Slider.VERTICAL:
controller.setCoordY(y);
break;
case Slider.BOTH:
controller.setCoordX(x);
controller.setCoordY(y);
break;
}
}
private class Controller {
private int coordX, coordY;
Controller() {
}
Controller(Point point, int width) {
setCoordX(point.x);
setCoordY(point.y);
}
public void setCoordX(int coordX) {
this.coordX = coordX;
}
public int getCoordX() {
return coordX;
}
public void setCoordY(int coordY) {
this.coordY = coordY;
}
public int getCoordY() {
return coordY;
}
}
}
And the XML file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
<com.android.lasttest.Slider
android:id="#+id/slider"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"/>
<com.android.lasttest.Slider
android:id="#+id/slider"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"/>
<com.android.lasttest.Slider
android:id="#+id/slider"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"/>
</LinearLayout>
How to implement a SeekBar
Add the SeekBar to your layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_margin="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<SeekBar
android:id="#+id/seekBar"
android:max="100"
android:progress="50"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Notes
max is the highest value that the seek bar can go to. The default is 100. The minimum is 0. The xml min value is only available from API 26, but you can just programmatically convert the 0-100 range to whatever you need for earlier versions.
progress is the initial position of the slider dot (called a "thumb").
For a vertical SeekBar use android:rotation="270".
Listen for changes in code
public class MainActivity extends AppCompatActivity {
TextView tvProgressLabel;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// set a change listener on the SeekBar
SeekBar seekBar = findViewById(R.id.seekBar);
seekBar.setOnSeekBarChangeListener(seekBarChangeListener);
int progress = seekBar.getProgress();
tvProgressLabel = findViewById(R.id.textView);
tvProgressLabel.setText("Progress: " + progress);
}
SeekBar.OnSeekBarChangeListener seekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
// updated continuously as the user slides the thumb
tvProgressLabel.setText("Progress: " + progress);
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
// called when the user first touches the SeekBar
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
// called after the user finishes moving the SeekBar
}
};
}
Notes
If you don't need to do any updates while the user is moving the seekbar, then you can just update the UI in onStopTrackingTouch.
See also
SeekBar Tutorial With Example In Android Studio
Android provides slider which is horizontal
http://developer.android.com/reference/android/widget/SeekBar.html
and implement OnSeekBarChangeListener
http://developer.android.com/reference/android/widget/SeekBar.OnSeekBarChangeListener.html
If you want vertical Seekbar then follow this link
http://hoodaandroid.blogspot.in/2012/10/vertical-seek-bar-or-slider-in-android.html
For future readers!
Starting from material components android 1.2.0-alpha01, you have slider component
ex:
<com.google.android.material.slider.Slider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:valueFrom="20f"
android:valueTo="70f"
android:stepSize="10" />
Release notes
Material Design Spec
Docs