How show and hide image in radiogroup with animation when a radiobutton is pushed

Viewed 25

I am trying to make a radio group. Make an image show when its respective radio button is pressed, as well as hide it when another radio button is pressed. And so on with the radio buttons you have...

The problem that arises for me is that the image is not hidden and still does its animation when I press another button. I do not know how to fix it...

XML...

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton"/>

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/btn_star_big_on"/>

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/ic_menu_edit" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton"/>

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/ic_delete" />

    </RadioGroup>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Confirmar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/radiogroup"
        app:layout_constraintStart_toStartOf="@+id/radiogroup"
        app:layout_constraintTop_toBottomOf="@+id/radiogroup" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainAvtivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    lateinit var slide_up_to_down: Animation
    lateinit var slide_down_to_up: Animation

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        initObjets()
        assignAnimation()

        binding.radiogroup.setOnCheckedChangeListener(RadioGroup.OnCheckedChangeListener{
            radioGroup, i ->
            if (radioGroup.checkedRadioButtonId == R.id.radioButton){
                binding.imageView.startAnimation(slide_up_to_down)
                binding.imageView.visibility = View.VISIBLE

                binding.imageView2.visibility = View.GONE
                binding.imageView3.visibility = View.GONE
            }

            else if (radioGroup.checkedRadioButtonId == R.id.radioButton2){
            binding.imageView2.startAnimation(slide_up_to_down)
            binding.imageView2.visibility = View.VISIBLE

            binding.imageView.visibility = View.GONE
            binding.imageView3.visibility = View.GONE
            }

            else{
                binding.imageView3.startAnimation(slide_up_to_down)
                binding.imageView3.visibility = View.VISIBLE

                binding.imageView.visibility = View.GONE
                binding.imageView2.visibility = View.GONE
            }
        })


    }


    private fun initObjets(){
        binding.imageView.visibility = View.GONE
        binding.imageView2.visibility = View.GONE
        binding.imageView3.visibility = View.GONE
    }

    //
    private fun assignAnimation(){
        slide_up_to_down = AnimationUtils.loadAnimation(this,R.anim.slide_up_to_down)
        slide_down_to_up = AnimationUtils.loadAnimation(this,R.anim.slide_down_to_up)
    }


}

slide_up_to_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="800"
        android:fromXScale="1"
        android:fromYScale="0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1"
        android:toYScale="1"/>
</set>

slide_down_to_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
    android:duration="800"
    android:fromXScale="1"
    android:fromYScale="1"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXScale="1"
    android:toYScale="0"/>
</set>

Picture

1 Answers

invoke clearAnimation() before setVisibility.

binding.radiogroup.setOnCheckedChangeListener { radioGroup, checkedId ->
            binding.apply {
                when (checkedId) {
                    R.id.radioButton -> {
                        imageView.startAnimation(slide_up_to_down)
                        imageView.visibility = View.VISIBLE

                        imageView2.clearAnimation() // add 
                        imageView3.clearAnimation() // add 
                        imageView2.visibility = View.GONE
                        imageView3.visibility = View.GONE
                    }
                    R.id.radioButton2 -> {
                        imageView2.startAnimation(slide_up_to_down)
                        imageView2.visibility = View.VISIBLE

                        imageView.clearAnimation()  // add 
                        imageView3.clearAnimation() // add 
                        imageView.visibility = View.GONE
                        imageView3.visibility = View.GONE
                    }
                    else -> {
                        imageView3.startAnimation(slide_up_to_down)
                        imageView3.visibility = View.VISIBLE

                        imageView.clearAnimation()  // add 
                        imageView2.clearAnimation() // add 
                        imageView.visibility = View.GONE
                        imageView2.visibility = View.GONE
                    }
                }
            }
        }
Related