프로그래밍/안드로이드

안드로이드 - 1. 수강신청앱 수강신청앱 로그인 화면 만들기

가카리 2018. 4. 24. 23:00
반응형



첫번째 예제는 다음과 같은 화면을 구성합니다.

이번 예제는 기능상의 구현없이 단순히 xml파일로 화면구성만 합니다.




activity_login.xml

<?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"
    tools:context="com.example.kch.registration_v1.LoginActivity">
   
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="225dp"
            android:orientation="vertical"
            android:background="@color/colorPrimary"
            >
            <ImageView
                android:layout_width="125dp"
                android:layout_height="125dp"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:src="@drawable/univlogo"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Kyowon UNIV"
                android:textColor="#ffffff"
                android:textSize="25dp"
                android:textStyle="bold"
                android:layout_marginTop="10dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Registration Helper"
                android:textColor="#ffffff"
                android:textSize="18dp"
                android:textStyle="bold"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
           
            <EditText
                android:layout_width="280dp"
                android:layout_height="wrap_content"
                android:hint="ID"
                android:layout_gravity="center"
                android:padding="10dp"
                android:textColor="#ffffff"
                android:textColorHint="#ffffff"
                android:id="@+id/idText"
                android:drawableStart="@drawable/ic_person_black_24dp"
                android:drawableLeft="@drawable/ic_person_black_24dp"
                android:layout_marginTop="50dp"
                android:background="@color/colorPrimary"
                />

            <EditText
                android:inputType="textPassword"
                android:layout_width="280dp"
                android:layout_height="wrap_content"
                android:hint="PASSWORD"
                android:layout_gravity="center"
                android:padding="10dp"
                android:textColor="#ffffff"
                android:textColorHint="#ffffff"
                android:id="@+id/passwordText"
                android:drawableStart="@drawable/ic_lock_outline_black_24dp"
                android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
                android:layout_marginTop="10dp"
                android:background="@color/colorPrimary"
                />

            <Button
                android:layout_width="280dp"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:textStyle="bold"
                android:textColor="#ffffff"
                android:background="@color/colorPrimary"
                android:text="Login"
                android:layout_marginTop="10dp"
                android:layout_gravity="center"/>
           
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textSize="18dp"
                android:layout_marginTop="10dp"
                android:text="Member Registration"
                android:id="@+id/registerButton"
                />


        </LinearLayout>
       
    </LinearLayout>


</LinearLayout>

drawable 폴더에 적당한 이미지를 구해다가 넣습니다.

또는 drawable 폴더를 오른쪽 마우스를 눌러서 New-Vector Asset으로 이미지를 골라서 선택합니다.






colors.xml

백그라운드 색을 지정하기 위한 파일입니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#039BE5</color>
    <color name="colorPrimaryDark">#0277BD</color>
    <color name="colorAccent">#546E7A</color>
</resources>


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>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>


AndroidManifest.xml

메니페스트 파일에서는 위에서 설정한 스타일을 지정해줍니다.

<?xml version="1.0" encoding="utf-8"?>
    package="com.example.kch.registration_v1">

    <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=".LoginActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


반응형