I am trying to draw some text above the thumb of the SeekBar like in the image above. The idea is that when you move the thumb along the SeekBar text is displayed above the thumb. I am able to draw text inside the thumb but when I try and draw it outside the thumb it doesn't work. Below is my code:
public class MainActivity extends Activity {
SeekBar mybar;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mybar = (SeekBar) findViewById(R.id.seekBar1);
mybar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
// add here your implementation
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
// add here your implementation
}
#Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
int value = seekBar.getProgress();
String valueString = value + "";
Paint paint = new Paint();
paint.setColor(Color.BLACK);
Bitmap b = Bitmap.createBitmap(600, 600,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(b);
canvas.drawText(valueString, 100, 100, paint);
seekBar.draw(canvas);
}
});
}
}
Do I have to override the onDraw method and do it that way instead?
Related
i have an activity which contain this seekbar and have another view of drawing which is drawing circle in Ondraw() mathod,i dont get any solution can anyone help.
here is my code
Activity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_crop);
layout = (LinearLayout) findViewById(R.id.layout);
sk = (SeekBar) findViewById(R.id.seekBar);
drawing= new DrawView(this);
sk.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
size = i + 10;
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
layout.addView(drawing);
}
here is my View have this mathod
#Override
public void onDraw(Canvas canvas) {
canvas.drawBitmap(resulting, 0, 0, null);
canvas.drawPath(circlePath, circlePaint);
canvas.drawCircle(x,y,size/2,showpaint);
}
my problem is how to draw circle on realtime when seekbar is changing,if you need any further detail tell me.
Try adding an updateSize(int size) method to the drawable that calls invalidate() to redraw every time the size changes.
Am creating an app, which changes its color, when the seek bar is raised.
For example, I have an image (similar to the image 1), when the seek bar is raised above 25%, the color should turn as like in the image 2.Till 25%, the image should be like as the image 1.
Actually, the app am creating, is similar to the foot pressure heat map. In foot pressure heat map, user's pressure is taken as an input to change from image 1(which is at normal stage) to image 2. But here, am using simple seek bar to change from image 1 to image 2.
The problem is, i have no idea how to create colors like in the image 2. I was thinking to apply radial gradient. But i don't know to use it properly. Is there any other methods?
import android.app.Activity;
import android.graphics.Canvas;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.SeekBar;
public class MainActivity extends Activity implements SeekBar.OnSeekBarChangeListener
{
private SeekBar redSeekBar;
private GradientDrawable mDrawable;
ImageView img1;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
redSeekBar = (SeekBar) findViewById(R.id.skbr);
redSeekBar.setOnSeekBarChangeListener(this);
redSeekBar.setMax(254);
// greenSeekBar.setMax(254);
// blueSeekBar.setMax(254);
img1 = (ImageView) findViewById(R.id.imageView1);
}
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean touch)
{
if(touch) {
if (progress >= 25 )
mDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
new int[] { 0xFFFF0000, 0xFF00FF00,
0xFF0000FF });
else if (progress <= 100)
mDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
new int[] { 0xFFFF0000, 0xFF00FF00,
0xFF0000FF });
}
//colors = Color.rgb(redProgress, greenProgress, blueProgress);
// imageView.setColorFilter(colors);
}
protected void onDraw(Canvas canvas) {
//canvas.translate(0, mRect.height() + 10);
canvas.save();
canvas.translate(10, 10);
mDrawable.setGradientType(GradientDrawable.RADIAL_GRADIENT);
//setCornerRadius(mDrawable, 0, 0, r, r);
mDrawable.draw(canvas);
canvas.restore();
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
}
I am just drawing a Circle with canvas, and change the radius with a SeekBar. This Code works fine on Emulator, but on my phone the remove View thing doesn't work. Means the circle gets bigger and bigger, but not smaller on my phone.
What is the problem here ?
my Code:
public class Kreis extends Activity implements OnSeekBarChangeListener {
private SeekBar seekbar;
public static int radius = 30;
private TextView textview;
private static View alterKreis;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_kreis);
this.seekbar = (SeekBar)findViewById(R.id.radiusbar);
this.textview = (TextView)findViewById(R.id.ausgabe);
seekbar.setOnSeekBarChangeListener(this);
}
#Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
radius = seekbar.getProgress();
textview.setText(radius + "");
RelativeLayout lp=new RelativeLayout(this);
Circle view = new Circle(this);
lp.removeView(view);
RelativeLayout.LayoutParams params =
new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT);
addContentView(view,params);
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
public class Circle extends View{
public Circle(Context context) {
super(context);
}
#Override
public void draw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.GREEN);
// if(radius>0){
canvas.drawCircle(200,200,radius,paint);
// }
}
}
}
So, I have created an android activity that draws a triangle on the canvas. I also added 4 menus(Color, Enlarge, Shrink, and Reset) to the VM. The color works fine but I'm not quite sure how to resize a triangle in android once that menu button is pressed.The assignment says to just fix the top point of the triangle, and then change the coordinates of the bottom two points of the triangle. Can anyone point me in the right direction on how to do that in Android?
Here's my code, although the implementation of enlarge, shrink, and reset are set up to work with a circle(project I did before), not a triangle. Please note that the "Color" menu works so no need to do that.
public class MainActivity extends Activity
{
final Context context = this;
private Graphics graphic;
private Dialog radiusDialog; //Creates dialog box declaration
private SeekBar red;
private SeekBar green;
private SeekBar blue;
private Button radiusButton;
private TextView progress1;
private TextView progress2;
private TextView progress3;
private TextView tv;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
graphic = new Graphics(this); //Create new instance of graphics view
setContentView(graphic); //Associates customized view with current screen
}
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) //This acts as a menu listener to override
{
switch(item.getItemId()) //returns menu item
{
case R.id.Color:
showDialog();
break;
case R.id.Shrink:
graphic.setRadius(graphic.getRadius() -1);
graphic.invalidate();
break;
case R.id.Enlarge:
graphic.setRadius(graphic.getRadius() +1);
graphic.invalidate();
break;
case R.id.Reset:
graphic.setColor(Color.CYAN);
graphic.setRadius(75);
graphic.invalidate();
break;
}
return super.onOptionsItemSelected(item);
}
void showDialog() //creates memory for dialog
{
radiusDialog = new Dialog(context);
radiusDialog.setContentView(R.layout.draw_layout); //binds layout file (radius) with current dialog
radiusDialog.setTitle("Select Color:");
red = (SeekBar)radiusDialog.findViewById(R.id.seekBar1);
green = (SeekBar)radiusDialog.findViewById(R.id.seekBar2);
blue = (SeekBar)radiusDialog.findViewById(R.id.seekBar3);
progress1 = (TextView)radiusDialog.findViewById(R.id.textView2);
progress2 = (TextView)radiusDialog.findViewById(R.id.textView4);
progress3 = (TextView)radiusDialog.findViewById(R.id.textView6);
mychange redC = new mychange();
red.setOnSeekBarChangeListener(redC);
mychange greenC = new mychange();
green.setOnSeekBarChangeListener(greenC);
tv = (TextView)radiusDialog.findViewById(R.id.textView7);
mychange c = new mychange();
blue.setOnSeekBarChangeListener(c);
radiusButton = (Button) radiusDialog.findViewById(R.id.button1);
radiusButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
int color = Color.rgb(red.getProgress(), green.getProgress(), blue.getProgress());
radiusDialog.dismiss();
setContentView(R.layout.activity_main);
setContentView(graphic);
graphic.setColor(color);//Create new instance of graphics view
graphic.invalidate();
}
});
radiusDialog.show(); //shows dialog on screen
}
public class mychange implements OnSeekBarChangeListener{
#Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
// TODO Auto-generated method stub
int color = Color.rgb(red.getProgress(), green.getProgress(), blue.getProgress());
tv.setBackgroundColor(color);
progress1.setText(String.valueOf(red.getProgress()));
progress2.setText(String.valueOf(green.getProgress()));
progress3.setText(String.valueOf(blue.getProgress()));
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
}
}
Graphics Class to draw triangle
public class Graphics extends View
{
private Paint paint;
private int radius;
private int color;
public void setColor(int color)
{
this.color = color;
}
public Graphics(Context context) //creates custom view (constructor)
{
super(context);
paint = new Paint(); //create instance of paint
color = Color.CYAN;
paint.setStyle(Paint.Style.FILL); //draw filled shape
radius = 75;
}
#Override
protected void onDraw(Canvas canvas) //override onDraw method
{
super.onDraw(canvas);
paint.setColor(color);
paint.setStyle(Paint.Style.STROKE);
Path path = new Path();
path.moveTo(230, 200);
path.lineTo(330, 300);
path.lineTo(130, 300);
path.close();
canvas.drawPath(path, paint);
}
void setRadius(int radius)
{
this.radius = radius;
invalidate(); //just like repaint method
}
public int getRadius()
{
return radius;
}
}
If the top coordinate remains fixed, you can change the height of the triangle to shrink/enlarge it.
Lets say the triangle is equilateral - all 3 sides have the same length. In this case:
So if the top vertex coordinates are (x, y), the bottom coordinates will be:
(x - side / 2, y + h)
And:
(x + side / 2, y + h)
So your path code should be written as:
float side = Math.sqrt(3) / 2 * height;
Path path = new Path();
path.moveTo(x, y);
path.lineTo(x - side / 2, y + height);
path.lineTo(x + side / 2, y + height);
path.close();
I want to create android custom SeekBar having thumb with text inside it to show current seek position.
Here is my code:
SeekBar sb;
#Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.custom_seek_bar_activity);
sb = (SeekBar)findViewById(R.id.slider);
sb.setMax(100);
sb.setProgress(10);
BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(50));
sb.setThumb(bd);
sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
int pos = sb.getProgress();
double star = pos/(20.0);
TextView tv = (TextView)findViewById(R.id.percent);
tv.setText(Double.toString(star)+"%");
BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(star));
bd.setBounds(new Rect(0,0,
bd.getIntrinsicWidth(),
bd.getIntrinsicHeight()
));
seekBar.setThumb(bd);
}
#Override
public void onStartTrackingTouch(SeekBar arg0) {
// TODO Auto-generated method stub
}
#Override
public void onStopTrackingTouch(SeekBar arg0) {
// TODO Auto-generated method stub
}
});
}
public BitmapDrawable writeOnDrawable(int drawableId, String text){
Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setColor(Color.BLACK);
paint.setTextSize(10);
Canvas canvas = new Canvas(bm);
canvas.drawText(text, 0, bm.getHeight()/2, paint);
return new BitmapDrawable(bm);
}
but when I move thumb it goes to the beginning of the seek bar.
Does anyone have solution to move custom thumb with seekbar position?
I use SeekBar to display a timer countdown in my app. Inside the timer thumb I show the current SeekBar progress number using the below code:
SeekBar timerBar = (SeekBar) findViewById(R.id.seekBarTimer);
if (timerBar != null) {
timerBar.setMax((int) (Settings.countdownSeconds + 1));
timerBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
#Override
public void onStopTrackingTouch(SeekBar arg0) {
}
#Override
public void onStartTrackingTouch(SeekBar arg0) {
}
#Override
public void onProgressChanged(SeekBar timerBar, int arg1, boolean arg2) {
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.seek_thumb);
Bitmap bmp = bitmap.copy(Bitmap.Config.ARGB_8888, true);
Canvas c = new Canvas(bmp);
String text = Integer.toString(timerBar.getProgress());
Paint p = new Paint();
p.setTypeface(Typeface.DEFAULT_BOLD);
p.setTextSize(14);
p.setColor(0xFFFFFFFF);
int width = (int) p.measureText(text);
int yPos = (int) ((c.getHeight() / 2) - ((p.descent() + p.ascent()) / 2));
c.drawText(text, (bmp.getWidth()-width)/2, yPos, p);
timerBar.setThumb(new BitmapDrawable(getResources(), bmp));
}
});
timerBar.setProgress(0);
}
The R.drawable.seek_thumb drawable is my thumb drawable.
I got solution now, in setBound() method I was passing top left as 0, that's why it is showing seek bar at beginning. After doing following change I got it works.
Call setThumbPos() method in onProgressChanged() event
public void setThumbPosition(SeekBar seekBar){
int max = seekBar.getMax();
int available = seekBar.getWidth() - seekBar.getPaddingLeft() - seekBar.getPaddingRight();
float scale = max > 0 ? (float) seekBar.getProgress() / (float) max : 0;
//scale = 1;
int pos = sb.getProgress();
double star = pos/(20.0);
BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(star));
int thumbWidth = bd.getIntrinsicWidth();
int thumbHeight = bd.getIntrinsicHeight();
//available -= thumbWidth;
int thumbPos = (int) (scale * available);
if(thumbPos <= 0+thumbWidth){
thumbPos += (thumbWidth/2);
}else if(thumbPos >= seekBar.getWidth()-thumbWidth){
thumbPos -= (thumbWidth/2);
}
bd.setBounds(new Rect(thumbPos,0,
thumbPos+bd.getIntrinsicWidth(),
bd.getIntrinsicHeight()
));
seekBar.setThumb(bd);
TextView tv = (TextView)findViewById(R.id.percent);
tv.setText(Double.toString(star)+"%");
}
I ended up using this simple solution. Its probably not as high-performance as say a proper custom SeekBar, however its really easy to plug into an existing layout, and use any label or other view on top of the SeekBar thumb.
protected void positionThumbLabel(SeekBar seekBar, TextView label)
{
Rect tr = seekBar.getThumb().getBounds();
label.setWidth(tr.width());
label.setX(tr.left + seekBar.getPaddingLeft());
}
With some minor changes you can position an overlay relative to the center of the thumb:
protected void positionThumbOverlayCenter(SeekBar seekBar, View overlay)
{
Rect tr = seekBar.getThumb().getBounds();
overlay.setX(tr.centerX() - (overlay.getWidth() * 0.5f) + seekBar.getPaddingLeft());
}
Pick a solution that match your situation here: http://www.helptouser.com/code/10722746-add-dynamic-text-over-android-seekbar-thumb.html