[Android] 자기소개 앱 만들기 (안드로이드 기초, Splash)

새로운 프로젝트 생성하는 방법은 아래 포스팅에서 확인해주세요.

[개발(develop)/안드로이드(android)] - [Android] Click 이벤트로 Toast 생성하기 (setOnclickListener, makeToast)

들어가며

---

동작하는 기능 없이 이미지와 텍스트만 존재하는 디자인으로 간단한 자기소개 앱을 만들어보겠습니다.

원래는 메인 화면이 바로 띄우게 했으나, 앱이 처음 동작할 때 너무 밋밋해서 추가로 스플래시 화면까지 만들어 보았습니다.

 

Splash 구현

---

java 우클릭 -> New -> Activity -> Empty Activity 클릭

 

 

Activity 이름을 적고 OK 클릭

 

 

SplashActivty, activity_splash이 생성

 

 

ImageView, TextView로 Splash 디자인 후 제약 설정

activity_splash.xml

   <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.275"
        app:srcCompat="@drawable/intro" />

    <TextView
        android:textSize="25sp"
        android:textColor="@color/originalBlack"
        android:textStyle="bold"
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="52dp"
        android:text="자기소개"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

자동으로 제약이 설정된 activity_splash.xml 코드입니다.

추가로 TextView의 text를 bold 처리했습니다.

 

 

 

액션바를 안 보이게 하기 위해서 res -> values -> styles.xml에 style을 추가했습니다.

SplashActivity.java

public class SplashActivity extends AppCompatActivity {

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

        startSplash();
    }

    void startSplash() {
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent(getApplicationContext(), MainActivity.class);
                startActivity(intent);
                finish();
            }
        }, 2000);
    }
}

SplashActivity.java 코드입니다.

startSplash() 메서드를 구현해서 2초 후에 MainActivity로 전환됩니다.

 

AndroidManifest.xml 에서 시작 액티비티를 수정합니다.

 

 

메인 화면 디자인 입니다.

텍스트를 정돈되게 디자인할 수 없을까 생각하다가 TableLayout을 선택했습니다.

android:stretchColumns="*" 옵션으로 편하게 디자인할 수 있었습니다.

activity_main.xml

    <ImageView
        android:id="@+id/img_profile"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="40dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/bbak" />
    <TableLayout
        android:layout_width="360dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="32dp"
        android:stretchColumns="*"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.538"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/img_profile"
        app:layout_constraintVertical_bias="0.543">
        <TableRow android:layout_height="match_parent">
            <TextView
                android:id="@+id/textView13"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:text="이름"
                android:textAlignment="center"
                android:textColor="@android:color/black"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/textView14"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="임태호"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="16dp">
            <TextView
                android:id="@+id/textView15"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="나이"
                android:textAlignment="center"
                android:textColor="@android:color/black"
                android:textSize="20sp"
                android:textStyle="bold" />
            <TextView
                android:id="@+id/textView16"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="만 24살"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="16dp">
            <TextView
                android:id="@+id/textView17"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="학교"
                android:textAlignment="center"
                android:textColor="@android:color/black"
                android:textSize="20sp"
                android:textStyle="bold" />
            <TextView
                android:id="@+id/textView18"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="인천대학교"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="16dp">
            <TextView
                android:id="@+id/textView19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="전공"
                android:textAlignment="center"
                android:textColor="@android:color/black"
                android:textSize="20sp"
                android:textStyle="bold" />
            <TextView
                android:id="@+id/textView21"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="컴퓨터공학부"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </TableRow>
    </TableLayout>
    <TextView
        android:id="@+id/textView3"
        android:layout_width="248dp"
        android:layout_height="99dp"
        android:layout_marginBottom="16dp"
        android:text="카디 7기 프론티어 임태호입니다"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.496"
        app:layout_constraintStart_toStartOf="parent" />

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getSupportActionBar();
        assert actionBar != null;
        actionBar.hide();

        ImageView profile = findViewById(R.id.img_profile);
        profile.setBackground(new ShapeDrawable(new OvalShape()));
        profile.setClipToOutline(true);
    }
}

액션바를 숨기고 이미지를 원으로 표현했습니다.

실행 화면

---

 

 

참고 자료

---

https://recipes4dev.tistory.com/138

안드로이드 테이블레이아웃. (Android TableLayout)

https://chocorolls.tistory.com/47

Android ImageView 초간단 Rounding 방법

https://www.flaticon.com/kr/free-icon/business-card_1876494?term=introduce&page=1&position=4

Eucalyp이(가) 제작한 명함개의 무료 벡터 아이콘