Ok, so you need to
1) Create your activity using a FullScreen Theme with no action bar, so it doesn't look like an app. To do that, you'll create a style in styles.xml and apply it in your manifest.xml
Full Screen Theme for AppCompat
2) For the background image, use an ImageView
. ImageViews
have a scaleType
property out of the box that allows you to select different modes: FIT, Center Crop, etc ...
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
3) Create the rest of the logic to enter the Pin. and show your different mock images. There's a nice component that really fits your "project", its called ViewFlipper
, and basically lets you to put all images inside and select which one to show. Your root layout will look more or less like this:
<ViewFlipper
android:id="@+id/flipper"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- page 0: the lock screen mock -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:src="@drawable/mock_lock_screen"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<EditText
android:id="@+id/pinCode"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="PIN CODE" />
</FrameLayout>
<!-- page 1: chrome screen mock-->
<ImageView
android:src="@drawable/mock_chrome"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- page 2: wikipedia screen mock-->
<ImageView
android:src="@drawable/mock_wiki"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
.
.
</ViewFlipper>
Then in the activity, you can show the lock screen and any mock page:
ViewFlipper mFlipper;
@Override
public void onCreate(Bundle savedInstanceState) {
.
.
mFlipper = (ViewFlipper)findViewById(R.id.flipper);
.
.
.
}
and to change the displayed screen
mFlipper.setDisplayedChild(0); // will show lock screen
mFlipper.setDisplayedChild(1); // will show chrome mock
mFlipper.setDisplayedChild(2); // will show wikipedia mock
hope you get the idea! happy coding.