I want a Button (or any View for that matter) to expand / stretch out sideways with an animation and I want it to happen at the click of another Button. For example, before Button 1 is pressed, the Button 2 shouldn't exist. But when Button 1 is pressed, the Button 2 should slowly come into existence with both its sides smoothly expanding to left and right to a certain size.
The following is a photo I drew to explain what I'm trying to achieve
I have looked at several tutorials, but most of them had sliding animation from one fixed end to the other. I have also tried scaling the X & Y of the button from value 0 to 1, but they just don't give the smooth animation effect (they just appear there out of nowhere) and the button doesn't expand / stretch sideways.
Any idea how this can be achieved?
Thank you for your time!!
the smooth animation effect ,you can use ObjectAnimtor.
// scale down button2 at the start of an activity
btn2.setScaleX(0.1f);
// on the click of button 1 let the button2 scale
btn1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
btn2.animate()
.scaleX(4.0f)
.setDuration(1000)
.setInterpolator(new OvershootInterpolator(2.0f)) //Will give bounce effect to the scaling
.start();
}
});
I think you can use this library for Button 2 animation.
In order to it happen at the click of another Button just call View.performClick() for Button 2 from Button 1 onClick() method.
first define 2 objects of Animation and Button then create a On Click listener for Button and write these codes in it:
//here i define :Button btnoff
//Animation animation1
//set on click listener in oncreate
btnOff.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
animation1 = new ScaleAnimation(0,2,1,1,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation1.setDuration(1200);
btnOff.startAnimation(animation1);}
});
you can learn more in this link.
Related
I my app I am fetch some text data from the server and showing this text data in the TextView. Here is something works fine. I am add an little arrow ImageView right to the TextView and this TextView is expandable so when TextView is more then 2 lines and if anyone click this TextView it expand and again click to shrink and I am also add an little arrow image right to the TextView (so user understant that it is an expandable text), here is everything is fine all code are works perfectly but now I want to remove this litter arrow image when the TextView is under 2 lines and when TextView is more then 2 lines it show. I want to tell you one more thing that I am also add a rotation in the arrow image so when the user click the text the little arrow image rotate the 180 degree and also text is expand and when user click the text second time arrow image again rotate to his previous position and text is shrink in 2 lines.
I want to remove this little arrow when the text is under 2 lies I do not want to remove the arrow image when text line more then 2, I'm guessing you understand.
I am new to the Java Code and I am learning is language so now I want to learn how to do this implementation in my app, I have add my code below so that you can understand batter.
textViewMyVideoTitle.setText(videoLists.get(0).getVideo_title());
my_title_layout_expand.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (isTextViewClicked) {
//This will shrink textview to 2 lines if it is expanded.
textViewMyVideoTitle.setText(videoLists.get(0).getVideo_title());
myTitleImageView.setRotation(imageView.getRotation() + 0);
myTitleImageView.setVisibility(View.VISIBLE);
textViewMyVideoTitle.setMaxLines(2);
isTextViewClicked = false;
} else {
//This will expand the textview if it is of 2 lines
textViewMyVideoTitle.setText(videoLists.get(0).getVideo_title());
myTitleImageView.setRotation(imageView.getRotation() - 180);
myTitleImageView.setVisibility(View.VISIBLE);
textViewMyVideoTitle.setMaxLines(Integer.MAX_VALUE);
isTextViewClicked = true;
}
}
});
So anybody can help me to achieve this code
As you say, your text doesnt have more than 2 lines, so your function wont work until the text has more than 2 lines.
You may try to use TextView's getLineCount() method to get this info and decide.
So I mean outside your onClickListener do something like this:
if (textViewMyVideoTitle.getLineCount() <= 2) {
my_title_layout_expand.setVisibility(View.VISIBLE);
} else {
my_title_layout_expand.setVisibility(View.GONE);
}
Or since it gives you the right number only after layout been 'rendered' you might need the following:
textViewMyVideoTitle.post(new Runnable() {
#Override
public void run() {
// Get the line count and put the if-else statement here
}});
So, I dont know if I am missing something but any way I work it or look into it I am unable to click on any buttons on the screens.
I made a dialog box with a button essentially as shown in the sample projects but when ever I try to click the button nothing happens at all.
I tried firing the onClick programmatically and it works fine, I also tested that the mouse inputs were being registered okay and they were.
I am at a total loss for any reason why this wouldnt work.
My class code is below:
public class Interactable : UICanvas
{
public void interact()
{
var skin = Skin.createDefaultSkin();
var table = stage.addElement(new Table());
table.center();
table.setFillParent(true);
table.add(talk(this.entity.name, "Stay a while and glisten", "Bye!"));
}
public Dialog talk(string title, string messageText, string closeButtonText)
{
var skin = Skin.createDefaultSkin();
var style = new WindowStyle
{
background = new PrimitiveDrawable(new Color(50, 50, 50)),
//Dims the background
stageBackground = new PrimitiveDrawable(new Color(0, 0, 0, 150))
};
var dialog = new Dialog(title, style);
dialog.getTitleLabel().getStyle().background = new PrimitiveDrawable(new Color(55, 100, 100));
dialog.pad(20, 5, 5, 5);
dialog.addText(messageText);
var exitButton = new TextButton(closeButtonText, skin);
exitButton.onClicked += butt => dialog.hide();
dialog.add(exitButton);
return dialog;
}
}
}
The interact() is called when running up to another entity and pressing "E".
Which causes everything to render properly but I can't click on the button.
Additionally:
When i try to view exitButton co-ordinates theyre always 0 no matter what although the dialog appears in the middle of the window
Monogame version: 3.7
Nez version: 0.9.2
UPDATE:
So it seems like buttons are clickable but their click box is not even nearly aligning with where the buttons are truely rendered.
UPDATE2:
It seems that the issue is that where the button is being rendered and where the actual click box is are not the same.
I have Zoomed in the camera by 2 and the camera also follows my little character around. The dialog will then appear at the X,Y in relation to the current camera view but the actual click box appears at the X,Y in terms of the TiledMap (which is not always on screen).
Not too sure how to work around this.
So! The issue I was having was I was using one renderer for the entire this (The RenderLayerRenderer.) What I have done to fix this is start another renderer (A ScreenSpaceRenderer). This allows me to use it to render UI and its XY variables do not change but are just static to the visual area.
So i ended up with two renders like so:
addRenderer(new RenderLayerRenderer(0,new int[] { (int)RenderLayerIds.First, (int)RenderLayerIds.Second, (int)RenderLayerIds.Third}));
addRenderer(new ScreenSpaceRenderer(1, new int[] { (int)RenderLayerIds.UILayer }));
Using the first for my game rendering and the bottom on just for HUD things!
i am moving my button by animation and button moving visually but when i press the button at new position i don't find it there.
final Animation animation1 = new TranslateAnimation(0,0,0,100);
animation1.setDuration(5000);
animation1.setFillAfter(true);
alphabet.startAnimation(animation1);
humanbody.startAnimation(animation1);
poem.startAnimation(animation1);
game.startAnimation(animation1);
When I press alphabet button,it took me to human-body activity And I press somewhere top of alphabet button it took me to alphabet activity
I'm still a beginner at this, but I think that using the animation class only animates the view's drawable state, not the its bound/touch area.
Try using this:
int t = 5000;
int y = 100;
alphabet.animate().setDuration(t).translateY(y).start();
humanbody.animate().setDuration(t).translateY(y).start();
poem.animate().setDuration(t).translateY(y).start();
game.animate().setDuration(t).translateY(y).start();
Java Android question
I have x, say 5, buttons in a row.
Each button has a different number value displayed on the button.
Button one is active, the rest are not- not clickable. They are greyed out.
To show Button 1 is active it fades up and down.
Once clicked the button pops up a message. The user Ok's that, this activates Button 2, and deactivates Button 1.
Then it happens through all buttons, one by one. The final button doesn't produce the pop up message.
My question...
I want to create a method that sets the first button as current and then once clicked sets the next as current, and so on.
Can anyone tell me how to do this? I don't need to know how to fade buttons etc, its literally how to set button as current, and within that method the user click sets the next button as current.
Many thanks in advance.
EDIT
OK, I've had a go...its not working, but it seems so close...
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_workout_one);
int[] buttonIds = new int[] {R.id.button_1,R.id.button_2,R.id.button_3,R.id.button_4,R.id.button_5};
setButton(buttonIds);
}
private void setButton(int[] buttId){
int isCurrent = 0;
while(isCurrent < 5) {
Button currentButton = (Button) findViewById(buttId[isCurrent]);
//TODO Make current button pulse
currentButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
v.clearAnimation();
v.setBackgroundColor(0xFF00FF00);
v.setFocusable(false);
v.setFocusableInTouchMode(false);
v.setClickable(false);
setTimer();
isCurrent++;
}
});
I know that the problem is the isCurrent++ is not accessible outside the onClick method. How do I right this? Am I close or is this a major funk up and do I have to rethink?
Just use a global variable which track the current button, and check this variable to identify the current active button for determining the action in onClickListener. To fade out a button try this code snippet
button.setClickable(false);
button.setBackgroundColor(Color.parseColor("#808080"));
You need something like this:
private int activeButton = 1;
private void buttonClickHandler(){
switch(activeButton++){
case : 1
button1.setEnabled(true):
// show popup, hide/animate for button 1
break;
case : 2
button2.setEnabled(true);
// same for button 2
case : 3
// same for button 3
case : 4
// same for button 4
}
I am currently trying to do a pseudo-circular reveal that will work on Android API levels below Lollipop. So, I have a floating action button (FAB) that I want (when pressed) to move vertically into a RelativeLayout (before clicked it sits outside of the RelativeLayout) and then scale by a certain factor so that it looks like a reveal.
I thought that using .setClipBounds() on the FAB would limit the scale animation in the area of the RelativeLayout but unfortunately the scale animation expands to take over the whole Activity area. This is the code in the click listener of the FAB:
circleFab.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
int cardHeight = relativeCardBuild.getHeight();
int cardWidth = relativeCardBuild.getWidth();
Log.i("RELAT H", "" + cardHeight);
Log.i("RELAT W", "" + cardWidth);
circleFab
.animate()
.translationY(-(cardHeight / 2))
.setInterpolator(new AccelerateDecelerateInterpolator())
.setDuration(200).start();
tickFab.animate().alpha(0.0f).setDuration(200).start();
circleFab.setClipBounds(new Rect(relativeCardBuild.getLeft(),
relativeCardBuild.getTop(), relativeCardBuild
.getRight(), relativeCardBuild.getBottom()));
Log.i("left ", relativeCardBuild.getLeft()+"");
Log.i("top ", relativeCardBuild.getTop()+"");
Log.i("right ", relativeCardBuild.getRight()+"");
Log.i("bottom ", relativeCardBuild.getBottom()+"");
circleFab.animate().setStartDelay(100).scaleX(20.0f)
.scaleY(20.0f).setDuration(500).start();
}
});
The logged values of the relativeCardBuild's left, top, right and bottom points are correct so I am indeed setting the clip bounds of the circleFab layout (it's a FrameLayout that contains an oval drawable and a bitmap drawable) correctly. Still, the scale animation takes up the whole activity screen.
Am I completely misunderstanding what .setClipBounds() does in this instance?