이전예제 

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

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



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



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




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: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: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: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: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"?>
    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>



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

댓글을 달아 주세요