Skip to content

Quick Start

Nathanael Silverman edited this page Apr 16, 2018 · 5 revisions

Applying an XML-Defined Style

Paris.style(myView).apply(R.style.MyStyle);

Where myView is an arbitrary view instance and MyStyle an XML-defined style. Many but not all attributes are supported, for more see Supported View Types and Attributes.

Combining 2 or More Styles

Paris.styleBuilder(myView)
        .add(R.style.StyleA)
        .add(R.style.StyleB)
        ...
        .apply();

In cases where there's some overlap the attribute value from the last style added prevails. For more see Combining Styles.

Defining Styles Programmatically

Paris.styleBuilder(textView)
        .textColor(Color.GREEN) // Using an actual value
        .textSizeRes(R.dimen.my_text_size_small) // Or a resource
        .apply();

Can be combined with style resources as well:

Paris.styleBuilder(textView)
        .add(R.style.MyGreenTextView)
        .textSizeRes(R.dimen.my_text_size_small)
        .apply();

For more see Defining Styles Programmatically.

Custom View Attributes

Attributes are declared as followed:

<declare-styleable name="MyView">
    <attr name="title" format="string" />
    <attr name="image" format="reference" />
    <attr name="imageSize" format="dimension" />
</declare-styleable>

The custom view is annotated with @Styleable and @Attr:

// The value here corresponds to the name chosen in declare-styleable
@Styleable("MyView")
public class MyView extends ViewGroup {

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // Enables the custom attributes when used in XML layouts
        Paris.style(this).apply(attrs);
    }

    @Attr(R.styleable.MyView_title)
    public void setTitle(String title) {
        ...
    }

    @Attr(R.styleable.MyView_image)
    public void setImage(Drawable image) {
        ...
    }

    @Attr(R.styleable.MyView_imageSize)
    public void setImageSize(@Px int imageSize) {
        ...
    }
}

The @Attr-annotated methods will be called by Paris when the view is inflated with an AttributeSet or when a style is applied.

For more see Custom View Attributes.

Styling Subviews

Attributes are declared as followed for the 2 subviews we'd like to be able to style:

<declare-styleable name="MyHeader">
    <attr name="titleStyle" format="reference" />
    <attr name="subtitleStyle" format="reference" />
    ...
</declare-styleable>

The subview fields are annotated with @StyleableChild:

@Styleable("MyHeader")
public class MyHeader extends ViewGroup {

    @StyleableChild(R.styleable.MyHeader_titleStyle)
    TextView title;
    
    @StyleableChild(R.styleable.MyHeader_subtitleStyle)
    TextView subtitle;
    
    ...
    // Make sure to call Paris.style(this).apply(attrs) during initialization
}

The title and subtitle styles can now be part of MyHeader styles:

<MyHeader
    ...
    app:titleStyle="@style/Title2"
    app:subtitleStyle="@style/Regular" />
Paris.styleBuilder(myHeader)
        .titleStyle(R.style.Title2) // Defined in XML
        .subtitleStyle((builder) -> builder // Defined programmatically
                .textColorRes(R.color.text_color_regular)
                .textSizeRes(R.dimen.text_size_regular))
        .apply();

For more see Styling Subviews.

Linking Styles to Views

@Styleable
public class MyView extends View {

    // For styles defined in XML
    @Style
    static final int RED_STYLE = R.style.MyView_Red;

    // For styles defined programmatically
    @Style
    static void greenStyle(MyViewStyleApplier.StyleBuilder builder) {
        builder.background(R.color.green);
    }

    ...
}

Helper methods are generated for each linked style:

Paris.style(myView).applyRed(); // Equivalent to .apply(R.style.MyView_Red)
Paris.style(myView).applyGreen(); // No equivalent

Paris.styleBuilder(myView)
        .addRed() // Equivalent to .add(R.style.MyView_Red)
        .addGreen() // No equivalent
        ...
        .apply();

For more see Linking Styles to Custom Views.