모바일앱개발 강좌

모바일앱개발 강좌 #07 - 팝업화면이란?, 팝업으로 띄울 화면 생성하기, 버튼 클릭시 팝업화면 띄우기, Intent란?, startActivity()로 화면 전환하기, 팝업화면 테마설정, 팝업화면 크기 설정, 팝업화면 배경색 설정하기

두결앱개발 2025. 10. 22. 04:33
반응형
SMALL

 

안녕하세요~ 두결입니다.

 

지난시간에는 종료버튼으로 앱을 종료시키는 방법에 대해서 알아보았구요..

종료시 종료확인 다이얼로그를 띄워보고, 다이얼로그가 뜬상태에서는 외부터치가 안되게 하는 방법까지 알아보았습니다.

 

이번시간에는 팝업화면에 대해서 알아보겠습니다.


▣  팝업화면이란?

 

다이얼로그가 간단하게 대화상자를 띄울수 있어서 편하긴한데..

게임의 설정화면처럼 다양한 작업을 하기는 힘듭니다.

 

 

바로 위와같은 화면이 게임의 설정화면인데요..

출석보상을 받는다던지.. 게임단계를 설정한다던지.. 하는 팝업화면입니다.

이런 작업은 다이얼로그에서는 할수가 없죠~

 

그래서, 팝업화면을 만드는데요~

쉽게 애기하면 레이아웃 화면 하나 더 추가해서 띄워주면 됩니다.

 

자, 시작해보겠습니다.

우선 버튼을 하나더 만들겠습니다.

 

위와같이 레이아웃화면에서 버튼을 하나 추가하구요~

 

<Button
    android:id="@+id/btnShowPopup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="팝업화면 띄우기"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.7"/>

 

XML에서 

ID는 btnShowPopup이라고 하였고요

text는 "팝업화면 띄우기"라고 하였고

위치는 "앱종료"버튼 옆에 위치하게 하였습니다.

 

실행해보면~

 

네 위와같이 "팝업화면 띄우기"버튼이 잘보이네요..^^

 


▣  팝업으로 띄울 화면 생성하기

 

자, 이제 팝으로 띄울 화면을 생성해보겠습니다.

 

좌측 프로젝트 폴더에서

res->layout에서 오른쪽 버튼

New->Activity->Empty Views Activity 를 선택!!

 

 

Activity_Name은 Popup이라고 Finish!!

 

 

그러면, 위와같이 Popup.java하고 activity_popup.xml 2개의 파일이 생성된 것을 확인할 수 있습니다.

 

 

popup.xml 레이아웃화면을 보면 위와같이 빈화면이 생성되었음을 알수 있습니다.

 

 

 


▣  버튼 클릭시 팝업화면 띄우기, Intent란? startActivity()로 화면 전환하기

 

자, 이제 버튼 클릭으로 팝업화면을 한번 띄워보겠습니다.

Button btn_ShowPopup = findViewById(R.id.btnShowPopup);
btn_ShowPopup.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        
    }
});

 

우선, 위와같이 btn_showPopup이라는 버튼객체를 생성하고 

Click이벤트까지 작성하였습니다.

onClick()함수안에서 팝업화면을 띄워주기만 하면 됩니다.

 

Button btn_ShowPopup = findViewById(R.id.btnShowPopup);
btn_ShowPopup.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
            Intent intent = new Intent(getApplicationContext(), Popup.class);
            startActivity(intent);
    }
});

 

자, 이게 팝업화면을 띄우는 방법인데요..

 

버튼클릭시 Intent객체를 생성한후에 

startActivity()로 화면을 띄워주면 됩니다.

 

먼저,

Intent란 Activity간에 통신하고 작업을 요청하는데 사용되는 메세지 객체입니다.

다른화면으로 전환할때 사용되는데요~

첫번째 인자는 Context라서 getApplicationContext()로 넣었습니다.

두번째 인자는 화면을 전환할 클래스명인데 저희가 만든게 Popup이란 이름의 Activity이기때문에 Popup.class해주면 됩니다.

 

다음으로 

startActivity()란 현재 Activity에서 다른 Activity로 전환하는데 사용하는 함수입니다.

인자로는 Intent객체입니다.

 

자, 한번 실행해보겠습니다.

 

버튼을 눌렀을때 화면전환이 잘 되긴 하는데 새화면이 전체를 차지하다보니까

정확히 팝업화면이 떴는지 잘 확인이 안됩니다.


▣  팝업화면 테마설정, 팝업화면 크기 설정, 팝업화면 배경색 설정

 

그래서, 팝업화면의 테마를 설정해주도록 하겠습니다.

 

 

좌측의 프로젝트 창에 보시면

app->manifests->AndroidManifest.xml 이란 파일이 있습니다.

그것을 클릭해보면 위와같은 화면이 나오는데요~

 

AndroidManifest.xml 파일은 앱의 기본적인 구성정보(앱이름, 아이콘, 테마, 버전정보 등)와 권한정보 등을 정의한 XML파일입니다.

다른 부분은 지금 당장 알필요 없으니 넘어가구요~

이시간에는 화면의 테마를 설정하는 부분만 보도록 하겠습니다.

 

위와같이 

android:theme = ".Popup"으로 되어있는 부분이 있을것입니다.

저희가 새로 추가한 Activity 이름이죠?

그 밑에 테마를 설정하면 되는데요.. 위와같이 여러가지 테마를 설정할수 있습니다.

 

 

그중에 몇가지만 해보았는데요~

저희가 해볼것은 팝업화면이기 때문에 위의 3번째 테마를 설정하면 됩니다.

 

<activity
    android:name=".Popup"
    android:exported="false"
    android:theme="@style/Theme.AppCompat.Dialog" />

 

위와같이 AndroidManifest.xml 파일의

Popup <activity 부분에

테마를 Theme.AppCompat.Dialog로 설정해주면 됩니다.

 

자, 다음으로 팝업화면의 크기를 설정해주겠습니다.

 

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Popup">

</androidx.constraintlayout.widget.ConstraintLayout>

 

activity_popup.xml인데요~

layout_width와 layout_height에 값을 설정해주면됩니다.

 

<?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:id="@+id/main"
    android:layout_width="200dp"
    android:layout_height="200dp"
    tools:context=".Popup">

</androidx.constraintlayout.widget.ConstraintLayout>

 

네 위와같이 width와 height에 200dp로 설정해주었습니다.

 

한번 실행해보겠습니다.

 

 

 

 

네 위와같이 팝업화면이 잘 보이네요..^^

 

마지막으로 배경색도 설정해보겠습니다.

 

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    EdgeToEdge.enable(this);
    setContentView(R.layout.activity_popup);

    findViewById(R.id.main).setBackgroundColor(Color.parseColor("#ABCDEF"));

 

Popup.java입니다.

화면의 배경색을 바꾸는 것은 예전에 배웠었죠?

setBackgroundColor()로 색상을 지정해 주면 됩니다.

 

실행해보겠습니다.

 

네 위와같이 팝업화면도 잘뜨고 색상도 잘 바뀌었네요..^^

 

 

전체소스입니다. 참고하세요~

MainActivity.java

package com.example.popuptest;

import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import androidx.activity.EdgeToEdge;
import androidx.activity.result.ActivityResultLauncher;
import androidx.activity.result.contract.ActivityResultContract;
import androidx.activity.result.contract.ActivityResultContracts;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

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

        Toast.makeText(getApplicationContext(), "팝업메세지 잘뜨나?",Toast.LENGTH_SHORT).show();

        Button btn_Exit = findViewById(R.id.btnExit);
        btn_Exit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setTitle("앱 종료!");
                builder.setMessage("앱을 종료하시겠습니까?");

                builder.setPositiveButton("예", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        // 예 버튼 클릭시 동작.
                        finishAndRemoveTask(); // 앱 완전 종료!!
                    }
                });

                builder.setNegativeButton("아니오", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        // 아니오 버튼 클릭시 동작.
                    }
                });

                builder.setCancelable(false);  // 외부터치 안되게.. 다이얼로그 닫기방지
                builder.show();
            }
        });

        Button btn_ShowPopup = findViewById(R.id.btnShowPopup);
        btn_ShowPopup.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                    Intent intent = new Intent(getApplicationContext(), Popup.class);
                    startActivity(intent);
            }
        });

        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
    }


}

 

 

 

이번시간은 여기까지만 하도록 하구요~

 

다음시간에는 팝업화면의 타이틀바 없애는 방법하고, 뒤로가기버튼 막는 방법,  뷰바깥영역 터치안되게 하는 방법에 대해서

알아보도록 하겠습니다.

 

그럼, 이만~

 

감사합니다. ^^

반응형
LIST