UI Customization

Please refer to the sample before applying to your app. - Github Link

You can customize lockscreen UI by editing the design and adding new features.

The lockscreen consists of one activity. Just like a standard activity, you should 1) create the layout and 2) call a few essential methods inside the activity class.

Please check the bottom of this page to check additional customizable sections.

If you have any questions regarding design customization, please check with Buzzvil BD manager first. Going over https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/402653187 doc beforehand can lead to easier communication.

1. Layout - Drawing views

The layout basically consists of a clock, slider, and background gradation as below. Among them, required are the clock and the slider. You may also add additional views such as camera, etc. if necessary.

Refer to: Layout Guideline

Setting the sizes in sp for components, such as clock and buttons, may affect the layout of lock screen depending on the user's font setting. When using sp, it is neccessary to take various screen resolutions into consideration. Thus, to avoid complexity, it is recommended to use dp as design layout is not affected by user's font setting. (Reference: Android Developer Guides)

1) Clock

Add a view to layout, and update view with the current time in the onTimeUpdated() of your lockscreen activity.

2) Slider

You can customize all the image files that make up the slider.

Slider Attribute	Detail

Slider Attribute	Detail
`slider:sl_left_icon`	left icon of the slider
`slider:sl_right_icon`	right icon of the slider
`slider:sl_pointer`	center image of the slider
`slider:sl_pointer_drag`	center image of the slider during touch
`slider:sl_radius`	the distance between slider center and the center of left/right icons
`slider:sl_text_size`	the size of the reward point texts (Default : 14sp)

Slider Attribute example

<com.buzzvil.buzzscreen.sdk.widget.Slider
     android:id="@+id/locker_slider"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:layout_centerHorizontal="true"
     android:layout_marginBottom="8dp"
     slider:sl_left_icon="@drawable/locker_landing"
     slider:sl_pointer="@drawable/locker_slider_normal"
     slider:sl_pointer_drag="@drawable/locker_slider_drag"
     slider:sl_radius="128dp"
     slider:sl_right_icon="@drawable/locker_unlock"
     slider:sl_text_size="14sp" />

3) Additional views

Just like a standard view, you may add a view to the layout, and implement the features inside the activity.

4) Background gradation

As readability of clock and slider may be affected by the color of campaign images, it is highly recommended to set up a background gradation under the UI.

2. Activity Class - Adding features

Please and . The slider and clock must be implemented inside the activity, while the others are optional.

Create an activity that inherits BaseLockerActivity.
Pass your activity to BuzzScreen.init() as the third parameter.
1. Required features to create on the activity: Slider and clock
2. Else: optional

1) Configuring `AndroidManifest.xml`

If the name of class inheriting BaseLockerActivity is CustomLockerActivity:

<manifest>
    <application>
        ...
        <activity
            android:name=".CustomLockerActivity"
            android:excludeFromRecents="true"
            android:launchMode="singleTask"
            android:screenOrientation="portrait"
            android:taskAffinity="${applicationId}.Locker" 
            android:resizeableActivity="false" />
    </application>
</manifest>

excludeFromRecents, launchMode, screenOrientation, taskAffinity must be set as above.
android:resizeableActivity="false" is optional; the purpose is to prevent users from resizing BuzzScreen activities, which is possible in certain Samsung devices.

2) Clock

The onTimeUpdated function in your BaseLockerActivity is called every minute.
- Override the function to update time-related information such as time, am/pm, date, etc, by using the parameters passed in the function.

3) Slider

Slider is an independent view from lockscreen, so two more steps are required in order to connect it to the lockscreen.

	항목	코드	세부내용

항목

코드

세부내용

1

Register Listener according to unlock / landing

Set up listeners for the slider through

Slider.setLeftOnSelectListener()
Slider.setRightOnSelectListener()

Please call either one of the following methods inside the callbacks accordingly.

Unlock: unlock
Move to landing page: landing

2

Update Slide points

onCurrentCampaignUpdated(), a function in the activity is called at the point of campaign change
- Override the function and call the following methods to update slide points, using the information of the current campaign.
  - Slider.setLeftText()
  - Slider.setRightText()

It is necessary to change the slide points in accordance with the campaign when the current campaign is updated.

Please check below for additional features.

Call setPageIndicators() and set up a view to display previous/next icons (ideally arrows) to indicate if there is more content that can be swiped up/down to.

protected void setPageIndicators(View previous, View next)
- Parameters
  - previous : View indicating that the previous page exists
  - next : View indicating that the next page exists

setPageIndicators(
	findViewById(R.id.locker_arrow_top),
	findViewById(R.id.locker_arrow_bottom)
);

△ Left: default / Right: when user touches the screen