메뉴 건너뛰기

XE 푸시 앱

프리미엄 버전 최신버전(앱소스 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"/>

 

 

  • ?
    웃흥 2016.05.05 15:53
    텍스트 대신에 로고 이미지로 변경

    에서 로고 이미지가 작은경우 왼쪽 위에 붙어버립니다.

    가운데로 조정하려면 어떻게 해야하나요?
  • ?
    관리자 2016.05.06 17:42
    <ImageView
    android:id="@+id/imageview1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal|center_vertical"
    android:src="@drawable/logo" />


    오류가 있었네요 수정하였습니다.
  • ?
    웃흥 2016.05.07 06:55

    네 확인했습니다. 근데 제가 예민한 것일 수도 있는데 미세조정이 필요할것같습니다. 가운데라기보단 좀더 하단오른쪽에 치우쳐있는 느낌이 들어요

     

    시작점은 정가운데이나 로고등을 삽입하면 로고의 크기만큼 위치가 맞지않는다고 해야할까요? 그런느낌이듭니다.

  • ?
    관리자 2016.05.07 09:11
    미세조정하시려면 아이콘 자체에 오른쪽과 아래쪽의 일정한 여백을 더 주어 만들게 되면 왼쪽, 위로 이동하게 됩니다.
  • ?
    웃흥 2016.05.07 09:16
    그생각을 못했네요! 감사합니다!
  • profile
    가츠 2016.06.06 22:37
    이거는 프리미엄 버전에 해당하는 거죠?
    무료버전에는 back_in.png 가 없거든요ㅠㅠ 저 이름으로 넣어도 안나오네요 ㅎㅎ;;
  • ?
    관리자 2016.06.06 23:13
    네 팁 게시판은 전부 프리미엄 버전용입니다. ^^
  • ?
    웃흥 2016.06.10 03:13
    3) 잠금화면의 경우 /res/layout/activity_main.xml 21번째줄 FrameLayout(id : lock_activity)에 빨간줄 추가

    <FrameLayout
    android:id="@+id/lock_activity"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:visibility="gone">

    그리고 역시 그 밑에 <ImageView ... /> 이 전체 태그 부분을 삭제해주세요.

    이부분 재확인 부탁드립니다. 팁이 올라오기전에 이방법으로 수정을 해보았는데 오류가 나서 문의를 드렸거든요

    근데 동일한방법이라서 제가 실수를했나해서 다시 해보았더니 역시 안되네요.
  • ?
    웃흥 2016.06.10 03:14

    Error:(916, 49) error: cannot find symbol variable lock_back

    이런에러가발생합니다.

     

    싱크 맞출/땐 괜찮은데 빌드할때 생깁니다.

  • ?
    남후뉘 2020.07.20 15:34
    질문 드립니다. 앱의 안드로이드나 ios나 인트로 화면이 있는 상황인데, 인트로화면 [intro.png]파일명은 같고 이미지 모양만 다르게 해서 교체 하려고 합니다. 앱은 잘 몰라서 그러는데, 어떻게 인트로화면 바뀐 이미지를 덮어쓰기해서 바뀌게 하나요. 감사합니다 좋은하루 되세요.

팁 게시판

앱 제작시 유용한 팁이나 자료들을 나누는 게시판입니다. 해당 내용들은 모두 프리미엄 버전을 위한 팁입니다.

List of Articles
번호 제목 글쓴이 최근 수정일 조회 수
» 인트로 화면과 로그인 화면 배경화면 바꾸는 방법 & 타이틀 텍스트 대신에 로고 이미지 파일 나오게 하기 10 관리자 2020.07.20 2020
20 자바스크립트로 앱로그인,앱설정창,전면애드몹,공유화면 호출하는 방법 관리자 2020.02.12 147
19 xe 1.9.3 이상버전에서 첨부파일 오류 해결 위한 패치파일(xe 1.11.0버전 반영, 2018-10-11) 14 file 관리자 2018.10.15 561
18 (xe코어 1.11.0버전 반영)회원가입 프로필 사진 파일 업로드를 위한 xe코어 member모듈 수정 16 file 관리자 2018.10.11 1873
17 admob 사용하는 방법 8 file 관리자 2018.06.12 1608
16 GPS 기능 및 앱 사용자 현재 위치 파악할 수 있는 기능 넣기 5 관리자 2018.02.13 1031
15 다른 모듈에서 푸시 알림 보내는 기능 넣는 방법(2018년 2월 8일 수정) 9 관리자 2018.02.08 722
14 하단메뉴 & 퀵메뉴 설정 방법 안내! file 관리자 2017.12.29 693
13 스마트폰에 내장된 네이버나 크롬등의 브라우저로 모바일 페이지에 접속할 경우와 웹뷰버전 앱으로 모바일 페이지에 접속할 경우 다르게 보이도록 하기 4 관리자 2017.06.13 928
12 flat 모바일 레이아웃과 sweetMobile 레이아웃 메뉴버튼과 뒤로가기 버튼 동작 10 file 관리자 2016.09.08 1115
11 마켓 플레이스 연동 위해 모듈 수정 방법 11 file 관리자 2016.07.07 617
10 GCM API 키 받기 file 관리자 2016.07.05 1427
9 권한 에러가 되었을 때 메시지 모듈 로그인 화면에서 앱 로그인으로 링크시키는 방법 3 file 관리자 2016.05.09 380
8 알림음 바꾸는 방법 관리자 2016.04.02 731
7 small icon 색상변경 위한 이미지 원본 파일 2 file 관리자 2016.03.31 289
6 퀵 메뉴 색깔 위치 수동변경 방법 관리자 2016.03.18 423
5 관리자 공지 사항 무조건 알림 가도록 하는 방법 관리자 2016.01.28 310
4 앱상에서 외부 사이트 페이지 나타날 수 있도록 하는 방법 1 관리자 2016.01.28 310
3 기타 모듈도 푸시 알림이 되도록 하는 방법 3 관리자 2016.01.21 384
2 모바일 페이지에서 '로그인' 눌렀을 때, 앱일 경우 앱 로그인으로 연결하는 방법 file 관리자 2015.12.11 490
Board Pagination Prev 1 2 Next
/ 2