이 예제에서는 안드로이드 앱에서 머티리얼 디자인(Material Design) 컴포넌트를 사용하는 방법을 단계별로 살펴봅니다. 구글이 제공하는 머티리얼 디자인 라이브러리를 활용하면 일관되고 세련된 UI를 손쉽게 구현할 수 있습니다.
1단계: 새 프로젝트 생성
Android Studio를 실행한 후 File → New Project 메뉴로 이동하여 새 프로젝트를 생성합니다. 프로젝트 생성에 필요한 모든 세부 정보(프로젝트 이름, 패키지명, 최소 SDK 버전 등)를 입력합니다.
2단계: 레이아웃 파일 작성
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. 로그인 화면 형태의 레이아웃으로, 이미지뷰, 이메일/비밀번호 입력란, 로그인·회원가입 버튼, 진행 상태 표시줄(ProgressBar)로 구성되어 있습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F95E5E"
android:orientation="vertical"
android:paddingTop="80dp"
tools:context=".LoginActivity">
<ImageView
android:id="@+id/loginLogo"
android:layout_width="240dp"
android:layout_height="222dp"
android:layout_gravity="center"
android:contentDescription="@string/login_logo"
android:paddingStart="8dp"
android:paddingLeft="250dp"
android:paddingTop="50dp"
android:paddingEnd="8dp"
android:src="@drawable/read_my_blog" />
<EditText
android:id="@+id/emailText"
android:layout_width="350dp"
android:layout_height="60dp"
android:ems="10"
android:autofillHints="@string/email_hint"
android:hint="@string/email_hint"
android:textColor="#FFFF"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:layout_marginBottom="10dp"/>
<EditText
android:id="@+id/pwdText"
android:layout_width="350dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:textColor="#FFFF"
android:layout_marginBottom="25dp"
android:ems="10"
android:hint="@string/pass_hint"
android:inputType="textPassword"/>
<Button
android:id="@+id/buttonLogin"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:backgroundTint="@color/colorPrimary"
android:text="@string/login_btn_txt"
android:textColor="@android:color/white"
android:layout_marginBottom="20dp"/>
<ProgressBar
android:id="@+id/loginProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="400dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:visibility="invisible"
android:indeterminate="true"
android:layout_marginBottom="30dp" />
<Button
android:id="@+id/buttonRegister"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:backgroundTint="@android:color/white"
android:text="@string/login_reg_btn_txt"
android:textColor="@color/colorPrimary" />
</LinearLayout>
3단계: 메인 액티비티 코드 작성
src/MainActivity.java 파일에 아래 코드를 추가합니다. 기본적인 액티비티 설정으로, 위에서 작성한 레이아웃을 화면에 표시합니다.
package com.app.sample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
4단계: 머티리얼 디자인 라이브러리 의존성 추가
앱 모듈의 build.gradle 파일에 머티리얼 디자인 라이브러리 의존성을 추가합니다. 이 단계가 핵심으로, 이 의존성을 통해 머티리얼 컴포넌트들을 사용할 수 있습니다.
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.app.sample"
minSdkVersion 21
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
///
implementation "com.google.android.material:material:1.1.0-alpha02"
}
5단계: 매니페스트 파일 확인
Manifests/AndroidManifest.xml 파일에 아래와 같이 메인 액티비티가 올바르게 등록되어 있는지 확인하고 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.app.sample">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
앱 실행하기
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기가 컴퓨터와 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run(실행) 아이콘을 클릭합니다. 옵션 목록에서 자신의 모바일 기기를 선택하면, 해당 기기에 아래와 같은 기본 화면이 표시됩니다.
