[ Android ] 커스텀 팝업 다이얼로그

[ Android ] 커스텀 팝업 다이얼로그

안드로이드 3.0 버전으로 업그레이드 된 이후로 첫 안드로이드 포스팅이 되겠군요.

거두 절미하고, 이번 포스팅에서는 예제를 통해 안드로이드 커스텀 팝업 만들어 보도록 하겠습니다.

안드로이드 개발을 할 때, 기본적인 다이얼로그로는 우리가 원하는 모양의 어플리케이션을 만들 수 없어질 순간이 다가오기 마련이다. 그렇기때문에 우리들만의 다이얼로그를 만들 필요성이 생기게 되었다. 

기본적인 개념으로는 우리가 잘알고 있는 Activity를 이용해서, 마치 PC환경에서 볼 수 있는 '팝업 창'과 같은 모습을 구현하려고 한다. 더 다양하고, 많은 기능을 우리는 Activity에 표현해서 팝업 창이 필요한 시점에 적용하면 된다는 말이다.

기본 예제이므로, MainActivity 와 PopupActivity 만을 이용하여, 기본 동작을 보자.

MainActivity.java

public class MainActivity extends AppCompatActivity {

    Button btn01;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        Button.OnClickListener btnListener = new View.OnClickListener(){

            public void onClick(View v){
                switch (v.getId()){

                    case R.id.btn01:

                        Intent intent = new Intent(MainActivity.this, PopupActivity.class);
                        startActivityForResult(intent, 1);

                        break;

                }
            }
        };

        btn01 = (Button)findViewById(R.id.btn01);
        btn01.setOnClickListener(btnListener);
        
    }
}

간단한 소스를 짜주도록 합니다. 

버튼을 클릭하면, PoupActivity 로 Intent 전달하는 소스입니다. 

레이아웃 역시, 버튼 하나 달랑 만들어 놓습니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.example.dabin.customexampleapp_01.MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="팝업 버튼"
    android:id="@+id/btn01"/>

</android.support.constraint.ConstraintLayout>

PopupActivty.java

public class PopupActivity extends AppCompatActivity {

    Button okBtn, cancleBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 상태바 제거 ( 전체화면 모드 )
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_popup);

        okBtn = (Button) findViewById(R.id.okBtn);
        cancleBtn = (Button) findViewById(R.id.cancleBtn);

    }

    //동작 버튼 클릭
    public void mOk(View v){

        finish();
    }


    //취소 버튼 클릭
    public void mCancle(View v){
        finish();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //바깥레이어 클릭시 안닫히게
        if(event.getAction()==MotionEvent.ACTION_OUTSIDE){
            return false;
        }
        return true;
    }

    @Override
    public void onBackPressed() {
        //안드로이드 백버튼 막기
        return;
    }
}

activity_popup.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#eeeeee"
    android:orientation="vertical"
    android:layout_width="300dp"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/titleTV"
            android:text="팝업테스트"
            android:textSize="20sp"
            android:gravity="center"
            android:textColor="#fff"
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="53sp" />
    </LinearLayout>

    <LinearLayout
        android:padding="24dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/txtText"
            android:textSize="15sp"
            android:textColor="#000"
            android:text="팝업테스트 부제목"
            android:gravity="center"
            android:layout_marginBottom="3dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/txtText2"
            android:textSize="15sp"
            android:textColor="#000"
            android:gravity="center"
            android:layout_marginBottom="3dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp" />

    <LinearLayout
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/okBtn"
            android:text="확인"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="mOk"/>

        <Button
            android:id="@+id/cancleBtn"
            android:text="취소"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="mCancle"/>
    </LinearLayout>
</LinearLayout>

자, 이런식으로 간단하게 두 Activity를 꾸며보았습니다.

사실 위의 두 액티비티는 평소에 하시던 방법이랑 다를바가 하나도 없는 부분이기때문에 안보셔도 그만일.. 

액티비티 디자인은 커스텀 이라는 이름에 걸맞게 이쁘게 알아서들 작성해서 사용하시면 될 것 같습니다.

가장 중요한 부분입니다.

매니페스트와 액티비티를 팝업화면처럼 보여주기 위해서는, 스타일(테마)를 설정하고, 매니페스트에서 설정 해주셔야 합니다. 

AndroidManifest.xml 

<activity android:name=".PopupActivity"
    android:theme="@style/popupTheme" android:screenOrientation="portrait"></activity>

style.xml

<style name="popupTheme" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!--타이틀 바 제거-->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

다 끝났습니다.

아래와 같은 결과를 볼 수 있겠군요.

부족한 내용, 틀린 내용, 지적하고 싶은 부분, 공감되는 부분 

댓글 , 공감등을 통한 참여는 언제든지 환영합니다.

 지식 공유를 통해 함께 앞으로 

나아갈 수 있도록 도와주시면 감사하겠습니다. ^^

★ 공감, 광고 클릭 한번으로 저에게 큰 힘이 됩니다 ★

Inadequate content, wrong content, points to point out, part of sympathy Please feel free to participate in comments, sympathy, etc.  Forward together through knowledge sharing I would appreciate it if you could help me move forward. :)

★ Empathy, the click of an ad is a great power to me ★