I have an activity in which there are 3 checkboxes in different views. These checkboxes are to pick up a color.
In the DrawingView class, I have to draw on my canvas with the color that is checked. What I want is to pass an integer value from the activity to the view class and set the color of paint accordingly. itried using getter and setters, but I get black color. I suppose this is because the color is being set in the constructor itself, and it does not change when I check any box.
Please refer this for updates in the below code
Code:
MainActivity: the color/checkbox is selected here. And the drawing is to be done in the layout of this activity itself.
carImageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
drawingView=new DrawingView(carImageView.getContext());
drawingView=new DrawingView(carImageView.getContext(),null);
drawingView.setColor(color);
return false;
}
});
scratchesCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(b)
{
color=1;
chipsCb.setChecked(false);
dentsCb.setChecked(false);
}
}
});
chipsCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(b)
{
color=2;
scratchesCb.setChecked(false);
dentsCb.setChecked(false);
}
}
});
dentsCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(b)
{
color=3;
chipsCb.setChecked(false);
scratchesCb.setChecked(false);
}
}
});
}
View Class:
public DrawingView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
mPaint=new Paint();
if(color==1)
mPaint.setColor(Color.RED);
else if(color==2)
mPaint.setColor(Color.BLUE);
else if(color==3)
mPaint.setColor(Color.GREEN);
this.context=context;
mPath=new Path();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.MITER);
mPaint.setStrokeWidth(5f);
}
public void setColor(int color){
this.color=color;
}
public int getColor(){
return this.color;
}
Edit
I don't necessarily want to use the exact same code. All I want is to change paint color when a checkbox is selected to be able to draw on an image view. Any other approach is welcome.
In the MainActivity, you are creating a DrawingView that has no relationship to your image view that is displayed. So, when you change the color, you are not changing the color of the displayed image view but of the unconnected DrawingView. The image view never has a new color defined and always defaults to black.
Here is a video of a small working app based upon your most recently supplied code. Maybe all the colors shouldn't change when a new check box is clicked, but you will be able to address that issue separately.
Changes I have made to the Java code are commented as such. Changes were also made to the XML to allow your code to run in my environment, but those changes were not commented.
MainActivity.java (Updated)
public class MainActivity extends AppCompatActivity {
ImageView caricon;
int itemSelected = 0;
private DrawingView carImageView;
Bitmap bitmap;
ImageView backarrow;
TextView nextcheckinAB2;
Bitmap bmp;
public static int color;
CheckBox scratchesCb, chipsCb, dentsCb;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
carImageView = (DrawingView) findViewById(R.id.carImageView);
scratchesCb = (CheckBox) findViewById(R.id.scratchesCheckBox);
chipsCb = (CheckBox) findViewById(R.id.ChipCheckbx);
dentsCb = (CheckBox) findViewById(R.id.DentsCheckBox);
// Change: Make sure to initialize the color
color = 1;
carImageView.setColor(color);
carImageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
// drawingView = new DrawingView(carImageView.getContext(),null);
carImageView.setColor(color);
return false;
}
});
scratchesCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if (b) {
color = 1;
carImageView.clearCanvas();
carImageView.setColor(1); //
chipsCb.setChecked(false);
dentsCb.setChecked(false);
}
}
});
chipsCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if (b) {
color = 2;
carImageView.setColor(2);
scratchesCb.setChecked(false);
dentsCb.setChecked(false);
}
}
});
dentsCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if (b) {
color = 3;
// Change: Do like the other check boxes althogh not really needed.
carImageView.setColor(3);
chipsCb.setChecked(false);
scratchesCb.setChecked(false);
}
}
});
}
}
DrawingView.java (Updated)
public class DrawingView extends android.support.v7.widget.AppCompatImageView {
private Path mPath;
private Paint mPaint;
private float mX, mY;
private static final float TOLERANCE = 5;
int color;
Context context;
public DrawingView(Context context) {
super(context);
this.context = context;
init();
}
public DrawingView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
this.context = context;
init();
}
public void init() {
mPath = new Path();
mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.MITER);
mPaint.setStrokeWidth(5f);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
public void setColor(int color) {
if (color == 1) {
mPaint.setColor(Color.RED);
this.color = color;
invalidate();
} else if (color == 2) {
mPaint.setColor(Color.BLUE);
this.color = color;
invalidate();
} else if (color == 3) {
mPaint.setColor(Color.GREEN);
this.color = color;
invalidate();
}
}
public int getColor() {
return this.color;
}
private void onStartTouch(float x, float y) {
mPath.moveTo(x, y);
mX = x;
mY = y;
}
private void moveTouch(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOLERANCE || dy >= TOLERANCE) {
mPath.quadTo(mX, mY, (mX + x) / 2, (mY + y) / 2);
mX = x;
mY = y;
}
}
public void clearCanvas() {
mPath.reset();
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
invalidate();
}
private void upTouch() {
mPath.lineTo(mX, mY);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
onStartTouch(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
moveTouch(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
upTouch();
invalidate();
break;
}
return true;
}
}
activity_main.xml (Updated)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="horizontal"
android:weightSum="3">
<HorizontalScrollView
android:id="#+id/horizontalSrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="5dp"
android:weightSum="2">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="2dp"
android:layout_weight="0.5"
android:background="#android:color/holo_red_light" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_weight="1.5"
android:text="Scratches"
android:textColor="#000" />
</LinearLayout>
<CheckBox
android:id="#+id/scratchesCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:checked="true" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="5dp"
android:weightSum="2">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="2dp"
android:layout_weight="0.5"
android:background="#android:color/holo_blue_light" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_weight="1.5"
android:text="Chips"
android:textColor="#000" />
</LinearLayout>
<CheckBox
android:id="#+id/ChipCheckbx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="5dp"
android:weightSum="2">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="2dp"
android:layout_weight="0.5"
android:background="#android:color/holo_green_light" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_weight="1.5"
android:text="Dings/Dents"
android:textColor="#000" />
</LinearLayout>
<CheckBox
android:id="#+id/DentsCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="8.7">
<[your package name].DrawingView
android:id="#+id/carImageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#mipmap/ic_launcher"
android:layout_gravity="center_vertical" />
<!--<ImageView
android:id="#+id/carImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"/>-->
</LinearLayout>
</LinearLayout>
you need change function setColor.
1.change mPaint color.
2.add invalidate() for redraw view.
public void setColor(int color){
this.color=color;
mPaint.setColor(color);
invalidate();
}
You need to call invalidate() on the View to make it update.
Try this,
final DrawingView drawingView = new DrawingView(carImageView.getContext());
carImageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
drawingView.setColor(color);
return false;
}
});
scratchesCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(b)
{
color = 1;
drawingView.setColor(color);
chipsCb.setChecked(false);
dentsCb.setChecked(false);
}
}
});
chipsCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(b)
{
color = 2;
drawingView.setColor(color);
scratchesCb.setChecked(false);
dentsCb.setChecked(false);
}
}
});
dentsCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(b)
{
color = 3;
drawingView.setColor(color);
chipsCb.setChecked(false);
scratchesCb.setChecked(false);
}
}
});
DrawingView.java
public DrawingView(Context context) {
super(context);
this.context = context;
init();
}
public DrawingView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
this.context=context;
init();
}
private void init() {
mPath=new Path();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.MITER);
mPaint.setStrokeWidth(5f);
setColor(color);
}
public void setColor(int color){
this.color=color;
if(color==1)
mPaint.setColor(Color.RED);
else if(color==2)
mPaint.setColor(Color.BLUE);
else if(color==3)
mPaint.setColor(Color.GREEN);
// Call invalidate
invalidate();
}
Define static data member in your DrawingView
static int color = 1; //default
Then, from your activity simply call
DrawingView.color = someValue;
Static Keyword before variable color will make sure there is only one variable reference for all objects of your DrawingView class.
"even if I pass a static value, say 3 in main activity in drawingview.setColor(int) it gives black. This means the setColor function in Drawingview isn't working. "
Does this mean it will call paint.setColor(3) ?
If yes, this will of course turn your color black. Try passing Color.GREEN instead
Related
I've searched, but haven't found anything I'm looking for, perhaps. I want load image into my custom drawing view. Here is the code of DrawingView that extend View.
private Path mDrawPath;
private Paint mBackgroundPaint;
private Paint mDrawPaint;
private Canvas mDrawCanvas;
private Bitmap mCanvasBitmap;
private ArrayList<Path> mPaths = new ArrayList<>();
private ArrayList<Paint> mPaints = new ArrayList<>();
private ArrayList<Path> mUndonePaths = new ArrayList<>();
private ArrayList<Paint> mUndonePaints = new ArrayList<>();
// Set default values
private int mBackgroundColor = 0xFFFFFFFF;
private int mPaintColor = 0xFF660000;
private int mStrokeWidth = 10;
public DrawingView(Context context, AttributeSet attrs)
{
super(context, attrs);
init();
}
private void init()
{
mDrawPath = new Path();
mBackgroundPaint = new Paint();
initPaint();
}
private void initPaint()
{
mDrawPaint = new Paint();
mDrawPaint.setColor(mPaintColor);
mDrawPaint.setAntiAlias(true);
mDrawPaint.setStrokeWidth(mStrokeWidth);
mDrawPaint.setStyle(Paint.Style.STROKE);
mDrawPaint.setStrokeJoin(Paint.Join.ROUND);
mDrawPaint.setStrokeCap(Paint.Cap.ROUND);
}
private void drawBackground(Canvas canvas)
{
mBackgroundPaint.setColor(Color.TRANSPARENT);
mBackgroundPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
mBackgroundPaint.setAntiAlias(true);
canvas.drawRect(0, 0, this.getWidth(), this.getHeight(), mBackgroundPaint);
}
private void drawPaths(Canvas canvas)
{
int i = 0;
for (Path p : mPaths)
{
canvas.drawPath(p, mPaints.get(i));
i++;
}
}
#Override
protected void onDraw(Canvas canvas)
{
drawBackground(canvas);
drawPaths(canvas);
canvas.drawPath(mDrawPath, mDrawPaint);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
mCanvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mDrawCanvas = new Canvas(mCanvasBitmap);
}
#Override
public boolean onTouchEvent(MotionEvent event)
{
float touchX = event.getX();
float touchY = event.getY();
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
mDrawPath.moveTo(touchX, touchY);
//mDrawPath.addCircle(touchX, touchY, mStrokeWidth/10, Path.Direction.CW);
break;
case MotionEvent.ACTION_MOVE:
mDrawPath.lineTo(touchX, touchY);
break;
case MotionEvent.ACTION_UP:
mDrawPath.lineTo(touchX, touchY);
mPaths.add(mDrawPath);
mPaints.add(mDrawPaint);
mDrawPath = new Path();
initPaint();
break;
default:
return false;
}
invalidate();
return true;
}
public void clearCanvas()
{
mPaths.clear();
mPaints.clear();
mUndonePaths.clear();
mUndonePaints.clear();
mDrawCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
invalidate();
}
public void setPaintColor(int color)
{
mPaintColor = color;
mDrawPaint.setColor(mPaintColor);
}
public void setPaintStrokeWidth(int strokeWidth)
{
mStrokeWidth = strokeWidth;
mDrawPaint.setStrokeWidth(mStrokeWidth);
}
public void setBackgroundColor(int color)
{
mBackgroundColor = color;
mBackgroundPaint.setColor(mBackgroundColor);
invalidate();
}
public Bitmap getBitmap()
{
drawBackground(mDrawCanvas);
drawPaths(mDrawCanvas);
return mCanvasBitmap;
}
public void undo()
{
if (mPaths.size() > 0)
{
mUndonePaths.add(mPaths.remove(mPaths.size() - 1));
mUndonePaints.add(mPaints.remove(mPaints.size() - 1));
invalidate();
}
}
public void redo()
{
if (mUndonePaths.size() > 0)
{
mPaths.add(mUndonePaths.remove(mUndonePaths.size() - 1));
mPaints.add(mUndonePaints.remove(mUndonePaints.size() - 1));
invalidate();
}
}
BoardActivity class code is:
private TextView titolo;
private DrawingView areaDisegno;
private ImageView sceltaColore, sceltaSpessore, undo, redo;
private Bitmap drawable;
private int mCurrentBackgroundColor;
private int mCurrentColor;
private int mCurrentStroke;
private static final int MAX_STROKE_WIDTH = 50;
#Override
protected void onCreate(Bundle savedInstanceState) {
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().setNavigationBarColor(getResources().getColor(R.color.black));
}
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_board1);
titolo = findViewById(R.id.titolo);
titolo.setText("MATCHUP BOARD 1");
areaDisegno = findViewById(R.id.area_disegno);
sceltaColore= findViewById(R.id.scelta_colore);
sceltaSpessore = findViewById(R.id.scelta_spessore);
undo = findViewById(R.id.undo);
redo = findViewById(R.id.redo);
sceltaColore.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
startColorPickerDialog();
}
});
sceltaSpessore.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
startStrokeSelectorDialog();
}
});
undo.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
areaDisegno.undo();
}
});
redo.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
areaDisegno.redo();;
}
});
inizializzaAreaDisegno();
}
private void inizializzaAreaDisegno()
{
// mCurrentBackgroundColor = ContextCompat.getColor(this, android.R.color.white);
mCurrentColor = ContextCompat.getColor(this, android.R.color.black);
mCurrentStroke = 10;
areaDisegno.setBackgroundColor(mCurrentBackgroundColor);
areaDisegno.setPaintColor(mCurrentColor);
areaDisegno.setPaintStrokeWidth(mCurrentStroke);
}
private void startFillBackgroundDialog()
{
int[] colors = getResources().getIntArray(R.array.palette);
ColorPickerDialog dialog = ColorPickerDialog.newInstance(R.string.color_picker_default_title,
colors,
mCurrentBackgroundColor,
5,
ColorPickerDialog.SIZE_SMALL);
dialog.setOnColorSelectedListener(new ColorPickerSwatch.OnColorSelectedListener()
{
#Override
public void onColorSelected(int color)
{
mCurrentBackgroundColor = color;
areaDisegno.setBackgroundColor(mCurrentBackgroundColor);
}
});
dialog.show(getFragmentManager(), "ColorPickerDialog");
}
private void startColorPickerDialog()
{
int[] colors = getResources().getIntArray(R.array.palette);
ColorPickerDialog dialog = ColorPickerDialog.newInstance(R.string.color_picker_default_title,
colors,
mCurrentColor,
5,
ColorPickerDialog.SIZE_SMALL);
dialog.setOnColorSelectedListener(new ColorPickerSwatch.OnColorSelectedListener()
{
#Override
public void onColorSelected(int color)
{
mCurrentColor = color;
areaDisegno.setPaintColor(mCurrentColor);
}
});
dialog.show(getFragmentManager(), "ColorPickerDialog");
}
private void startStrokeSelectorDialog()
{
StrokeSelectorDialog dialog = StrokeSelectorDialog.newInstance(mCurrentStroke, MAX_STROKE_WIDTH);
dialog.setOnStrokeSelectedListener(new StrokeSelectorDialog.OnStrokeSelectedListener()
{
#Override
public void onStrokeSelected(int stroke)
{
mCurrentStroke = stroke;
areaDisegno.setPaintStrokeWidth(mCurrentStroke);
}
});
dialog.show(getSupportFragmentManager(), "StrokeSelectorDialog");
}
private void startShareDialog(Uri uri)
{
Intent intent = new Intent();
intent.setAction(Intent.ACTION_SEND);
intent.setType("image/*");
intent.putExtra(android.content.Intent.EXTRA_SUBJECT, "");
intent.putExtra(android.content.Intent.EXTRA_TEXT, "");
intent.putExtra(Intent.EXTRA_STREAM, uri);
intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
startActivity(Intent.createChooser(intent, "Share Image"));
}
private void requestPermissionsAndSaveBitmap()
{
if (PermissionManager.checkWriteStoragePermissions(this))
{
Uri uri = FileManager.saveBitmap(this, areaDisegno.getBitmap());
startShareDialog(uri);
}
}
#Override
public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults)
{
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
switch (requestCode)
{
case PermissionManager.REQUEST_WRITE_STORAGE:
{
if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED)
{
Uri uri = FileManager.saveBitmap(this, areaDisegno.getBitmap());
startShareDialog(uri);
} else
{
Toast.makeText(this, "The app was not allowed to write to your storage. Hence, it cannot function properly. Please consider granting it this permission", Toast.LENGTH_LONG).show();
}
}
}
}
And Layout used is:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/sfondo"
tools:context=".activities.Board1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_menu_disegno"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:orientation="vertical"
android:weightSum="2"
>
<FrameLayout
android:layout_weight="1.99"
android:layout_width="match_parent"
android:layout_height="0dp" >
<it.colan.matchup.ui.component.DrawingView
android:id="#+id/area_disegno"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rotation="90"
android:src="#drawable/board_1" />
</FrameLayout>
<LinearLayout
android:id="#+id/menu_strumenti"
android:layout_weight="0.01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/area_disegno"
android:orientation="horizontal"
android:gravity="center"
android:background="#color/black">
<ImageView
android:id="#+id/scelta_colore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_palette"
android:padding="15dp"
android:clickable="true"
android:background="?attr/selectableItemBackgroundBorderless"/>
<ImageView
android:id="#+id/scelta_spessore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_peso_linea"
android:padding="15dp"
android:clickable="true"
android:background="?attr/selectableItemBackgroundBorderless"/>
<ImageView
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_undo"
android:padding="15dp"
android:clickable="true"
android:background="?attr/selectableItemBackgroundBorderless"/>
<ImageView
android:id="#+id/redo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_redo"
android:padding="15dp"
android:clickable="true"
android:background="?attr/selectableItemBackgroundBorderless"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I have two problems:
The drawing does it for me behind the image and not above
imagebug
The background of the image is not full screen with margins.
How should I do?
Thanks
Cris
I have a fullscreen activity that should look like this:
where the big white circle would have some text, I've already done it, but the problem is that I don't know how to do that dashed lines between the icons, also they want a little animation in the icons, so I assumed that each one should be a separate view, so far I've done this (it doesn't need to look exactly the same):
So, how could I draw that lines? Also if I could make that dashes to "run" acrross the lines would be awesome.
this is my xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rlt_welcome"
android:layout_weight="9"
android:background="#drawable/bg"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:padding="10dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/img_youtube"
android:src="#drawable/youtube_circle"
android:layout_marginTop="60dp"
android:layout_marginRight="60dp"
android:layout_height="wrap_content"
/>
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/tablet_circle"
android:layout_height="wrap_content"
android:layout_above="#+id/img_stats"
android:layout_marginRight="30dp"
android:layout_below="#+id/img_youtube"
/>
<ImageView
android:layout_width="wrap_content"
android:id="#+id/img_stats"
android:src="#drawable/stats_circle"
android:layout_height="wrap_content"
android:layout_marginRight="70dp"
android:layout_marginBottom="20dp"
android:layout_alignParentBottom="true"/>
<ImageView
android:id="#+id/img_iphone"
android:layout_width="wrap_content"
android:src="#drawable/iphone_circle"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
/>
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/imac_circle"
android:layout_height="wrap_content"
android:layout_below="#+id/img_iphone"
android:layout_marginLeft="70dp"
android:layout_marginTop="-30dp"
/>
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/webcam_circle"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_vertical"
android:padding="40dp"
android:textSize="25sp"
android:textColor="#color/text1"
android:layout_margin="20dp"
android:text="Bienvenido"
android:background="#drawable/flat_circle"
android:id="#+id/txt_welcome"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow_circle"
android:id="#+id/img_arrow"
android:layout_alignParentTop="true"
android:layout_marginRight="60dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/news_circle"
android:layout_below="#+id/img_arrow"
android:layout_marginTop="-90dp"
android:layout_marginRight="2dp"
android:layout_marginLeft="70dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/line_circle"
android:id="#+id/img_line"
android:layout_below="#+id/img_arrow"
android:layout_marginTop="-10dp"
android:layout_marginRight="70dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/money_circle"
android:layout_below="#+id/img_line"
android:layout_marginRight="6dp"
android:layout_marginTop="-70dp"
android:layout_marginLeft="70dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mouse_circle"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginRight="80dp"
/>
</RelativeLayout>
</LinearLayout>
Please check this, may be this will help you
http://www.rengelbert.com/tutorial.php?id=182
How do I get this work, I made a new activity that holds a Canvas controller, and place the bitmaps on the canvas and draw the lines between them with this, I didn't use any external library:
Hope someone could reuse some code and not only been told to google it.
MainActivty.java
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
relativeMainActivity = (RelativeLayout) findViewById(R.id.rlt_main);
DisplayMetrics dm = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics(dm);
final int heightS = dm.heightPixels;
final int widthS = dm.widthPixels;
Log.d("MainActvitiy", "widht:" + widthS);
myPanel = new Panel(getApplicationContext(),this,widthS, heightS);
relativeMainActivity.addView(myPanel);
RelativeLayout RR = new RelativeLayout(this);
RR.setGravity(Gravity.CENTER);
relativeMainActivity.addView(RR,400,150);
RR.setX(0);
LayoutInflater myInflater = (LayoutInflater) getApplicationContext().getSystemService(getApplicationContext().LAYOUT_INFLATER_SERVICE);
}
Panel.java
public class Panel extends SurfaceView implements SurfaceHolder.Callback {
public MainThread thread;
private Background background;
private CircleManager CM;
public int ScreenWidth;
public int Screenheigt;
private CircleIcon icon1;
private CircleIcon icon2;
private CircleIcon icon3;
//and so on
public MainActivity myMain;
public Panel(Context context, MainActivity _main, int width , int height) {
super(context);
getHolder().addCallback(this);
this.myMain = _main;
this.ScreenWidth=width;
this.Screenheigt=height;
thread = new MainThread(getHolder(),this);
background = new Background(BitmapFactory.decodeResource(getResources(), R.drawable.bg), Screenheigt, this);
CM = new CircleManager( this,context,ScreenWidth);
CM.setScreen(ScreenWidth, Screenheigt);
SetIcons();
CM.setManager();
setFocusable(true);
}
void SetIcons()
{
icon1 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_iphone),39,40);
icon2 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_chat),280,40);
icon3 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_youtube),60,200);
//and so on
icon1.myConnections.add(2);
icon1.myConnections.add(3);
icon2.myConnections.add(15);
icon3.myConnections.add(4);
icon3.myConnections.add(5);
//and so on
CM.iconsList.add(icon1);
CM.iconsList.add(icon2);
CM.iconsList.add(icon3);
//and so on
}
void Draw(Canvas canvas){
if (canvas!=null)
{
background.draw(canvas);
CM.draw(canvas);
iconEvent.draw(canvas);
}
}
void Update(float dt)
{
CM.Update(dt);
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,int height) {
}
#Override
public void surfaceCreated(SurfaceHolder holder) {
// TODO Auto-generated method stub
thread.setRunning(true);
thread.start();
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
// TODO Auto-generated method stub
boolean retry = true;
while (retry)
{
try
{
thread.join();
retry=false;
}
catch (InterruptedException e)
{
}
}
}
}
Background.java
public class Background {
Bitmap BackBitmap;
int x,y;
int ScreenHeight;
Panel root_panel;
public Background(Bitmap bitmap , int Screen_h, Panel _panel) {
this.BackBitmap = bitmap;
this.x=0;
this.y=0;
this.ScreenHeight=Screen_h;
root_panel =_panel;
}
public void draw(Canvas canvas)
{
canvas.drawBitmap(BackBitmap,x,y, null);
}
}
CircleIcon.java
public class CircleIcon {
private Bitmap bitmap;
private int x;
private int y;
CircleManager circManager;
ArrayList<Integer> myConnections;
public int getX() {
return x;
}
public void setX(int x) {
this.x = x;
}
public int getY() {
return y;
}
public void setY(int y) {
this.y=y;
}
public CircleIcon(Bitmap icon, int x, int y) {
bitmap=icon;
this.x=x;
this.y=y;
myConnections = new ArrayList<>();
}
public ArrayList<Integer> getMyConnections() {
return myConnections;
}
public void setMyConnections(ArrayList<Integer> myConnections) {
this.myConnections = myConnections;
}
public void setManager(CircleManager icManager) {
circManager = icManager;
}
public Bitmap getBitmap()
{
return bitmap;
}
public void setBitmap(Bitmap bitmap) {
this.bitmap = bitmap;
}
public void draw(Canvas canvas) {
canvas.drawBitmap(bitmap, x, y, null);
}
public void update()
{
// x=+1; example
}
}
CircleManager.java
public class CircleManager {
Bitmap icons;
int screenWidth;
int hour;
int min;
Context myContext;
int ScreenWidht;
public Panel myPanel;
public ArrayList<CircleIcon> iconsList;
public CircleManager(Panel _Panel, Context context,int screenW) {
this.myPanel = _Panel;
this.screenWidth = screenW;
this.myContext = context;
iconsList = new ArrayList<CircleIcon>();
}
public void setScreen(int screenWidth, int screenHeight)
{
this.ScreenWidht=screenWidth;
}
public void draw(Canvas canvas)
{
drawLines(canvas);
for(CircleIcon myIcon: iconsList)
{
myIcon.draw(canvas);
}
}
public void Update(float dt)
{
//some animation updates
}
public void drawLines(Canvas canvas)
{
Paint mPaint = new Paint();
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(2);
mPaint.setPathEffect(new DashPathEffect(new float[]{7, 5}, 0));
for (CircleIcon myIcon: iconsList)
{
for( int connectedIcon: myIcon.getMyConnections())
{
Path mPath;
mPath = new Path();
mPath.moveTo(myIcon.getX()+myIcon.getBitmap().getWidth()/2, myIcon.getY()+myIcon.getBitmap().getHeight()/2);
mPath.lineTo(iconsList.get(connectedIcon-1).getX()+myIcon.getBitmap().getWidth()/2, iconsList.get(connectedIcon-1).getY()+myIcon.getBitmap().getHeight()/2);
canvas.drawPath(mPath, mPaint);
}
}
}
public void setManager()
{
for(CircleIcon myIcon: iconsList)
{
myIcon.setManager(this);
}
}
}
I add 2 fragments in tab host.In second fragment i can do some drawing. When i switch between these two fragments, my drawing in second fragment is removed.I don't know why??
This is second fragment.
public class DrawingFragment extends BaseFragment implements android.view.View.OnClickListener {
private Context context = null;
private Bitmap backGroundBitmap = null;
private DrawingViewHolder viewHolder = null;
/**
*
*/
#Override
public void onAttach(Activity arg0) {
super.onAttach(arg0);
this.context=arg0;
}
public DrawingFragment() {
}
public DrawingFragment(Bitmap bitmap) {
this.backGroundBitmap = bitmap;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.drawing_dialog, container,false);
viewHolder = new DrawingViewHolder();
viewHolder.initUiContents(view);
return view;
}
/**
*
* #author Qandil
*
*/
private class DrawingViewHolder{
private Button btnDoneDrawing = null;
private Button btnEraserDrawing = null;
private Button btnPencilDrawing = null;
private Button btnDeleteDrawing = null;
private LinearLayout llDrawingMain = null;
private DrawView drawingView = null;
private void initUiContents(View view){
btnDoneDrawing = (Button) view.findViewById(R.id.btn_drawing_done);
btnEraserDrawing = (Button) view.findViewById(R.id.btn_drawing_eraser);
btnPencilDrawing = (Button) view.findViewById(R.id.btn_drawing_pencil);
btnDeleteDrawing = (Button) view.findViewById(R.id.btn_drawing_delete);
llDrawingMain = (LinearLayout) view.findViewById(R.id.ll_drawing_dialog_main);
drawingView = (DrawView)view.findViewById(R.id.custom_dv2);
btnDoneDrawing.setOnClickListener(DrawingFragment.this);
btnEraserDrawing.setOnClickListener(DrawingFragment.this);
btnPencilDrawing.setOnClickListener(DrawingFragment.this);
btnDeleteDrawing.setOnClickListener(DrawingFragment.this);
Drawable dr = new BitmapDrawable(backGroundBitmap);
llDrawingMain.setBackgroundDrawable(dr);
}
}
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_drawing_done:
((CaseActivity) getActivity()).popFragments();
break;
case R.id.btn_drawing_delete:
((CaseActivity) getActivity()).popFragments();
break;
default:
break;
}
}
/* (non-Javadoc)
* #see android.support.v4.app.Fragment#onDestroyView()
*/
#Override
public void onDestroyView() {
super.onDestroyView();
}
/* (non-Javadoc)
* #see android.support.v4.app.Fragment#onDetach()
*/
#Override
public void onDetach() {
super.onDetach();
}
}
drawing_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_drawing_dialog_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/ll_drawing_dialog"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/img_draw_photo_bg"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/top_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/img_top_bar" >
<TextView
android:id="#+id/tv_draw_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/tv_draw_picture"
android:textColor="#ffffff"
android:textSize="18sp"
android:textStyle="bold" />
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_header_drawing_dialog"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/img_top_bar"
android:gravity="center" >
<Button
android:id="#+id/btn_drawing_done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/img_drawing_done" />
<Button
android:id="#+id/btn_drawing_eraser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:background="#drawable/img_drawing_eraser" />
<Button
android:id="#+id/btn_drawing_pencil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:background="#drawable/img_drawing_pencil" />
<Button
android:id="#+id/btn_drawing_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:background="#drawable/img_drawing_dlt" />
</LinearLayout>
<RelativeLayout
android:id="#+id/rlt_drawing_component"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<view
android:id="#+id/custom_dv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.avhl.view.activity.DrawView"
android:background="#00000000" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
DrawView.java
public class DrawView extends View{
private Bitmap cache;
private Queue<PointF> points;
private PointF from;
private Context context;
private Paint paint ;
public DrawView(Context context,AttributeSet attr) {
super(context,attr);
this.context=context;
points = new ConcurrentLinkedQueue<PointF>();
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(8);
paint.setColor(Color.GRAY);
paint.setDither(true); // set the dither to true
paint.setStyle(Paint.Style.FILL_AND_STROKE); // set to STOKE
paint.setStrokeJoin(Paint.Join.ROUND); // set the join to round you want
paint.setStrokeCap(Paint.Cap.ROUND); // set the paint cap to round too
setFocusable(true);
setFocusableInTouchMode(true);
}
/***
* on touch event
*/
#Override
public boolean onTouchEvent(MotionEvent evt) {
setPressed(true);
int pointerIndex = ((evt.getAction() & MotionEvent.ACTION_POINTER_ID_MASK)
>> MotionEvent.ACTION_POINTER_ID_SHIFT);
int pointerId = evt.getPointerId(pointerIndex);
if(pointerId==0){
switch (evt.getAction()) {
case MotionEvent.ACTION_DOWN:
from = new PointF(evt.getX(), evt.getY());
break;
case MotionEvent.ACTION_MOVE:
points.add(new PointF(evt.getX(), evt.getY()));
invalidate();
break;
case MotionEvent.ACTION_UP:
break;
default:
from = null;
}
}else{
return false;
}
return true;
}
/**
*
* #param systemCanvas
*/
#Override
public void onDraw(Canvas systemCanvas) {
int w = getWidth();
int h = getHeight();
if (w == 0 || h == 0)
return;
if (cache == null)
cache = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
// Draw on the cache
Canvas canvas = new Canvas(cache);
drawPoints(points, canvas, paint);
// Draw the cache with the system canvas
systemCanvas.drawBitmap(cache, 0, 0, paint);
}
/*
* for drawing line or dot
*/
private void drawPoints(Queue<PointF> points, Canvas canvas, Paint paint) {
if (from == null)
return;
PointF to;
while ((to = points.poll()) != null) {
canvas.drawLine(from.x, from.y, to.x, to.y, paint);
from = to;
}
}
}
In MianActivity i simply replace DrawingFragment tab with my first fragment by calling ft.replace() in on tab changed.
You can try calling Fragment.setRetainInstance(true) in the onCreate of your Fragment. This ensure the same fragment instance will be reused instead of creating a new one.
Without some code to show what you are doing, it is difficult to be more helpful
i am working on application in which my ondraw method is not working properly ......
in my applicationi am using framelayout ...
so i am used three class...
1)acticvity
2) image choosing
3) drawing
my image selection is working fine but my drawing class is not working fine ..it is not displaying any thing ....
my drawing class is as follow ...
public class Draw extends View {
String info = "";
float x = 0;
float y = 0;
int color = Color.GREEN;
public Draw(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public Draw(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(color);
paint.setStrokeWidth(15);
paint.setTextSize(30);
canvas.drawLine(x-10, y, x+10, y, paint);
canvas.drawLine(x, y-10, x, y+10, paint);
canvas.drawText(info, x, y, paint);
}
public void updateInfo(String t_info, float t_x, float t_y){
info = t_info;
x = t_x;
y = t_y;
invalidate();
}
public void clearInfo(){
info = "";
x = 0;
y = 0;
invalidate();
}
}
I am calling this from my mainactivity class.but i first call it from image selecting class as follow
public class FirstImage extends ImageView implements OnTouchListener {
MotionEvent event;
int a;
Bitmap image;
String huma ="human";
String info = "human";
float x = 0; //init value
float y = 0; //init value
Animation animationFadeIn;
public FirstImage(Context context) {
super(context);
}
public FirstImage(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void changeImage(int id){
this.setImageResource(id);
a=id;
final Animation animationFadeout=AnimationUtils.loadAnimation(getContext(), R.anim.zoomin);
this.startAnimation(animationFadeout);
this.setOnTouchListener(this);
}
#Override
public boolean onTouch(View arg0, MotionEvent me) {
switch(me.getAction()){
case MotionEvent.ACTION_DOWN:
x=me.getX();
y= me.getY();
pageinfo(x,y);
break;
case MotionEvent.ACTION_MOVE:
x=me.getX();
y= me.getY();
pageinfo(x,y);
break;
case MotionEvent.ACTION_UP:
x=me.getX();
y= me.getY();
pageinfo(x,y);
break;
case MotionEvent.ACTION_OUTSIDE:
x=me.getX();
y= me.getY();
pageinfo(x,y);
break;
default: return true;
}
return false;
}
public void pageinfo(float x, float y) {
// TODO Auto-generated method stub
((AshActivity)getContext()).updateMsg(info, x,y);
}
}
it is called from the main activitry class
public class AshActivity extends Activity {
ImageView i;
Draw j;
TextView t,k;
ImageButton back;
ImageButton next;
OnClickListener l2 = null;
OnClickListener l = null;
int count=0;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
i = (FirstImage)findViewById(R.id.image);
j=(Draw)findViewById(R.id.info);
t=(TextView)findViewById(R.id.textView);
k=(TextView)findViewById(R.id.textView1);
back=(ImageButton)findViewById(R.id.button1);
next=(ImageButton)findViewById(R.id.button2);
if (count==0){
((FirstImage) i).changeImage(R.drawable.human);
}
//addListenerOnButton();
}
public void updateMsg(String info, float x, float y) {
// TODO Auto-generated method stub
j.updateInfo(info, x, y);
}
}
my layout xml file is as folow
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:name="http://schemas.android.com/apk/res/com.example.nam"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- Screen Design for VIDEOS -->
<TableLayout
android:id="#+id/tablelayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dip"
android:text="pic on click which will tell where is the dna located in human body or cell "
android:textSize="18dip" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<com.example.nam.FirstImage
android:id="#+id/image"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
<com.example.nam.Draw
android:id="#+id/info"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</FrameLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/button1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/monotone_arrow_next_left"/>
<ImageButton
android:id="#+id/button2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/monotone_arrow_next_lrightcopy"/>
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dip"
android:text="please don't mind "
android:textSize="18dip" />
</TableRow>
</TableLayout>
</ScrollView>
what is the problem i am not getting that ....
The problem is that your Draw instance's layout_height is 0.
This is due to the LayoutParams you've registered to it (wrap_content);
If you change the FrameLayout's attributes, the desired text will be displayed:
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ro.rekaszeru.sample.FirstImage android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ro.rekaszeru.sample.Draw android:id="#+id/info"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
Please also note, that the text size of 30 is very large...
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