인트로 화면과 로그인 화면 배경화면 바꾸는 방법 & 타이틀 텍스트 대신에 로고 이미지 파일 나오게 하기

by 관리자 posted Sep 24, 2015
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

프리미엄 버전 최신버전(앱소스 16.0버전 이상)을 토대로 해서 설명드립니다. 최신버전이 아닐 경우, 먼저 최신버전으로 업그레이드 해주세요.

 

먼저 구글에서 'android intro' 또는 '스마트폰 배경화면' 으로 검색하시고 이미지를 누르면 인트로화면에 쓸만한 배경화면이 많이 나옵니다. 맘에 드는 것을 다운받습니다.

 

직접 제작한 배경화면이 있으면 그것을 사용해도 됩니다.

 

인트로 화면, 로딩화면, 로그인 화면의 배경 및 로고 변경방법은 간단합니다.

 

앱소스의 res/drawable-xhdpi 폴더 안에 있는 3가지 이미지를 적절하게 교체하시면 됩니다.

 

back_intro.png <= 인트로 화면 배경화면

back_loading.png <= 로딩화면 배경화면

back_login.png <= 로그인 화면 배경화면

 

텍스트 대신에 로그를 넣으시려면 앱소스의 res/drawable 아래의 파일을 적절하게 교체해주시면 됩니다.

 

logo_intro.png <= 인트로 화면의 로고

logo_loading.png <= 로딩 화면의 로고

logo_login.png <= 로그인 화면의 로고

 

그리고 QuickstartPreferences.java파일을 적절하게 수정해주시면 됩니다.

 

//Intro screen <- 인트로 화면 설정부분
public static final boolean Intro_use_logo = false; 
public static final boolean Intro_use_background_image = true;
public static final String Intro_background_color = "#244e91";

 

//Loading screen <- 로딩 화면 설정 부분
public static final boolean Loading_use_logo = false;
public static final boolean Loading_use_background_image = true;
public static final String Loading_background_color = "#244e91";

 

//Login screen & Lock screen - use logo <- 로그인 & 잠금화면 설정 부분
public static final boolean Login_use_logo = false;
public static final boolean Login_use_background_image = true;
public static final String Login_background_color = "#244e91";​

 

먼저 인트로 화면 설명을 드리면,

 

//Intro screen 
public static final boolean Intro_use_logo = false; 
public static final boolean Intro_use_background_image = true;
public static final String Intro_background_color = "#244e91";

 

1) Intro_use_logo (true/false)

 

인트로 화면에 텍스트 대신 로그를 사용할지 여부를 설정하는 부분입니다.

false가 기본값이며 앱정식명칭의 텍스트가 나옵니다. true 로 바꾸시면 앱소스의 res/drawable/logo_intro.png 파일을 출력하게 됩니다. 이때 로고 화면이 찌그러질 수 있으니 /res/layout/activity_intro.xml 파일을 열어서 8번째줄 쯤 또는 아래의 내용을 찾아 로고 이미지의 width 및 height를 조정해주셔야 합니다.

 

 
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/introlayout" >

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/back_intro"
android:scaleType="fitXY"
android:id="@+id/intro_back"/>

<ImageView
android:id="@+id/logo_intro"
android:layout_width="250dp"
android:layout_height="110dp"
android:layout_gravity="center_horizontal|center_vertical"
android:src="@drawable/logo_intro"
android:visibility="gone"/>

<TextView
android:id="@+id/introtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:textColor="#ffffff"
android:textSize="30sp"
android:text="@string/app_name" />

</FrameLayout>

 

위 내용에서 

 

<ImageView
        android:id="@+id/logo_intro"
        android:layout_width="250dp"
        android:layout_height="110dp"
        android:layout_gravity="center_horizontal|center_vertical"
        android:src="@drawable/logo_intro"
        android:visibility="gone"/>

 

이 부분의 width와 height를 로고 이미지 크기에 맞게 적절하게 조정하시면 됩니다(단위는 반드시 dp로 해주세요).

 

2) Intro_use_background_image (true/false)

 

이 항목은 인트로 화면의 배경화면을 배경이미지로 꾸밀 것인지, 아니면 배경색으로 지정할 것인지 설정하는 부분입니다. 앞서 인트로 화면 배경화면 이미지를 교체하셨다면, 그 교체한 파일로 배경화면을 꾸미려면 이 항목을 true 그대로 놔두시면 됩니다. 만일 배경이미지가 아닌 색깔(단일색)로 지정하고 싶으시면 false로 바꾸어주시고 다음 항목 3) Intro_background_color 이 부분에 색깔을 입력하셔야 합니다.

 

3) Intro_background_color (hex)

 

2)항목에서 false를 입력하셨다면 여기에 배경색을 입력해주셔야 합니다. 형식은 #ffffff 이런 식으로 입력해주시면 됩니다.

 

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

 

로딩화면과 로그인 화면도 수정 방법은 마찬가지입니다. 

 

로딩화면의 경우 로고가 출력되도록 하시면 원형 로딩바가 자동으로 아래로 내려갑니다.

 

그리고 로딩화면과 로그인 화면에서 로고를 넣으실 때, 인트로화면에서처럼 이미지 width와 height값을 적절하게 조절하셔야 합니다. 

 

로딩화면의 로고부분은 /res/layout/activity_intro.xml 파일에서 39번째 줄에 아래 내용을 찾아 ImageView @+id/logo_loading 부분의 width 와  height를 조절해주시면 됩니다.

 

 

 
<!-- 로딩화면 레이아웃입니다. 로딩화면 배경화면 수정하려면 여기에 작업해주세요. -->
<FrameLayout
android:id="@+id/splashLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal">

<ImageView
android:id="@+id/loading_imv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/back_loading"
android:scaleType="fitXY" />

<ImageView
android:id="@+id/logo_loading"
android:layout_width="250dp"
android:layout_height="110dp"
android:layout_gravity="center_horizontal|center_vertical"
android:src="@drawable/logo_loading"
android:visibility="gone"/>

<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:indeterminateDrawable="@drawable/mycustomprogressbar"
android:id="@+id/progressBar2"/>

</FrameLayout>

 

로그인 화면의 로고이미지 크기 조절은 /res/layout/activity_login.xml 44번째줄에 layout_width와 layout_height를 적절하게 조절해주시면 됩니다.

 

<ImageView
    android:id="@+id/logo_login"
    android:layout_width="200dp"
    android:layout_height="88dp"
    android:src="@drawable/logo_login"
    android:visibility="gone"/>