Adding a view to a constraint layout through code - java

so my screen has an image view which I dragged down the screen with animation using this code:
float bottomOfScreen = context.getResources().getDisplayMetrics()
.heightPixels - (myImageView.getHeight() * 2);
myImageView.animate()
.translationY(bottomOfScreen)
.setDuration(durationOfFalling);
so basically, I had an image and it was dragged down and out of the screen and now my image has disappeared but I need it to come back to the same place that it was before I dragged it down (at the top of the screen) so I can drag it down again whenever I want. Do you have any solutions as to how I can make the image appear again at the top of the screen so I can re-use it?
I also tried adding it through ConstraintLayout and then constraintLayout.addView(myImageView) like that (and probably did it wrong):
ConstraintLayout ly = findViewById(R.id.ly);
noteiv1.setLayoutParams(new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.WRAP_CONTENT));
noteiv1.setId(View.generateViewId());
ly.addView(noteiv1);
ConstraintSet set = new ConstraintSet();
set.clone(ly);
set.connect(noteiv1.getId(), ConstraintSet.LEFT, ly.getId(), ConstraintSet.LEFT);
set.connect(noteiv1.getId(), ConstraintSet.RIGHT, ly.getId(), ConstraintSet.RIGHT);
set.connect(noteiv1.getId(), ConstraintSet.TOP, ly.getId(), ConstraintSet.TOP);
set.connect(noteiv1.getId(), ConstraintSet.BOTTOM, ly.getId(), ConstraintSet.BOTTOM);
set.applyTo(ly);
*noteiv1 is the image view I need to re-use
I'd be glad for some help :)

This has already been asked and answered.
Here's an answer from there.
I think you should clone the layout after adding your ImageView.
ConstraintLayout parentLayout = (ConstraintLayout)findViewById(R.id.mainConstraint);
ConstraintSet set = new ConstraintSet();
ImageView childView = new ImageView(this);
// set view id, else getId() returns -1
childView.setId(View.generateViewId());
layout.addView(childView, 0);
set.clone(parentLayout);
// connect start and end point of views, in this case top of child to top of parent.
set.connect(childView.getId(), ConstraintSet.TOP, parentLayout.getId(), ConstraintSet.TOP, 60);
// ... similarly add other constraints
set.applyTo(parentLayout);

Related

Android: Programatically rotating the text inside a button

{Visual Aid}
I am making an application with a drag and drop menu. User can fill out three edit texts (width, height, and rotation) then press on "add new" button and a new button with the specified values is created at the origin. However if the rotation attribute is anything other than 0 say 45 degrees, then it rotates the whole button along with the text. I would like for the text to remain horizontal with no rotation. I have looked up but the post all refer back to the rotation attribute which i am already using.
onViewCreated()
tvAddTable = view.findViewById(R.id.btn_add_table);
tvWidth = view.findViewById(R.id.et_width);
tvHeight = view.findViewById(R.id.et_height);
tvRotation = view.findViewById(R.id.et_rotation);
mSize = new Point();
mDisplay = Objects.requireNonNull(getActivity()).getWindowManager().getDefaultDisplay();
mDisplay.getSize(mSize);
final View.OnTouchListener touchListener = this;
tvAddTable.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {[enter image description here][1]
ConstraintLayout layout = view.findViewById(R.id.floor_layout);
//set the properties for button
Button btnTag = new Button(getContext());
btnTag.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
if(ids.isEmpty()){
ids.add(0);
}else{
ids.add(ids.size());
}
btnTag.setId(ids.size());
btnTag.setText(Integer.toString(btnTag.getId()));
//add button to the layout
layout.addView(btnTag);
btnTag.setLayoutParams(new ConstraintLayout.LayoutParams(Integer.parseInt(tvWidth.getText().toString()), Integer.parseInt(tvHeight.getText().toString())));
btnTag.setRotation(Integer.parseInt(tvRotation.getText().toString()));
btnTag.setOnTouchListener(touchListener);
}
});
The rotation attribute rotates the entire view, not just the text or just the background. That's by design. There is no text or background rotation attribute. If you need that, make a custom view.
If you only want the background to rotate, you can probably do it by setting the background drawable to a RotateDrawable that wraps the background you want.

How do I programmatically center a view on the layout?

I am makig some game to learn more about Java and AStudio. I need to center one view onto another view. Boths views are ConstraintLayouts. I've already tried MATCH_PARENT or WRAP_CONTENT along with changing the size but the smaller view will always wrap to 0,0 position in parent view. If I use "setX/setY" on the child view, will it work on the parent view or the main view Layout? Anyways I know its an android view attribute to center the child somehow using gravity or smth but I couldn't find the correct answer anywhere.
public class GameField extends ConstraintLayout {...
public class GameUnit extends ConstraintLayout {...
...
...
private void deployClick(){
int sizeUnit = 960/boardSizeX;
int x = 4;
for (int i =0; i<x;i++){
int randCounter = randomNum.nextInt(counterFields);
counterUnits++;
gameUnit[counterUnits] = new GameUnit(this,randomNum.nextInt(4),randomNum.nextInt(10),randomNum.nextInt(10));
gameUnit[counterUnits].setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
gameUnit[counterUnits].setLayoutParams(new android.view.ViewGroup.LayoutParams(sizeUnit-5,sizeUnit-5));
gameField[randCounter].addView(gameUnit[counterUnits]);
gameField[randCounter].setUnitAdded(true);
deployClicked = true;
}
}
Rule of thumb for LayoutParams: they are named after the parent layout. So for the inner custom View you need to set ConstraintLayout.LayoutParams:
ConstraintLayout.LayoutParams lp = new ConstraintLayout.LayoutParams(sizeUnit - 5, sizeUnit - 5);
gameUnit[counterUnits].setLayoutParams(lp);
gameField[randCounter].addView(gameUnit[counterUnits]);
Since your outer custom View extends from ConstraintLayout, you can use a ConstraintSet to position the inner View correctly. They use View id's so you need to give your dynamically added Views an id by calling setId(View.generateViewId()) on them. Then you can proceed as follows:
int unitId = gameUnit[counterUnits].getId();
int fieldId = gameField[randCounter].getId();
ConstraintSet cs = new ConstraintSet();
cs.connect(unitId, ConstraintSet.START, fieldId, ConstraintSet.START)
cs.connect(unitId, ConstraintSet.END, fieldId, ConstraintSet.END)
cs.connect(unitId, ConstraintSet.TOP, fieldId, ConstraintSet.TOP)
cs.connect(unitId, ConstraintSet.BOTTOM, fieldId, ConstraintSet.BOTTOM)
cs.constrainHeight(unit.id, lp.height);
cs.constrainWidth(unit.id, lp.width);
First add the unit View to the field View, then call
cs.applyTo(gameField[randCounter])
gameField[randCounter].setUnitAdded(true)
deployClicked = true

Android: Ripple Background Programmatically

I am currently creating an Android app where someone can input their name, press a button, and then it just outputs their name back to them.
One effect that I would like to achieve with this is an effect where, after they push the button, the input and button will vanish (complete this bit so far), and then the background colour of the MainActivity's view will do a ripple (from the centre) with a new colour, eventually changing the full background colour.
How would I go about doing this programatically, since I am only able to find tutorials on adding ripples to buttons when pushed?
EDIT:
I tested this by making a small app
First of all hide the view you want to reveal in this animation.
The view can be from the same layout and in xml its visibility should be invisible so that the animation will reveal it.
You can set the view height and width to match parent if you want to create a full screen animation...
Take your original and reveal view both in frame layout
In my case,I have used this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:text="Hello World!"
android:layout_width="wrap_content"
android:textSize="20sp"
android:layout_height="wrap_content" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:id="#+id/revealiew"
android:visibility="invisible"
>
</FrameLayout>
then in your activity on button click or some event do this:
fab.setOnClickListener(new View.OnClickListener() {
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
#Override
public void onClick(View view) {
// previously invisible view
View myView = findViewById(R.id.revealview);
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
//Interpolator for giving effect to animation
anim.setInterpolator(new AccelerateDecelerateInterpolator());
// Duration of the animation
anim.setDuration(1000);
// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();
}
});
}
You can take detailed look at official documentation here:
http://developer.android.com/training/material/animations.html
What you are describing is a reveal effect on the background.
From the official doc you can find ready to use examples:
1) Here is how to reveal a previously invisible view using reveal effect:
// previously invisible view
View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();
2) Here is how to hide a previously visible view using the reveal effect:
// previously visible view
final View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();
// create the animation (the final radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
}
});
// start the animation
anim.start();
In you app, you can use a colored background layer (invisible at the beginning) and then use the reveal effect on it.
check this site, "Android Ripple Background" is a library to do it and the min sdk is 11 (Android 3.0 Honeycomb) https://android-arsenal.com/details/1/1107

How would I do this Fragment animation on API level 9 with nineoldandroids?

I am trying to execute an animation in which I have two fragments stacked on top of each other.
The top fragment is a details fragment.
the bottom fragment is a menu list view fragment.
I did this by creating two overlapping framelayouts in the activity layout. I want to be able to do an animation in which the background fragment would be revealed in a fashion similar to a door opening leaving only 20 percent of the edge of the top fragment in view.
I tried doing this animation with the standard view animation library available to API 9 but it seemed that only the pixels were moved and but the touch mapping still corresponded to the top fragment and the bottom menu fragment could not be accessed.
So I downloaded the nineoldandroids library and tried to user AnimatorSet with ObjectAnimators to do the animation... except this time when the fragment is animated away it reveals only a gray background rather than the fragment in the back like before.
This is a code snippet on how I tried to implement a simple translation to reveal the background fragment
private void animateFragmentOut() {
activeFragment = (Fragment)getSupportFragmentManager().findFragmentById(R.id.nav_item_fragment_container);
View myView = activeFragment.getView();
AnimatorSet set = new AnimatorSet();
set.playTogether(
ObjectAnimator.ofFloat(myView, "translationX", 0, 230)
);
set.setDuration(500).start();
}
Why is the background fragment not shown when I use this animation?
How do I use nineoldandroids to reveal the background fragment properly?
I ended up solving this problem by using a listener to inflate the background view right at the start of the animation using the following code
private void animateFragmentOut() {
activeFragment = (Fragment)getSupportFragmentManager().findFragmentById(R.id.nav_item_fragment_container);
View myView = activeFragment.getView();
Animator.AnimatorListener listener = new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
launchNavigationFragment();
}
#Override
public void onAnimationEnd(Animator animation) {
}
};
ObjectAnimator rotateY = ObjectAnimator.ofFloat(myView,"rotationY",-15f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(myView,"scaleX",0.8f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(myView,"scaleY", 0.8f);
ObjectAnimator translateX = ObjectAnimator.ofFloat(myView,"translationX",400f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(rotateY,scaleX,scaleY,translateX);
animatorSet.addListener(listener);
animatorSet.setDuration(700);
animatorSet.start();
}
Saldy despite this working great on API levels 11> and up on my API 9 device I am still having the same problem I had with the standard animation library. The view pixels translate but the touch areas stay mapped in the same place. So I cannot interact with the background navigation menu fragment.

How to draw a view on top of everything?

I want to make an app that can create notification on the screen on top of anything that is currently being displayed. Something like the Go SMS message popup or something like the ChatHead in the following picture:
It would be even better if it is possible to draw it dynamically including touch events.What is the conventional or standard way to do this?
Example:
Like an Icon that can be clicked or dragged no matter whether you are on home screen or app drawer or other apps.Pay attention to the circular icons near the edges of the screen in the picture posted. You can drag them anywhere in any app.
What you are looking for is System Alert Window.
There's a library called StandOut! which will assist you in creating such apps.
Here is how things like Toast and dialog windows work:
In the case where just adding or bringing to front does not work, say when you are having a service add its own view to another client activity or application (FaceUnlock does this), or you cannot depend on hierarchies, you need to use the window manager and a window token to do the trick. You can then create layouts and take advantage of animations and hardware acceleration as before.
WindowManager windowManager = (WindowManager) getBaseContext().getSystemService(Context.WINDOW_SERVICE);
WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams(WindowManager.LayoutParams.FIRST_SUB_WINDOW);
layoutParams.width = 300;
layoutParams.height = 300;
layoutParams.format = PixelFormat.RGBA_8888;
layoutParams.flags =
WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN
| WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED;
layoutParams.token = getWindow().getDecorView().getRootView().getWindowToken();
//Feel free to inflate here
mTestView = new View(this);
mTestView.setBackgroundColor(Color.RED);
//Must wire up back button, otherwise it's not sent to our activity
mTestView.setOnKeyListener(new View.OnKeyListener() {
#Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
onBackPressed();
}
return true;
}
});
windowManager.addView(mTestView, layoutParams);
Then be sure to remove the view onDestroy (or onPause) or you will crash
if (mTestView != null) {
WindowManager windowManager = (WindowManager) getBaseContext().getSystemService(Context.WINDOW_SERVICE);
if (mTestView.isShown()) {
windowManager.removeViewImmediate(mTestView);
}
}
You don't need a new activity to do this. All you need to do is to add another view into your existing activity and bring it to the front, and draw/write the things that you want into that view.
If you want to do special things with this extra view, you could create your own view class
class DrawOnTop extends View {
public DrawOnTop(Context activity) {
super(activity);
}
#Override
protected void onDraw(Canvas canvas) {
// put your drawing commands here
}
}
and then you do something like
DrawOnTop mDraw = new DrawOnTop(this);
addContentView(mDraw, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
mDraw.bringToFront();
Then to force it to draw, you need to use mDraw.invalidate();
You could have the parent of your whole layout as RelativeLayout. The first child being the "root" of your main layout. Anything after that can be considered an overlay which is placeable to your whims.
Example:
<RelativeLayout>
<LinearLayout>
... Main Layout here ...
</LinearLayout>
<TextView left="20dip" top="20dip" text="Overlay" alpha="0.7" />
</RelativeLayout>
The best way is to start a service with your application.
Create an ImageView.
Set the LayoutParams of the Image View.
Add the view along with the params to the window manager when the service is created.
ALL SET
Your Image sticks to your window (At any screen over all apps), till you application is closed.
You can even add onclicklisteners and ontouchlisteners to the imageview.
Eg. OnClick listeners to perform some actions and Ontouchlisteners move the image along the screen.

Categories