We Keep Coding

Text Outline not working with android X device

I am using below custom class for make text outline in my quotes application. Its working fine till device with android 9. In android 10 device, its not giving me any error as well not working.
My custom class for draw outline is like below
public class OutlineTextView extends androidx.appcompat.widget.AppCompatTextView {
private Field colorField;
private int textColor;
private int outlineColor;
public OutlineTextView(Context context) {
this(context, null);
}
public OutlineTextView(Context context, AttributeSet attrs) {
this(context, attrs, android.R.attr.textViewStyle);
}
public OutlineTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
try {
colorField = TextView.class.getDeclaredField("mCurTextColor");
colorField.setAccessible(true);
textColor = getTextColors().getDefaultColor();
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.OutlineTextView);
outlineColor = a.getColor(R.styleable.OutlineTextView_outlineColor, Color.TRANSPARENT);
setOutlineStrokeWidth(a.getDimensionPixelSize(R.styleable.OutlineTextView_outlineWidth, 0));
a.recycle();
}
catch (NoSuchFieldException e) {
e.printStackTrace();
colorField = null;
}
}
#Override
public void setTextColor(int color) {
textColor = color;
super.setTextColor(color);
}
public void setOutlineColor(int color) {
invalidate();
outlineColor = color;
}
public void setOutlineWidth(float width) {
invalidate();
setOutlineStrokeWidth(width);
}
private void setOutlineStrokeWidth(float width) {
invalidate();
getPaint().setStrokeWidth(2 * width + 1);
}
#Override
protected void onDraw(Canvas canvas) {
if (colorField != null) {
// Outline
setColorField(outlineColor);
getPaint().setStyle(Paint.Style.STROKE);
super.onDraw(canvas);
// Reset for text
setColorField(textColor);
getPaint().setStyle(Paint.Style.FILL);
}
super.onDraw(canvas);
}
private void setColorField(int color) {
// We did the null check in onDraw()
try {
colorField.setInt(this, color);
}
catch (IllegalAccessException | IllegalArgumentException e) {
// Optionally catch Exception and remove print after testing
e.printStackTrace();
}
}
}
I am calling it from my RecyclerView like this
CardMainActivity.text_quotes.setOutlineColor(Color.parseColor(CardConstant.getcolorcodearray().get(getAdapterPosition())));
My gradle build information is like below
compileSdkVersion 29
buildToolsVersion "29.0.2"
Let me know if someone can help me. Thanks!

ClipPath with setLayerType as Software crashes

I am trying to clip a path in my custom view but it appears black in color. Through searching and finding the reason for same. Found that I need to set " setLayerType(LAYER_TYPE_SOFTWARE,null)". After this it appears perfect but crashes in some deivices.
Crash Log(One of these based on devices):
java.lang.NegativeArraySizeException
Bitmap exceeds 32bit
public class CardLayout extends LinearLayout {
private View mRoot;
private ImageView mCategoryImageView;
private LinearLayout mCategoryBottomView;
private RectF mRect;
private Paint mPaint;
private View mDivider;
private Path mPath;
private int mPadding = 30;
public CardLayout(Context context) {
super(context);
}
public CardLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public CardLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
mRoot = LayoutInflater.from(getContext()).inflate(R.layout.card_content, null);
addView(mRoot);
initUI();
}
private void initUI() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
mPath = new Path();
mCategoryHeadlineTextView = (TextView) mRoot.findViewById(R.id.categoryHeadline);
mCategoryImageView = (ImageView) mRoot.findViewById(R.id.categoryImageView);
mCategoryBottomView = (LinearLayout) mRoot.findViewById(R.id.ctg_btm_view);
mDivider = mRoot.findViewById(R.id.divider);
setLayerType(LAYER_TYPE_SOFTWARE,null);
}
public void setCategoryImage(String categoryUrl) {
if (mCategoryImageView != null) {
Glide.with(mContext)
.load(categoryUrl)
.placeholder(R.drawable.two)
.into(mCategoryImageView);
}
}
public void setBottomView(String[] optionText, int[] optionResource, int tag) {
if (mCategoryBottomView != null) {
CategoryBottomOptions options = new CategoryBottomOptions(mContext, optionText, optionResource, tag, mCategoryBottomView);
}
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
mRect = new RectF(mDivider.getX() - mPadding, mDivider.getY() - mPadding, mDivider.getX() + mPadding, mDivider.getY() + mPadding);
mPath.addArc(mRect, 270, 180);
canvas.clipPath(mPath);
canvas.drawPath(mPath, mPaint);
mRect = new RectF(mDivider.getWidth() - mPadding, mDivider.getY() - mPadding, mDivider.getWidth() + mPadding, mDivider.getY() + mPadding);
mPath = new Path();
mPath.addArc(mRect, 90, 180);
canvas.clipPath(mPath);
canvas.drawPath(mPath, mPaint);
}
}

You Should do something like this to create a window withing a view.
public class ClippedImageView extends ImageView {
private Paint mPaint;
private Path mPath;
public ClippedImageView(Context context) {
this(context, null);
init();
}
public v(Context context, AttributeSet attrs) {
this(context, attrs, 0);
init();
}
public ClippedImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
mPath = new Path();
RectF rect = new RectF(0, 0, 100, 100);
mPath.addArc(rect, 270, 180);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.clipPath(mPath, Region.Op.DIFFERENCE);
super.onDraw(canvas);
}
}

Android: I need a circular camera preview. How to achieve it?

I find myself in need of assistance.
I'm trying to develop this simple app that takes pictures (Wow, now that's original!). Everything is fine. The only thing I need is to have a CIRCULAR CAMERA PREVIEW.
I have my camerapreview class (which extends surfaceview) placed inside a frame layout, which is my camera preview basically. As you all know, this comes in a rectangular shape. Since I have bigger plans for the app, I'd need the camera preview to be circular (so, for example, someone can take a picture of someone's face and I can have some drawings around...).
Now, I don't know how to proceed. I tried different things, creating a shape with xml and set it as background for my frame layout, but that just didn't work.
After hours spent on google for solutions I decided that I had to give up and come here.
So please, if someone knows anything, let us know :) I hope I was clear enough, do not hesitate to ask for clarification if needed.

Simple way:
1) not setup surface for priview
2) catch raw data
3) convert to bitmap and make circle
4) show (for ex. on imegeview)
just for sample:
public class CameraRoundPriview extends ImageView {
private Camera camera;
private Bitmap bitmap = null;
private int mPreviewWidth, mPreviewHeight;
boolean mCameraOn = false;
public CameraRoundPriview(Context context, AttributeSet attrs) {
super(context, attrs);
}
private Bitmap getclip() {
//clip
Bitmap output = Bitmap.createBitmap(bitmap.getHeight(),
bitmap.getHeight(),
Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getHeight(),
bitmap.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawCircle(bitmap.getHeight() / 2,
bitmap.getHeight() / 2,
bitmap.getHeight() / 2, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
//rotate
android.hardware.Camera.CameraInfo info = new android.hardware.Camera.CameraInfo();
android.hardware.Camera.getCameraInfo(getCameraID(), info);
int rotation = activity.getWindowManager().getDefaultDisplay().getRotation();
int degrees = 0;
switch (rotation) {
case Surface.ROTATION_0:
degrees = 0;
break;
case Surface.ROTATION_90:
degrees = 90;
break;
case Surface.ROTATION_180:
degrees = 180;
break;
case Surface.ROTATION_270:
degrees = 270;
break;
}
int result = degrees;
if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.LOLLIPOP){
if (info.facing == Camera.CameraInfo.CAMERA_FACING_FRONT) {
result = (info.orientation + degrees) % 360;
result = (360 - result) % 360; // compensate the mirror
} else { // back-facing
result = (info.orientation - degrees + 360) % 360;
}
}
Matrix matrix = new Matrix();
matrix.postRotate(result);
Bitmap scaledBitmap = Bitmap.createScaledBitmap(output,output.getWidth(),output.getHeight(),true);
Bitmap rotatedBitmap = Bitmap.createBitmap(scaledBitmap , 0, 0, scaledBitmap.getWidth(), scaledBitmap .getHeight(), matrix, true);
return rotatedBitmap;
}
private void showImage(){
if ((bitmap != null)){
this.setImageBitmap(getclip());
}
}
public boolean onClickCamera(){
if (mCameraOn){
mCameraOn = false;
cameraStop();
}else{
mCameraOn = true;
cameraStart();
}
return mCameraOn;
}
private void cameraStop(){
if (camera == null) return;
camera.setPreviewCallback(null);
camera.release();
camera = null;
}
private int getCameraID(){
// specify camera id
return 0;
}
private void cameraStart(){
Camera camera = Camera.open(getCameraID());
final Camera.Size previewSize = camera.getParameters().getPreviewSize();
mPreviewWidth = previewSize.width;
mPreviewHeight = previewSize.height;
try {
camera.setPreviewCallback(new PreviewCallback() {
public void onPreviewFrame(byte[] data, Camera camera_call) {
ByteArrayOutputStream outstr = new ByteArrayOutputStream();
Rect rect = new Rect(0, 0, mPreviewWidth, mPreviewHeight);
YuvImage yuvimage=new YuvImage(data,ImageFormat.NV21,mPreviewWidth,mPreviewHeight,null);
yuvimage.compressToJpeg(rect, 50, outstr);
bitmap = BitmapFactory.decodeByteArray(outstr.toByteArray(), 0, outstr.size());
showImage();
camera_call.addCallbackBuffer(data);
}
});
} catch (Exception e) {}
camera.startPreview();
this.camera=camera;
}
}

You can overlay an ImageView over the camera preview. put both the SurfaceView and the ImageView within a FrameLayout both match_parent and the image must be on top.
Set to an black image with transparent circle in the middle.

this is as simple as shown below:
this is for camerax or camera2 API
Note: you must have background transparent.
you must have xml file like below.
<com.RoundedCameraPreview
android:id="#+id/viewFinder"
android:background="#00000000"
app:scaleType="fillCenter"
android:layout_width="match_parent"
android:layout_height="match_parent" />
also don't forget to declare in style.xml
<declare-styleable name="PreviewView">
<attr name="isRound" format="boolean" />
</declare-styleable>
and code is written like this
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.camera.view.PreviewView;
public class RoundedCameraPreview extends PreviewView {
Path clipPath;
boolean isRound;
public RoundedCameraPreview(#NonNull Context context) {
super(context);
}
public RoundedCameraPreview(#NonNull Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
}
public RoundedCameraPreview(#NonNull Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.PreviewView,
0, 0);
try {
isRound = a.getBoolean(R.styleable.PreviewView_isRound, true);
} finally {
a.recycle();
}
}
public boolean isRound() {
return isRound;
}
public void setIsRound(boolean isRound) {
this.isRound = isRound;
invalidate();
requestLayout();
}
public RoundedCameraPreview(#NonNull Context context, #Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
protected void dispatchDraw(Canvas canvas) {
if (isRound) {
clipPath = new Path();
//TODO: define the circle you actually want
clipPath.addCircle(canvas.getWidth() / 2, canvas.getWidth() / 2, canvas.getWidth() / 2, Path.Direction.CW);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.clipPath(clipPath);
canvas.drawPath(clipPath, paint);
}
super.dispatchDraw(canvas);
}
}

Custom Android Ratingbar

I want to implement a custom RatingBar in my workout app. The bar should have 4 stars and a stepsize of 1. The layout looks like this:
<com.example.workouttest.MyBar
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:max="4"
android:numStars="4"
android:stepSize="1"
android:scaleX="0.6"
android:scaleY="0.6"
android:layout_gravity="right" />
I want to replace the default stars with custom images. But each of the 4 stars should have a different image:
Star 1 = an "X" that means "this item is disabled"
Star 2 = Thumb down
Star 3 = something that represents a "neutral rating"
Star 4 = Thumb up
Addtitionally when, for example, the item is rated with a 3 (neutral rating), all other stars (1,2 and 4) should display a greyed out version of their image.
I tried to extend from RatingBar and came up with the following code:
public class MyBar extends RatingBar {
private int[] starArrayColor = {
R.drawable.star_1_color,
R.drawable.star_2_color,
R.drawable.star_3_color,
R.drawable.star_4_color
};
private int[] starArrayGrey = {
R.drawable.star_1_grey,
R.drawable.star_2_grey,
R.drawable.star_3_grey,
R.drawable.star_4_grey
};
public MyBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyBar(Context context) {
super(context);
}
#Override
protected synchronized void onDraw(Canvas canvas) {
int stars = getNumStars();
float rating = getRating();
for (int i=0;i<stars;i++) {
Bitmap bitmap;
Resources res = getResources();
Paint paint = new Paint();
if ((int) rating == i) {
bitmap = BitmapFactory.decodeResource(res, starArrayColor[i]);
} else {
bitmap = BitmapFactory.decodeResource(res, starArrayGrey[i]);
}
canvas.drawBitmap(bitmap, 0, 0, paint);
canvas.save();
}
super.onDraw(canvas);
}
}
Sadly it did not work. It draws just the normal stars with my custom images as background.
Is here someone who knows how to help me solve this problem?
UPDATE
Thanks to Gabe my working onDraw method now looks like this:
#Override
protected synchronized void onDraw(Canvas canvas) {
int stars = getNumStars();
float rating = getRating();
float x = 0;
for (int i=0;i<stars;i++) {
Bitmap bitmap;
Resources res = getResources();
Paint paint = new Paint();
x += 50;
if ((int) rating-1 == i) {
bitmap = BitmapFactory.decodeResource(res, starArrayColor[i]);
} else {
bitmap = BitmapFactory.decodeResource(res, starArrayGrey[i]);
}
Bitmap scaled = Bitmap.createScaledBitmap(bitmap, 48, 48, true);
canvas.drawBitmap(scaled, x, 0, paint);
canvas.save();
}
}

Don't call super.onDraw- that will draw the normal stars. From there, what else doesn't work?

Change TextView Color Depending On Text

Using onDraw, I want to make a custom text view that changes color depending on its text value. For example, if the text value is "hello" I want it to be red and if it says "bye" I want it to be green. Any helps greatly appreciated.

I'm not necessarily sure why you want to do this in onDraw(). Unless you have a really good reason to set up a custom TextView/EditText, that's not necessary.
To simplify your situation, you can implement a TextWatcher to do this, and in onTextChanged(), you can set the color by comparing the string values using .equals().
Here is an example of your theoretical situation:
final EditText yourEditText = /* findViewById maybe? */;
yourEditText.addTextChangedListener(new TextWatcher() {
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (s.equalsIgnoreCase("hello"))
yourEditText.setTextColor(Color.RED);
else if (s.equalsIgnoreCase("bye"))
yourEditText.setTextColor(Color.GREEN);
else // if it says neither "hello" nor "bye"
yourEditText.setTextColor(Color.BLACK);
}
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
// Nothing needs to happen here
}
public void afterTextChanged(Editable s) {
// Nothing needs to happen here
}
});
If you feel its necessary to maintain this in onDraw(), simply extract the code from onTextChanged() and change yourEditText to this, or place it in the constructor instead:
public class YourTextView extends TextView { // Or extends EditText, doesn't matter
public YourTextView(Context context) {
this(context, null, 0);
}
public YourTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public YourTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
addTextChangedListener(new TextWatcher() {
// Copy the TextWatcher code from the example above, replacing "yourEditText" with "YourTextView.this"
});
}
// ... Rest of your class
}

I figured out how to do it in a more creative way using onDraw.
public class MagnitudeTextView extends TextView {
public MagnitudeTextView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public MagnitudeTextView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public MagnitudeTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
}
/*
* (non-Javadoc)
*
* #see android.widget.TextView#onDraw(android.graphics.Canvas)
*/
#Override
protected void onDraw(Canvas canvas) {
int height = getMeasuredHeight();
int width = getMeasuredWidth();
int px = width / 2;
int py = height / 2;
Paint Red = new Paint(Paint.ANTI_ALIAS_FLAG);
Red.setColor(Color.RED);
Paint White = new Paint(Paint.ANTI_ALIAS_FLAG);
White.setColor(Color.DKGRAY);
Paint Yellow = new Paint(Paint.ANTI_ALIAS_FLAG);
Yellow.setARGB(210, 105, 30, 0);
Paint Blue = new Paint(Paint.ANTI_ALIAS_FLAG);
Blue.setColor(Color.BLUE);
float textWidth = Red.measureText(String.valueOf(getText()));
String g = String.valueOf(getText());
if (g.startsWith("3") || g.startsWith("4")) {
canvas.drawText(String.valueOf(getText()), px - textWidth / 2, py,
White);
}
if (g.startsWith("6") || g.startsWith("5") || g.startsWith("7")
|| g.startsWith("8")) {
canvas.drawText(String.valueOf(getText()), px - textWidth / 2, py,
Yellow);
}
if (g.startsWith("9") || g.startsWith("10")) {
canvas.drawText(String.valueOf(getText()), px - textWidth / 2, py,
Red);
}
// super.onDraw(canvas);
}
}

You can overwrite setText() and set the color using setTextColor().
You can do it inside onDraw as well, but it's not worth the weigth, as it may pass many times inside onDraw.

You can implement TextWatcher and use onTextChanged()
More about it here in the Android Docs

Use this to get the text:
TextView text = (TextView)findViewById(R.id.textid);
String value = text.getText().toString();
Then check what the text is and change the color :
if (value.equals("hello")) {
text.setBackgroundColor(yourcolor);
}