본문 바로가기
App/Android

[2021.11.23] How to use progressbar on android?(loading screen page)

by injekim97 2021. 11. 23.
반응형

[2021.11.23] How to use progressbar on android?(loading screen page)

 

 

 

이번 게시글은 프로그래스바를 이용해서 안드로이드 스튜디오에 로딩화면 페이지를 만드는 방법에 대해 알아보도록 하자.

 

 

 

 

 

목차

1. 해당 프로젝트에 빈 프로젝트로 SplashScreen 만들기 (파일명 : ActivitySplashScreen.kt)

2. XML 테마 만들기

3. androidManifest.xml 에서 intent-filter 위치 옮기기

 

 

 

 

 

--------------------------------------------------------------------------------------------------------------------------------

1. 해당 프로젝트에 빈 프로젝트로 SplashScreen 만들기 (파일명 : ActivitySplashScreen.kt)

app > java > com.example.progressbar(MainActivity) 있는 곳에 오른쪽 마우스 > New > Activity > Gallery < Empty 로 프로젝트 만듬(ActivitySplashScreen)

 

 

 

 

<ActivitySplashScreen.kt 파일의 Full code>

package com.example.progressbar

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import android.view.WindowManager

class ActivitySplashScreen : AppCompatActivity() {

    private var SPLASH_SCREEN_TIME : Long = 3500

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        window.setFlags(
            WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN,
        )

        setContentView(R.layout.activity_splash_screen)


        Handler(Looper.myLooper()!!).postDelayed({
            startActivity(Intent(this,MainActivity::class.java))
            finish()

        },SPLASH_SCREEN_TIME)

    }
}

-> 이 코드는 안드로이드 스튜디오에서 앱이 구동 될 때 까지의 로딩 화면 이다.

 

 

 

 

* activity_splash_screen.xml 파일의 Full code

-> res > layout > activity_splash_screen.xml

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


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Loading.."
        android:textColor="#000000"
        android:textSize="48sp"
        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.656" />

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="132dp"
        android:layout_height="116dp"
        android:indeterminate="true"
        android:indeterminateTint="#37FF00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.442"></ProgressBar>


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

<로딩 화면>

 

 

 

 

 

 

 

 

<MainActivity.kt 파일의 Full code>

package com.example.progressbar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

-> 이 코드는 안드로이드 스튜디오에서 앱이 구동 된 후 뜨는 앱 화면 이다.

 

 

 

* activity_main.xml 파일의 Full code

-> res > layout > activity_main.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Loading screen page successful !"
        android:textColor="@color/black"
        android:textSize="25dp"
        android:textStyle="bold"
       app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

<로딩 후 뜨는 화면>

 

 

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------

2. XML 테마 만들기

-> 만든 후에  res > values > themes(2) > themes.xml 클릭 (★★★ themes.xml (night) 아님 ★★★) 

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ProgressBar" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

위의 코드에서 3번째 라인만 아래와 같이 코드 변경

 

 

<변경 후>

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ProgressBar" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

 

-> DayNight.DarkActionBar 에서 DayNight.NoActionBar만 변경해주면 됨

 

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------

3. androidManifest.xml 에서 intent-filter 위치 옮기기

-> app > manifests > androidManifest.xml 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.progressbar">

    <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/Theme.ProgressBar">
        <activity
            android:name=".ActivitySplashScreen"
            android:exported="false" />
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

위의 코드를 아래의 코드처럼 변경

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.progressbar">

    <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/Theme.ProgressBar">

        <activity android:name=".ActivitySplashScreen"
            android:exported="true">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

        <activity android:name=".MainActivity">

        </activity>

    </application>
</manifest>

위의 코드와 다르게 intent-filter 의 위치를 변경시켜줘야 한다.

 

 

 

 

 

 

최종 결과

프로그래스바 로딩화면 페이지 구현.mp4
0.29MB

 

 

 

 

 

 

* 2021.11.26 

-> app > manifests > androidManifest.xml 

<activity
    android:name=".ActivitySplashScreen"
    android:exported="true"
    android:theme="@style/Theme.AppCompat">


    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

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

</activity>

-> 꼭 로딩화면 splashscreen 화면을 intent-filter 안에 넣어 줘야 한다.(2시간 동안 계속 찾음)

반응형

댓글