# UI Customizations

This guide shows you how to customize the story experience of your users. These customizations apply to both storyly bar and story view.

WARNING

If you are planning to do some of the customizations in the layout XML file, then the following part should be added as a layout attribute:

xmlns:app="http://schemas.android.com/apk/res-auto"

Before you begin

It is advised to apply these customizations after StorylyInit if you are planning to do the customizations programmatically.

# Storyly Bar Customizations

This section shows supported customizations on the storyly bar.

# Story Group Text Styling

This styling changes the visibility, font, text size, color and number of lines of story group text. Each of the properties can be specified from the layout XML file or from attributes section of design view one by one.

app:storyGroupTextIsVisible="boolean"

app:storyGroupTextColorSeen="@android:color/<color>"
or
app:storyGroupTextColorSeen="#808080"

app:storyGroupTextColorNotSeen="@android:color/<color>"
or
app:storyGroupTextColorNotSeen="#000000"

app:storyGroupTextTypeface="@font/your_font>"

app:storyGroupTextSize="dimension"

app:storyGroupTextMinLines="integer"

app:storyGroupTextMaxLines="integer"

<!--Overrides min and max lines-->
app:storyGroupTextLines="integer"

If you want to set programmatically, you can use setStoryGroupTextStyling function. Please check API Reference for StoryGroupTextStyling (opens new window).

storylyView.setStoryGroupTextStyling(storyGroupTextStyling: StoryGroupTextStyling) {

storylyView.setStoryGroupTextStyling(StoryGroupTextStyling storyGroupTextStyling)

WARNING

If you are planning to do ui customization, do not mix programmatical changes with xml or attributes section of design view. Prefer to use programmatical approach if you want incremental updates on story group text.

# Story Group Icon Background Color

This attribute changes the background color of the story group icon that is shown to the user as skeleton view till the stories are loaded. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupIconBackgroundColor(color: Int)

storylyView.setStoryGroupIconBackgroundColor(Int color)

app:storyGroupIconBackgroundColor="@android:color/<color>"
or
app:storyGroupIconBackgroundColor="#RGBA"

In order to set this attribute from the design view, find and fill the storyGroupIconBackgroundColor attribute.

# Story Group Icon Border Seen State Color

This attribute changes the border color of the story group icons that are seen by the user. The border consists of color gradients. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

WARNING

At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupIconBorderColorSeen(colors: Array<Int>)

storylyView.setStoryGroupIconBorderColorSeen(Integer[] color)

<!--First define an array of color code items as a resource:-->
<array name="seen">
    <item>#FFDBDBDB</item>
    <item>#FFDBDBDB</item>
</array>
<!--Then give the name of the array as reference as a StorylyView attribute:-->
app:storyGroupIconBorderColorSeen="@<location>/seen"

In order to set this attribute from the design view, find and fill the storyGroupIconBorderColorSeen attribute as an array of color codes.

# Story Group Icon Border Not Seen State Color

This attribute changes the border color of the story group icons hat are unseen by the user. The border consists of color gradients. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

WARNING

At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupIconBorderColorNotSeen(colors: Array<Int>)

storylyView.setStoryGroupIconBorderColorNotSeen(Integer[] color)

<!--First define an array of color code items as a resource:-->
<array name="notSeen">
    <item>#FFFED169</item>
    <item>#FFFA7C20</item>
    <item>#FFC9287B</item>
    <item>#FF962EC2</item>
    <item>#FFFED169 </item>
</array>
<!--Then give the name of the array as reference as a StorylyView attribute:-->
app:storyGroupIconBorderColorNotSeen="@<location>/notSeen"

In order to set this attribute from the design view, find and fill the storyGroupIconBorderColorNotSeen attribute as an array of color codes.

# Story Group Pin Icon Color

If any of the story groups are selected as pinned groups from the dashboard, a little star icon will appear along with the story group icon. This attribute changes the background color of this pin icon. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupPinIconColor(color: Int)

storylyView.setStoryGroupPinIconColor(Int color)

app:storyGroupPinIconColor="@android:color/<color>"
or
app:storyGroupPinIconColor="#RGBA"

In order to set this attribute from the design view, find and fill the storyGroupPinIconColor attribute.

# Story Group Ivod Icon Color

If any of the story groups are selected as the IVod group type from the dashboard, a little camera icon will appear along with the story group icon. This attribute changes the background color of this Ivod icon. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupIVodIconColor(color: Int)

storylyView.setStoryGroupIVodIconColor(Int color)

app:storyGroupIVodIconColor="@android:color/<color>"
or
app:storyGroupIVodIconColor="#RGBA"

In order to set this attribute from the design view, find and fill the storyGroupIVodIconColor attribute.

# Story Group Size

This attribute changes the size of the story group. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view. Currently, supported sizes are small, large and custom sizes. The default story group size is large.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupSize(size: StoryGroupSize)

storylyView.setStoryGroupSize(StoryGroupSize size)

<!--Supported sizes are small, large and custom-->
app:storyGroupSize="small"
or
app:storyGroupSize="large"
or
app:storyGroupSize="custom"

In order to set this attribute from the design view, find and fill the storyGroupSize attribute.

TIP

If you set your story group size as custom, you can change a few measures of the story groups such as icon height, icon width, icon corner radius. Check the Custom Size Story Group Icon Styling.

# Custom Size Story Group Icon Styling

This styling changes the shape of the story group icons, their corners, and the distance between each other. You can create square, circle, and oval-shaped icons using these attributes. This styling can be specified programmatically, from the layout XML file or from attributes section of design view. You should set a StoryGroupIconStyling instance, which consists of the following variables: height, width, cornerRadius.

WARNING

This section is effective if you set your story group size as custom. If you set any other size and use this attribute, your changes will not take effect.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupIconStyling(storyGroupIconStyling: StoryGroupIconStyling)

storylyView.setStoryGroupIconStyling(StoryGroupIconStyling storyGroupIconStyling)

app:storyGroupIconHeight="" (should be set as dp, default values is: "80dp")
app:storyGroupIconWidth="" (should be set as dp, default values is: "80dp")
app:storyGroupIconCornerRadius="" (should be set as dp, default values is: "40dp")

In order to set these attributes from design view, find and fill the storyGroupIconHeight, storyGroupIconWidth, and storyGroupIconCornerRadius attributes.

WARNING

If you are not planning to use XML attributes, then you should set pixel values for the variables of StoryGroupIconStyling.

# Story Group List Styling

This styling changes the distance between the story groups and edge paddings of the first and last story groups. This styling can be specified programmatically, from the layout XML file or from attributes section of design view.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupListStyling(storyGroupListStyling: StoryGroupListStyling)

storylyView.setStoryGroupListStyling(StoryGroupListStyling storyGroupListStyling)

app:storyGroupListPaddingBetweenItems="" (should be set as dp)
app:storyGroupListEdgePadding="" (should be set as dp)

In order to set these attributes from design view, find and fill the storyGroupListPaddingBetweenItems and storyGroupListEdgePadding attributes.

WARNING

If you are not planning to use XML attributes, then you should set pixel values for the variables of StoryGroupListStyling.

# Story Group Thematic Icon Image

This feature lets you use different story groups images for different labels. If you set dark mode images for your story groups from the Storyly dashboard, you can set a dark label to show these dark mode icons. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

WARNING

If you use the following methods to set the label without setting dark mode images from the dashboard, default group images will be used. If you already set the dark mode images but send a string label other than dark, again default group images will be used.

In order to set this attribute, use one of the following methods:

storylyView.setStoryGroupIconImageThematicLabel(label: String)

storylyView.setStoryGroupIconImageThematicLabel(String label)

app:storyGroupIconImageThematicLabel="dark"

In order to set this attribute from the design view, find and fill the storyGroupIconImageThematicLabel attribute.

# Storyly Layout Direction

This attribute changes the layout direction of the Storyly Bar. Storyly Bar can either be LTR (Left to right) or RTL (Right to left). If your UI is bidirectional and it changes depending on the device or app language you can use this attribute.

setStorylyLayoutDirection(StorylyLayoutDirection.LTR | StorylyLayoutDirection.RTL)

storylyLayoutDirection=“ltr|rtl”

WARNING

Storyly will use the LTR layout if the StorylyLayoutDirection is not set.

WARNING

To declare your app is willing to support right-to-left (RTL) layout, you need to set android:supportsRtl="true" (opens new window) in your app.

# Story View Customizations

This section shows supported customizations on story view.

# Storyly View Header Text Color

This attribute changes the header text color of the story view. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

In order to set this attribute, use one of the following methods:

storylyView.setStoryItemTextColor(color: Int)

storylyView.setStoryItemTextColor(Int color)

app:storyItemTextColor="@android:color/<color>"
or
app:storyItemTextColor="#RGBA"

In order to set this attribute from the design view, find and fill the storyItemTextColor attribute.

# Storyly View Header Icon Border Color

This attribute changes the header icon border color of the story view. The border consists of color gradients. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

WARNING

At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.

In order to set this attribute, use one of the following methods:

storylyView.setStoryItemIconBorderColor(colors: Array<Int>)

storylyView.setStoryItemIconBorderColor(Integer[] color)

<!--First define an array of color code items as a resource:-->
<array name="storyItemBorderColors">
    <item>#FFDBDBDB</item>
    <item>#FFDBDBDB</item>
</array>
<!--Then give the name of the array as reference as a StorylyView attribute:-->
app:storyItemIconBorderColor="@<location>/storyItemBorderColors"

In order to set this attribute from the design view, find and fill the storyItemIconBorderColor attribute as an array of color codes.

# Storyly View Progress Bar Color

This attribute changes the progress bar colors, two colors, of the story view. The first defined color is the color of the background bars and the second one is the color of the foreground bars while watching the stories. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

WARNING

Only 2 colors must be defined in order to use this attribute.

In order to set this attribute, use one of the following methods:

storylyView.setStoryItemProgressBarColor(colors: Array<Int>)

storylyView.setStoryItemProgressBarColor(Integer[] color)

<!--First define an array of color code items as a resource:-->
<array name="progressBarColors">
    <item>#CCCCCCCC</item>
    <item>#FFFFFFFF</item>
</array>
<!--Then give the name of the array as reference as a StorylyView attribute:-->
app:storyItemProgressBarColor="@<location>/progressBarColors"

In order to set this attribute from the design view, find and fill the storyItemProgressBarColor attribute as an array of color codes.

# Storyly View Header Icon and Text Visibility

This styling changes the visibility of story group text. This attribute can be specified programmatically, from the layout XML file or from attributes section of design view.

In order to set this attribute, use one of the following methods:

storylyView.setStoryHeaderStyling(storyHeaderStyling: StoryHeaderStyling)

storylyView.setStoryHeaderStyling(StoryHeaderStyling storyHeaderStyling)

<!--Takes a boolean true or false, default is true-->
app:storyHeaderIconIsVisible=""
app:storyHeaderTextIsVisible=""

In order to set these attributes from design view, find and fill the storyHeaderIconIsVisible and storyHeaderTextIsVisible attributes.

This styling changes the visibility and icon of story header close icon and share icon. This attributes can be specified programmatically with StoryHeaderStyling (opens new window), from the layout XML file or from attributes section of design view. In order to set this attribute, use one of the following methods:

storylyView.setStoryHeaderStyling(storyHeaderStyling: StoryHeaderStyling)

storylyView.setStoryHeaderStyling(StoryHeaderStyling storyHeaderStyling)

<!--Takes a boolean true or false, default is true-->
app:storyHeaderCloseButtonIsVisible=""

<!--Takes a drawable, if not set use default drawables-->
app:storyHeaderCloseButtonIcon=""
app:storyHeaderShareButtonIcon=""

In order to set these attributes from design view, find and fill the storyHeaderCloseButtonIsVisible, storyHeaderCloseButtonIcon and storyHeaderShareButtonIcon attributes.

# Storyly View Header Text Typeface

This attribute changes the typeface of the story view header text. This attribute can only be specified programmatically.

In order to set this attribute, use one of the following methods:

storylyView.setStoryItemTextTypeface(typeface: Typeface)

storylyView.setStoryItemTextTypeface(Typeface typeface)

# Storyly View Loading View

This customization changes the default loading view to the desired custom loading view. In order to change this view, you need to prepare your own loading view, which must inherit from StorylyLoadingView. You can see an example class in the following code snippet:

class LoadingView(view: View, context: Context) : StorylyLoadingView(context) {

    init {
        addView(view)
    }

    override fun show() {
        this.external_loading.visibility = View.VISIBLE
    }

    override fun hide() {
        this.external_loading.visibility = View.GONE
    }
}

class LoadingView extends StorylyLoadingView {

    private View view;

    public LoadingView(View view, Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        this.view = view;
        addView(view);
    }

    @Override
    public void hide() {
        this.view.setVisibility(INVISIBLE);
    }

    @Override
    public void show() {
        this.view.setVisibility(VISIBLE);
    }
}

After you create your custom loading view, set it by using the following methods:

storylyView.storylyLoadingView = <your instance of StorylyLoadingView subclass>

storyly_view.setStorylyLoadingView(StorylyLoadingView storylyLoadingView);

# Storyly View Interactive Font

This attribute changes the typeface of all text view's font in interactive components. This attribute can only be specified programmatically.

In order to set this attribute, use one of the following methods:

storylyView.setStoryInteractiveTextTypeface(typeface: Typeface)

storylyView.setStoryInteractiveTextTypeface(Typeface typeface)

WARNING

Storyly will use Typeface.Default if custom font is not set.

WARNING

Storyly will arrange font size for each text view in interactive components so that custom font size arrangement is not possible.

← Initial SDK Setup Custom Story Group Styling →

# UI Customizations

# Storyly Bar Customizations

# Story Group Text Styling

# Story Group Icon Background Color

# Story Group Icon Border Seen State Color

# Story Group Icon Border Not Seen State Color

# Story Group Pin Icon Color

# Story Group Ivod Icon Color

# Story Group Size

# Custom Size Story Group Icon Styling

# Story Group List Styling

# Story Group Thematic Icon Image

# Storyly Layout Direction

# Story View Customizations

# Storyly View Header Text Color

# Storyly View Header Icon Border Color

# Storyly View Progress Bar Color

# Storyly View Header Icon and Text Visibility

# Storyly View Header Close and Share Icon Styling

# Storyly View Header Text Typeface

# Storyly View Loading View

# Storyly View Interactive Font