Android - How to make a real fake lock screen

Question

I develop an Android application and I need to create a "fake lockscreen". I explain me.

The application should display a black screen like if the screen was locked (easy), then I want to display a fake lockscreen when the user tap on the lock/unlock phone button.

My problem is, when I set the application background with the current wallpaper (get with wallpaper manager) the background is not "cropped". The background image fit on the screen instead of, like in the "home screen" of the phone, fit on the number of desktop.

I try to use getBuiltInDrawable(FLAG_LOCK) but it's available only from API 24 and, when I try, the result is not what I'm expecting =/

Is there someone that have an idea on the question here ?

Thank you in advance. Baptiste.

Answer 1

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.