I wanna create a view with Arc Shape background.. my view has weight of .3.. which makes it fill one third of my layout..
I try to set its background to an arc shape (I want it to be half oval) like this:
ArcShape shape = new ArcShape(270, 180);
ShapeDrawable shapeDrawable = new ShapeDrawable(shape);
shapeDrawable.getPaint().setColor(getResources().getColor(R.color.primary_color));
leftPathView.setBackgroundDrawable(shapeDrawable);
this generates the shape I need but it doesn't fill the space of my view.. It only takes half of it.. But when I create a completed circle it takes all the space..
Any Idea ?
After a bit of research I found this to be the best answer. Especially if you want to do this in your onCreate function, bacause when the onCreate function hasn't ended the layout does not yet have a width and height (more info here).
final LinearLayout leftPathView= (LinearLayout) findViewById(R.id.left_path_view);
layout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
leftPathView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
leftPathView.setX(-layout.getWidth());
leftPathView.getLayoutParams().width = layout.getWidth() * 2;
leftPathView.requestLayout();
}
});
ArcShape shape = new ArcShape(270, 180);
ShapeDrawable shapeDrawable = new ShapeDrawable(shape);
shapeDrawable.getPaint().setColor(getResources().getColor(R.color.primary_color));
layout.setBackground(shapeDrawable);
This code does make your View go out of the bounds of your screen, so when adding other items to this View you need to take that into account. A solution for that could be to put the View in a RelativeLayout and put another view on top of the leftPathView.
Related
How to can I set a view at a specific point on the screen programmatically? I want use a Point like x and y. I don't want it to translateX or translateY. I want for example to set a view to the Point x: 0 and y: 0 that means it needs to be at the top left of the screen. How can I achieve that?
I was trying this but the view translates X and Y what I don't want.
val layoutInflater = LayoutInflater.from(context)
val inflatedView: View = layoutInflater.inflate(R.layout.fragment_change_font_size_right, null, false)
inflatedView.popup_xml_view.x = 0f
inflatedView.popup_xml_view.y = 0f
Android had a layout that would support this requirements, but I think that it was pretty bad in regards to performance and it was deprecated (I hope that I am not wrong making this affirmation). However, the same behaviour can be implemented using a FrameLayout and add the views in that layout.
To add a view at a particular position, you create its layout params to set a width and a height, then set the margins which will position your view as absolute coordinates (the dimension is in pixels):
val imageView = ImageView(this)
imageView.setBackgroundResource(android.R.color.holo_red_dark)
imageView.layoutParams = FrameLayout.LayoutParams(width, height).apply {
setMargins(left, top, right, bottom)
}
root.addView(imageView)
For a height/width of 200 and margins of (100, 100, 0, 0), it will look something like the image below (run on an emulated Pixel 3).
NOTE: Here is a talk where they talk about this approach to emulate the AbsoulteLayout and why they "killed" it.
I found this to work:
ViewGroup.MarginLayoutParams margins = (ViewGroup.MarginLayoutParams) layout.getLayoutParams();
margins.topMargin = 100;
margins.leftMargin = 200;
Alternatively use animate:
view.animate().x(x).y(y).setDuration(0).start();
I have a layout with 2*2/3*3/4*4... ImageView. and some of them randomly colored like this:
For ranodomly colored one of Imageview, I have Use this code:
Random random = new Random();
id = array_image1.get(random.nextInt(array_image1.size()));
ObjectAnimator animator = ObjectAnimator.ofInt(findViewById(id), "backgroundResource", R.drawable.original_img, R.drawable.org_state).setDuration(1500);
animator.setStartDelay(1500);
animator.setEvaluator(new ArgbEvaluator());
animator.start();
And I'm handling some click event on colored ImageView like this:
for (int i = 0; i < array_image11.size(); ++i) {
final int btn = array_image11.get(i);
findViewById(btn).setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if ((findViewById(id)).equals(findViewById(btn)))
//Inform the user the button has been clicked
{
//forward
findViewById(id).setBackgroundResource(R.drawable.original_img);
}else {
//backward
Toast.makeText(StaticSpatial.this, "wrong", Toast.LENGTH_SHORT).show();
}
});
}
There is no problem till above.
But When I'm adding a random rotate animation code like this:
int n;
int[] a=new int[]{1,2};
final Random rnd = new Random();
n=a[rnd.nextInt(a.length)];
if(n==1)
{
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(l4, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000); // miliseconds
rotateAnimator.start();n);
}
else
{
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(l4, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000); // miliseconds
rotateAnimator.start();
}
After rotation image look like this(i.e. colored Imageview chage it's position):
After adding this rotate animation code my clickEvent not get correct ImageView id.
i.e. when imageview change it's position,their id should be go with that positon. but imageview id ramains at same postion.
So How to get required ImageviewId after rotation
Update:
After using azizbekian's answer(now using animator instead of animation) I found correct image-view id , but only first time.
i.e. first time when Activity starts it works good but when I'm going to a new view(say 3*3) and return back again to this view(2*2),it returns wrong image-view id till Activity restarts again.see my updated code for ref.
Explanation of working and issue:
I have already said that there are many matix of Imageview such as 2*2/3*3/4*4..... So when we start Application first load 2*2 matrix of imageview and when we click the odd colored imageview it goes to 3*3 matrix but when we click other than odd colored imageviewthen it goes to next level say 3*3.So when app start first time when I click on odd colored imageview it goes to 3*3 matrix but when return again on 2*2 after clicking other than odd colored imageview.and then again when we click on colored imageview it not get correct image id. and if any other query plz ask?
How to resolve this issue ?
When ImageView changes it's position, their id should go with that position. But ImageView id remains at same position.
That's because you are using Animation, which in fact doesn't change your View's position. What is does it makes an illusion of animation, so it only changes that view's matrix, but doesn't perform layout changes to the view.
Use Animator API instead of Animation.
Update
Given this animation xml:
<set xmlns:android="schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000" />
</set>
This can be substituted with following:
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(yourView, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000);
rotateAnimator.start();
Update:
Just set rotation zero at every load of view (or layout) like this:
mylayoutname.setRotation(0);
Because after rotation it doesn't go to zero degree automatically until activity stops.
Maybe instead of using rotation you can store the Ids of the ImageViews in a List or Array and the Id of the currently colored ImageView in a separated variable, and when you have to rotate instead you can simply select one random ImageView from the List/Array (excluding the currently colored one), remove the color from the previous one and color the new one.
By the way, when you have 3x3, 5x5, 7x7 etc. layouts is the middle ImageView never colored? 'Cause in those cases a rotation wouldn't change anything (visually, at least). I mean, a rotation works for choosing a random square in a layout of 2x2 squares, but not in any other case. Do you need to choose the squares randomly or do they need to always be chosen by a rotation? (I hope what I mean is clear...)
I want to apply a simple rotationX animation when a group expands/collapses on an ExpandableListView. The code below works in first two expands but after two/three/five times does not play the defined animation. The strange thing is that the first time that I expand /collapse it works perfect!
ExpandableListview exp = new ExpandableListview(context);
// set adapter code
LayoutTransition transition = new LayoutTransition();
Animator appearAnim = ObjectAnimator.ofFloat(null, "rotationX", 90f,0f).setDuration(transition.getDuration(LayoutTransition.APPEARING));
transition.setAnimator(LayoutTransition.APPEARING, appearAnim); // I also tried first argument equals DISSAPEARING, CHANGING, etc
exp.setLayoutTransition(transition);
Any idea?? Is this approach totally wrong???
I have to notice at this point that this is not a duplicate! I am looking for a solution that will be approached with LayoutTransition class / methods.
Here is some awesome sample which may help you to do animation on expands/collapses on an ExpandableListView, In the android-flip library that uses OpenGL for rendering animation ,if the minimum supported Android version for the app was 4.0 we can use standard Android SDK methods instead of OpenGL: View.setRotationX(), View.setScaleX(), etc. When hardware acceleration is enabled (and it is enabled by default if your target API level is >=14), these methods work quite efficiently using the device GPU.
You can use this FoldableLayout to implement folding animation for expands/collapses on an ExpandableListView.
Layout implementation in FoldableLayout:
The first element to design was a layout that can fold in half. Our
approach was rather bold: the main layout (FoldableItemLayout) simply
contains a specialized layout (BaseLayout). During the animation, the
BaseLayout writes its contents to cache which is a specially created
Bitmap object based on the size of the original layout. view plaincopy
to clipboardprint?
class FoldableItemLayout extends FrameLayout {
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
Bitmap cacheBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mBaseLayout.setCacheCanvas(new Canvas(cacheBitmap));
}
}
class BaseLayout extends FrameLayout {
private Canvas mCacheCanvas;
private void setCacheCanvas(Canvas cacheCanvas) {
mCacheCanvas = cacheCanvas;
}
#Override
public void draw(Canvas canvas) {
mCacheCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
super.draw(mCacheCanvas);
}
}
In addition, we needed to use two extra Views (PartView) – for the
upper and lower image halves – which would display the corresponding
data in cache that represents the upper and lower halves of the image
(Bitmap). Both Views encompass the entire area of the main layout, but
display only the required parts. To achieve this effect, we calculated
the Bitmap limits – and in the onDraw() method we made Canvas draw the
required part via the drawBitmap (Bitmap bitmap, Rect src, RectF dst,
Paint paint) method.
Then we managed to rotate these extra Views by setting the
setRotationX() method to the corresponding angle, achieving
independent rotation of the lower and upper parts of the images. To
pull this off, we add a new parameter for the FoldableItemLayout –
with the name FoldRotation.
Source: How to Make a Paper Folding Animation in Android?
I am currently working on custom animation between switching pages in ViewPager. When I slide to the left, View is moving to the left and from below of it new View is coming to the front. I would like to make the view, that moves to the left (that I dispose) to shrink like on the folowing images:
On the second and third image I didn't picture new View coming to the front, but I think it wasn't necessary. Do you have any idea how can I modify the code? I would like to change height of TableLayout, RelativeLayout and FrameLayout and keep the height of both TextViews. Also I would have to change X-position of the whole View. I am looking forward for your creative answers (code). Below I attach my code for the animation.
import android.view.View;
import android.widget.RelativeLayout;
import android.annotation.SuppressLint;
import android.support.v4.view.ViewPager.PageTransformer;
public class DepthPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.75f;
#SuppressLint("NewApi")
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
//float scaleFactor = (1 - Math.abs(position));
//WHAT TO PUT HERE TO ARCHIVE MY GOAL??
//This is how I can get particular layouts:
// RelativeLayout relativeLayout = (RelativeLayout) view.findViewById(R.id.fragment_object_canvas_RelativeLayout1);
//relativeLayout.setScaleX(scaleFactor);
//relativeLayout.setScaleY(scaleFactor);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
//view.setRotation(1 - (position*360));
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
UPDATE:
I can manipulate with height of whole View (for now I can do only this) with the following code:
LinearLayout relativeLayout = (LinearLayout) view.findViewById(R.id.fragment_object_canvas_linearLayout1);
relativeLayout.setLayoutParams(new FrameLayout.LayoutParams(relativeLayout.getWidth(), NEW_HEIGHT_HERE)));
However, I am not sure what should I put into NEW_HEIGHT_HERE variable to make it work corectly...
try to work with a position float variable.
Get the height of your layout and...:
relativeLayout.setLayoutParams(....,position*height+height)
You seem pretty insistent on people posting original code, but why reinvent the wheel? This library has a ton of great animations for a ViewPager, including one very similar to what you seem to be requesting.
https://github.com/jfeinstein10/JazzyViewPager
JazzyViewPager -
An easy to use ViewPager that adds an awesome set of custom swiping animations. Just change your ViewPagers to JazzyViewPagers and you're good to go!
public enum TransitionEffect {
Standard,
Tablet,
CubeIn,
CubeOut,
Flip,
Stack,
ZoomIn,
ZoomOut,
RotateUp,
RotateDown,
Accordion
}
You can select your animation by calling
private JazzyViewPager mJazzy;
/* ... */
mJazzy.setTransitionEffect(TransitionEffect.*);
Please bear with me if this isn't clear, this is my first posting here.
I'm drawing a couple of lines on a canvas and trying to translate the canvas to centre the lines on the screen. The trouble is, I have an actionbar (using actionbarsherlock) which I want to exclude from the translation i.e. I want the top of the view to be under the action bar.
As it is, the data is centred vertically on the whole screen height, but I want it to be centred vertically only on the visible part of the canvas under the action bar.
Any ideas of the best way to achieve this?
#Override
protected void onDraw(Canvas canvas) {
Paint paint = mPaint;
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
int centrew = canvas.getWidth()/2;
int centreh = canvas.getHeight()/2;
canvas.translate(centrew, centreh);
canvas.drawLine(0, -5, 0, 5, mPaint);
canvas.drawLine(5, 0, -5, 0, mPaint);
}
if you know the exact size of the bar, you could apply it it to the overall canvas height to increase the shift:
int maxV = canvas.getHeight() + barHeight;
int centreh = maxV/2;
I am assuming, the bar is on top, covering apart of the canvas, so the shift (from the top left corner) has to be greater. If the bar is on the bottom, the shift should be reduced:
int maxV = canvas.getHeight() - barHeight;
int centreh = maxV/2;
EDIT: If the bar has a different size in pixels on different devices, you have to hack a bit to make it work. You can safely make assuptions about the bar and revise them in case they don't hold. You could assume a certain ratio reserved for the bar and adapt the absolute pixel count accordingly (the oneliner is rather for illustration):
int maxV = Math.round(canvas.getHeight()*(1f + barRatio));
You can further adapt the ratio depending on the aspect ratio of the screen to make it work even better.
Unfortunately there is no really clean solution as you cannot read the current layout and extract sizes.
The solution I used was as described here :
http://developer.android.com/resources/samples/HoneycombGallery/src/com/example/android/hcgallery/TitlesFragment.html
Basically my activity has the following layout listener defined:
ViewTreeObserver.OnGlobalLayoutListener layoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
mmv.setAbShift(MunroBag.this.actionBar.getHeight());
}
};
Then the view class has the following method defined:
public void setAbShift(int shift)
{
abShift = shift;
this.invalidate();
}
So onDraw gets called and the shift is applied to the view depending on the actionBar height.