Android Material Design 따라하기 3 - 로그인 화면 구상(Button)

안녕하세요 프로나인 입니다.

 

Android Material Design 따라하기 3번째 시간입니다.

 

https://koohee.tistory.com/4

Android Material Design 따라하기 2 - 로그인 화면 구상(EditText)

앞에서 EditText를 구현하는 방법을 알아봤는데요.

 

이번에는 로그인화면에서 Button 을 적용시키고 다음 화면으로 넘어가는 방법까지 적용시켜 볼 예정입니다.

---

< activity_main.xml >

<Button
        android:id="@+id/btn_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="@string/Login"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.60">

    </Button>

 

Material Button 은 EditText처럼 TextInputLayout - TextInputEditText 를 사용하는게 아니라

아주 간단하게 <Button> </Button> 을 사용하는 것입니다.

 

---

< MainActivity.java > 

public class MainActivity extends AppCompatActivity {
    ... (코드 생략)
    Button btn_login;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ... (코드생략)
        
        btn_login = (Button) findViewById(R.id.btn_login);

	//btn_login Button의 Click이벤트
        btn_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,MenuActivty.class);
                startActivity(intent);

            }
        });

    }
}

btn_login 에 setOnClickListener 를 선언하여 클릭 이벤트를 완성시킵니다.

 

중간 Intent 선언 부분
new Intent(MainActivity.this , MenuActivity.class )  

MainActivity 에서 MenuActivity 로 화면을 전환 할것이다! 라고 쉽게 이해하시면 되겠습니다.

---

이제 MenuActivity 의 Class 를 생성하고 MenuActivity에 사용될 Layout 을 연결해보겠습니다!! 

 

우선적으로 MenuActivity에 들어갈 Layout을 먼저 만들어 줍니다!

Layout 생성 1

 

App - res - layout (우클릭) - New - Layout resource file

위의 경로로 Layout 을 생성하는 창을 띄워 줍니다 !

 

Layout 생성 2

File name 에는 activity_menu 를 작성하고 Layout을 생성해줍니다.

 

( 이 부분은 자유롭게 적으셔도 무방합니다! 다만 Layout file의 이름은 기억하셨다가 Class에서 Layout을 선언하실때 넣어주시면 됩니다!

그리고 대부분 Root element - LinearLayout 이 기본으로 되어있으실겁니다.

저는 LinearLayout 보다는 ConstraintLayout이 더 사용하기 편하여 따로 설정 해두었습니다! )

---

< activity_menu.xml >

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.textview.MaterialTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="다음 화면"
        android:textSize="30sp"
        android:textStyle="bold"/>
        
</androidx.constraintlayout.widget.ConstraintLayout>

 

다음으로는 MenuActivity의 클래스를 먼저 생성 해보면

JAVA CLASS 생성 1.

JAVA CLASS 생성 2.

위 사진처럼 따라 하시면 MenuActivity를 만드실수 있습니다.

 

< MenuActivity.java >

public class MenuActivty extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);
    }
}

 여기서 Layout file 이름을 다르게 만들었다면 R.layout. ---------- 여기 부분에 자신이 만든 file 이름을 적용하면 됩니다.

---

이렇게 작성하여 어플을 실행시키면 아래 처럼 Material Design이 적용된 로그인 화면을 볼 수 있습니다! 

디자인이 상당히 기본보다는 눈에 띄고 디자인이 세련된것을 볼 수 있습니다!! 

Material Design 적용

---

다음 Material Design - 4 에서는 MenuActivity 에서 여러가지 Material 디자인들을 적용시키는 메뉴들을 

만들어보도록 하겠습니다.

 

 

 

 

 

참조 - 안드로이드 Developer

https://developer.android.com/guide/topics/ui/look-and-feel?hl=ko

Android의 머티리얼 디자인  |  Android 개발자  |  Android Developers

참조 - Material Design

https://material.io/develop/android/

Develop for Android