[안드로이드] 세개 버튼으로 이루어진 애니메이션 팝업 버튼 만들기

글작성 버튼을 눌렀을 때 세개의 동그란 버튼이 나오는 애니메이션을 만드는 일이 생겼습니다. 그래서 옆에 선임 개발자분이 만드셨는데....(그런데 결국 안쓴다고 함 ㅠ)

아래는 소스코드 입니다.

import android.content.Intent
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.connple.weat.navigation.SearchActivity
import com.connple.weat.navigation.review.EvaluateActivity
import kotlinx.android.synthetic.main.activity_popup_reivew.*

class ReviewPopupActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_popup_reivew)
        val layout = activity_popup_layout
        val ratingButton = popup_rating
        val reviewButton = popup_review
        val registerButton = popup_register
        startAnimation()

        // 버튼이외의 바탕을 클릭했을 때 종료
        layout.setOnClickListener {
            endAnimation()
        }
        reviewButton.setOnClickListener {
            val intent = Intent(applicationContext, SearchActivity::class.java)
            intent.putExtra("isReview", true)
            startActivity(intent)
            finish()
        }
        ratingButton.setOnClickListener {
            startActivity(Intent(this, EvaluateActivity::class.java))
        }
        registerButton.setOnClickListener {
            Toast.makeText(this, "moved!", Toast.LENGTH_SHORT).show()
        }
    }

    private fun startAnimation() {
        val ratingButton = popup_rating
        val reviewButton = popup_review
        val registerButton = popup_register
        ratingButton.animate().translationY(-125f).translationX(-300f).setDuration(200).start()
        registerButton.animate().translationY(-125f).translationX(300f).setDuration(200).start()
        reviewButton.animate().translationY(-300f).setDuration(200).start()
    }

    private fun endAnimation() {
        // 각 버튼별 객체 형성
        val centerButton = popup_review_button
        val ratingButton = popup_rating
        val reviewButton = popup_review
        val registerButton = popup_register

        centerButton.animate().scaleX(0f).scaleY(0f).start()
        ratingButton.animate().translationY(0f).translationX(0f).scaleX(0f).scaleY(0f)
            .setDuration(200).start()
        registerButton.animate().translationY(0f).translationX(0f).scaleX(0f).scaleY(0f)
            .setDuration(200).start()
        reviewButton.animate().translationY(0f).scaleX(0f).scaleY(0f)
            .setDuration(200).start()
        val delayHandler = Handler(Looper.getMainLooper())
        delayHandler.postDelayed(
            {
                finish()
                overridePendingTransition(R.anim.fadein, R.anim.fadeout)
            }, 200
        )
    }

    override fun onBackPressed() {
        endAnimation()
    }
}

 

아래는 레이아웃입니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_popup_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/transparent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/popup_rating"
        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">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:contentDescription="@string/popup_layout"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/button_radius_white" />

        <ImageView
            android:id="@+id/popup_rating_icon"
            android:layout_width="25dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_star"
            android:contentDescription="@string/popup_rating"
            android:layout_marginTop="20dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/popup_rating_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/weat"
            android:textStyle="bold"
            android:layout_marginTop="5dp"
            app:layout_constraintTop_toBottomOf="@id/popup_rating_icon"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="@string/popup_rating_text" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/popup_review"
        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">

        <ImageView
            android:id="@+id/popup_review_image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:contentDescription="@string/popup_layout"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/button_radius_white" />

        <ImageView
            android:id="@+id/popup_review_icon"
            android:layout_width="25dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_pen_01"
            android:contentDescription="@string/popup_review"
            android:layout_marginTop="20dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/popup_review_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/weat"
            android:textStyle="bold"
            android:layout_marginTop="5dp"
            app:layout_constraintTop_toBottomOf="@id/popup_review_icon"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="@string/popup_review_text" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/popup_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:contentDescription="@string/popup_layout"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/button_radius_white" />

        <ImageView
            android:id="@+id/popup_register_icon"
            android:layout_width="25dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_diner_01"
            android:contentDescription="@string/popup_register"
            android:layout_marginTop="20dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/popup_register_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/weat"
            android:textStyle="bold"
            android:layout_marginTop="5dp"
            app:layout_constraintTop_toBottomOf="@id/popup_register_icon"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="@string/popup_register_text" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <RelativeLayout
        android:id="@+id/popup_review_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <ImageView
            android:layout_width="67dp"
            android:layout_height="67dp"
            android:src="@drawable/button_radius_weat"
            android:contentDescription="@string/popup_layout"
            android:layout_centerHorizontal="true" />

        <ImageView
            android:layout_width="25dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_location_mark_01"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/logo"
            app:tint="@color/white" />
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

세개의 버튼을 만들어 두고 아래 네비게이션의 중앙 버튼에 모아둔 후 duration과 traslatex, y를 지정해 애니메이션을 만듭니다. 

액티비티를 이용해 만들었으므로 매니패스트에 아래 코드를 추가해줍니다.(screenOrientation 옵션은 스크린의 세로 가로 등에 따라 화면을 지정하는 옵션이므로 무시하셔도 좋습니다.)

        <activity
            android:name=".ReviewPopupActivity"
            android:theme="@style/Transparent"
            android:screenOrientation="portrait"
            tools:ignore="LockedOrientationActivity" />

이후 values/styles 폴더의 resources태그 안에 아래 코드를 넣습니다. 아래 코드는 액티비티의 더미를 정해주는 코드이며 액티비티의 배경을 결정합니다.

    <style name="Transparent" parent="@style/Theme.AppCompat">
        <!--Titlebar 없애는 옵션
            true : Titlebar x
            false : Titlebar o
        -->
        <item name="windowNoTitle">true</item>
        <!-- 투명정도를 나타내는 색-->
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation</item>
        <!--
        android:backgroundDimEnabled
        true - 반투명 검정 /  false - 완전 투명
        -->
        <item name="android:backgroundDimEnabled">true</item>
    </style>

예쁘게 잘 만들었는데 ㅠㅠ

결과물은 위와 같습니다. gif로 뜰려고 했으나 캡처하기가 어렵네요.. 다음에는 할 수 있도록 해보겠습니다 ㅠㅠ

공감과 스크랩은 블로거에케 큰 힘이 됩니다.,