I need to paint an overlay image onto a SeekBar in my ListView rows. This isn't too hard to do and the code in this question accomplishes that by painting the row number in a bitmap and placing it as the progress drawable.
The problem that I am having is that this only works one time. When the view is recycled to be used for another row, the drawable disappears.
The first 10 views (positions 0 through 9) worked. Everything after that fails. There is no error or exception. Android just stops drawing that layer. If I scroll down and then back up, none of them work (as they have all been recycled).
How do I get Android to always draw this overlayed image? I imagine there is some sort of caching or invalidation that I need to perform, but I just don't know what it is yet.
public class ViewTest extends ListActivity {
// replace the progress drawable with my custom drawable
public void setSeekBarOverlay(SeekBar seekBar, String overlayText) {
Bitmap bitmap = Bitmap.createBitmap(100, 12, Bitmap.Config.ARGB_4444);
new Canvas(bitmap).drawText(overlayText, 10, 12, new Paint());
Drawable d = new BitmapDrawable(bitmap);
((LayerDrawable) seekBar.getProgressDrawable()).setDrawableByLayerId(android.R.id.progress, d);
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
setListAdapter(new ListAdapter() {
// return the view. Recycle them if possible.
public View getView(int pos, View v, ViewGroup vg) {
if (v == null) {
v = View.inflate(ViewTest.this, R.layout.seekbar, null);
}
String s = String.valueOf(pos);
((TextView) v.findViewById(android.R.id.text1)).setText(s);
setSeekBarOverlay((SeekBar) v.findViewById(R.id.seekbar), s);
return v;
}
... cut ...
});
}
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
seekbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight">
<TextView
android:id="#android:id/text1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content" />
<SeekBar
android:id="#+id/seekbar"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
This is a tough one that I don't think will get much traffic, so I'm going to answer it myself since I found the solution.
Another SO question/answer, Android ProgressBar.setProgressDrawable only works once?, got me halfway there but the solution didn't work for me. In the other question, the code was trying to replace the entire progressDrawable (setProgressDrawable()). I'm not doing that here as I'm just updating a layer in the existing progressDrawable. After some playing around, with similar approaches, I found something that worked. You have to get the bounds of the drawable that is being updated (in this case, one of the layers) and set the bounds later.
Seems like a bug in the platform, but this workaround seems to make it work. Hope this helps someone else someday.
public void setSeekBarOverlay(SeekBar seekBar, String overlayText) {
LayerDrawable layerDrawable = (LayerDrawable) seekBar.getProgressDrawable();
Drawable overlayDrawable = layerDrawable.findDrawableByLayerId(android.R.id.progress);
Rect bounds = overlayDrawable.getBounds();
Bitmap bitmap = Bitmap.createBitmap(100, 12, Bitmap.Config.ARGB_4444);
new Canvas(bitmap).drawText(overlayText, 10, 12, new Paint());
overlayDrawable = new BitmapDrawable(bitmap);
overlayDrawable.setBounds(bounds);
layerDrawable.setDrawableByLayerId(android.R.id.progress, overlayDrawable);
}
Related
I have problems with setting margin to a custom made linear layout class that I use multiple times in a GridLayout. The Gridlayout is placed in a fragment.
This is the code of fragment_grid.xml:
<FrameLayout 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"
tools:context="app_a_tize.expressme.Fragment.GridFragment"
android:layout_gravity="center">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/orange"
android:layout_margin="5dp"
android:id="#+id/gridlayout_grid"></GridLayout>
</FrameLayout>
This is the code of the GridFragment.java:
public class GridFragment extends Fragment {
public GridFragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_grid, container, false);
}
#Override
public void onStart() {
super.onStart();
GridLayout grid = (GridLayout) getView().findViewById(R.id.gridlayout_grid);
grid.setRowCount(3);
int tileHeight = (CategoryTileActivity.gridContentHeight -3 * 10) / 3;
int amountofColumns = (int) CategoryTileActivity.gridContentWidth / tileHeight;
grid.setColumnCount(amountofColumns);
grid.setMinimumWidth((amountofColumns * tileHeight) + (5 * 20 ));
for (int i = 0; i < 3 * amountofColumns; i++) {
//fill the grid with the custom LinearLayout:
grid.addView(new TileClass(getActivity(), tileHeight, tileHeight, "ToBeImplemented", "Button"));
}
}
}
This is the code of the custom LinearLayout:
public class TileClass extends LinearLayout {
public TileClass(Context context, int height, int width, String image, String text) {
super(context);
this.setBackgroundResource(R.drawable.tile_button); //creates rounded layouts
this.setMinimumHeight(height);
this.setMinimumWidth(width);
this.setOrientation(LinearLayout.VERTICAL);
ImageView tileImage = new ImageView(context);
Bitmap bMap = BitmapFactory.decodeResource(getResources(), R.drawable.tilephoto);
Bitmap bMapScaled = Bitmap.createScaledBitmap(bMap, 100, 100, true);
tileImage.setImageBitmap(bMapScaled);
tileImage.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
TextView tileText = new TextView(context);
tileText.setText(text);
tileText.setTextColor(Color.WHITE);
tileText.setGravity(Gravity.CENTER);
addView(tileImage);
addView(tileText);
}
}
When I run the Activity, I get this as result:
The code I showed above is responsible for the orange area in the middle. What I need: the blue "buttons"/LinearLayouts, in the orange area in the middle, to have a margin of 5dp. So the rest of the orange space is be taken by the custom LinearLayouts.
I don't know how to fix that, I tried a lot of options but they don't seem to work out for me.. Everything from MarginLayoutParams to params.setMargins(5,5,5,5); On almost every layout in my code.
I use Android Studio 2.1.2, supporting minimum of API 15.
Every help is appreciated!
For your imagination, this must be the end result, I need the margin like this:
You have to make custom view of gridview item as below:-
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/categoryHeight"
android:layout_marginLeft="#dimen/margin_5dp"
android:layout_marginRight="#dimen/margin_5dp"
android:layout_marginTop="#dimen/margin_7dp"
android:background="#drawable/rounded_bg"
>
<ImageView
android:id="#+id/llRowItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scaleType="fitXY"
android:gravity="bottom"/>
<TextView
android:id="#+id/item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black_light"
android:padding="#dimen/margin_5dp"
android:layout_gravity="bottom"
android:singleLine="true"
android:textColor="#color/white"
android:textSize="#dimen/font_size_16sp" />
</FrameLayout>
and inside adapter set color of text view, background, text or image of imageview whatever you want to set.
I'm new on Android, and I am having trouble with the following:
I have an image of an empty test-tube (png or bmp).
And I need to draw lines on top of it to make the illusion that its being filled in with liquid.
I really don't know how to proceed. I have read google's documentation about animations, but that didn't help much.
I'd appreciate if you guys could give me some suggestions of how it can be done, and point to some tutorials/documentation that can help me.
Thanks in advance.
UPDATE:
The tube is not retangular, the bottom is oval.
I think I need to make the liquid fall into the test tube, then paint line by line, starting from the bottom. And I have to check for the borders of the tube (right and lef black pixels).
Any ideas of how this can be done?
UPDATE 2:
Here is the tube image: http://i61.tinypic.com/2nw0eb9.png
You can use a SurfaceView to draw what ever you want:
Basicly, you lock the surface's canvas by
Canvas canvas = mSurfaceView.getHolder().lockCanvas();
Then, use the canvas's methods to draw on it. canvas.drawBitmap, canvas.drawLine etc..
When you're finished lock the canvas with mSurfaceView.getHolder().unlockCanvasAndPost(canvas); and you're done.
here's an example from a quick google search:
http://android-coding.blogspot.co.il/2011/05/drawing-on-surfaceview.html
Best way to do this would be with a custom View. Make a new class, that extends View, then in its onDraw method first draw the picture, then draw your animations. If you want to do it by hand, you can do something like this:
private class TestTubeView extends View {
private int top = 0;
private Paint myPaint;
public MyView(Context context) {
super(context);
myPaint = new Paint();
myPaint.setColor(getResources().getColor(R.color.blue));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//First draw your bitmap
canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.my_testtube), 0, 0, myPaint); //might need to use a different paint
//Then your "animation" as a static image, that has its position set from a variable, in this case "y" and "x"
canvas.drawRect(0, top, getWidth(), getHeight(), myPaint);
}
//In this method update your variables, that define the positions of your animated lines / bubbles
public boolean updateAnimation() {
top++;
invalidate();
//So it stops animationg
return top > getHeight();
}
}
Then in your layout you put it in like a normal view:
<com.example.TestTubeView
android:id="#+id/my_testtube"
android:layout_width="20dp"
android:layout_height="200dp" />
And then you animate it with a self-repeating Runnable:
final MyView testTube = findViewById(R.id.my_testtube);
final Handler myHandler = new Handler();
myHandler.post(new Runnable() {
#Override
public void run() {
if(testTube.updateAnimation()){
myHandler.postDelayed(this, 200);
}
}
});
You'll have to play around with sizes / heights and things like that though. Another way of doing this is with an ObjectAnimatior
Tube Drawable: (this is for test purposes. you will use your tube image)
tube.xml (drawable folder)
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="5dp" android:color="#ffccffff" />
<solid android:color="#00000000" />
</shape>
tube_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/orangeJuiceLinearLayout"
android:layout_width="140dp"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:orientation="vertical"
android:background="#fff58225">
</LinearLayout>
<ImageView
android:id="#+id/tubeImageView"
android:layout_width="140dp"
android:layout_height="220dp"
android:layout_gravity="center"
android:background="#drawable/tube"
android:onClick="fillJuice"
android:clickable="true" />
</FrameLayout>
</LinearLayout>
TubeAcivity.java
public class TubeActivity extends Activity {
LinearLayout orangeLL;
ImageView tubeIV;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tube_activity);
orangeLL = (LinearLayout)findViewById(R.id.orangeJuiceLinearLayout);
tubeIV = (ImageView)findViewById(R.id.tubeImageView);
}
public void fillJuice(View view) {
ValueAnimator va = ValueAnimator.ofInt(0, tubeIV.getMeasuredHeight());
va.setDuration(1500);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
Integer value = (Integer) animation.getAnimatedValue();
orangeLL.getLayoutParams().height = value.intValue();
orangeLL.requestLayout();
}
});
va.start();
}
}
Like many other posts listed here i struggle with radial gradient.
post 1, 2, 3...
I want 2 things:
set a gradient around a button that has a selector as background drawable to get an aura effect
adjust this gradient radius to have the same feel independently of the screen resolution/size.
What I have done so far: Solution 1
I tried to implement several solutions found around. I show here my 2 best tries. I set a drawable with a gradient to the background of an enclosing layout around my button. That fulfills the point 1)
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_background"
android:gravity="center"
android:padding="#dimen/padding_extra_large" >
<Button
android:id="#+id/snap_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_button" />
</FrameLayout>
This is my #drawable/custom_background
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<!-- Circular gradient -->
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:endColor="#ffdbdbdb"
android:gradientRadius="180"
android:startColor="#ff000000"
android:type="radial"
android:innerRadiusRatio="2"
/>
</shape>
</item>
What I have done so far: Solution 2
The effect is good but android:gradientRadius="180" has to be adjust for each screen. Post 1 provided some solution and I tried to customize a layout and a view but I got crashes. Some configuration did not fail (with background set to root layout but in this case onDraw was never called).
Customized view :
public class GradientView extends View {
Paint paint;
RadialGradient gradient;
int maxSize;
public GradientView(Context context) {
super(context);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
this.setWillNotDraw(false);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas) {
Dbg.e("RelativeLayoutSnapBook", " - onDraw !!!");
maxSize = Math.max(getHeight(), getWidth());
RadialGradient gradient = new RadialGradient(
getWidth()/2,
getHeight()/2,
maxSize,
new int[] {Color.RED, Color.BLACK},
new float[] {0, 1},
android.graphics.Shader.TileMode.CLAMP);
paint.setDither(true);
paint.setShader(gradient);
canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
}
}
and this view goes here :
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="#dimen/padding_extra_large" >
<com.snapcar.rider.widget.GradientView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/snap_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/snap_button" />
</FrameLayout>
These is the fail : error when inflating the fragment with stack and stack of intern error :
10-29 18:55:25.794: E/AndroidRuntime(11828): FATAL EXCEPTION: main
10-29 18:55:25.794: E/AndroidRuntime(11828): android.view.InflateException: Binary XML file line #33: Error inflating class com.xxx.widget.GradientView
10-29 18:55:25.794: E/AndroidRuntime(11828): Caused by: java.lang.ClassNotFoundException: com.xxx.rider.widget.GradientView in loader dalvik.system.PathClassLoader[/system/framework/com.google.android.maps.jar:/data/app/com.snapcar.rider-1.apk]
Can you help me to do that please ? Thanks a lot!
Edit : someone?
I solved it ! So much trouble :/ If you know Photoshop, you better go with it I think!
Thanks to this post that gave me the way to go : multiple-gradrient Only the first code extract was used but the whole post might interested you if you reached this post.
So I entirely define my gradient with code using a callback on global layout:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
Log.v(TAG, "- onCreateView Fragment");
root = inflater.inflate(R.layout.fragment_layout, null);
root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Log.e(TAG, "- On Layout Completed ! ");
final FrameLayout frame = (FrameLayout) root.findViewById(R.id.frame_layout_gradient);
ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
#Override
public Shader resize(int width, int height) {
Log.e(TAG, " - onGlobalLayout : getWidth = "+ frame.getWidth() +" - getHeight = "+ frame.getHeight() );
RadialGradient lg = new RadialGradient(frame.getWidth()/2, frame.getHeight()/2,
frame.getWidth()/2, Color.BLACK, Color.parseColor("#FFdbdbdb"), TileMode.CLAMP);
return lg;
}
};
PaintDrawable p = new PaintDrawable();
p.setShape(new OvalShape());
p.setShaderFactory(sf);
frame.setBackgroundDrawable((Drawable)p);
}
}
);
This trick Color.parseColor("#FFdbdbdb") is need because the retard constructor of RadialGradient cannot read correctly the reference to your R.color.the_gray_I_want
The OvalShape does a circle in my case because my frameLayout is square.
With this solution, you have a shadowing totally independent of screen characteristics.
![the result - unvarying from SG3 to HTC wildfire!1
I have this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.components.game.GameView
android:id="#+id/game_id"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<RelativeLayout
android:id="#+id/ChatLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:visibility="invisible"
android:focusable="true"
android:focusableInTouchMode="true" >
<Button
android:id="#+id/ChatCancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="X" />
<Button
android:id="#+id/ChatOkButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="OK" />
<EditText
android:id="#+id/ChatEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/ChatOkButton"
android:layout_toRightOf="#+id/ChatCancelButton"
android:maxLength="50"
android:singleLine="true" />
</RelativeLayout>
</RelativeLayout>
It's a RelativeLayout over a canvas. At start time it's invisible but when a user clicks a button the layout should become visible.
The problem is that it's not becoming visible. The layout is there but it's just not drawing it. If I press the position where the layout should appear it receives the event and opens the keyboard but it's not drawing the whole layout.
What is the problem?
If I set the RelativeLayout to visible at the beginning it works fine. it shows the layout and if I toggle between invisible and visible it works fine.
I made a workaround that almost always works.
I start the layout visible and than do that in the oncreate:
chatLayout.postDelayed(new Runnable() {
#Override
public void run() {
chatLayout.setVisibility(View.INVISIBLE);
}
}, 50);
But I don't like it and want to understand what's the problem.
The code:
It starts from a canvas button which send a message to a handler:
public void showInputLayout() {
Message.obtain(gameHandler, SHOW_INPUT_LAYOUT).sendToTarget();
}
In the handler:
case SHOW_INPUT_LAYOUT:
gameActivity.setChatVisibility(true);
break;
setChatVisibility:
public void setChatVisibility(boolean isVisible) {
int visible = isVisible ? View.VISIBLE : View.INVISIBLE;
chatLayout.setVisibility(visible);
if(isVisible){
chatEditText.setFocusable(true);
chatEditText.requestFocus();
}
}
Add a click listener to RelativeLayout and switch the visibility between GONE and VISIBLE. Try something like this:
int visibility = View.VISIBLE;
RelativeLayout layout = (RelativeLayout)findViewById(R.id.ChatLayout);
layout.setVisibility(visibility);
layout.setOnClickListener(new View.OnClickListener{
public void onClick(View v)
{
if(visibility == View.VISIBLE)
visibility = View.GONE;
else
visibility = View.VISIBLE;
v.setVisibility(visibility);
}
})
I ran into a similar issue recently, and for my case the problem was actually in the onDraw() method of the view underneath (should be com.components.game.GameView in your case). See if you can add calls to Canvas' getSaveCount(), save() and restoreToCount() in your drawing code, similar to this:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int saveCount = canvas.getSaveCount();
canvas.save();
// custom drawing code here ...
// use Region.Op.INTERSECT for adding clipping regions
canvas.restoreToCount(saveCount);
}
I believe what happened was that sometimes the framework set the clipping regions for the elements on top of our Canvas-drawing widget before our onDraw() method is called so we need to make sure that those regions are preserved.
Hope this helps.
I have one image view (assigned one bitmap to it) and another bitmap (Transparent) for painting. How it is possible to scroll this bitmap and background bitmap at the same time to be painted at different places.
From what I understood you are trying to draw on top of a image. If thats the case, create a custom view and get the image using BitmapFactory. After you get a bitmap object, use its copy method and use that copy for the canvas of the view.
Now you can override the onDraw method of a custom view and draw anything on top of it.
This view can be added to the layout, and scrolling will happen to the view.
Edit: Sample Code
Ok this is some code that might help you. I dont have the time to go through all your code.
But I tried to understand your requirement.
I am showing the code for an activity, its xml and custom view
Activity.java
public class DrawDemo extends Activity {
private FrameLayout container;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.draw_demo_layout);
container = (FrameLayout)findViewById(R.id.sc);
container.addView(new DrawView(this));
}
public void drawHandler(View target){
container.addView(new DrawView(this));
}
public void clearHandler(View target){
if(container.getChildCount() != 1){
container.removeViewAt(container.getChildCount()-1);
}
}
}
draw_demo_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<FrameLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="0dip"
android:id="#+id/sc" android:scrollbars="horizontal"
android:layout_weight="1.0">
<ImageView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/chips"/>
</FrameLayout>
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Draw"
android:onClick="drawHandler"/>
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Clear"
android:onClick="clearHandler"/>
</LinearLayout>
DrawView.java
public class DrawView extends View {
public DrawView(Context context) {
super(context);
setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.FILL_PARENT
,LinearLayout.LayoutParams.FILL_PARENT));
}
public DrawView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint p = new Paint();
p.setColor(Color.RED);
p.setStrokeWidth(5);
canvas.drawLine(50, 50, 100, 150, p);
canvas.drawLine(100, 150, 20, 50, p);
}
}
This activity has a framelayout which has a imageview as the base which holds the bitmap.
We add a custom draw view on top of it and do our drawings on it.When we want to clear the drawing we remove the drawview and add another one if we need to draw again.
This might not be the most efficient way. But should get you started.