Project introduction

XUI is a simple and elegant Android native UI framework, free your hands!

XUI is the open source project that I have spent the most effort on, and I always choose to introduce it in larger projects at present. XUI covers almost all the components needed for current Android development. It can be said that with XUI, our development efficiency can be greatly improved, allowing us to focus a lot of energy on business functions and data processing. It can be said that XUI is currently on Github the most complete components, the most detailed documentation, the largest number of cases (200+) Android native UI library.

XUI currently has 2.6K star on Github, if you like, welcome to click on star collection! Project address: github.com/xuexiangjys…

The design was originally

I believe that those who have made Android know that Android native components are not favored by designers in China, and the Material Design style promoted by Google is even less popular. As a result, the prototype drawings provided by designers are almost all of IOS style. What’s more embarrassing is that, There are very few open source UI libraries for Android on the web, which makes it difficult for us to rewrite almost all of the basic components. I have written React and Vue before, and found that both of them have very convenient UI libraries and are very easy to use. You can directly modify the sample code to achieve the desired effect, which greatly improves the efficiency of development.

Design ideas

I didn’t have a clue when I started working on such an open source library. Fortunately, one day in 2017, I came into contact with QMUI. Through reading its source code, I found that its design idea is very good, and it can achieve different component effects by setting different theme styles and component properties, which is very flexible. In addition, it also makes a more detailed formulation and classification of UI theme style, can be said to be very enlightening. Therefore, I followed the thought of QMUI and started writing XUI.

To solve the pain points

  • Simple and elegant, as little as possible to reference the number of resource files, the overall size of the project library is less than 1M.
  • Components are rich, providing most of the functional components that we often use as developers.
  • Simple to use, in order to facilitate rapid development, improve development efficiency, the API has been optimized to provide one-click access.
  • Unified style, the framework provides a series of unified style, so that the OVERALL UI looks beautiful and harmonious.
  • Compatibility is high. The framework also offers three different device sizes (4.5-inch, 7-inch, and 10-inch) and minimum compatibility to Android 17, making the UI even more compatible.
  • Each component provides rich attributes and style apis. You can set different style attributes to build different styles of UI.

The demo project

By looking at the implementation of the Demo, you can quickly and efficiently master the use of UI components.

The project architecture

The project page mainly uses XPage page frame to build automatically, the structure is very clear. The project is mainly divided into “component”, “tool” and “development” three parts.

  • Components: main components page contains all the components in the UI framework using the Demo sample, under the “com.xuexiang.xuidemo.fragment.com ponents” packages, click to view.

  • Tools: main page contains all the tools in the UI framework using the Demo sample, in the “com. Xuexiang. Xuidemo. Fragments. Utils” packages, click to view.

  • Extended: main page contains third party UI components with relatively complicated functions integrated Demo sample, in the “com. Xuexiang. Xuidemo. Fragments. Expands” packages, click to view

The project structure is as follows:

The Demo home page is shown as follows:

The Demo experience

Video tutorial

How to use in project XUI: www.bilibili.com/video/BV1w7…

Rapid integration

  • Android shell template engineering (automatic integration XUI, XUtil, XAOP, XPage, XUpdate, XHttp2, etc.): github.com/xuexiangjys…

  • Simplified Version of Android shell template project (automatic integration XUI, XUtil, XAOP, XPage, etc.): github.com/xuexiangjys…

The integration guide

Add Gradle dependencies

1. Add build.gradle repositories in the project root directory:

allprojects {
     repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}
Copy the code

【 note 】 don’t skip this step, because XUI currently only released on jitpack platform, skip this step could lead to the ERROR: Failed to resolve: com. Making. Xuexiangjys: XUI: X.X.X ERROR!!!!!!

2. Add to dependencies:

dependencies { ... / / androidx project implementation 'com. Making. Xuexiangjys: XUI: 1.1.5' implementation 'androidx. Appcompat: appcompat: 1.1.0' Implementation 'androidx. Recyclerview: recyclerview: 1.1.0' implementation 'com. Google. Android. Material: material: 1.1.0' Implementation 'com. Making. Bumptech. Glide: glide: 4.11.0'}Copy the code

Note: if your project is not currently using androidx, please use the following configuration:

dependencies { ... / / support project implementation 'com. Making. Xuexiangjys: XUI: 1.0.9 - support' implementation 'com. Android. Support: appcompat - v7:28.0.0' implementation 'com. Android. Support: recyclerview - v7:28.0.0' implementation 'com. Android. Support: design: 28.0.0' implementation 'com. Making. Bumptech. Glide: glide: 4.8.0'}Copy the code

Example Initialize XUI Settings

1. Initialize Settings at the top of Application (required)

XUI.init(this); // Initialize the UI frame xui. debug(true); // Enable the UI framework debug logCopy the code

2. Tweak the app’s base theme (mandatory)

The underlying theme of the application must be set or the component will not work properly! It is important to ensure that all Windows using the XUI component subclass the theme of the XUITheme.

Basic topic type:

  • Large Tablet (10 inches, 240dpi, 1920 x 1200) : XUITheme.Tablet.Big

  • Tablet (7 inches, 320dpi, 1920 x 1200) : XUITheme.Tablet.Small

  • Phone (4.5-inch, 320dpi, 720*1280) : XUITheme.Phone

<style name="AppTheme" parent="XUITheme.Phone"> <! <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>Copy the code

You can also set the theme dynamically at the start of your Activity by calling the following code

@Override protected void onCreate(Bundle savedInstanceState) { XUI.initTheme(this); super.onCreate(savedInstanceState); . }Copy the code

3. Adjust font library (if there is no requirement for font, it can be omitted)

(1) Set the font library path you need to modify (assets)

// Set the default font to Chinese typeface, here write your font library xui.getInstance ().initfontstyle ("fonts/hwxk.ttf");Copy the code

(2) Add the following code to inject fonts into the project’s base Activity.

Note: After version 1.1.4, use the following Settings for injection

@override protected void attachBaseContext(Context newBase) {// Inject font super.attachBaseContext(ViewPumpContextWrapper.wrap(newBase)); }Copy the code

Note: Version 1.1.3 and earlier use the following Settings for injection

@override protected void attachBaseContext(Context newBase) {// Inject font super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase)); }Copy the code

Confuse configuration

-keep class com.xuexiang.xui.widget.edittext.materialedittext.** { *; }
Copy the code

Q&A

Access problems

1. How to learn XUI quickly and improve the efficiency of UI development?

  • First of all, please carefully access the XUI framework according to the access document, do not skip or miss steps, step by step according to the instructions. In addition, I also provided a video tutorial for you to learn.

  • Secondly, use XUI according to the instructions for proper use of XUI posture.

  • Finally, if you have any problems, consult the user documentation or study the Demo to make sure your usage is correct. Don’t take it for granted. If you have strong reading ability of source code, you can directly browse XUI’s project source code. If you find that there is indeed a problem in the framework, you can also click submit Issue list and send the problem back to me for solution.

2. Why I reported an error after I increased XUI dependency:ERROR: Failed to resolve: com.github.xuexiangjys:XUI:x.x.x?

A: The dependency of XUI cannot be resolved. The reason for this is that you have not configured the remote dependency repository JITpack address. The advice here is to get out of your head and introduce dependencies by following the instructions.

3. Why do I get an error saying that R file cannot be found when I use components in XUIandroid.content.res.Resources$NotFoundException: File res/drawable/xxxxx.xml from drawable resource ID ..., the attribute cannot be obtainedFailed to resolve attribute at index ...Or a layout resolution errorandroid.view.InflateException:Binary XML file line #xx:Error inflating class <unknow>....?

  • First, you need to make sure that the theme used by the Activity window of your current component inherits the XUITheme theme. If not, follow the access documentation to connect it correctly. It should be noted here that XUI is different from other open source component libraries. It is a unified UI framework with a strict unified attribute style standard. Most of the components and resources use the standardized XUI theme attribute, so XUI framework cannot be used properly without using XUITheme.

  • Second, if you are using the XUI theme, check to see if the context you are using is the window context you are using. Do not use xui.getContext () in the context you are passing in. Here’s a little bit about the Context in Android and the type of Context in Android. Go see for yourself.

  • Then, if you are using context correctly, check the current system version of the offending device. Because below Android5.0 (21) is used in drawable? Attr references topic attributes, which can also cause R files to be missing. In Android5.0 (21), if you use vector to load SVG images, it will also cause R files to be lost, because loading SVG images is not supported in Android5.0 (21).

  • Finally, if all this is checked and problems persist, you can try upgrading XUI to the latest version (note that the latest version only supports AndroidX). If the upgrade problem still exists, then you need to consider whether there is a problem with your usage. It is recommended to see the XUI project Demo, click to see the learning Demo usage.

4. Is there a version for XUI that supports Support and AndroidX?

A: The latest version is AndroidX only. From XUI 1.0.5 onwards, there is a version that supports AndroidX, and the version before 1.0.5 is a version that supports Support. Here I recommend using the latest version (AndroidX version), because there may be some compatibility bugs in the previous version, which will be fixed one by one in the later version. If you still want to use Support, you can either use versions prior to 1.0.5 (there are some low compatibility bugs), or you can clone the latest version of the source code and make it a local import dependency for Support.

Considering that there are still a large number of people using support, I have modified a version 1.0.9-support on the current stable version 1.0.9 for your transitional use.

5. How to solve the problem of Glide version conflict?

A: Glide versions XUI relies on must be 4.8.0 prior to 1.1.3, and 4.11.0 used for 1.1.3 and later.

6. Does XUI support global font modification?

A: XUI supports global font modification. For details, see the access document.

7. Does XUI support custom themes? How to customize the theme to match the UI style given by the designer.

A: XUI supports custom themes. For details, see How to Customize your own themes.

Demo related issues

1. Why can’t I run XUIDemo project?

A: Demo program running is certainly no problem. It is recommended to use Android Studio 3.4.1 or later. For details, see How to Run Demo. In addition, please do not change gradle version, because upgrading gradle version may cause dependency load failure.

2. Demo What are the “components”, “tools”, and “extensions” in the Demo?

A: “Components” mainly contains the use cases of most components provided by XUI, and “Tools” mainly contains the use cases of auxiliary tools provided by XUI. However, the “extension” contains some common third-party UI component library use cases, which are not provided in XUI. For details, see Demo introduction.

Links to resources

  • XUI teaching video series: space.bilibili.com/483850585/c…
  • XUI User Documentation: github.com/xuexiangjys…
  • Android shell template engineering (automatic integration XUI, XUtil, XAOP, XPage, XUpdate, XHttp2, etc.): github.com/xuexiangjys…
  • Simplified Version of Android shell template project (automatic integration XUI, XUtil, XAOP, XPage, etc.): github.com/xuexiangjys…

Technical communication

  • XUI Open Source Exchange Group (may be full) : 695048677, click one button to join
  • XUI open Source AC Group 2 (may be full) : 700246750, click one button to join
  • XUI Open Source COMMUNICATION Group 3:1090612354, click one button to join

Wechat official account

For more information, please scan and follow my personal wechat public number: [My Android open Source Journey]