[서울시 앱 공모전 / 서울시를 이겨라] Guide Splash Activity with VideoView

2017. 12. 8. 00:28ㆍAndroid

Guide Splash Activity with VideoView


# VideoView 사용


resources 디렉토리에 raw 디렉토리 생성 후 배경으로 설정할 비디오를 저장한다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class GuideSplashActivity extends Activity {
    private final long FINISH_INTERVAL_TIME = 2000;
    private long backPressedTime = 0;
 
    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
 
    Button btnStart;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        // making notification bar transparent
        changeStatusBarColor();
 
        setContentView(R.layout.activity_guide_splash);
 
        //비디오 배경 설정
        VideoView mVideoView = (VideoView) findViewById(R.id.bgVideoView);
        Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.splash_video);
        mVideoView.setVideoURI(uri);
        mVideoView.start();
        mVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mediaPlayer) {
                mediaPlayer.setLooping(true);
            }
        });
    }
}
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">
 
        <VideoView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/bgVideoView" />
 
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true" />
 
        <LinearLayout
            android:id="@+id/layoutDots"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dots_height"
            android:gravity="center"
            android:layout_gravity="center_horizontal|bottom"
            android:orientation="horizontal"
            android:layout_marginBottom="120dp">
 
        </LinearLayout>
 
        <Button
            android:id="@+id/btn_start"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_marginBottom="50dp"
            android:background="@drawable/splash_button_shape"
            android:text="시작하기"
            android:textColor="@android:color/white"
            android:textStyle="bold"
            android:visibility="invisible"/>
 
    </FrameLayout>
 
</RelativeLayout>
cs


Layout 파일에서 FrameLayout 안에 맨 처음에 VideoView를 배치시키면 FrameLayout 특성상 가장 뒷쪽에 배치가 되기 때문에 배경화면처럼 보이게 할 수 있는 것이다.


Android에서 제공하는 VideoView를 사용하면 디바이스 화면에 가득 채워지지 않는 것을 확인할 수 있다.


그래서 아래와 같이 MyVideoView를 따로 만들어서 VideoView의 크기를 조절해서 화면에 가득채울 수 있게 만들어줘야한다.




# VideoView 사용하면 화면이 다 채워지지 않음. MyVideoView 사용해서 화면에 비디오 가득 채움


MyVideoView.java 파일 생성 및 작성


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.WindowManager;
import android.widget.VideoView;
 
public class MyVideoView extends VideoView {
    public MyVideoView(Context context) {
        super(context);
        init(context);
    }
 
    public MyVideoView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
 
    public MyVideoView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }
 
    private void init(Context context) {
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getMetrics(displayMetrics);
        int deviceWidth = displayMetrics.widthPixels;
        int deviceHeight = displayMetrics.heightPixels;
        setMeasuredDimension(deviceWidth, deviceHeight);
    }
}
 
cs


아래와 같이 새롭게 만든 MyVideoView 위젯을 사용해서 배경화면 비디오를 설정해준다.


1
2
3
4
5
6
7
8
9
10
11
        //비디오 배경 설정
        MyVideoView mVideoView = (MyVideoView) findViewById(R.id.bgVideoView);
        Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.splash_video);
        mVideoView.setVideoURI(uri);
        mVideoView.start();
        mVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mediaPlayer) {
                mediaPlayer.setLooping(true);
            }
        });
cs


layout에서도 새로 만든 위젯의 패키지를 덧붙여서 사용을 해준다.


1
2
3
4
        <com.example.jaehyukshin.welcomeseoulloreview.MyVideoView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/bgVideoView" />
cs




# 샘플 영상





#예제 코드는 Github에서 볼 수 있습니다




# ImageView 추가


activity_guide_splash.xml에 기본 이미지를 추가해준다.

ViewPager가 돌아가도 기본적으로 위치해놓은 이미지라서 고정이 돼있는 효과를 볼 수 있다.


guide_splash_slide1,2,3에 가이드 문구 이미지를 넣어서 설명하고 싶은 말을 적어놓으면, guide_splash_slide 이미지는 ViewPager를 통해서 움직이는 효과를 볼 수 있다.


먼저 사진과 같이 이미지를 drawable에 추가해준다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">
 
        <com.example.jaehyukshin.welcomeseoulloreview.MyVideoView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/bgVideoView" />
 
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true" />
 
        <ImageView
            android:id="@+id/logo"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center_horizontal|top"
            android:layout_marginTop="50dp"
            android:background="@drawable/logo" />
 
        <LinearLayout
            android:id="@+id/layoutDots"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dots_height"
            android:gravity="center"
            android:layout_gravity="center_horizontal|bottom"
            android:orientation="horizontal"
            android:layout_marginBottom="120dp">
 
        </LinearLayout>
 
        <Button
            android:id="@+id/btn_start"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_marginBottom="50dp"
            android:background="@drawable/splash_button_shape"
            android:text="시작하기"
            android:textColor="@android:color/white"
            android:textStyle="bold"
            android:visibility="invisible"/>
 
        <ImageView
            android:id="@+id/i_seoul_u"
            android:layout_width="80dp"
            android:layout_height="12dp"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_marginBottom="20dp"
            android:background="@drawable/i_seoul_u" />
 
    </FrameLayout>
 
</RelativeLayout>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <ImageView
        android:layout_width="300dp"
        android:layout_height="30dp"
        android:layout_marginTop="400dp"
        android:background="@drawable/splash_text1"
        android:layout_gravity="center_horizontal|bottom"
        android:gravity="center"
        android:text="서울로7017에 대한 모든 것 안내"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:textStyle="bold" />
</LinearLayout>
cs


아래와 같이 guide_splash_slide1,2,3의 ImageView를 다르게 설정해준다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <ImageView
        android:layout_width="350dp"
        android:layout_height="30dp"
        android:layout_marginTop="400dp"
        android:background="@drawable/splash_text2"
        android:layout_gravity="center_horizontal|bottom"
        android:gravity="center"
        android:text="증강현실로 공유하는 서울로7017의 추억"
        android:textColor="@color/white"
        android:textSize="20dp"/>
</LinearLayout>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <ImageView
        android:layout_width="280dp"
        android:layout_height="30dp"
        android:layout_marginTop="400dp"
        android:background="@drawable/splash_text3"
        android:layout_gravity="center_horizontal|bottom"
        android:gravity="center"
        android:text="맘껏 서울로7017을 둘러보세요."
        android:textColor="@color/white"
        android:textSize="20dp"/>
</LinearLayout>
cs




# 샘플 영상





# 예제 코드는 Github에서 볼 수 있습니다.




# 참고 사이트)


VideoView를 이용한 비디오 배경화면 구현 예제

https://github.com/jacktiong92/joox-login-screen-android


MyVideoView 생성해서 비디오 화면 가득 채우기

https://blog.wonhada.com/?p=1512


저작자표시 비영리 변경금지 (새창열림)

'Android' 카테고리의 다른 글

[서울시 앱 공모전 / 서울시를 이겨라] Tmap API 지도 띄우기  (1) 2017.12.12
[서울시 앱 공모전 / 서울시를 이겨라] Guide Splash Activity with Viewpager  (0) 2017.12.06
[Global SW 공모대전] README 이미지  (0) 2017.12.04
[서울시 앱 공모전 / 서울시를 이겨라] ViewPager with fragments  (0) 2017.11.24
[서울시 앱 공모전 / 서울시를 이겨라] 서울 열린데이터 광장 Open API 사용 / AsyncTask / Parsing  (0) 2017.11.22

관련글

티스토리툴바