안드로이드 스튜디오 로그인 화면 꾸미기 - andeuloideu seutyudio logeu-in hwamyeon kkumigi

안녕하세요, 데브입니다.

4편은 그동안 만든 서버와 데이터베이스를 가지고 기능을 구현해 보겠습니다.

우선 안드로이드 스튜디오를 열어보겠습니다.

그럼 다음과 같은 화면이 뜨는데 상단에 있는 Start a new Android Studio Project 를 클릭합니다.

그럼 다음과 같은 화면이 뜨는데 Empty Project 를 선택 후 Next 를 클릭합니다.

이제 프로젝트명을 설정해야 합니다 저는 LoginRegisterExample 으로 설정하겠습니다. 언어는 Java 로 선택 후 Next 를 클릭합니다.

그럼 이러한 화면이 나옵니다.

(위치는 app -> res -> layout 순으로 클릭하시면 됩니다.)

만약 이러한 화면이 나온다면 밑에 Text 를 클릭하시면 나옵니다.

이제 이곳에 xml 을 입력해 보겠습니다. 코드는 다음과 같습니다.

<activity_login.xml>

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@color/bg_register"

android:gravity="center"

android:orientation="vertical"

android:padding="10dp" >

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:orientation="vertical"

android:paddingLeft="20dp"

android:paddingRight="20dp">

<EditText

android:id="@+id/et_id"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="10dp"

android:background="@color/input_register_bg"

android:hint="@string/hint_id"

android:inputType="textCapWords"

android:padding="10dp"

android:textColor="@color/input_register"

android:textColorHint="@color/input_register_hint" />

<EditText

android:id="@+id/et_pass"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="10dp"

android:background="@color/input_register_bg"

android:hint="@string/hint_password"

android:inputType="textEmailAddress"

android:padding="10dp"

android:textColor="@color/input_register"

android:textColorHint="@color/input_register_hint" />

<Button

android:id="@+id/btn_login"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dip"

android:background="#ea4c88"

android:text="@string/btn_login"

android:textColor="@color/white" />

<Button

android:id="@+id/btn_register"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dip"

android:background="#ea4c88"

android:text="@string/btn_register"

android:textColor="@color/white" />

</LinearLayout>

이제 이 화면에 스타일을 추가해보겠습니다. 스타일은 color.xml 에서 추가해 주시면 됩니다.

(경로는 app -> res -> values 입니다)

아래 코드를 추가해 줍니다.

<style.xml>

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

<color name="white">#ffffff</color>

<color name="input_register_bg">#ffffff</color>

<color name="btn_login_bg">#eceef1</color>

</resources>

이제 필요한 글자를 넣어보겠습니다. 글자는 xml 에 직접 넣는 것보나 string.xml 에 추가해 주는것이 추후에 변경할때 일일이 찾지 않고 string.xml 에서 변경을 해주면 됩니다. 또한 크기도 줄일 수 있습니다.

<string.xml>

<string name="app_name">PDOLogin</string>

<string name="hint_id">ID를 입력하세요</string>

<string name="hint_password">패스워드를 입력하세요</string>

<string name="hint_name">성명을 입력하세요</string>

<string name="hint_mobileNO">휴대폰번호를 입력하세요</string>

<string name="hint_email">이메일을 입력하세요</string>

</resources>

이제 이 추가한 string 파일을 android:text="@string/strig 아이디 이렇게 추가 해주시면 됩니다.

로그인 화면

그럼 다음과 같은 디자인이 나올 것입니다.

회원가입 화면

이제 java 파일을 추가해 주겠습니다.

파일 이름은 RegisterRequest 로 하겠습니다. 여기서는 회원가입 화면에서 입력받은 값을 요청합니다.

아래 코드를 추가해 줍니다.

<RegisterRequest.java>

public class RegisterRequest extends StringRequest {

//서버 URL 설정(php 파일 연동)

private Map<String, String>map;

//private Map<String, String>parameters;

public RegisterRequest(String userID, String userPassword, String userName, int userAge, Response.Listener<String> listener) {

map = new HashMap<>();

map.put("userPassword", userPassword);

map.put("userAge", userAge + "");

}

@Override

protected Map<String, String>getParams() throws AuthFailureError {

return map;

}

이때 주의할점은 데이터베이스에서 설정한 컬럼명과 닷홈 호스트 주소 및 php 파일명은 똑같이 철자 하나라도 같게 하셔야 합니다. 그렇지 않으면 오류가 납니다. 치지 말고 복붙을 권장합니다.

파일을 하나 더 만들어 주겠습니다 파일명은 RegisterActivity로 하겠습니다.

<RegisterActivity.java>

public class RegisterActivity extends AppCompatActivity {

private EditText et_id, et_pass, et_name, et_age;

private Button btn_register;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate( savedInstanceState );

setContentView( R.layout.activity_register );

//아이디값 찾아주기

et_id = findViewById( R.id.et_id );

et_pass = findViewById( R.id.et_pass );

et_name = findViewById( R.id.et_name );

et_age = findViewById( R.id.et_age );

//회원가입 버튼 클릭 시 수행

btn_register = findViewById( R.id.btn_register );

btn_register.setOnClickListener( new View.OnClickListener() {

@Override

public void onClick(View view) {

String userID = et_id.getText().toString();

String userPass = et_id.getText().toString();

String userName = et_name.getText().toString();

int userAge = Integer.parseInt( et_age.getText().toString() );

Response.Listener<String> responseListener = new Response.Listener<String>() {

@Override

public void onResponse(String response) {

try {

JSONObject jsonObject = new JSONObject( response );

boolean success = jsonObject.getBoolean( "success" );

//회원가입 성공시

if(success) {

Toast.makeText( getApplicationContext(), "성공", Toast.LENGTH_SHORT ).show();

Intent intent = new Intent( RegisterActivity.this, LoginActivity.class );

startActivity( intent );

//회원가입 실패시

} else {

Toast.makeText( getApplicationContext(), "실패", Toast.LENGTH_SHORT ).show();

return;

}

} catch (JSONException e) {

e.printStackTrace();

}

};

//서버로 Volley를 이용해서 요청

RegisterRequest registerRequest = new RegisterRequest( userID, userPass, userName, userAge, responseListener);

RequestQueue queue = Volley.newRequestQueue( RegisterActivity.this );

queue.add( registerRequest );

}

});

}

파일을 하나 더 만들어 보겠습니다 파일명은 LoginRequest 로 하겠습니다.

아래 코드를 추가해 줍니다.

<LoginRequst.java>

public class LoginRequest extends StringRequest {

//서버 URL 설정(php 파일 연동)

private Map<String, String>map;

public LoginRequest(String userID, String userPassword, Response.Listener<String> listener) {

map = new HashMap<>();

map.put("userPassword", userPassword);

}

@Override

protected Map<String, String>getParams() throws AuthFailureError {

return map;

}

이곳 역시 데이터베이스에서 설정한 컬럼명과 닷홈 호스트 주소 및 php 파일명은 똑같이 철자 하나라도 같게 하셔야 합니다.

그렇지 않으면 오류가 납니다. 치지 말고 복붙을 권장합니다.

파일을 하나 더 만들어 보겠습니다 파일명은 LoginActivity 로 하겠습니다.

아래 코드를 추가해 줍니다.

<LoginActivity.java>

public class LoginActivity extends AppCompatActivity {

private EditText et_id, et_pass;

private Button btn_login, btn_register;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate( savedInstanceState );

setContentView( R.layout.activity_login );

et_id = findViewById( R.id.et_id );

et_pass = findViewById( R.id.et_pass );

btn_register = findViewById( R.id.btn_register );

btn_register.setOnClickListener( new View.OnClickListener() {

@Override

public void onClick(View view) {

Intent intent = new Intent( LoginActivity.this, RegisterActivity.class );

startActivity( intent );

}

});

btn_login = findViewById( R.id.btn_login );

btn_login.setOnClickListener( new View.OnClickListener() {

@Override

public void onClick(View view) {

String userID = et_id.getText().toString();

String userPass = et_pass.getText().toString();

Response.Listener<String> responseListener = new Response.Listener<String>() {

@Override

public void onResponse(String response) {

try {

JSONObject jsonObject = new JSONObject( response );

boolean success = jsonObject.getBoolean( "success" );

if(success) {//로그인 성공시

String userID = jsonObject.getString( "userID" );

String userPass = jsonObject.getString( "userPassword" );

String userName = jsonObject.getString( "userName" );

String userAge = jsonObject.getString( "userAge" );

Toast.makeText( getApplicationContext(), "로그인 성공", Toast.LENGTH_SHORT ).show();

Intent intent = new Intent( LoginActivity.this, MainActivity.class );

intent.putExtra( "userID", userID );

intent.putExtra( "userPass", userPass );

intent.putExtra( "userName", userName );

intent.putExtra( "userAge", userAge );

startActivity( intent );

} else {//로그인 실패시

Toast.makeText( getApplicationContext(), "로그인 실패", Toast.LENGTH_SHORT ).show();

return;

}

} catch (JSONException e) {

e.printStackTrace();

}

};

LoginRequest loginRequest = new LoginRequest( userID, userPass, responseListener );

RequestQueue queue = Volley.newRequestQueue( LoginActivity.this );

queue.add( loginRequest );

}

});

}

이제 activity_main.xml 로 이동합니다

activity_main 에서는 로그인 성공 시 메인 화면을 만들어 보겠습니다.

아래 코드를 추가해 줍니다.

<activity_main.xml>

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@color/bg_register"

android:gravity="center"

android:orientation="vertical"

android:padding="10dp" >

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="Hongdroid App"

android:gravity="center"

android:textSize="30dp"/>

<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="아이디"

android:gravity="center"

android:textSize="30dp"/>

<TextView

android:id="@+id/tv_id"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="TextView"

android:gravity="center"

android:textSize="30dp"/>

<TextView

android:id="@+id/textView3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="비번"

android:gravity="center"

android:textSize="30dp"/>

<TextView

android:id="@+id/tv_pass"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="TextView"

android:gravity="center"

android:textSize="30dp"/>

<TextView

android:id="@+id/textView4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="이름"

android:gravity="center"

android:textSize="30dp"/>

<TextView

android:id="@+id/tv_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="TextView"

android:gravity="center"

android:textSize="30dp"/>

<TextView

android:id="@+id/textView8"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="나이"

android:gravity="center"

android:textSize="30dp"/>

<TextView

android:id="@+id/tv_age"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="TextView"

android:gravity="center"

android:textSize="30dp"/>

</LinearLayout>

TextView 의 역할은 데이터베이스에 있는 회원정보를 메인 화면에 뿌려주는 역할을 담당합니다.

이제 MainActivity 로 이동합니다

MainActivity 에 아래 코드를 추가해 줍니다.

<MainActivity.java>

public class MainActivity extends AppCompatActivity {

private TextView tv_id, tv_pass, tv_name, tv_age;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate( savedInstanceState );

setContentView(R.layout.activity_main);

tv_id = findViewById(R.id.tv_id);

tv_pass = findViewById(R.id.tv_pass);

tv_name = findViewById(R.id.tv_name);

tv_age = findViewById(R.id.tv_age);

Intent intent = getIntent();

String userID = intent.getStringExtra("userID");

String userPass = intent.getStringExtra("userPass");

String userName = intent.getStringExtra("userName");

String userAge = intent.getStringExtra("userAge");

tv_id.setText(userID);

tv_pass.setText(userPass);

tv_name.setText(userName);

tv_age.setText(userAge);

}

이제 개발이 완료 되었습니다. 실행시켜보겠습니다. 빌드는 상단에 플레이 버튼을 클릭합니다.

빌드를 하면 기본적으로 AVD가 제공됩니다. AVD는 가상 디바이스로서 여기서 테스트를 할 수 있습니다.

빌드를 하면 다음과 같은 디바이스 화면이 나올 것입니다. 이제 여기서 회원가입 버튼을 눌러보겠습니다.

이제 여기서 회원 정보를 입력 후 회원가입 버튼을 클릭합니다.

가입이 완료 되면 성공 이라는 토스트를 볼 수 있습니다. 이제 여기서 데이터베이스를 확인해 보겠습니다.

방금 입력한 정보가 잘 들어갔습니다. 이제 이 정보를 가지고 로그인을 해보겠습니다.

로그인 성공시 로그인 성공 이라는 토스트 메시지와 함께

다음과 같이 메인화면에 회원정보가 출력되면 로그인이 성공적으로 진행된 것입니다.

이제 로그인 및 회원가입 기능이 모두 완료 되었습니다.

수고하셨습니다^^

다음시간에는 아이디 중복확인, 스피너, 라디오버튼의 값을 저장하는 방법에 대해 알아보겠습니다.

안드로이드 로그인 처리

안드로이드 스튜디오 로그인 화면 꾸미기 - andeuloideu seutyudio logeu-in hwamyeon kkumigi

<activity_login.xml>

<style.xml>

<string.xml>

<RegisterRequest.java>

<RegisterActivity.java>

<LoginRequst.java>

<LoginActivity.java>

<activity_main.xml>

<MainActivity.java>

관련 게시물

시트라 3ds 파일 - siteula 3ds pail

원신 안드로이드 컨트롤러 - wonsin andeuloideu keonteulolleo

요기요 번호 인증 - yogiyo beonho injeung

배틀넷 다운로드 무한로딩 - baeteulnes daunlodeu muhanloding

폰 프로젝션 이란 - pon peulojegsyeon ilan

안드로이드 TV 실시간 TV - andeuloideu TV silsigan TV

로그인 무림 나무위키 - logeu-in mulim namuwiki

컨트롤러 안드로이드 게임 - keonteulolleo andeuloideu geim

알pdf 흑백 변환 - alpdf heugbaeg byeonhwan

NPlayer 스트리밍 - nPlayer seuteuliming

광고하는

최근 소식

주민등록번호 로 휴대폰 번호 찾기 - jumindeunglogbeonho lo hyudaepon beonho chajgi

아기는 몇살까지? - agineun myeochsalkkaji?

섬머 포켓 스위치 - seommeo pokes seuwichi

사진 수염 제거 어플 - sajin suyeom jegeo eopeul

복면가 왕 인디언 인형 누구야? - bogmyeonga wang indieon inhyeong nuguya?

마법천자문 전투력 순위 - mabeobcheonjamun jeontulyeog sun-wi

롤20 브금 매크로 - lol20 beugeum maekeulo

아동학대예방교육 가정통신문 - adonghagdaeyebang-gyoyug gajeongtongsinmun

Ezpdf 여백 없이 인쇄 - Ezpdf yeobaeg eobs-i inswae

온 세상 창조주 ppt - on sesang changjoju ppt

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의