안드로이드 - 프로젝트9. 디자인을 예쁘게 꾸미기

예제 출처 : https://www.inflearn.com/course

예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Proj_Manager_v9

이전예제 

프로젝트 1. 애플리케이션 화면 디자인 

프로젝트 2. 액티비티 화면 전환

프로젝트 3. 데이터베이스 및 서버 구축

프로젝트 4. 로그인 및 메인 화면 구현

프로젝트 5. 회원목록 출력하기

프로젝트 6. 회원목록을 리스트뷰로 출력하기

프로젝트 7. 회원 삭제 및 관리자 기능

프로젝트 8. 회원 검색 기능 추가

이전까지 했던 예제를 다음과 같이 예쁘게 만드는 작업입니다. 물론 기능은 동일합니다.

1. 다음은 로그인 화면입니다.

2. 다음은 로그인 후 화면입니다.

3. 다음은 회원 계정 출력페이지입니다.

res/drawable/button_login.xml

login화면의 버튼 모양을 정의해주는 xml 파일입니다.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <solid

        android:color="@color/colorAccent"

        />

    <corners

        android:radius="10dp"></corners>

    <padding

        android:left="32dp"

        android:right="32dp"/>

</shape>

res/drawable/edittext_login.xml

login화면의 EditText모양을 정의해주는 xml 파일입니다.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <solid

        android:color="@color/colorWhite"/>

    <padding

        android:left="10dp"

        android:top="4dp"

        android:right="10dp"

        android:bottom="4dp"/>

    <corners

        android:radius="10dp"/>

</shape>

res/drawable/textview_main.xml

main화면에서 TextView 모양을 정의해주는 xml 파일입니다.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <solid

        android:color="#0054FF"/>

    <padding

        android:left="10dp"

        android:top="4dp"

        android:right="10dp"

        android:bottom="4dp"/>

</shape>

activity_login.xml

각 컴포넌트에 마진과 backgroud컬러 텍스트 컬러를 수정해줬습니다.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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"

    android:orientation="vertical"

    android:background="@color/colorPrimary"

    tools:context="com.example.kch.proj_manager_v9.LoginActivity">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:textSize="60dp"

        android:text="Login Page"

        android:textColor="@color/colorWhite"

        android:textStyle="bold"

        android:layout_margin="50dp"

        />

    <EditText

        android:id="@+id/idText"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:hint="ID"

        android:inputType="textPersonName"

        android:gravity="center"

        android:textColorHint="@color/colorGray"

        android:background="@drawable/edittext_login"

        />

    <EditText

        android:id="@+id/passwordText"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:hint="password"

        android:inputType="textPassword"

        android:gravity="center"

        android:textColorHint="@color/colorGray"

        android:background="@drawable/edittext_login"

        />

    <Button

        android:id="@+id/loginbtn"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="8dp"

        android:text="login"

        app:layout_constraintTop_toBottomOf="@+id/passwordText"

        android:gravity="center"

        android:background="@drawable/button_login"

        android:textColor="@color/colorWhite"

        android:layout_gravity="center_horizontal"

        />

    <TextView

        android:id="@+id/registerbtn"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="15dp"

        android:text="register"

        android:textAppearance="@style/TextAppearance.AppCompat.Button"

        android:layout_gravity="center"

        android:textColor="@color/colorWhite"

        />

</LinearLayout>

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"

    android:background="@color/colorPrimary"

    tools:context="com.example.kch.proj_manager_v9.MainActivity">

    <TextView

        android:id="@+id/WelcomeMessage"

        android:layout_width="335dp"

        android:layout_height="42dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="33dp"

        android:text="Welcome  "

        app:layout_constraintHorizontal_bias="0.515"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        android:background="@drawable/textview_main"

        android:gravity="center"

        android:textColor="@color/colorWhite"

        />

    <TextView

        android:id="@+id/textView1"

        android:layout_width="333dp"

        android:layout_height="48dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="12dp"

        android:text="ID"

        android:textAppearance="@style/TextAppearance.AppCompat.Headline"

        app:layout_constraintHorizontal_bias="0.514"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/WelcomeMessage"

        android:textColor="@color/colorWhite"

        />

    <TextView

        android:id="@+id/idText"

        android:layout_width="333dp"

        android:layout_height="48dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="73dp"

        android:textAppearance="@style/TextAppearance.AppCompat.Display1"

        app:layout_constraintHorizontal_bias="0.514"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/WelcomeMessage"

        android:textColor="@color/colorWhite"

        />

    <TextView

        android:id="@+id/textView0"

        android:layout_width="333dp"

        android:layout_height="48dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="132dp"

        android:text="Your Password"

        android:textAppearance="@style/TextAppearance.AppCompat.Headline"

        app:layout_constraintHorizontal_bias="0.514"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/WelcomeMessage"

        android:textColor="@color/colorWhite"

        />

    <TextView

        android:id="@+id/passwordText"

        android:layout_width="333dp"

        android:layout_height="48dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="195dp"

        android:textAppearance="@style/TextAppearance.AppCompat.Display1"

        app:layout_constraintHorizontal_bias="0.514"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/WelcomeMessage"

        android:textColor="@color/colorWhite"

        />

    <Button

        android:id="@+id/manageButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:text="Manage"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        android:layout_marginBottom="8dp"

        android:layout_marginTop="8dp"

        app:layout_constraintTop_toBottomOf="@+id/passwordText"

        app:layout_constraintVertical_bias="0.085"

        android:background="@drawable/button_login"

        />

</android.support.constraint.ConstraintLayout>

activity_management.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.kch.proj_manager_v9.ManagementActivity">

   <LinearLayout

       android:layout_width="368dp"

       android:layout_height="495dp"

       android:orientation="vertical"

       android:background="#d1d1d1"

       tools:layout_editor_absoluteY="8dp"

       tools:layout_editor_absoluteX="8dp">

       <EditText

           android:id="@+id/search"

           android:layout_width="match_parent"

           android:layout_height="wrap_content"

           android:hint="search"

           />

       <ListView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:id="@+id/listView"

            android:layout_marginTop="10dp"

            android:layout_marginRight="15dp"

            android:layout_marginLeft="15dp"

            android:dividerHeight="10dp"

            android:divider="#d1d1d1">

        </ListView>

</LinearLayout>

</android.support.constraint.ConstraintLayout>

activity_register.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.kch.proj_manager_v9.RegisterActivity">

    <EditText

        android:id="@+id/idText"

        android:layout_width="342dp"

        android:layout_height="41dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:hint="id"

        android:inputType="textPersonName"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

    <EditText

        android:id="@+id/passwordText"

        android:layout_width="346dp"

        android:layout_height="44dp"

        android:ems="10"

        android:inputType="textPassword"

        android:layout_marginLeft="8dp"

        app:layout_constraintLeft_toLeftOf="parent"

        android:layout_marginRight="8dp"

        app:layout_constraintRight_toRightOf="parent"

        android:layout_marginTop="10dp"

        app:layout_constraintTop_toBottomOf="@+id/idText" />

    <EditText

        android:id="@+id/nameText"

        android:layout_width="346dp"

        android:layout_height="41dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="12dp"

        android:ems="10"

        android:hint="name"

        android:inputType="textPersonName"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/passwordText" />

    <EditText

        android:id="@+id/ageText"

        android:layout_width="340dp"

        android:layout_height="44dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="10dp"

        android:ems="10"

        android:hint="age"

        android:inputType="textPersonName"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/nameText" />

    <Button

        android:id="@+id/registerbtn"

        android:layout_width="248dp"

        android:layout_height="47dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginTop="8dp"

        android:text="register"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/ageText"

        android:background="@drawable/button_login"

        android:textColor="@color/colorWhite"

        />

</android.support.constraint.ConstraintLayout>

res/values/colors.xml

사용하는 폰트나 배경색에 대한 정의를 하는 xml입니다.

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="colorPrimary">#039BE5</color>

    <color name="colorPrimaryDark">#0277BD</color>

    <color name="colorAccent">#2478FF</color>

    <color name="colorWhite">#FFFFFF</color>

    <color name="colorGray">#909090</color>

</resources>

res/values/styles.xml

<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

    </style>

    <!--프로젝트 완성 강의때 추가함 AndroidManifest.xml파일에서 사용됨-->

    <style name="AppTheme.NoActionBar">

        <item name="windowActionBar">false</item>

        <item name="windowNoTitle">true</item>

    </style>

</resources>

마지막으로 위 styles.xml 에 적용한 테마를 적용하기 위해 다음과 같이 AndroidManifest.xml파일을 수정합니다.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.kch.proj_manager_v9">

    <uses-permission android:name="android.permission.INTERNET" />

    <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.NoActionBar”>  이 라인이 수정되었습니다.

        <activity android:name="com.example.kch.proj_manager_v9.LoginActivity">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

        <activity android:name="com.example.kch.proj_manager_v9.RegisterActivity" />

        <activity android:name="com.example.kch.proj_manager_v9.MainActivity" />

        <activity android:name="com.example.kch.proj_manager_v9.ManagementActivity"></activity>

    </application>

</manifest>