티스토리 뷰

Front-End-Web/Andorid with Kotlin

Ch03_UI 디자이너와 Palette를 활용한 화면 구성

jsBae 2025. 12. 28. 20:06

학습 목표

  • Android Studio의 Layout Editor 구성 요소를 이해한다.
  • Design / Code / Split 모드의 차이를 구분한다.
  • Palette를 활용하여 UI 요소(View)를 화면에 배치한다.
  • XML 레이아웃이 시각적으로 구성되는 과정을 이해한다.
  • 간단한 UI 화면을 직접 설계하고 실행한다.

1. Layout Editor 개요

https://developer.android.com/studio/intro/user-interface?hl=ko

 

Android 스튜디오 UI 알아보기  |  Android Studio  |  Android Developers

Android 스튜디오 UI를 알아봅니다.

developer.android.com

Layout Editor는 XML 레이아웃 파일을 시각적으로 편집할 수 있는 도구이다.
이 편집기는 코드 기반(XML) 편집과 시각적 편집을 동시에 지원한다.

Layout Editor는 다음 목적을 가진다.

  • UI 구조를 시각적으로 확인한다.
  • 화면 크기와 비율 변화에 따른 배치를 확인한다.
  • XML 코드와 실제 화면의 대응 관계를 학습한다.

2. Design / Code / Split 모드

Design 모드

  • UI 요소를 마우스로 배치하는 시각적 편집 모드이다.
  • 화면 중심의 레이아웃 설계에 적합하다.

Code 모드

  • XML 코드를 직접 작성·수정하는 텍스트 편집 모드이다.
  • 정밀한 속성 제어와 구조 이해에 적합하다.

Split 모드

  • Design과 Code를 동시에 표시하는 모드이다.
  • UI 학습 단계에서는 가장 권장되는 방식이다.

UI 설계와 XML 구조를 함께 이해하기 위해 Split 모드를 기본으로 사용한다.

  1. 툴바: 앱을 실행하거나 Android 도구를 시작하는 등 다양한 작업을 처리합니다.
  2. 탐색 메뉴: 프로젝트를 탐색하고 수정할 파일을 엽니다. 탐색 메뉴는 Project 창에 나타나는 구조를 좀 더 간략하게 표시합니다.
  3. 편집기 창: 코드를 작성하고 수정합니다. 현재의 파일 형식에 따라 편집기가 바뀔 수 있습니다. 예를 들어, 레이아웃 파일을 볼 때 편집기는 Layout Editor를 표시합니다.
  4. 도구 창 모음: IDE 창 외부에 있는 버튼을 사용하여 개별 도구 창을 펼치거나 접습니다.
  5. 도구 창: 프로젝트 관리, 검색, 버전 제어 같은 특정 작업에 액세스합니다. 창을 펼치고 접을 수 있습니다.
  6. 상태 표시줄: 프로젝트와 IDE의 상태를 표시하며 경고나 메시지도 표시합니다.

더 많은 화면 공간을 확보하도록 기본 창을 구성하려면 툴바와 도구 창을 숨기거나 이동합니다. 또한 단축키를 사용하여 대부분의 IDE 기능에 액세스할 수도 있습니다.

소스 코드, 데이터베이스, 작업, 사용자 인터페이스 요소 등에서 검색하려면 다음 중 한 가지 방법을 사용하세요.

  • Shift 키를 두 번 누릅니다.
  • Android 스튜디오 창의 오른쪽 상단에 있는 돋보기를 클릭합니다.

예를 들어, 이 검색 기능은 트리거 방법을 잊은 특정 IDE 작업을 찾으려는 경우 매우 유용할 수 있습니다.

3. Palette의 역할과 구성


Palette는 화면에 배치할 수 있는 UI 구성 요소(View)의 목록이다. 이 영역에서 원하는 View를 선택하여 레이아웃으로 드래그한다.

주요 분류

  • Text: TextView 등 텍스트 출력 요소
  • Buttons: Button 등 클릭 가능한 요소
  • Widgets: 입력·선택 UI 요소
  • Layouts: 레이아웃 컨테이너

 

Android Studio Palette 메뉴 전체 정리표

Text (텍스트 및 입력)

메뉴 실제 태그 입력 유형 / 특성 주요 사용 목적
TextView <TextView> 출력 전용 제목, 안내 문구, 결과 표시
plain Text <EditText> 일반 문자열 입력 자유 텍스트 입력
password <EditText> 비밀번호 입력 (● 표시) 로그인 비밀번호
Password (Numeric) <EditText> 숫자 + 비밀번호 숫자 PIN 입력
E-mail <EditText> 이메일 형식 입력 이메일 주소 입력
phone <EditText> 전화번호 형식 입력 연락처 번호 입력
Postal Address <EditText> 주소 입력 우편 주소 입력
Multiline Text <EditText> 여러 줄 입력 메모, 게시글 작성
Time <EditText> 시간 입력 시각 입력
Date <EditText> 날짜 입력 날짜 선택
Number <EditText> 숫자 입력 수량, 값 입력
Number (Signed) <EditText> 부호 포함 숫자 ± 값 입력
Number (Decimal) <EditText> 소수점 숫자 실수 입력
AutoCompleteTextView <AutoCompleteTextView> 자동 완성 입력 검색어 추천
MultiAutoCompleteTextView <MultiAutoCompleteTextView> 다중 자동 완성 태그, 다중 항목
CheckedTextView <CheckedTextView> 체크 상태 포함 텍스트 목록 선택 UI
TextInputLayout <TextInputLayout> 입력 래퍼(Wrapper) 입력 필드 UX 개선
 

Buttons 영역 전체 구성

Buttons 메뉴는 사용자 입력 중 ‘클릭’ 또는 ‘선택’ 행위를 담당하는 View들의 집합이다.
모든 요소는 사용자의 의도를 명확하게 전달받기 위한 인터랙션 중심 UI이다.

Button <Button> 기본 클릭 버튼 확인, 실행, 화면 전환
ImageButton <ImageButton> 이미지 기반 버튼 아이콘 중심 액션
ChipGroup <ChipGroup> Chip 컨테이너 Chip 묶음 관리
Chip <Chip> 선택형 버튼 태그, 옵션 선택
CheckBox <CheckBox> 다중 선택 버튼 약관 동의, 복수 선택
RadioGroup <RadioGroup> Radio 컨테이너 단일 선택 그룹
RadioButton <RadioButton> 단일 선택 버튼 항목 중 하나 선택
ToggleButton <ToggleButton> 상태 전환 버튼 ON / OFF 상태
Switch <Switch> 스위치 UI 설정 값 제어
FloatingActionButton <FloatingActionButton> 강조 버튼(FAB) 핵심 주요 액션

Widgets 영역 전체 구성

Widgets 메뉴는 입력·출력·상태 표시 등 ‘기능성 UI’ 요소들의 집합이다. Text나 Buttons와 달리, 데이터 표현과 시스템 기능 연동에 초점이 맞추어져 있다.

View <View> 기본 View 커스텀 UI, 구분용
ImageView <ImageView> 이미지 표시 사진, 아이콘 출력
WebView <WebView> 웹 콘텐츠 웹 페이지 표시
VideoView <VideoView> 동영상 재생 로컬·스트리밍 영상
CalendarView <CalendarView> 날짜 선택 일정, 날짜 입력
TextClock <TextClock> 시간 표시 현재 시간 출력
ProgressBar <ProgressBar> 진행 상태 로딩, 처리 중 표시
ProgressBar (Horizontal) <ProgressBar> 진행 상태 진행률 표시
SeekBar <SeekBar> 값 조절 볼륨, 밝기 조절
SeekBar (Discrete) <SeekBar> 단계 조절 단계형 값 선택
RatingBar <RatingBar> 평점 입력 별점 평가
SearchView <SearchView> 검색 UI 검색 입력
TextureView <TextureView> 그래픽 출력 영상·카메라 출력
SurfaceView <SurfaceView> 고성능 렌더링 영상, 게임
Horizontal Divider <View> 구분선 UI 영역 분리
Vertical Divider <View> 구분선 UI 영역 분리

Layouts 영역 전체 구성

Layouts 메뉴는 화면의 구조(뼈대)를 정의하는 ViewGroup들의 집합이다. 모든 UI 요소(View)는 반드시 하나의 레이아웃 안에 포함되어야 한다.

ConstraintLayout <ConstraintLayout> 제약 기반 레이아웃 View 간의 관계(제약)로 위치를 결정한다 복잡한 화면 구성, 표준 레이아웃
LinearLayout (Horizontal) <LinearLayout> 선형 레이아웃 가로 방향으로 View를 순차 배치한다 버튼 바, 가로 정렬 UI
LinearLayout (Vertical) <LinearLayout> 선형 레이아웃 세로 방향으로 View를 순차 배치한다 폼, 목록형 UI
FrameLayout <FrameLayout> 중첩 레이아웃 View를 겹쳐서 배치한다 단일 화면, 오버레이 UI
TableLayout <TableLayout> 테이블 레이아웃 행(Row)과 열(Column) 구조 정렬된 데이터 표현
TableRow <TableRow> 테이블 행 TableLayout의 한 행을 구성 테이블 행 구성
Space <Space> 빈 공간 View 화면 여백을 명시적으로 확보 간격 조정, 레이아웃 보조

Containers 영역 전체 구성

Containers 메뉴는 여러 View를 담거나, 화면 구조·흐름·전환을 관리하는 상위 컨테이너의 집합이다.
Layouts가 “배치 구조”라면, Containers는 화면 동작과 흐름을 담당한다.

Spinner <Spinner> 선택 컨테이너 드롭다운 형태의 선택 UI 항목 중 하나 선택
RecyclerView <RecyclerView> 목록 컨테이너 대량 데이터 목록을 효율적으로 표시 리스트, 카드 UI
ScrollView <ScrollView> 스크롤 컨테이너 세로 스크롤 제공 긴 화면 콘텐츠
HorizontalScrollView <HorizontalScrollView> 스크롤 컨테이너 가로 스크롤 제공 가로 콘텐츠
NestedScrollView <NestedScrollView> 스크롤 컨테이너 중첩 스크롤 지원 복합 스크롤 화면
ViewPager2 <ViewPager2> 페이지 컨테이너 좌우 페이지 전환 슬라이드 화면
CardView <CardView> 카드 컨테이너 그림자·모서리 UI 카드형 콘텐츠
AppBarLayout <AppBarLayout> 상단 컨테이너 앱 상단 영역 관리 상단 바 구성
BottomAppBar <BottomAppBar> 하단 컨테이너 하단 앱바 제공 하단 네비게이션
NavigationView <NavigationView> 네비게이션 컨테이너 사이드 메뉴 구성 네비게이션 드로어
BottomNavigationView <BottomNavigationView> 네비게이션 컨테이너 하단 탭 메뉴 주요 화면 전환
Toolbar <Toolbar> 액션 컨테이너 앱 상단 도구 모음 타이틀·액션
MaterialToolbar <MaterialToolbar> 액션 컨테이너 Material Design 툴바 최신 UI 가이드
TabLayout <TabLayout> 탭 컨테이너 탭 기반 화면 전환 상단 탭 UI
TabItem <TabItem> 탭 요소 TabLayout의 항목 탭 구성 요소
ViewStub <ViewStub> 지연 로딩 컨테이너 필요 시 View 로드 성능 최적화
ViewAnimator <ViewAnimator> 전환 컨테이너 View 간 애니메이션 전환 화면 효과
ViewSwitcher <ViewSwitcher> 전환 컨테이너 두 View 전환 간단한 상태 전환
include <include> 레이아웃 포함 XML 레이아웃 재사용 공통 UI
FragmentContainerView <FragmentContainerView> 프래그먼트 컨테이너 Fragment 표시 화면 분할
NavHostFragment <fragment> 네비게이션 컨테이너 Navigation 컴포넌트 호스트 화면 흐름 관리
  <view> 커스텀 컨테이너 사용자 정의 View 커스텀 UI
requestFocus <requestFocus> 포커스 제어 초기 포커스 지정 입력 UX
  <merge> 레이아웃 병합 중첩 제거 성능 개선

Helpers 영역 전체 구성

Helpers는 화면에 직접 콘텐츠를 표시하지 않는 보조 컴포넌트이다.
ConstraintLayout 환경에서 정렬, 그룹화, 기준 설정, 시각 효과를 담당한다.

Group <Group> 그룹 헬퍼 여러 View를 하나의 그룹으로 묶어 제어 일괄 표시/숨김
Barrier (Horizontal) <Barrier> 제약 헬퍼 여러 View 중 가장 바깥 경계를 기준으로 제약 동적 크기 대응
Barrier (Vertical) <Barrier> 제약 헬퍼 좌·우 방향 기준 경계 생성 반응형 배치
Flow <Flow> 배치 헬퍼 여러 View를 흐름 형태로 자동 배치 태그, 버튼 묶음
Guideline (Horizontal) <Guideline> 기준선 헬퍼 가로 기준선 제공 정렬 기준
Guideline (Vertical) <Guideline> 기준선 헬퍼 세로 기준선 제공 비율·정렬
Layer <Layer> 레이어 헬퍼 여러 View를 하나의 레이어로 제어 애니메이션, 변형
ImageFilterView <ImageFilterView> 이미지 헬퍼 이미지 필터·변형 시각 효과
ImageFilterButton <ImageFilterButton> 이미지 헬퍼 필터 적용 버튼 인터랙티브 이미지
MockView <MockView> 디자인 헬퍼 임시 UI 표시 레이아웃 설계

Google 영역 전체 구성

Google 메뉴는 안드로이드 기본 UI가 아닌, Google 서비스 연동을 전제로 하는 컴포넌트들의 집합이다. 이 항목들은 외부 API, 라이브러리, 계정 설정이 필요하며, 기본 UI 학습 단계에서는 개념 이해 중심으로 다루는 것이 적절하다.

AdView <AdView> 광고 컴포넌트 Google 광고 표시 앱 수익화
MapView <MapView> 지도 컴포넌트 Google 지도 표시 위치 기반 서비스

Legacy 영역 전체 구성

Legacy 메뉴는 과거 안드로이드 UI 설계에서 사용되었으나, 현재는 더 나은 대체 기술이 존재하는 컴포넌트를 모아 둔 영역이다.

GridLayout <GridLayout> 레이아웃 격자(Grid) 구조로 View 배치 제한적 사용
ListView <ListView> 목록 컨테이너 리스트 형태 데이터 표시 비권장
TabHost <TabHost> 탭 컨테이너 탭 기반 화면 전환 비권장
RelativeLayout <RelativeLayout> 레이아웃 View 간 상대 위치 배치 비권장
GridView <GridView> 목록 컨테이너 격자형 목록 표시 비권장

<ListView>

  • 과거 안드로이드에서 가장 널리 사용된 리스트 컴포넌트이다.
  • 대량 데이터 처리 및 성능 최적화에 한계가 있다.
  • 현재는 <RecyclerView> 사용이 표준이다.

실전 예제

“한 줄 소개 카드” 화면 만들기 앱

예제 목표

  • Palette에서 TextView / Plain Text(EditText) / Button을 배치하는 실습이다.
  • ConstraintLayout에서 제약(Constraint) 을 연결하여 화면을 안정적으로 구성하는 실습이다.
  • Kotlin에서 findViewById와 setOnClickListener로 UI를 제어하는 실습이다.

1. 화면 구성 요구사항

화면 요소

  1. 상단 제목: “한 줄 소개 카드”
  2. 입력창: “소개 문장 입력”
  3. 버튼: “적용”
  4. 결과 출력: 입력한 문장이 아래에 표시

2. 팔레트로 배치하는 절차 (Design 모드 기준)

2.1 편집 모드 설정

  • res > layout > activity_main.xml을 연다.
  • 상단 탭에서 Split을 선택한다.

2.2 ConstraintLayout 확인

  • 루트가 ConstraintLayout이 아니라면 루트를 ConstraintLayout으로 설정한다.

2.3 Palette에서 View 배치

Palette → Text에서 다음을 배치한다.

  1. TextView 2개 배치이다.
  • 첫 번째 TextView: 제목용
  • 두 번째 TextView: 결과 출력용
  1. plain Text 1개 배치이다.
  • 이것은 <EditText>로 생성된다.

Palette → Buttons에서 다음을 배치한다.

  1. Button 1개 배치이다.

2.4 제약(Constraint) 연결 원칙

  • 모든 View는 최소한 가로 2개(Start/End), 세로 방향으로는 위/아래 흐름이 연결되어야 한다.
  • 연결이 누락되면 런타임에서 위치가 예측 불가가 된다.
<?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"
    android:padding="20dp">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="한 줄 소개 카드"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/etIntro"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:hint="소개 문장 입력"
        android:inputType="text"
        android:padding="12dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tvTitle" />

    <Button
        android:id="@+id/btnApply"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="적용"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etIntro" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="결과가 여기에 표시된다"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnApply" />
</androidx.constraintlayout.widget.ConstraintLayout>

XML 핵심 해설

  • layout_width="0dp"는 ConstraintLayout에서 양쪽 제약(Start/End)이 있을 때 “제약에 맞추어 늘어남”을 의미한다.
  • hint는 EditText에 입력 전 안내 문구를 표시한다.
  • 각 View는 Top_toBottomOf로 위에서 아래로 흐름을 형성한다.

Kotlin 전체 코드 (MainActivity.kt)

package com.example.chapter02

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
        val etIntro = findViewById<EditText>(R.id.etIntro)
        val btnApply = findViewById<Button>(R.id.btnApply)
        val tvResult = findViewById<TextView>(R.id.tvResult)
        btnApply.setOnClickListener {
            val intro = etIntro.text.toString()
            tvResult.text = intro
        }
    }
}

Kotlin 핵심 해설

  • findViewById는 XML의 View를 코드로 가져오는 연결 방식이다.
  • setOnClickListener는 버튼 클릭 이벤트를 등록한다.
  • isBlank()는 공백만 있는 입력까지 비어있는 것으로 처리한다.

실전 예제

“프로필 카드” 앱 (이미지 + 한 줄 소개)

1. 구현 목표

  • ImageView로 프로필 이미지를 출력한다.
  • EditText로 소개 문장을 입력받는다.
  • Button 클릭 시 결과 영역에 “이름 + 소개”를 출력한다.

2. 리소스 준비(이미지 넣기)

  1. 준비할 파일: 예) profile.png
  2. 넣는 위치: app/src/main/res/drawable/ 폴더
  3. 파일명 규칙: 소문자, 숫자, 언더스코어만 사용한다. 예) my_profile.png

3. XML (activity_main.xml)

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <!-- 제목 -->
    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="프로필 카드"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- 프로필 이미지 -->
    <ImageView
        android:id="@+id/imgProfile"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/profile"
        android:contentDescription="프로필 이미지"
        app:layout_constraintTop_toBottomOf="@id/tvTitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"/>

    <!-- 이름 입력 -->
    <EditText
        android:id="@+id/etName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="이름 입력"
        android:inputType="textPersonName"
        android:padding="12dp"
        app:layout_constraintTop_toBottomOf="@id/imgProfile"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"/>

    <!-- 한 줄 소개 입력 -->
    <EditText
        android:id="@+id/etIntro"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="한 줄 소개 입력"
        android:inputType="text"
        android:padding="12dp"
        app:layout_constraintTop_toBottomOf="@id/etName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="10dp"/>

    <!-- 적용 버튼 -->
    <Button
        android:id="@+id/btnApply"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="카드 만들기"
        app:layout_constraintTop_toBottomOf="@id/etIntro"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="12dp"/>

    <!-- 결과 출력 -->
    <TextView
        android:id="@+id/tvResult"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="결과가 여기에 표시된다."
        android:textSize="18sp"
        app:layout_constraintTop_toBottomOf="@id/btnApply"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="18dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

4. Kotlin (MainActivity.kt)

package com.example.helloandroid

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val etName = findViewById<EditText>(R.id.etName)
        val etIntro = findViewById<EditText>(R.id.etIntro)
        val btnApply = findViewById<Button>(R.id.btnApply)
        val tvResult = findViewById<TextView>(R.id.tvResult)

        btnApply.setOnClickListener {
            val name = etName.text.toString().trim()
            val intro = etIntro.text.toString().trim()

            if (name.isBlank() || intro.isBlank()) {
                tvResult.text = "이름과 소개를 모두 입력하여야 한다."
            } else {
                tvResult.text = "이름: $name\n소개: $intro"
            }
        }
    }
}

 

  • @drawable/profile에 해당하는 이미지가 drawable에 존재하여야 한다.
  • 파일명이 다르면 @drawable/파일명도 동일하게 바꾸어야 한다.

 

과제

다음 조건을 만족하도록 수정하여 제출한다.

  1. 제목을 본인 수업명 또는 앱명으로 변경한다.
  2. 버튼 텍스트를 “저장”으로 변경한다.
  3. 결과 문구가 입력값 앞에 “소개: ”가 붙도록 변경한다.
  • 예: 소개: 나는 안드로이드를 학습 중이다.

주요 태그 · 핵심 키워드 (3차시 실전 예제)

  • <ConstraintLayout>
  • <TextView>
  • <EditText>
  • <Button>
  • android:hint
  • android:inputType
  • app:layout_constraintTop_toBottomOf
  • findViewById
  • setOnClickListener
728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형