Develop Reference

Linking XML with Component View

I'm currently struggling with what I believe should be pretty simple.
I have created a LinearLayout in an XML file that i want to link to a CustomComponent that extends LinearLayout, meaning i started backwards.
Normally i create a CustomComponent first and this creates an XML-file linked by a tag, <my.package.CustomComponent> (If I'm not mistaken this is the only way they are linked(?)) and i do stuff in the onDraw(). But in this project i do the layout throughthe XML and not the onDraw().
Linking XML with activity is done by setContentView(R.layout.customView) but I can't really do this in a CustomComponent as i don't have an onCreate() method inherited.
sidenote: In the XML all my imagebuttons has android:onClick=chooseButton but for obvious reason it can't find this method...
Any ideas regarding this problem?
EDIT:
the two files doesn't seem to be linked because in the xml android:onClick="chooseButton" the IDE says: "cannot resolve symbol chooseButton"
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:id="#+id/dial_view_id"
android:layout_width="match_parent"
tools:context=".DialView"
android:orientation="vertical"
android:layout_height="match_parent">
<com.package.CustomView
android:id="#+id/drawingview"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/button1"
android:onClick="chooseButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#drawable/ic_dialpad_1_blue" />
<ImageButton
android:id="#+id/button2"
android:onClick="chooseButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/ic_dialpad_2_blue"
------code repeated below-----/>
CustomView:
public class CustomView extends LinearLayout {
private String mExampleString;
private int mExampleColor = Color.RED;
private float mExampleDimension = 0;
private Drawable mExampleDrawable;
private TextPaint mTextPaint;
private float mTextWidth;
private float mTextHeight;
private ImageButton button_0, button_1, button_2, button_3, button_4, button_5, button_6;
private ImageButton button_7, button_8, button_9, button_star, button_pound;
private boolean clicked = false;
private SparseIntArray drawables = new SparseIntArray();
public DialView(Context context) {
super(context);
}
public DialView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}
public DialView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}
private void init(AttributeSet attrs, int defStyle) {
// Load attributes
final TypedArray a = getContext().obtainStyledAttributes(
attrs, R.styleable.DialView, defStyle, 0);
mExampleString = a.getString(
R.styleable.DialView_exampleString);
mExampleColor = a.getColor(
R.styleable.DialView_exampleColor,
mExampleColor);
// Use getDimensionPixelSize or getDimensionPixelOffset when dealing with
// values that should fall on pixel boundaries.
mExampleDimension = a.getDimension(
R.styleable.DialView_exampleDimension,
mExampleDimension);
if (a.hasValue(R.styleable.DialView_exampleDrawable)) {
mExampleDrawable = a.getDrawable(
R.styleable.DialView_exampleDrawable);
mExampleDrawable.setCallback(this);
}
a.recycle();
// Set up a default TextPaint object
mTextPaint = new TextPaint();
mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setTextAlign(Paint.Align.LEFT);
// Update TextPaint and text measurements from attributes
invalidateTextPaintAndMeasurements();
}
private void invalidateTextPaintAndMeasurements() {
mTextPaint.setTextSize(mExampleDimension);
mTextPaint.setColor(mExampleColor);
mTextWidth = mTextPaint.measureText(mExampleString);
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
mTextHeight = fontMetrics.bottom;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
public void getButtons(){}
public void chooseButton(View v){}
public void switchBackground(ImageButton button){}
}

Android seek bar thumb customization

I am trying to create a seekbar. It has to look like below in picture.
Here is my seekbar in layout:
<SeekBar
android:id="#+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/progress_bar_height"
android:minHeight="#dimen/progress_bar_height"
android:maxHeight="#dimen/progress_bar_height"
android:progressDrawable="#drawable/progressbar_seek_bar"
android:thumbOffset="0dp"
android:thumb="#drawable/progressbar_thumb"
android:max="100"/>
Here is progressbar_thumb drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center_horizontal">
<bitmap android:src="#drawable/img_grabber_body"/>
</item>
<item>
<bitmap android:src="#drawable/img_grabber_knob_long"/>
</item>
</layer-list>
There are two different images in thumb one vertical line and round knob. My problem is how to use such thumbs in Android seekbar. If I set the thumb in XML it considers width of thumb as width of round knob. Because of this it leaves some space between thumb and progress as you see in below images. I can customize view to show complete thumb but how to remove this extra space around the thumb?

I was facing a similar problem.
I found really useful this code.
You just have to change where the text is drawn in the onDraw(Canvas canvas)
Hope this could help.
EDIT 1:
Here is my code that put the label with the progression percentage under the seekbar thumb. You just have to change values of label_x and label_y in the onDraw(Canvas canvas) to change the position where the label is drawn.
public class SeekBarWithHint extends android.support.v7.widget.AppCompatSeekBar {
private final int MIN_PROGRESS_VALUE = 0;
private final int MAX_PROGRESS_VALUE = 100;
private Paint mSeekBarHintPaint;
private int mHintTextColor;
private float mHintTextSize;
public SeekBarWithHint(Context context) {
super(context);
init();
}
public SeekBarWithHint(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.SeekBarWithHint,
0, 0);
try {
mHintTextColor = a.getColor(R.styleable.SeekBarWithHint_hint_text_color, 0);
mHintTextSize = a.getDimension(R.styleable.SeekBarWithHint_hint_text_size, 0);
} finally {
a.recycle();
}
init();
}
public SeekBarWithHint(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
setMax(MAX_PROGRESS_VALUE);
mSeekBarHintPaint = new TextPaint();
mSeekBarHintPaint.setColor(mHintTextColor);
mSeekBarHintPaint.setTextSize(mHintTextSize);
}
#Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
int label_x = (int) (getThumb().getBounds().centerX());
int label_y = getHeight();
canvas.drawText(String.valueOf(getProgress()) + "%", getProgress() > 95 ? label_x - 55 : label_x, label_y, mSeekBarHintPaint);
}
private void animateProgression(int progress) {
final ObjectAnimator animation = ObjectAnimator.ofInt(this, "progress", MIN_PROGRESS_VALUE, progress);
animation.setDuration(3000);
animation.setInterpolator(new DecelerateInterpolator());
animation.start();
this.setProgress(progress);
this.clearAnimation();
}
public void setSeekbarProgress(int progress) {
animateProgression(progress);
}
}
EDIT 2:
Better use this DescreteSeekBar that do EXACTLY what you are looking for.

Programmatically created "Circle Button" not drawing

I have a custom CircleButton class:
public class CircleButton extends ImageView {
private int radius;
private int x;
private int y;
public CircleButton(Context context) {
super(context);
constructorTask();
}
public CircleButton(Context context, AttributeSet attrs) {
super(context, attrs);
constructorTask();
}
public CircleButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
constructorTask();
}
public CircleButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
constructorTask();
}
private void constructorTask() {
x = 300;
y = 300;
radius = 100;
}
#Override
public void setPressed(boolean pressed) {
super.setPressed(pressed);
Log.i("Button Logger","Button Pressed");
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(x, y, radius, GameView.green);
Log.i("Drawing status", "CircleButton Drawing...");
}
}
I have a single activity. This activity contains a relative layout with a single custom view.
Here is the custom view:
public class GameView extends View {
public static Paint green = new Paint();
public GameView(Context context) {
super(context);
green.setARGB(255,0,255,0);
}
public GameView(Context context, AttributeSet attrs) {
super(context, attrs);
green.setARGB(255, 0, 255, 0);
}
public GameView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
green.setARGB(255, 0, 255, 0);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.i("GameView Draw Status","Drawing...");
Main.testButton.invalidate();
invalidate();
}
}
And here is the activity code:
public class Main extends AppCompatActivity {
public static CircleButton testButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
testButton = new CircleButton(getApplicationContext());
makeFullScreen();
RelativeLayout screenLayout = (RelativeLayout) findViewById(R.id.screenLayout);
screenLayout.addView(testButton);
}
private void makeFullScreen() {...}
}
For some reason my testButton is not being drawn. Why is it not being drawn?
EDIT ONE: Here is the XML I have.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="0dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
tools:context="com.example.vroy.customcirclebuttontest.Main"
android:id="#+id/screenLayout">
<com.example.vroy.customcirclebuttontest.GameView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:id="#+id/gameScreen" />
</RelativeLayout>
EDIT TWO: I did some further debugging by adding a normal button to the relative layout and it worked fine.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
testCircleButton = new CircleButton(getApplicationContext());
makeFullScreen();
testButton = new Button(getApplicationContext());
testButton.setX(100);
testButton.setY(100);
testButton.setText("HELLO WORLD");
RelativeLayout screenLayout = (RelativeLayout) findViewById(R.id.screenLayout);
screenLayout.addView(testCircleButton);
screenLayout.addView(testButton);
Log.i("Button Status","Adding Button To Layout");
}
For some reason by circleButton is not working but a normal button is.

You are not specifying the size of the View (layout_width and layout_height), and thus your view is getting rendered inside a 0px by 0px space and thus invisible.
You can set those programatically using LayoutParams before adding your views to the layout.
For example with absolute size:
testButton.setLayoutParams(new ViewGroup.LayoutParams(100,100));
Although keep in mind the difference between px and dip. You would probably want to set the values using your internal radius attribute instead of harcoding them.

Extended ImageView onDraw method is not getting called

I have extended an ImageView and calling a method of ImageView from outside class , inside a Thread. Inside the method I have tried using invalidate postValidate and everything but it never called the onDraw method , is it something to do with the calling method-
public class TestImageView extends ImageView {
public FacePreviewImageView(Context context) {
super(context);
}
public void process(String strImageFilePath) {
//doing some operation
invalidate();
}
#SuppressLint("DrawAllocation")
#Override
protected void onDraw(Canvas canvas) {
Log.i("CAME INSIDE ", ""+faces.total());
if(faces.total()>0){
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setTextSize(20);
String s = "Processed Face";
float textWidth = paint.measureText(s);
canvas.drawText(s, (getWidth() - textWidth) / 2, 20, paint);
CvRect r = new CvRect(cvGetSeqElem(faces, 0));
int x = r.x(), y = r.y(), w = r.width(), h = r.height();
canvas.drawRect(new Rect(x, y, x+w, y+h), paint);
}
super.onDraw(canvas);
}
}
and my calling method looks like -
new Handler().post(new Runnable() {
#Override
public void run() {
// Code here will run in UI thread
((TestImageView )imageView).process(pictureFile.getAbsolutePath());
}
});
One more point to add-
I tried to add this view directly inside layout file-
<FrameLayout
android:id="#+id/ll2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:orientation="horizontal" >
<com.example.defaultfacetracker.TestImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</FrameLayout>
but its throwing exception while launching. SO I finally changed the code to-
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#android:drawable/toast_frame" />
And in a class I am just creating a new instance of TestImageView to work for.
If that is the reason to do something here.

Have you tried to set:
setWillNotDraw(false);
In your constructor?
#Override
public FacePreviewImageView(Context context) {
this(context, null, 0);
}
#Override
public FacePreviewImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
#Override
public FacePreviewImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setWillNotDraw(false);
}

setWillNotDraw(false); doesn't work for me.
I had the same issue, here, and I figured out checking that my child class of ImageView has visibility VISIBILE and not GONE.
If it has GONE value for visibility, onDraw will not be called.

putting 2 textViews on top of each other

I want to have something where half of the text in a textView or any other kind of text display is highlighted while the other half is not. For example
in "textView". the "text" would be in a red font and "view" would be in black.
I was thinking about doing this by putting 2 textViews directly on top of each other but I am not exactly sure how to do this. (What kind of parameters, etc?) Any ideas?
Thank you

You can stack multiple textViews by using a Layout that supports this, such as a FrameLayout or RelativeLayout. That said, I think the better approach (which would provide better control over the appearance) would be to create a custom view, and draw the text to the canvas yourself. You can do this with something like this (I have not tested this, but it should work - might need a few tweaks though):
public class TwoPartTextView extends View
{
private CharSequence part1 = "", part2 = "";
private Paint mPaint;
private int color1 = Color.BLACK, color2 = Color.BLACK;
private Context context;
private float part1Size = 12f, part2Size = 12f;
private int strokeWidth = 2;
public TwoPartTextView(Context context) {
super(context);
init(context);
}
public TwoPartTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public TwoPartTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
private void init(context) {
this.context = context;
mPaint = new Paint();
}
public void setText(CharSequence part1, int color1, part1Size, CharSequence part2, int color2, part2Size, strokeWidth) {
this.part1 = part1;
this.color1 = color1;
this.part1Size = part1Size;
this.part2 = part2;
this.color2 = color2;
this.part2Size = part2Size;
this.strokeWidth = strokeWidth;
mPaint.setStrokeWidth(strokeWidth);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(color1);
mPaint.setTextSize(part1Size);
canvas.drawText(part1.toString(), 0, paint.getTextSize(), paint);
mPaint.setColor(color2);
mPaint.setTextSize(part2Size);
canvas.drawText(part2.toString(), getWidth()/2 /* tweak as needed*/, paint.getTextSize(), paint);
}
}
Then to use it, add it to XML or create it in code, then call:
myTwoPartTextView.setText("text", Color.RED, 12f, "View", Color.BLACK, 14f, 2);
myTwoPartTextView.setText.invalidate();