中文文档

ShapeView Framework

• Project address: Github

• Click here to download demo apk directly

• You can scan the code to download the Demo for demonstration or testing. If you can't download it by scanning, click here to download directly

Integration Steps

• If your project's Gradle version is below 7.0, you need to add the following in the build.gradle file

allprojects {
    repositories {
        // JitPack remote repository: https://jitpack.io
        maven { url 'https://jitpack.io' }
    }
}

• If your Gradle version is 7.0 or above, you need to add the following in the settings.gradle file

dependencyResolutionManagement {
    repositories {
        // JitPack remote repository: https://jitpack.io
        maven { url 'https://jitpack.io' }
    }
}

• After configuring the remote repository, add the remote dependency in the build.gradle file under the app module

android {
    // Support JDK 1.8
    compileOptions {
        targetCompatibility JavaVersion.VERSION_1_8
        sourceCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    // ShapeView: https://github.com/getActivity/ShapeView
    implementation 'com.github.getActivity:ShapeView:11.3'
    // ShapeDrawable: https://github.com/getActivity/ShapeDrawable
    implementation 'com.github.getActivity:ShapeDrawable:5.0'
}

Support library compatible

• Option 1: Use remote dependencies of the old version framework

dependencies {
    // ShapeView: https://github.com/getActivity/ShapeView
    implementation 'com.github.getActivity:ShapeView:10.0'
    // ShapeDrawable: https://github.com/getActivity/ShapeDrawable
    implementation 'com.github.getActivity:ShapeDrawable:3.3'
}

• Option 2: If your project is still in the Support phase and it's not convenient to migrate to AndroidX yet, but you want to use the latest version of the framework, you can use the JetifierStandalone tool provided by Google to convert the aar packages from the released Release versions into Support-compatible aar packages using reverse mode.

• You can choose either of the above two options, but it's still not recommended. These are only stopgap measures, not long-term solutions. Subsequent versions of the framework will no longer support Support projects. The best approach is to migrate your project to AndroidX.

Framework Documentation

• Java code settings

ShapeButton shapeButton = findViewById(R.id.btn_main_test);
shapeButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    
        shapeButton.getShapeDrawableBuilder()
                .setSolidColor(0xFF000000)
                .setStrokeColor(0xFF5A8DDF)
                // Note: You need to call intoBackground at the end to take effect
                .intoBackground();

        shapeButton.getTextColorBuilder()
                .setTextColor(0xFFFFFFFF)
                // Note: You need to call intoTextColor at the end to take effect
                .intoTextColor();

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

Full List of Layout Attributes

• For xml attribute adaptation in different versions, please click here

<resources>

    <!-- Shape type (default is rectangle) -->
    <attr name="shape_type">
        <!-- Rectangle -->
        <enum name="rectangle" value="0" />
        <!-- Oval -->
        <enum name="oval" value="1" />
        <!-- Line -->
        <enum name="line" value="2" />
        <!-- Ring -->
        <enum name="ring" value="3" />
    </attr>
    
    <!-- Shape width -->
    <attr name="shape_width" format="dimension" />
    <!-- Shape height -->
    <attr name="shape_height" format="dimension" />

    <!-- Corner radius -->
    <attr name="shape_radius" format="dimension" />
    <!-- Top left corner radius -->
    <attr name="shape_radiusInTopLeft" format="dimension" />
    <attr name="shape_radiusInTopStart" format="dimension" />
    <!-- Top right corner radius -->
    <attr name="shape_radiusInTopRight" format="dimension" />
    <attr name="shape_radiusInTopEnd" format="dimension" />
    <!-- Bottom left corner radius -->
    <attr name="shape_radiusInBottomLeft" format="dimension" />
    <attr name="shape_radiusInBottomStart" format="dimension" />
    <!-- Bottom right corner radius -->
    <attr name="shape_radiusInBottomRight" format="dimension" />
    <attr name="shape_radiusInBottomEnd" format="dimension" />

    <!-- Solid color (default state) -->
    <attr name="shape_solidColor" format="color" />
    <!-- Solid color (pressed state) -->
    <attr name="shape_solidPressedColor" format="color" />
    <!-- Solid color (checked state) -->
    <attr name="shape_solidCheckedColor" format="color" />
    <!-- Solid color (disabled state) -->
    <attr name="shape_solidDisabledColor" format="color" />
    <!-- Solid color (focused state) -->
    <attr name="shape_solidFocusedColor" format="color" />
    <!-- Solid color (selected state) -->
    <attr name="shape_solidSelectedColor" format="color" />

    <!-- Solid gradient start color -->
    <attr name="shape_solidGradientStartColor" format="color" />
    <!-- Solid gradient center color (optional) -->
    <attr name="shape_solidGradientCenterColor" format="color" />
    <!-- Solid gradient end color -->
    <attr name="shape_solidGradientEndColor" format="color" />

    <!-- Solid gradient orientation (only for linear gradient) -->
    <attr name="shape_solidGradientOrientation" >
        <!-- Gradient from left to right (0 degrees) -->
        <enum name="leftToRight" value="0" />
        <enum name="startToEnd" value="10" />

        <!-- Gradient from right to left (180 degrees) -->
        <enum name="rightToLeft" value="180" />
        <enum name="endToStart" value="1800" />

        <!-- Gradient from bottom to top (90 degrees) -->
        <enum name="bottomToTop" value="90" />
        <!-- Gradient from top to bottom (270 degrees) -->
        <enum name="topToBottom" value="270" />

        <!-- Gradient from top left to bottom right (315 degrees) -->
        <enum name="topLeftToBottomRight" value="315" />
        <enum name="topStartToBottomEnd" value="3150" />

        <!-- Gradient from bottom left to top right (45 degrees) -->
        <enum name="bottomLeftToTopRight" value="45" />
        <enum name="bottomStartToTopEnd" value="450" />

        <!-- Gradient from top right to bottom left (225 degrees) -->
        <enum name="topRightToBottomLeft" value="225" />
        <enum name="topEndToBottomStart" value="2250" />

        <!-- Gradient from bottom right to top left (135 degrees) -->
        <enum name="bottomRightToTopLeft" value="135" />
        <enum name="bottomEndToTopStart" value="1350" />
    </attr>
    <!-- Solid gradient type (default is linear gradient) -->
    <attr name="shape_solidGradientType">
        <!-- Linear gradient -->
        <enum name="linear" value="0" />
        <!-- Radial gradient -->
        <enum name="radial" value="1" />
        <!-- Sweep gradient -->
        <enum name="sweep"  value="2" />
    </attr>
    <!-- Solid gradient center X position (default is 0.5) -->
    <attr name="shape_solidGradientCenterX" format="float|fraction" />
    <!-- Solid gradient center Y position (default is 0.5) -->
    <attr name="shape_solidGradientCenterY" format="float|fraction" />
    <!-- Solid gradient radius (only for radial gradient) -->
    <attr name="shape_solidGradientRadius" format="float|fraction|dimension" />

    <!-- Stroke color (default state) -->
    <attr name="shape_strokeColor" format="color" />
    <!-- Stroke color (pressed state) -->
    <attr name="shape_strokePressedColor" format="color" />
    <!-- Stroke color (checked state) -->
    <attr name="shape_strokeCheckedColor" format="color" />
    <!-- Stroke color (disabled state) -->
    <attr name="shape_strokeDisabledColor" format="color" />
    <!-- Stroke color (focused state) -->
    <attr name="shape_strokeFocusedColor" format="color" />
    <!-- Stroke color (selected state) -->
    <attr name="shape_strokeSelectedColor" format="color" />

    <!-- Stroke gradient start color -->
    <attr name="shape_strokeGradientStartColor" format="color" />
    <!-- Stroke gradient center color (optional) -->
    <attr name="shape_strokeGradientCenterColor" format="color" />
    <!-- Stroke gradient end color -->
    <attr name="shape_strokeGradientEndColor" format="color" />

    <!-- Stroke gradient orientation (only for linear gradient) -->
    <attr name="shape_strokeGradientOrientation" >
        <!-- Gradient from left to right (0 degrees) -->
        <enum name="leftToRight" value="0" />
        <enum name="startToEnd" value="10" />

        <!-- Gradient from right to left (180 degrees) -->
        <enum name="rightToLeft" value="180" />
        <enum name="endToStart" value="1800" />

        <!-- Gradient from bottom to top (90 degrees) -->
        <enum name="bottomToTop" value="90" />
        <!-- Gradient from top to bottom (270 degrees) -->
        <enum name="topToBottom" value="270" />

        <!-- Gradient from top left to bottom right (315 degrees) -->
        <enum name="topLeftToBottomRight" value="315" />
        <enum name="topStartToBottomEnd" value="3150" />

        <!-- Gradient from bottom left to top right (45 degrees) -->
        <enum name="bottomLeftToTopRight" value="45" />
        <enum name="bottomStartToTopEnd" value="450" />

        <!-- Gradient from top right to bottom left (225 degrees) -->
        <enum name="topRightToBottomLeft" value="225" />
        <enum name="topEndToBottomStart" value="2250" />

        <!-- Gradient from bottom right to top left (135 degrees) -->
        <enum name="bottomRightToTopLeft" value="135" />
        <enum name="bottomEndToTopStart" value="1350" />
    </attr>

    <!-- Stroke size -->
    <attr name="shape_strokeSize" format="dimension" />
    <!-- Stroke dash size (0 for solid line, greater than 0 for dashed line) -->
    <attr name="shape_strokeDashSize" format="dimension" />
    <!-- Stroke dash gap (gap between dashes) -->
    <attr name="shape_strokeDashGap" format="dimension" />

    <!-- Shadow size -->
    <attr name="shape_shadowSize" format="dimension" />
    <!-- Shadow color -->
    <attr name="shape_shadowColor" format="color" />
    <!-- Shadow horizontal offset -->
    <attr name="shape_shadowOffsetX" format="dimension" />
    <!-- Shadow vertical offset -->
    <attr name="shape_shadowOffsetY" format="dimension" />

    <!-- Inner ring radius (only effective when shape="ring") -->
    <attr name="shape_ringInnerRadiusSize" format="dimension" />
    <!-- Inner ring radius ratio (only effective when shape="ring"), formula: whole ring / innerRadiusRatio = innerRadius -->
    <attr name="shape_ringInnerRadiusRatio" format="float" />
    <!-- Outer ring thickness (only effective when shape="ring") -->
    <attr name="shape_ringThicknessSize" format="dimension" />
    <!-- Outer ring thickness ratio (only effective when shape="ring"), formula: whole ring / thicknessRatio = thickness -->
    <attr name="shape_ringThicknessRatio" format="float" />

    <!-- Line gravity (only effective when shape="line") -->
    <attr name="shape_lineGravity">
        <flag name="top" value="0x30" />
        <flag name="bottom" value="0x50" />
        <flag name="left" value="0x03" />
        <flag name="right" value="0x05" />
        <flag name="start" value="0x00800003" />
        <flag name="end" value="0x00800005" />
        <flag name="center" value="0x11" />
    </attr>

    <!-- Text color (default state) -->
    <attr name="shape_textColor" format="color" />
    <!-- Text color (pressed state) -->
    <attr name="shape_textPressedColor" format="color" />
    <!-- Text color (checked state) -->
    <attr name="shape_textCheckedColor" format="color" />
    <!-- Text color (disabled state) -->
    <attr name="shape_textDisabledColor" format="color" />
    <!-- Text color (focused state) -->
    <attr name="shape_textFocusedColor" format="color" />
    <!-- Text color (selected state) -->
    <attr name="shape_textSelectedColor" format="color" />

    <!-- Text gradient start color -->
    <attr name="shape_textStartColor" format="color" />
    <!-- Text gradient center color (optional) -->
    <attr name="shape_textCenterColor" format="color" />
    <!-- Text gradient end color -->
    <attr name="shape_textEndColor" format="color" />
    <!-- Text gradient orientation (default is horizontal gradient) -->
    <attr name="shape_textGradientOrientation">
        <!-- Horizontal gradient -->
        <enum name="horizontal" value="0" />
        <!-- Vertical gradient -->
        <enum name="vertical" value="1" />
    </attr>

    <!-- Text stroke color -->
    <attr name="shape_textStrokeColor" format="color" />
    <!-- Text stroke size -->
    <attr name="shape_textStrokeSize" format="dimension" />

    <!-- CheckBox or RadioButton icon (default state) -->
    <attr name="shape_buttonDrawable" format="reference" />
    <!-- CheckBox or RadioButton icon (pressed state) -->
    <attr name="shape_buttonPressedDrawable" format="reference" />
    <!-- CheckBox or RadioButton icon (checked state) -->
    <attr name="shape_buttonCheckedDrawable" format="reference" />
    <!-- CheckBox or RadioButton icon (disabled state) -->
    <attr name="shape_buttonDisabledDrawable" format="reference" />
    <!-- CheckBox or RadioButton icon (focused state) -->
    <attr name="shape_buttonFocusedDrawable" format="reference" />
    <!-- CheckBox or RadioButton icon (selected state) -->
    <attr name="shape_buttonSelectedDrawable" format="reference" />

</resources>

• Currently, the controls that support these attributes are:

  • Subclasses of View: ShapeView, ShapeTextView, ShapeButton, ShapeImageView, ShapeRadioButton, ShapeCheckBox, ShapeEditText

  • Subclasses of ViewGroup: ShapeLinearLayout, ShapeFrameLayout, ShapeRelativeLayout, ShapeConstraintLayout, ShapeRecyclerView, ShapeRadioGroup

FAQ

Framework Highlights

• Powerful features: supports setting shadow, border gradient color, text gradient color

• More convenient: no need to add new Xml files, just define control attributes directly

• Instant effect: can preview the effect in the layout in real time, WYSIWYG, no need to run

• Zero learning cost: control attributes are consistent with native Shape naming, no extra learning required

• Wide coverage: covers almost all common View controls, and the control names are easy to remember

• Supports state selector: not only supports setting the state selector for background color, but also supports setting the state selector for text color

Other Open Source Projects by the Author

• Android middle office: AndroidProject

• Android middle office kt version: AndroidProject-Kotlin

• Permissions framework: XXPermissions

• Toast framework: Toaster

• Network framework: EasyHttp

• Title bar framework: TitleBar

• Floating window framework: EasyWindow

• Device compatibility framework：DeviceCompat

• Shape drawable framework: ShapeDrawable

• Language switching framework: Multi Languages

• Gson parsing fault tolerance: GsonFactory

• Logcat viewing framework: Logcat

• Nested scrolling layout framework：NestedScrollLayout

• Android cmd tools：AndroidCmdTools

• Android version guide: AndroidVersionAdapter

• Android code standard: AndroidCodeStandard

• Android resource summary：AndroidIndex

• Android open source leaderboard: AndroidGithubBoss

• Studio boutique plugins: StudioPlugins

• Emoji collection: EmojiPackage

• China provinces json: ProvinceJson

• Markdown documentation：MarkdownDoc

License

Copyright 2021 Huang JinQun

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.