How to make buttons change with animation - android

i should to do like at the picture.Buttons have to change with animations. It must be like circle horizontal scroll view.When i press button "3" - "1" - moved to position "2", "2" moved with animation to position "3". Please give me some ideas, how can i perform it?

Try this..
STEP 1:
Create 4 Button's dummy_btn,btn_1,btn_2,btn_3 in xml like below
<?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:layout_gravity="center"
android:gravity="center" >
<Button
android:id="#+id/dummy_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Button"
android:visibility="gone" />
<Button
android:id="#+id/btn_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/btn_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/btn_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
STEP 2:
Declear the Button's in Global variables like below
Button btn_1,btn_2,btn_3,dummy_btn;
Initialize Button's like below
btn_1 = (Button) findViewById(R.id.btn_1);
btn_2 = (Button) findViewById(R.id.btn_2);
btn_3 = (Button) findViewById(R.id.btn_3);
dummy_btn = (Button) findViewById(R.id.dummy_btn);
STEP 3:
btn_1 ClickListener like below
btn_1.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// Get all currently displaying text of Button
final String btn_1_string = btn_1.getText().toString().trim();
final String btn_2_string = btn_2.getText().toString().trim();
final String btn_3_string = btn_3.getText().toString().trim();
// First Button Left to Right Animation
TranslateAnimation anim = new TranslateAnimation(0f, 200f, 0f, 0f);
anim.setDuration(2000);
btn_1.startAnimation(anim);
// Second Button Left to Right Animation
anim = new TranslateAnimation(0f, 200f, 0f, 0f);
anim.setDuration(2000);
btn_2.startAnimation(anim);
// Third Button Left to Right Animation
anim = new TranslateAnimation(0f, 200f, 0f, 0f);
anim.setDuration(2000);
btn_3.startAnimation(anim);
btn_3.setVisibility(View.INVISIBLE);
dummy_btn.setText(btn_3.getText().toString().trim());
// Dummy Button Left to Right Animation for like marquee animation
dummy_btn.setVisibility(View.VISIBLE);
anim = new TranslateAnimation(-200f, 0f, 0f, 0f);
anim.setDuration(2000);
dummy_btn.startAnimation(anim);
// After 2000 Millis displaying text
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
btn_2.setText(btn_1_string);
btn_3.setText(btn_2_string);
btn_1.setText(btn_3_string);
btn_3.setVisibility(View.VISIBLE);
dummy_btn.setVisibility(View.GONE);
}
}, 2000);
}
});
and the remaining two Button ClickListener
btn_2.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
btn_1.performClick();
}
});
btn_3.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
btn_1.performClick();
}
});

Related

Count Down app Animation

I am creating Countdown app. i finished all codes and its all working pretty fine but i am new to android animation. I need to apply below animation to my app. i tried use slide in/out but it is not working good i also tried few other animation but nothing is same as compared below animation.
once play button pressed a timer starts then once again pressed a pause button comes and a textView under pause icon which we have current countdown time. if again pressed the count start again. I am only looking for animation all other codes i have already done.
i have a ImageButton which shows icon each timer user press play/pause and TextView which shows countdown timer and another TextView which shows current timer when user press pause button.Is there anyway i can implement this animation to app?
So Any help would be appropriated as i am new to android animations. Thanks!
Here is xml:
<FrameLayout
android:layout_width="228dp"
android:layout_height="228dp"
android:layout_marginTop="7dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/circlea"
android:visibility="visible"
android:background="#drawable/circle">
<ImageButton
android:layout_width="142dp"
android:layout_height="142dp"
android:layout_marginTop="43dp"
android:layout_marginBottom="43dp"
android:layout_marginLeft="43dp"
android:id="#+id/play"
android:background="#000"
android:layout_marginRight="43dp"
android:src="#mipmap/icon"
android:visibility="visible" />
<TextView
android:layout_width="134dp"
android:layout_height="73dp"
android:text=""
android:textColor="#FFFFFF"
android:textSize="55sp"
android:layout_marginTop="78dp"
android:layout_marginStart="48dp"
android:id="#+id/countText"
android:fontFamily="sans-serif-light"
android:background="#000"
android:visibility="invisible" />
<TextView
android:layout_marginTop="180dp"
android:layout_marginLeft="90dp"
android:text=""
android:id="#+id/pusetext"
android:textSize="24sp"
android:textColor="#1EFFFFFF"
android:layout_width="61dp"
android:layout_height="32dp" />
</FrameLayout>
java:
//some code
super.onCreate(savedInstanceState);
play=(ImageButton)findViewById(R.id.play);
pausetext=(TextView) findViewById(R.id.pusetext);
CountText=(TextView)findViewById(R.id.countText);
play.OnClickListener startListener = new View.OnClickListener() {//first public void onClick( View v ){
play.setVisibility(View.INVISIBLE);
CountText.setVisibility(View.VISIBLE);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
CountText.setOnClickListener
public void onClick( View v ){//pause click
play.setVisibility(View.VISIBLE);
ObjectAnimator slideDownAnimPlayButton = ObjectAnimator.ofFloat(play, "translationY", -(play.getTop() + play.getHeight()), 0);
ObjectAnimator scaleDownAnimTextViewX = ObjectAnimator.ofFloat(CountText, "scaleX", 1f, 0.5f);
ObjectAnimator scaleDownAnimTextViewY = ObjectAnimator.ofFloat(CountText, "scaleY", 1f, 0.5f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(1000);
animatorSet.playTogether(slideDownAnimPlayButton,scaleDownAnimTextViewX,scaleDownAnimTextViewY);
animatorSet.start();
}
play.setOnClickListener
public void onClick(View view) {resume click
play.setVisibility(View.INVISIBLE);
CountText.setVisibility(View.VISIBLE);
}
CountText.setOnClickListener(new View.OnClickListener() //pause click agine
#Override
public void onClick(View view) {
//some code
You can use the HTextView library to achieve the first part of the animations(showing the text).
Then, use ObjectAnimators to slide and scale the text down, and to slide the play button down (Use AnimatorSet to play them all together).
Here's a sample code (you should, of course, change the values according to your needs) -
ObjectAnimator slideDownAnimPlayButton = ObjectAnimator.ofFloat(play, "translationY", -(CountText.getTop()), 0);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY",0, (CountText.getTop() ));
ObjectAnimator scaleDownAnimTextViewX = ObjectAnimator.ofFloat(CountText, "scaleX", 1f, 0.5f);
ObjectAnimator scaleDownAnimTextViewY = ObjectAnimator.ofFloat(CountText, "scaleY", 1f, 0.5f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(1000);
animatorSet.playTogether(slideDownAnimPlayButton,slideDownAnimTextView,scaleDownAnimTextViewX,scaleDownAnimTextViewY);
animatorSet.start();
Edit: Seeing your new code now, the problem with the first text animation is that you call it from onCreate(), so the View hasn't been drawn yet, meaning he does not have valid Height or Top parameters.
You can solve it by giving your animation a small delay, or using a ViewTreeObserver. See the following examples -
Starting your animation with a delay -
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
}, 300);
Or, perhaps the better way, use a ViewTreeObserver -
CountText.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
CountText.getViewTreeObserver().removeOnGlobalLayoutListener(this);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
});

Flip button positions in linear layout vertical

well i'm looking for a way to flip the button on a linear layout vertical here is a screen shot of the buttons
the xml code is
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:id="#+id/buttons_layout">
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/iv_green"
android:layout_weight="1.0"
android:src="#drawable/leaf_green"
android:layout_gravity="fill_vertical"
android:scaleType="fitXY"
android:onClick="HandleClick" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/iv_other"
android:layout_weight="1.0"
android:src="#drawable/leaf_other"
android:layout_gravity="fill_vertical"
android:scaleType="fitXY"
android:onClick="HandleClick" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/iv_red"
android:layout_weight="1.0"
android:src="#drawable/leaf_red"
android:layout_gravity="fill_vertical"
android:scaleType="fitXY"
android:onClick="HandleClick" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/iv_yellow"
android:layout_weight="1.0"
android:src="#drawable/leaf_yellow"
android:layout_gravity="fill_vertical"
android:scaleType="fitXY"
android:onClick="HandleClick" />
</LinearLayout>
what i want to do is that when i push flip button on (which is another button) i want to change the position of the current button i will explain in pics:
okay guys i used the idea that Arnab Told me about in the post below, well i want to randomly flip the image buttons so i did the following script:
public void onClick(View v) {
btnsLayout.removeAllViews();
ArrayList<Integer> a = new ArrayList<Integer>();
for(int i = 0; i < 4; i++)
{
a.add(i);
}
Collections.shuffle(a);
btnsLayout.addView(Other, a.get(0).intValue());
btnsLayout.addView(Green, a.get(1).intValue());
btnsLayout.addView(Red,a.get(2).intValue());
btnsLayout.addView(Yellow,a.get(3).intValue());
}
the application is crashing the crash reason is:
java.lang.IndexOutOfBoundsException: index=2 count=1
what does it means ?
Thank you !
You can do this inside onCLick(View view) of Flip Button:
// Get all the views
LinearLayout btnsLayout = (LinearLayout) findViewById(R.id.buttons_layout);
ImageButton ivGreen = (ImageButton) findViewById(R.id.iv_green);
ImageButton ivOther = (ImageButton) findViewById(R.id.iv_other);
ImageButton ivRed = (ImageButton) findViewById(R.id.iv_red);
ImageButton ivYellow = (ImageButton) findViewById(R.id.iv_yellow);
// Remove views
btnLayout.removeView(ivGreen);
btnLayout.removeView(ivRed);
// ReAdd views in new index[Index 0 = position 1, Index 2 = position 3]
btnLayout.addView(ivRed, 0);
btnLayout.addView(ivGreen, 2);
Similarly :
// Remove views
btnLayout.removeView(ivOther);
btnLayout.removeView(ivYellow);
// ReAdd views in new index[Index 1 = position 2, Index 3 = position 4]
btnLayout.addView(ivYellow, 1);
btnLayout.addView(ivOther, 3);
First, you should rename the ids of the ImageButtons like :
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/first_leaf"
android:layout_weight="1.0"
android:src="#drawable/leaf_green"
android:layout_gravity="fill_vertical"
android:scaleType="fitXY"
android:onClick="HandleClick" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/second_leaf"
android:layout_weight="1.0"
android:src="#drawable/leaf_other"
android:layout_gravity="fill_vertical"
android:scaleType="fitXY"
android:onClick="HandleClick" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/third_leaf"
android:layout_weight="1.0"
.../>
Then find your flip button in your java class and set an OnClickListener
like this:
myFlipButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
}
}):
Then, in the onClick function, perform the changes:
myFlipButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
myFirstLeaf.setImageDrawable(getResources().getDrawable(R.drawable.leaf_red));
mySecondLeaf.setImageDrawable(getResources().getDrawable(R.drawable.leaf_yellow));
...
}
});
Hope it helps.
You can use the imgButton.setBackgroundResource(); method.
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
imgButton1.setBackgroundResource(R.drawable.image3);
imgButton3.setBackgroundResource(R.drawable.image1);
}
});
If you want to swap the views you need to use a ViewGroup and you can set the index accordingly.
How do I change the position of a view in a Linear Layout.?
Hello Using Arnab Suggestion and some tuning i found a solution: the problem was that you need to insert the index 1 2 3 4 you can't randomly add the views to the linear layout.
public void addListenerOnButton() {
Button flip = (Button) findViewById(R.id.btn_flip);
final LinearLayout btnsLayout = (LinearLayout) findViewById(R.id.buttons_layout);
final ImageView Other = (ImageView) findViewById(R.id.iv_other);
final ImageView Green = (ImageView) findViewById(R.id.iv_green);
final ImageView Red = (ImageView) findViewById(R.id.iv_red);
final ImageView Yellow = (ImageView) findViewById(R.id.iv_yellow);
flip.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
btnsLayout.removeAllViews();
ArrayList<Integer> a = new ArrayList<Integer>();
for (int i = 0; i < 4; i++) {
a.add(i);
}
Collections.shuffle(a);
for (int k = 0; k<=3 ; k++){
if (a.get(0).intValue() == k) {
btnsLayout.addView(Other, a.get(0).intValue());
}
if (a.get(1).intValue() == k) {
btnsLayout.addView(Green, a.get(1).intValue());
}
if (a.get(2).intValue() == k) {
btnsLayout.addView(Red, a.get(2).intValue());
}
if (a.get(3).intValue() == k) {
btnsLayout.addView(Yellow, a.get(3).intValue());
}
}
}

FABM: Floating Action Button Menu

I have Floating action menu and I use this library to make it 'com.github.clans:fab:1.6.1' Now I need change my icon when I click on it. I have some icon, and when I click on menu I need to transform it to another icon(icon plus). Is it possible?
This is my xml:
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
fab:menu_icon="#drawable/ic_float_cards"
android:layout_margin="16dp"
fab:menu_animationDelayPerItem="0"
fab:menu_colorNormal="#color/event_background"
fab:menu_colorPressed="#color/fab_colorPressed"
fab:menu_colorRipple="#color/fab_colorRipple"
fab:menu_labels_maxLines="2"
fab:menu_labels_ellipsize="end">
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_fill"
fab:fab_label="Пополнить"
style="#style/MenuButtonsSmall.Green" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_pay"
fab:fab_label="Оплатить"
style="#style/MenuButtonsSmall.Yellow" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_outcome"
fab:fab_label="Перевести"
style="#style/MenuButtonsSmall.Red" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_income"
fab:fab_label="Запрос перевода"
style="#style/MenuButtonsSmall.DarkPink" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_send"
fab:fab_label="Сообщение"
style="#style/MenuButtonsSmall.Purple" />
</com.github.clans.fab.FloatingActionMenu>
At first icon is ic_float_cards, but when I click it should be isic_float_cross
If you have some ideas tell me please)
This does the job and will also revert to the original icon.
final FloatingActionMenu fab = (FloatingActionMenu) findViewById(R.id.menu3);
fab.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() {
#Override
public void onMenuToggle(boolean opened) {
int drawableId;
if (opened) {
drawableId = R.drawable.ic_float_cross;
} else {
drawableId = R.drawable.ic_float_cards;
}
Drawable drawable = getResources().getDrawable(drawableId);
fab.getMenuIconView().setImageDrawable(drawable);
}
});
There is a better solution which includes cross-fade animation between icon drawables. It can be found in the sample Clans' application here.
This is the code which does the job:
final FloatingActionMenu fabMenu = ...;
AnimatorSet set = new AnimatorSet();
View menuIconView = fabMenu.getMenuIconView();
ObjectAnimator scaleOutX = ObjectAnimator.ofFloat(menuIconView, "scaleX", 1.0f, 0.2f);
ObjectAnimator scaleOutY = ObjectAnimator.ofFloat(menuIconView, "scaleY", 1.0f, 0.2f);
ObjectAnimator scaleInX = ObjectAnimator.ofFloat(menuIconView, "scaleX", 0.2f, 1.0f);
ObjectAnimator scaleInY = ObjectAnimator.ofFloat(menuIconView, "scaleY", 0.2f, 1.0f);
scaleOutX.setDuration(50);
scaleOutY.setDuration(50);
scaleInX.setDuration(150);
scaleInY.setDuration(150);
scaleInX.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
fabMenu.getMenuIconView().setImageResource(fabMenu.isOpened()
? R.drawable.ic_float_cross : R.drawable.ic_float_cards);
}
});
set.play(scaleOutX).with(scaleOutY);
set.play(scaleInX).with(scaleInY).after(scaleOutX);
set.setInterpolator(new OvershootInterpolator(2));
fabMenu.setIconToggleAnimatorSet(set);

Android: setting leftMargin property to a button automatically resizes it

I have a simple button in my layout. Setting leftMargin to the view actually showing different results.
my_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/left_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="hello pandora"/>
</RelativeLayout>
In my activity, I'm setting the leftMargin property to the Button.
Button leftBtn = (Button) findViewById(R.id.left_btn);
LayoutParams params = (LayoutParams) leftBtn.getLayoutParams();
params.leftMargin = 550;
If I set leftMargin as negative value or 0, its working fine, but If I set the value greater than the width of screen, it just resizing/compressing the button. I am expecting the button to go out of bounds like negative value.
I am expecting the button in the 3rd image to go out of bounds like the button in 1st image.
Please don't say to set the button layout_alignParentRight="true" in layout and rightMargin = -50in activity(this works) because I want to move the button from left to right.
I assume assigning a specific width larger than the screen size (eg. 1000 dp) to the parent RelativeLayout should solve your problem.
Also why do you want to make out-of-screen UI elements? What is the desired behaviour? Perhaps a transition animation would be better?
EDIT
I've tried the animation + storing the measured width of the Button. It seems to work.
Can you try this on GB?
MainActivity.java
public class MainActivity extends Activity {
final Context context = this;
Button mButton;
int mButtonWidth; // Measured width of Button
int amountToMove; // Amount to move the button in the x direction
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
amountToMove = 600;
mButton = (Button) findViewById(R.id.button);
// Measure Button's width
mButton.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
mButtonWidth = mButton.getMeasuredWidth();
// Simple onClick listener showing a Toast
mButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(context,"Hello Pandora clicked!",Toast.LENGTH_SHORT).show();
}
});
// Onclick listener for the other button
Button toggle = (Button) findViewById(R.id.toggle);
toggle.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Animate the other button
TranslateAnimation a = new TranslateAnimation(0, amountToMove, 0, 0);
a.setDuration(1000);
// Finalize movement when animation ends
a.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)mButton.getLayoutParams();
// Restore measured width and change left margin
lp.width = mButtonWidth;
lp.leftMargin = lp.leftMargin + amountToMove;
mButton.setLayoutParams(lp);
amountToMove = -amountToMove;
}
#Override
public void onAnimationStart(Animation animation) { /* Do nothing */ }
#Override
public void onAnimationRepeat(Animation animation) { /* Do nothing */ }
});
mButton.startAnimation(a);
}
});
}
}
activity_main.xml
<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="vertical"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Pandora"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Move the other button"
android:id="#+id/toggle"/>
</LinearLayout>
EDIT 2
It works on a GB Emulator too (the Button gets clipped, is clickable).
u can use max line=1 to show complete text in one line on button when you use leftMargin = 550;
try this
<Button
android:id="#+id/left_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:maxLines="1"
android:text="hello pandora"/>
Hello Edit your button property like this,
android:layout_gravity="center_horizontal"
android:singleLine="true"
and change parent layout to frameLayout

Using ViewFlipper with onclick to switch views

I'm using ViewFLipper with Random.nextInt(). to change layouts onClick (Button). Now I have 3 xml layouts. 1_view.xml 2_view.xml 3_view.xml. Starting from 1_view.xml I have a button there. When button clicked I should get a random layout. it works. But the problem is now, sometimes I get the same layout (1_view.xml). When a user clicks a button on (1_view.xml), I want them to go to the layouts I have left (2_view.xml and 3_view.xml).
Codes
Main.xml
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<TextView
android:id="#+id/TVLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="left|top"
android:text="0"
android:textColor="#4CB848"
android:textSize="40sp"
android:textStyle="bold" />
<TextView
android:id="#+id/TVRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/TVLeft"
android:gravity="right"
android:text="0"
android:textColor="#FF0000"
android:textSize="40sp"
android:textStyle="bold" />
</RelativeLayout>
<ViewFlipper
android:id="#+id/viewFlipper1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include
android:id="#+id/1_View"
layout="#layout/1_view" />
<include
android:id="#+id/2_View"
layout="#layout/2_view" />
<include
android:id="#+id/3_View"
layout="#layout/3_view" />
</ViewFlipper>
</LinearLayout>
Main.java
// FlipperView
MyViewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper1);
TVRight = (TextView) findViewById(R.id.TVRight);
TVLeft = (TextView) findViewById(R.id.TVLeft);
// 1_view.xml
Q1_btn1 = (Button) findViewById(R.id.btn_1);
Q1_btn2 = (Button) findViewById(R.id.btn_2);
Q1_btn3 = (Button) findViewById(R.id.btn_3);
Q1_btn4 = (Button) findViewById(R.id.btn_4);
Q1_btn1.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Wrongnum++;
WrongResult.setText(Integer.toString(Wrongnum));
}
});
Q1_btn2.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Rightnum++;
RightResult.setText(Integer.toString(Rightnum));
Random RandomView = new Random();
MyViewFlipper.setDisplayedChild(RandomView.nextInt(3));
}
});
Q1_btn3.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Wrongnum++;
WrongResult.setText(Integer.toString(Wrongnum));
}
});
Q1_btn4.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Wrongnum++;
WrongResult.setText(Integer.toString(Wrongnum));
}
});
You can do this in your code:
Random RandomView = new Random();
int nextViewIndex = RandomView.nextInt(3);
while (nextViewIndex == MyViewFlipper.getDisplayedChild()) {
nextViewIndex = RandomView.nextInt(3);
}
MyViewFlipper.setDisplayedChild(nextViewIndex);
Basically just call Random.nextInt() until it doesn't match current viewFlipper's index.
To only show a viewFlipper once randomly:
// Intialize this once
List<Integer> vfIndices = new ArrayList<Integer>();
for (int i = 0; i < MyViewFlipper.getChildCount(); i++) {
vfIndices.add(i);
}
// when button is clicked
if (vfIndices.size() == 0) {
return; // no more view flipper to show!
}
int viewIndex = RandomView.nextInt(vfIndices.size());
MyViewFlipper.setDisplayedChild(vfIndices.get(viewIndex));
vfIndicies.remove(viewIndex);
The idea is use an ArrayList to keep track of the viewFlipper index that has not been shown. When button is clicked, pick an index randomly from this array and set the viewFlipper to. Then remove that index from the ArrayList. Next time the button is clicked, it will show one of the remaining flippers.

Categories

Resources