ShapeView Documentation

repository·master·Indexed 21 days ago

https://github.com/getactivity/shapeview

An Android framework for handling shape-based views and visual components. It allows developers to define shapes, colors, gradients, and shadows directly via XML attributes or Java builder patterns, eliminating the need for separate XML drawable files. Supported components include ShapeTextView, ShapeButton, ShapeImageView, and various ViewGroup subclasses like ShapeLinearLayout and ShapeConstraintLayout.

Tokens: 3.3K
Snippets: 6
Records: 8
Agent score: 27%

What's inside ShapeView

Supported ShapeView components
master
ShapeView attributes can be applied to the following classes:
View Subclasses:
- ShapeView
- ShapeTextView
- ShapeButton
- ShapeImageView
- ShapeRadioButton
- ShapeCheckBox
- ShapeEditText
ViewGroup Subclasses:
- ShapeLinearLayout
- ShapeFrameLayout
- ShapeRelativeLayout
- ShapeConstraintLayout
- ShapeRecyclerView
- ShapeRadioGroup
https://github.com/getactivity/shapeview/blob/master/README-en.md
Integrate ShapeView into your Android project
master
To use ShapeView, you must first configure the JitPack repository and then add the dependencies. The repository configuration method depends on your Gradle version.
1. Configure JitPack Repository
For Gradle versions below 7.0: Add the following to your root build.gradle file:
```
allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}
```
For Gradle versions 7.0 or above: Add the following to your settings.gradle file:
```
dependencyResolutionManagement {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}
```
2. Add Dependencies
In your app-level build.gradle file, ensure you support JDK 1.8 and add the ShapeView and ShapeDrawable libraries:
```
android {
    compileOptions {
        targetCompatibility JavaVersion.VERSION_1_8
        sourceCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    implementation 'com.github.getActivity:ShapeView:11.0'
    implementation 'com.github.getActivity:ShapeDrawable:5.0'
}
```
```
implementation 'com.github.getActivity:ShapeView:11.0'
implementation 'com.github.getActivity:ShapeDrawable:5.0'
```
https://github.com/getactivity/shapeview/blob/master/README-en.md
Access the English documentation for ShapeView
master
The primary English documentation for the ShapeView framework is located in the README-en.md file. Use this file for setup instructions, API references, and usage guides in English.
https://github.com/getactivity/shapeview/blob/master/README.md

Configure ShapeView attributes via Java code

master

You can dynamically update the background and text color of a ShapeButton using its builder pattern.

Important: You must call .intoBackground() or .intoTextColor() at the end of the builder chain for the changes to take effect.

ShapeButton shapeButton = findViewById(R.id.btn_main_test);
shapeButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Update background shape
        shapeButton.getShapeDrawableBuilder()
                .setSolidColor(0xFF000000)
                .setStrokeColor(0xFF5A8DDF)
                .intoBackground(); // Required to apply changes

        // Update text color
        shapeButton.getTextColorBuilder()
                .setTextColor(0xFFFFFFFF)
                .intoTextColor(); // Required to apply changes

        shapeButton.setText("The color has changed");
    }
});

Configure ShapeView via Java code

master

You can dynamically update the appearance of ShapeView components using builder patterns.

Important: For changes to take effect, you must call .intoBackground() when configuring the background or .intoTextColor() when configuring text color.

ShapeButton shapeButton = findViewById(R.id.btn_main_test);
shapeButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Configure background
        shapeButton.getShapeDrawableBuilder()
                .setSolidColor(0xFF000000)
                .setStrokeColor(0xFF5A8DDF)
                .intoBackground(); // Required to apply changes

        // Configure text color
        shapeButton.getTextColorBuilder()
                .setTextColor(0xFFFFFFFF)
                .intoTextColor(); // Required to apply changes

        shapeButton.setText("颜色已经改变啦");
    }
});

Supported ShapeView components

master

The framework supports various View and ViewGroup subclasses that allow you to apply shape properties directly.

<!-- View subclasses -->
ShapeView, ShapeTextView, ShapeButton, ShapeImageView, ShapeRadioButton, ShapeCheckBox, ShapeEditText

<!-- ViewGroup subclasses -->
ShapeLinearLayout, ShapeFrameLayout, ShapeRelativeLayout, ShapeConstraintLayout, ShapeRecyclerView, ShapeRadioGroup

Reference: ShapeView XML attributes

master

ShapeView provides a wide range of XML attributes to define shapes, colors, gradients, and shadows directly in layout files. This eliminates the need for separate XML drawable files.

<!-- Shape Type -->
<attr name="shape_type">
    <enum name="rectangle" value="0" />
    <enum name="oval" value="1" />
    <enum name="line" value="2" />
    <enum name="ring" value="3" />
</attr>

<!-- Dimensions -->
<attr name="shape_width" format="dimension" />
<attr name="shape_height" format="dimension" />
<attr name="shape_radius" format="dimension" />

<!-- Corner Radii -->
<attr name="shape_radiusInTopLeft" format="dimension" />
<attr name="shape_radiusInTopStart" format="dimension" />
<attr name="shape_radiusInTopRight" format="dimension" />
<attr name="shape_radiusInTopEnd" format="dimension" />
<attr name="shape_radiusInBottomLeft" format="dimension" />
<attr name="shape_radiusInBottomStart" format="dimension" />
<attr name="shape_radiusInBottomRight" format="dimension" />
<attr name="shape_radiusInBottomEnd" format="dimension" />

<!-- Solid Colors (States) -->
<attr name="shape_solidColor" format="color" />
<attr name="shape_solidPressedColor" format="color" />
<attr name="shape_solidCheckedColor" format="color" />
<attr name="shape_solidDisabledColor" format="color" />
<attr name="shape_solidFocusedColor" format="color" />
<attr name="shape_solidSelectedColor" format="color" />

<!-- Gradient Configuration -->
<attr name="shape_solidGradientStartColor" format="color" />
<attr name="shape_solidGradientCenterColor" format="color" />
<attr name="shape_solidGradientEndColor" format="color" />
<attr name="shape_solidGradientType">
    <enum name="linear" value="0" />
    <enum name="radial" value="1" />
    <enum name="sweep"  value="2" />
</attr>
<attr name="shape_solidGradientOrientation" />

<!-- Stroke Configuration -->
<attr name="shape_strokeColor" format="color" />
<attr name="shape_strokeSize" format="dimension" />
<attr name="shape_strokeDashSize" format="dimension" />
<attr name="shape_strokeDashGap" format="dimension" />

<!-- Shadow Configuration -->
<attr name="shape_shadowSize" format="dimension" />
<attr name="shape_shadowColor" format="color" />
<attr name="shape_shadowOffsetX" format="dimension" />
<attr name="shape_shadowOffsetY" format="dimension" />

<!-- Text Configuration -->
<attr name="shape_textColor" format="color" />
<attr name="shape_textStrokeColor" format="color" />
<attr name="shape_textStrokeSize" format="dimension" />

Reference: ShapeView XML Layout Attributes

master

ShapeView provides a wide range of XML attributes to define shapes, gradients, shadows, and text styles directly on the view. These attributes can be used with supported views like ShapeButton, ShapeTextView, ShapeImageView, etc.

<!-- Example of attribute groups available in XML -->
<resources>
    <!-- Shape type: rectangle, oval, line, ring -->
    <attr name="shape_type" />
    
    <!-- Dimensions -->
    <attr name="shape_width" format="dimension" />
    <attr name="shape_height" format="dimension" />
    <attr name="shape_radius" format="dimension" />

    <!-- Colors for different states -->
    <attr name="shape_solidColor" format="color" />
    <attr name="shape_solidPressedColor" format="color" />
    <attr name="shape_solidCheckedColor" format="color" />
    <attr name="shape_solidDisabledColor" format="color" />
    <attr name="shape_solidFocusedColor" format="color" />
    <attr name="shape_solidSelectedColor" format="color" />

    <!-- Gradients -->
    <attr name="shape_solidGradientType" /> <!-- linear, radial, sweep -->
    <attr name="shape_solidGradientOrientation" />

    <!-- Stroke -->
    <attr name="shape_strokeColor" format="color" />
    <attr name="shape_strokeSize" format="dimension" />
    <attr name="shape_strokeDashSize" format="dimension" />

    <!-- Shadow -->
    <attr name="shape_shadowSize" format="dimension" />
    <attr name="shape_shadowColor" format="color" />

    <!-- Text Styles -->
    <attr name="shape_textColor" format="color" />
    <attr name="shape_textGradientOrientation" />
    <attr name="shape_textStrokeColor" format="color" />
</resources>

ShapeView Documentation

What's inside ShapeView

1. Configure JitPack Repository

2. Add Dependencies