Android UI 개발 완벽 정리
1. Views와 ViewGroup의 개념
비유로 이해하기
- 큰 상자(ViewGroup) 안에 작은 상자들(Views)이 들어있는 구조
- ViewGroup = 컨테이너 역할
- Views = 실제 화면에 표시되는 요소들
View의 특징
- 각각의 View는 고유한 기능을 수행
- 예시: Button은 탭하면 게임 시작, 메시지 전송 등의 동작 실행
ViewGroup의 역할
- 여러 View들을 조직화(organize)
- 화면에 View들을 배치(arrange)
2. Android Studio 프로젝트 구조
새 프로젝트 생성 시 기본 파일
- MainActivity.java (또는 .kt)
- Java 또는 Kotlin 코드 작성
- 앱의 로직과 기능 구현
- activity_main.xml
- Layout 파일 (XML)
- 사용자 인터페이스(UI) 디자인
3. Android Studio Layout Editor - 3가지 모드
1) Design Mode (디자인 모드)
특징
- 레이아웃의 시각적 표현 제공
- 드래그 앤 드롭 방식으로 UI 디자인
- 실시간 프리뷰 확인 가능
사용 방법
- Palette에서 TextView, Button, ImageView 등 드래그
- UI 요소 추가/제거 및 위치 조정
- Constraints 설정
- Attributes 탭에서 속성 수정
2) Code Mode (코드 모드)
특징
- XML 코드 직접 편집
- UI 레이아웃과 속성을 코드로 정의
- 세밀한 제어 가능
3) Split Mode (분할 모드)
특징
- Design + Code 모드 결합
- 시각적 표현과 XML 코드를 동시에 확인
- 양방향 실시간 동기화
작동 방식
Split Mode에서:
Design 영역에서 Button 추가
↓
Code 영역에 XML 자동 생성
↓
실시간 반영
4. View Attributes (공통 속성)
정의
View Attributes는 각 UI 요소가 어떻게 보이고 동작할지를 정의하는 속성들입니다.
주요 공통 Attributes
1. ID (식별자)
android:id="@+id/myTextView"
- 뷰에 고유한 ID 할당
- Java/Kotlin 코드에서 이 ID로 뷰를 참조하여 프로그래밍 방식으로 조작
2. Layout Width & Height (너비와 높이)
android:layout_width="match_parent"
android:layout_height="wrap_content"
- match_parent: 부모 뷰(전체 레이아웃)에 맞춤
- wrap_content: 내용물 크기에 맞춤
- 고정 크기: 예) 200dp
3. Margin (외부 여백)
android:layout_margin="20dp"
- 뷰 주변의 외부 공간
- 다른 요소와의 간격 설정
- layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom으로 개별 지정 가능
4. Padding (내부 여백)
android:padding="40dp"
- 뷰의 내부 공간
- 뷰의 콘텐츠와 경계 사이의 간격
- paddingLeft, paddingRight, paddingTop, paddingBottom으로 개별 지정 가능
5. Background (배경)
android:background="#00FF00"
- 뷰의 배경색 또는 drawable 설정
5. TextView Widget
정의
TextView는 화면에 텍스트를 표시하는 기본 UI 요소입니다.
TextView 생성 방법
1. XML 코드로 작성
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/myTextView"
android:text="Hello my friends"
android:textSize="32sp"
android:textColor="#FF0000"
android:textStyle="bold" />
2. Design Mode에서 드래그 앤 드롭
- Palette에서 TextView 검색
- 원하는 위치로 드래그
TextView 주요 Attributes
텍스트 관련 속성
속성 설명 예시
| android:text | 표시할 텍스트 내용 | "Hello my friends" |
| android:textSize | 텍스트 크기 | 32sp |
| android:textColor | 텍스트 색상 | "#FF0000" (빨강) |
| android:textStyle | 텍스트 스타일 | bold, italic, normal |
| android:textAllCaps | 모든 글자를 대문자로 | true / false |
| android:gravity | 텍스트 정렬 | center, start, end |
| android:typeface | 폰트 스타일 | serif, sans, monospace |
레이아웃 속성
<TextView
android:padding="20dp"
android:layout_margin="20dp"
android:background="#00FF00" />
Input Type (입력 타입)
android:inputType="text"
- text, textPassword, number, phone, email, date, time 등
단위 설명
- sp (Scaled Pixels): 텍스트 크기에 사용, 사용자의 글꼴 크기 설정에 따라 조정됨
- dp (Density-independent Pixels): 화면 밀도에 관계없이 일관된 크기 제공
Attributes 설정 방법
1. XML 코드에서 직접 설정
android:textColor="#0000FF"
2. Attributes 패널에서 시각적으로 설정
- 오른쪽 Attributes 패널 사용
- 색상 피커로 색상 선택
- 드롭다운에서 옵션 선택
6. EditText Widget
정의
EditText는 사용자가 텍스트를 입력할 수 있는 편집 가능한 UI 요소입니다.
EditText 생성 방법
1. XML 코드로 작성
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name"
android:inputType="text" />
2. Design Mode에서 드래그 앤 드롭
- Plain Text, Password, Email 등 다양한 형태의 EditText 사용 가능
EditText 주요 Attributes
텍스트 및 힌트
속성 설명 예시
| android:text | 초기 텍스트 내용 | "Enter your name" |
| android:hint | 빈 상태일 때 표시되는 힌트 | "Enter your name" |
| android:inputType | 입력 유형 지정 | text, number, textPassword, textEmailAddress, phone |
| android:maxLength | 최대 입력 가능 문자 수 | 10 |
text vs hint 차이
- text: EditText의 초기 텍스트 내용 (실제 값)
- hint: 비어있을 때 표시되는 가이드 텍스트 (사용자가 클릭하면 사라짐)
스타일 속성
<EditText
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
android:padding="20dp"
android:layout_margin="20dp" />
EditText 프로그래밍 방식 사용
MainActivity.java에서 초기화 및 입력 받기
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 1. EditText 초기화
EditText myEditText = findViewById(R.id.editText);
// 2. 사용자 입력 받기
String inputText = myEditText.getText().toString();
// inputText 변수에 사용자가 입력한 텍스트가 저장됨
}
}
주요 메서드
- getText(): EditText에서 입력된 텍스트 가져오기
- toString(): Editable 객체를 String으로 변환
7. Button Widget
정의
Button은 사용자가 클릭/탭하여 동작을 실행할 수 있는 기본 UI 요소입니다.
Button 생성 방법
XML 코드로 작성
<Button
android:id="@+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:textSize="32sp"
android:textStyle="bold"
android:padding="30dp"
android:layout_margin="40dp" />
Button 주요 Attributes
텍스트 및 스타일
속성 설명 예시
| android:text | 버튼에 표시될 텍스트 | "Click Me" |
| android:textSize | 텍스트 크기 | 32sp |
| android:textStyle | 텍스트 스타일 | bold |
상호작용 속성
속성 설명 값
| android:clickable | 클릭 가능 여부 | true / false |
| android:enabled | 버튼 활성화 여부 | true / false |
- clickable="false": 사용자가 클릭할 수 없음
- enabled="false": 버튼이 비활성화되어 클릭에 반응하지 않음
⚠️ onClick 속성 (비추천)
android:onClick="methodName"
- XML에서 직접 메서드 지정 (Deprecated)
- 추천하지 않음: 항상 Java/Kotlin 코드에서 처리하는 것이 좋음
8. View 초기화 및 선언 (findViewById)
개념
XML 레이아웃에 정의된 UI 요소(View)를 Java/Kotlin 코드에서 참조하여 프로그래밍 방식으로 조작하는 과정입니다.
기본 프로세스
1. XML에서 ID 정의
<TextView
android:id="@+id/myTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World" />
2. MainActivity.java에서 초기화
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// findViewById로 뷰 초기화
TextView myTextView = findViewById(R.id.myTextView);
// 프로그래밍 방식으로 속성 변경
myTextView.setText("새로운 텍스트");
myTextView.setTextColor(Color.BLUE);
myTextView.setTextSize(24);
}
}
findViewById 메서드
구조
ViewType viewVariable = findViewById(R.id.viewId);
동작 방식
- findViewById: Android 프레임워크가 제공하는 메서드
- R.id.viewId: XML에서 정의한 ID로 뷰 검색
- 반환값: 지정된 ID를 가진 뷰 객체의 참조
예시
// TextView 초기화
TextView myTextView = findViewById(R.id.myTextView);
// EditText 초기화
EditText myEditText = findViewById(R.id.editText);
// Button 초기화
Button myButton = findViewById(R.id.myButton);
TextView 조작 메서드
TextView myTextView = findViewById(R.id.myTextView);
// 다양한 메서드 사용 가능
myTextView.setText("새 텍스트");
myTextView.setTextColor(Color.RED);
myTextView.setTextSize(20);
myTextView.setVisibility(View.VISIBLE); // 또는 INVISIBLE, GONE
⚠️ 중요 주의사항
1. ID가 존재해야 함
- XML 레이아웃 파일에 지정한 ID가 반드시 존재해야 함
- ID가 고유해야 함 (중복 불가)
2. null 체크
TextView myTextView = findViewById(R.id.myTextView);
if (myTextView != null) {
myTextView.setText("안전한 접근");
} else {
// ID를 찾지 못했을 때 처리
}
3. NullPointerException 방지
- ID가 잘못되었거나 뷰를 찾을 수 없으면 null 반환
- null 체크 없이 사용하면 NullPointerException 발생
9. Click Listener (클릭 이벤트 처리)
정의
Click Listener는 사용자의 클릭/탭 동작을 감지하고 반응하는 인터페이스입니다.
OnClickListener 구현
기본 구조
Button myButton = findViewById(R.id.myButton);
myButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 버튼 클릭 시 실행될 코드
}
});
onClick 메서드
- 파라미터: View v (클릭된 뷰 객체)
- 호출 시점: 사용자가 UI 요소를 클릭할 때
- 용도: 클릭에 대한 원하는 동작 정의
실전 예제
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button myButton = findViewById(R.id.myButton);
myButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Toast 메시지 표시
Toast.makeText(MainActivity.this,
"You clicked a button",
Toast.LENGTH_SHORT).show();
}
});
}
}
10. Toast (토스트 메시지)
정의
Toast는 사용자에게 간단한 메시지나 피드백을 일시적으로 표시하는 작은 알림입니다.
Toast 특징
- 화면 하단에 나타남
- 짧은 시간(약 2-3초) 후 자동으로 사라짐
- 사용자 상호작용 필요 없음
- 앱 실행을 방해하지 않음
Toast 생성 방법
기본 구문
Toast.makeText(Context, "메시지", Duration).show();
파라미터
- Context: 일반적으로 MainActivity.this 또는 getApplicationContext()
- 메시지: 표시할 텍스트 (String)
- Duration:
- Toast.LENGTH_SHORT (약 2초)
- Toast.LENGTH_LONG (약 3.5초)
실전 예제
// 버튼 클릭 시 Toast 표시
Button myButton = findViewById(R.id.myButton);
myButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,
"You clicked a button",
Toast.LENGTH_SHORT).show();
}
});
11. 전체 실습 예제
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp">
<!-- TextView -->
<TextView
android:id="@+id/myTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello my friends"
android:textSize="32sp"
android:textColor="#FF0000"
android:textStyle="bold"
android:layout_margin="20dp" />
<!-- EditText -->
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name"
android:inputType="text"
android:textSize="20sp"
android:layout_margin="20dp" />
<!-- Button -->
<Button
android:id="@+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:textSize="24sp"
android:padding="30dp"
android:layout_margin="40dp" />
</LinearLayout>MainActivity.java
package com.example.myapp;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
// View 변수 선언
private TextView myTextView;
private EditText myEditText;
private Button myButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 1. findViewById로 뷰 초기화
myTextView = findViewById(R.id.myTextView);
myEditText = findViewById(R.id.editText);
myButton = findViewById(R.id.myButton);
// 2. 버튼 클릭 리스너 설정
myButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// EditText에서 입력받은 텍스트 가져오기
String inputText = myEditText.getText().toString();
// TextView에 입력받은 텍스트 설정
myTextView.setText(inputText);
// Toast 메시지 표시
Toast.makeText(MainActivity.this,
"You clicked a button",
Toast.LENGTH_SHORT).show();
}
});
}
}
📊 작업 모드 비교
모드 특징 장점 적합한 경우
| Design | 시각적 편집 | 직관적, 빠른 프로토타이핑 | 초보자, 빠른 UI 스케치 |
| Code | XML 직접 편집 | 정확한 제어, 세밀한 조정 | 경험자, 복잡한 레이아웃 |
| Split | 양쪽 동시 표시 | 실시간 확인, 학습에 유용 | 학습 중, 디버깅 시 |
핵심 정리
Widgets 비교
Widget 용도 주요 특징
| TextView | 텍스트 표시 | 읽기 전용, 다양한 스타일링 |
| EditText | 텍스트 입력 | 사용자 입력 받기, 키보드 표시 |
| Button | 동작 실행 | 클릭 이벤트 처리 |
속성(Attributes) 설정 방법
방법 1: XML 코드
android:textColor="#FF0000"
android:textSize="32sp"
방법 2: Attributes 패널
- 시각적 편집기 사용
- 색상 피커, 드롭다운 메뉴
방법 3: Java/Kotlin 코드 (런타임)
myTextView.setTextColor(Color.RED);
myTextView.setTextSize(32);
XML vs Java/Kotlin
측면 XML Java/Kotlin
| 시점 | 컴파일 타임 (정적) | 런타임 (동적) |
| 용도 | 초기 레이아웃 구성 | 동적 변경 및 상호작용 |
| 장점 | 구조화, 유지보수 쉬움 | 유연성, 조건부 처리 |
중요 개념 요약
1. View Hierarchy (뷰 계층 구조)
Activity
└── Layout (ViewGroup)
├── TextView
├── EditText
└── Button
2. findViewById 패턴
XML에서 ID 정의 → Java에서 findViewById() → 뷰 객체 참조 → 조작
3. Event Handling (이벤트 처리)
View 초기화 → setOnClickListener() → onClick() 구현 → 동작 정의