Develop Reference

Using alpha mask on TextView removes parent view alpha as well?

I'm trying to have a TextView with an alpha linear gradient applied to it, like this:
I have an implementation that almost works, here's the code:
public class MyTextView extends TextView {
Paint paint = new Paint();
void init() {
paint.setAlpha(0xffffffff);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.OVERLAY));
paint.setShader(
new LinearGradient(
0, 0, getWidth(), getHeight(),
0xffffffff, 0x00000000,
Shader.TileMode.CLAMP));
}
void draw(Canvas canvas) {
super.draw(canvas);
canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
}
}
It sits in this layout, which has its own translucent background:
<View background="#33000000">
<MyTextView />
</View>
The paint mode seems to remove the translucent background color of its parent view. I'm not sure how to stop the draw code in my textview class from affecting the background color of its parent view?
Thanks

try this：
public class AlphaMaskLayout extends RelativeLayout {
private Paint paint;
public AlphaMaskLayout(Context context) {
super(context);
init(context, null, 0);
}
public AlphaMaskLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public AlphaMaskLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs, defStyle);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setAlpha(0xffffffff);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
setLayerType(LAYER_TYPE_SOFTWARE, null);
setWillNotDraw(false);
}
#Override
public void draw(Canvas canvas) {
super.draw(canvas);
canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
paint.setShader(
new LinearGradient(
0, 0, w, h,
new int[]{ 0xffffffff, 0xfaffffff, 0x00000000, 0x00000000, 0xfaffffff, 0xffffffff},
new float[]{0, 0.15f, 0.3f, 0.7f, 0.85f, 1f},
Shader.TileMode.CLAMP));
}
}
in xml:
<your.package.AlphaMaskLayout
android:layout_centerInParent="true"
android:layout_width="160dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/moving_textview"
android:layout_centerVertical="true"
android:padding="16dp"
android:textSize="16sp"
android:background="#null"
android:textColor="#android:color/white"
android:shadowColor="#android:color/black"
android:shadowDx="1"
android:shadowDy="1"
android:shadowRadius="1"
android:text="Hello World!!!"
android:gravity="center"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</saulmm.coordinatorexamples.AlphaMaskLayout>

How to prevent custom shape from pushing out of the LinearLayout?

I have a Custom View that extends RelativeLayout with overridden onDraw() method so that it looks like a message bubble. This View is in the LinearLayout. When I try to fill this custom View with content, part of its shape is pushed out of the LinearLayout. How to prevent this behaviour?How to prevent this behaviour?
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/chat_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:padding="10dp"
android:text="2:46pm"
android:textSize="#dimen/splash_4_user_name_text_size" />
<com.mypackage.RightBasedMessage
android:id="#+id/chat_message_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/splash_3_comment_padding"
android:paddingLeft="#dimen/splash_3_comment_end_padding"
android:paddingRight="#dimen/chat_message_field_beginning_padding"
android:paddingTop="#dimen/splash_3_comment_padding">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hi :)"
android:textColor="#color/white_text_color" />
</com.mypackage.RightBasedMessage>
</LinearLayout>
Here is my Custom View:
public class RightBasedMessage extends RelativeLayout {
private Paint paint;
private Path path;
private Point pointleftTop;
private Point pointRightTop;
private Point pointRightBottom;
private Point pointLeftBottom;
private float corner;
private Context context;
private int color = R.color.chat_my_message_field_color;
public RightBasedMessage(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
corner = getResources().getDimension(R.dimen.message_container_corner);
paint = new Paint();
path = new Path();
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.FILL);
this.setWillNotDraw(false);
}
public void setMessageBackground(int color){
this.color = color;
invalidate();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
pointRightTop = new Point(width-(int)corner, (int)corner/2);
pointRightBottom = new Point(width-(int)corner, height);
pointLeftBottom = new Point(0, height);
pointleftTop = new Point(0, 0);
path.reset();
path.moveTo(corner, 0);
path.lineTo(width, 0);
path.quadTo(pointRightTop.x, pointRightTop.y, width-corner, corner+corner/2);
path.lineTo(width-corner, height-corner);
path.quadTo(pointRightBottom.x, pointRightBottom.y, width - corner*2, height);
path.lineTo(corner, height);
path.quadTo(pointLeftBottom.x, pointLeftBottom.y, 0, height-corner);
path.lineTo(0, corner);
path.quadTo(pointleftTop.x, pointleftTop.y, corner, 0);
paint.setColor(ContextCompat.getColor(context, color));
canvas.drawPath(path, paint);
path.close();
}
}

have you tried this?
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
>

Integrating Custom ImageView with Fragment

I'm trying to create a fragment in activity which houses a custom image view and the sequence of view should be button, fragment, progress bar but right now I get the progress bar right after the button and nothing where fragment should be.I have posted the layout for the activity,fragment and the java code for fragment and customView. If i set the view with CustomView in onCreate method of activity using setContent() method, I just get the imageview, so the custom imageview works.Please help.
public class IFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.article_view, container, false);
}
}
CustomView.java
public class CustomView extends ImageView
{
private Canvas pcanvas;
private Bitmap bitmap;
Paint mPaint;
private int x = 0;
private int y = 0;
private static final String TAG="adsa";
private int r=0;
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
Bitmap bmrot=BitmapFactory.decodeResource(context.getResources(), R.drawable.icon);
mPaint = new Paint();
mPaint.setAlpha(0);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mPaint.setAntiAlias(true);
Paint alphaPaint = new Paint();
alphaPaint.setAlpha(128);
pcanvas = new Canvas();
Log.e(TAG,"The bitmap width is "+bmrot.getWidth() +" and the height is "+bmrot.getHeight());
bitmap = bmrot.createBitmap(bmrot.getWidth(), bmrot.getHeight(), Bitmap.Config.ARGB_8888);
setBackgroundColor(Color.parseColor("#4d4d4d"));
pcanvas.setBitmap(bitmap);
pcanvas.drawBitmap(bmrot, 0, 0, alphaPaint);
}
#Override
protected void onDraw(Canvas canvas) {
pcanvas.drawCircle(x, y, r, mPaint);
canvas.drawBitmap(bitmap, 0, 0, null);
super.onDraw(canvas);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
x = (int) event.getX();
y = (int) event.getY();
r = blurSeek.getProgress();
invalidate();
return true;
}
}
article_view.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.example.android.proj.CustomView
android:id="#+id/signature_canvas"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Activity xml file
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/dsa"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.imagegallery.UploadImageActivity"
android:orientation="vertical">
<LinearLayout
android:id="#+id/thedd"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:text="Upload"
android:id="#+id/Btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
<fragment android:name="com.example.android.imagegallery.ImageFragment"
android:id="#+id/article_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Showing in Logcat (Log Level - ERROR) -
03-07 15:57:32.597 5996-5996/com.example.android.imagegallery E/SELinux: [DEBUG] seapp_context_lookup: seinfoCategory = default
03-07 15:57:32.597 5996-5996/com.example.android.imagegallery E/dalvikvm: >>>>> Normal User
03-07 15:57:32.597 5996-5996/com.example.android.imagegallery E/dalvikvm: >>>>> com.example.android.imagegallery [ userId:0 | appId:10035 ]
03-07 15:57:32.607 5996-5996/com.example.android.imagegallery E/SELinux: [DEBUG] seapp_context_lookup: seinfoCategory = default
03-07 15:57:33.407 5996-5996/com.example.android.imagegallery E/adsa: The bitmap width is 540 and the height is 374

You should add default constructors for Custom ImageView.
public CustomView(Context context) {
super(context);
}
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
Bitmap bmrot=BitmapFactory.decodeResource(context.getResources(), R.drawable.icon);
mPaint = new Paint();
mPaint.setAlpha(0);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mPaint.setAntiAlias(true);
Paint alphaPaint = new Paint();
alphaPaint.setAlpha(128);
pcanvas = new Canvas();
Log.e(TAG,"The bitmap width is "+bmrot.getWidth() +" and the height is "+bmrot.getHeight());
bitmap = bmrot.createBitmap(bmrot.getWidth(), bmrot.getHeight(), Bitmap.Config.ARGB_8888);
setBackgroundColor(Color.parseColor("#4d4d4d"));
pcanvas.setBitmap(bitmap);
pcanvas.drawBitmap(bmrot, 0, 0, alphaPaint);
}
public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CustomView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
Hope this will help you.

Android layout shape without using background image?

How can i make a layout look like following snap in the case i don't want to use background image.

Create a nine patch image of a single image. Following link is helpful to you for generate nine patch image.
https://romannurik.github.io/AndroidAssetStudio/nine-patches.html

You can create an ImageView like that triangle and put it in the place you need.
Have a look how you can create triangle using xml: Android triangle (arrow) defined as an XML shape
Or even you can create a TextView:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="▼"/>
and put it in the place.
Unicode for the triangle: link

Use below code in Relative Layout. Hope it helps you.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/triangleImage"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>

You can also draw custom view:
public class MyBackground extends View{
private Path path = new Path();
private Paint paint = new Paint();
public MyBackground(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyBackground(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
}
public MyBackground(Context context) {
this(context, null);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.GRAY);
int triangleSide = getWidth() / 10; // triangle is 1/10-th of side
int offsetFromRightSide = triangleSide;
int startX = getWidth() - triangleSide - offsetFromRightSide;
path.reset();
path.moveTo(startX, 0);
path.lineTo(startX + triangleSide/2, triangleSide/2);
path.lineTo(startX + triangleSide, 0);
canvas.drawPath(path, paint);
}
}
and use it like this
<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:background="#drawable/background"
tools:context=".MainActivity">
<your.package.name.MyBackground
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Or there is one more "code way". Create custom background Drawable
public class Background extends Drawable {
private Path path = new Path();
private Paint paint = new Paint();
public Background(){
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
}
#Override
public void draw(Canvas canvas) {
int triangleSide = getBounds().width() / 10; // triangle is 1/10-th of side
int offsetFromRightSide = triangleSide;
int startX = getBounds().width() - triangleSide - offsetFromRightSide;
path.reset();
path.moveTo(startX, 0);
path.lineTo(startX + triangleSide/2, triangleSide/2);
path.lineTo(startX + triangleSide, 0);
canvas.drawColor(Color.GRAY);
canvas.drawPath(path, paint);
}
#Override public void setAlpha(int alpha) {}
#Override public void setColorFilter(ColorFilter cf) {}
#Override public int getOpacity() {return 0;}
}
And use it like this:
RelativeLayout layout = (RelativeLayout) findViewById(R.id.root);
layout.setBackgroundDrawable(new Background());

How to add my custom View to a layout so that match parent?

I have the following custom View (basically is a View containing an image, on that image you can draw rectangles).
public class MyView extends View {
public Bitmap mBitmap;
public Canvas mCanvas;
public Rect mPath;
public Paint mBitmapPaint;
public Paint mPaint;
public MyView(Context c) {
super(c);
Log.e("","call first constructor");
mPath = new Rect();
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(0xFFFF0000);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(3);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.b6p1).copy(Bitmap.Config.ARGB_8888, true);
mCanvas.drawBitmap(bitmap, 0, 0, mBitmapPaint);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(0xFFAAAAAA);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawRect(mPath, mPaint);
}
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
private void touch_start(float x, float y) {
mX = x;
mY = y;
}
private void touch_move(float x, float y) {
float left;
float right;
float bottom;
float top;
if (x < mX) {
left = x;
right = mX;
} else {
left = mX;
right = x;
}
if (y < mY) {
top = y;
bottom = mY;
} else {
top = mY;
bottom = y;
}
mPath = new Rect((int) left, (int) top, (int) right, (int) bottom);
}
private void touch_up() {
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touch_start(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touch_move(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touch_up();
invalidate();
break;
}
return true;
}
}
Now I want to add this to my Layout,
the layout is the following,
and i want to replace the ImageView with my the MyView View.
<LinearLayout 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:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.8"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9" >
<HorizontalScrollView
android:id="#+id/horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="#+id/vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ImageView>
</ScrollView>
</HorizontalScrollView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:background="#android:color/darker_gray" >
<Button
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LEFT" />
<Button
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RIGHT" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:background="#android:color/darker_gray"
android:orientation="vertical" >
<Button
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UP" />
<Button
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DOWN" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have tried:
<LinearLayout 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:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.8"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9" >
<HorizontalScrollView
android:id="#+id/horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="#+id/vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.test.MyView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ScrollView>
</HorizontalScrollView>
</LinearLayout>
But NO SUCCESS,
the image that can be drawn upon does not show...
It show a blank field...

You should override onMeasure() in your custom view.Do something like this :
#Override
public void onMeasure(int widthSpecs, int heightSpecs) {
super.onMeasure(widthSpecs, heightSpecs);
setMeasuredDimension(mDisplayUtils.getScreenWidth(), mDisplayUtils.getScreenHeight());
}
or whatever values you want.
Another thing which I can think of is that you are initialising your variables on your main constructor. Make it like this way :
public MyView(Context c) {
super(c);
init();
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init(){
Log.e("","call first constructor");
mPath = new Rect();
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(0xFFFF0000);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(3);
}