[Android/안드로이드]Target View/타겟 이펙트[GitHub예제][MaterialTapTargetPrompt]

MaterialTapTargetPrompt

라이브러리를 사용해봤습니다.

프롬프트(Prompt)란 입력을 기다리고 있음을 가리키는 화면 위의 표시이다.

이 라이브러리를 사용하면 다음과 같은 효과를 낼 수 있습니다.

아래는 샘플 앱의 화면입니다.

Center 버튼을 누르게되면 

다음과 같이 지정된 타겟에 집중할 수 있도록

원형 모양으로 애니메이션 이펙트가 발생합니다.

내부 원의 배경색과, 로고의 색상, 외부 원의 색상과

위, 아래 글자의 크기와 폰트 색상 등 다양하게 변경이 가능합니다.

values/style.xml

    <style name="MyColor">
        <item name="iconColourFilter">#bcde7c</item>
        <item name="focalRadius">50dp</item><!--내부 원 반지름-->
    </style>
 
    <style name="Bottom">
        <item name="iconColourFilter">#bcde7c</item><!--아이콘 색상-->
        <item name="focalRadius">50dp</item><!--내부 원 반지름-->
        <item name="target">@id/bottompuzzleleaf</item>
        <item name="primaryText">Puzzleleaf</item>
        <item name="secondaryText">이것은 하단 퍼즐잎 로고 입니다.</item>
        <!--글자 색상-->
        <item name="primaryTextColour">#ffffff</item>
        <item name="secondaryTextColour">#ffffff</item>
        <!--배경 색상-->
        <item name="backgroundColour">#9ACA66</item>
        <item name="focalColour">#ffffff</item>
        <item name="primaryTextSize">10sp</item>
        <item name="secondaryTextSize">22sp</item>
        <item name="maxTextWidth">600dp</item>
        <item name="textPadding">80dp</item>
    </style>

        findViewById(R.id.leftbtn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myTarget = new MaterialTapTargetPrompt.Builder(MainActivity.this,R.style.MyColor)
                        .setTarget(R.id.toppuzzleleaf)
                        .setPrimaryText("Puzzleleaf")
                        .setSecondaryText("이것은 상단 퍼즐잎 로고 입니다!.")
                        .setBackgroundColour(Integer.parseInt("9ACA66",16)) //큰 원의 배경 색상
                        .setFocalColour(Integer.parseInt("ffffff",16)) // 안쪽 작은 원의 배경색
                        .setAutoDismiss(false)
                        .setOnHidePromptListener(new MaterialTapTargetPrompt.OnHidePromptListener() {
                            @Override
                            public void onHidePrompt(MotionEvent event, boolean tappedTarget) {
                            }
                            @Override
                            public void onHidePromptComplete() {
                                Toast.makeText(getApplicationContext(),"Top",Toast.LENGTH_LONG).show();
                            }
                        })
 
                        .setIcon(R.drawable.puzzleleaf);
                myTarget.show();
            }
        });
 
        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myTarget = new MaterialTapTargetPrompt.Builder(MainActivity.this,R.style.MyColor)
                        .setTarget(R.id.puzzleleaf)
                        .setPrimaryText("Puzzleleaf")
                        .setSecondaryText("이것은 중간 퍼즐잎 로고 입니다.")
                        .setBackgroundColour(Integer.parseInt("9ACA66",16)) //큰 원의 배경 색상
                        .setFocalColour(Integer.parseInt("ffffff",16)) // 안쪽 작은 원의 배경색
                        .setAutoDismiss(false)
                        .setOnHidePromptListener(new MaterialTapTargetPrompt.OnHidePromptListener() {
                            @Override
                            public void onHidePrompt(MotionEvent event, boolean tappedTarget) {
                            }
                            @Override
                            public void onHidePromptComplete() {
                                Toast.makeText(getApplicationContext(),"Center",Toast.LENGTH_LONG).show();
                            }
                        })
                        .setIcon(R.drawable.puzzleleaf);
                myTarget.show();
            }
        });
 
        findViewById(R.id.rightbtn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myTarget = new MaterialTapTargetPrompt.Builder(MainActivity.this,R.style.Bottom)
                        .setAutoDismiss(false)
                        .setOnHidePromptListener(new MaterialTapTargetPrompt.OnHidePromptListener() {
                            @Override
                            public void onHidePrompt(MotionEvent event, boolean tappedTarget) {
                            }
                            @Override
                            public void onHidePromptComplete() {
                                Toast.makeText(getApplicationContext(),"Bottom",Toast.LENGTH_LONG).show();
                            }
                        })
                        .setIcon(R.drawable.puzzleleaf);
                myTarget.show();
            }
        });

자세한 사용방법은 아래의 github을 참고해주시기 바랍니다.