Edit recommendation: Rare earth Nuggets, this is an application for technical developers, you can get the latest and best quality technology nuggets, not only Android knowledge, front-end, back-end as well as products and design dabbler, want to become a friend of full stack engineers do not miss it!

Make Your Android Project Pop with Remixer by Google in medium, an interesting library Remixer was introduced.

Remixer is a UI framework in Google Material-Foundation that updates the UI by quickly modifying UI variables with annotations. No need to recompile, no need to restart the app. Guess the purpose of this library was originally for UI debugging.

Take a look at the results first:

The bottom popup box is a setting interface through which you can change the parameters of the Stepper Indicator and dynamically change the UI effect. If you want to implement the function shown in the figure, you need to implement slider, switch, color selection and other controls, or quite troublesome. But all you need to do here is add a few annotations to the method of setting up the UI, and the interface will be generated automatically. And the UI parameters set here are automatically saved in SharedPreferences, so the next open will be the same.

As mentioned earlier, this library is supposed to be used for UI debugging, but it can also be used to implement app functions such as font Settings for article pages. However, given the large size of the library, if there are not many such Settings in the app, it is recommended to implement your own. It’s great for emergencies if a project is under a rush or your boss is in a hurry to see results.

How to use

Add dependencies:

The compile 'com. Making. Material - foundation. Material - remixer - android: remixer: 1.0' annotationProcessor 'com. Making. Material - foundation. Material - remixer - android: remixer_annotation: 1.0'Copy the code

Initialize the

RemixerInitialization.initRemixer(getApplication());
Remixer.getInstance().setSynchronizationMechanism(new LocalStorage(getApplicationContext()));
 
RemixerBinder.bind(this); // pass an Activity instance
 
final FloatingActionButton remixerButton = findViewById(R.id.remixerButton);
RemixerFragment.newInstance().attachToFab(this, remixerButton);Copy the code

The last line of code shows that clicking the Fab remixerButton brings up the Settings screen.

Then add a comment to the UI modification method:

   @RangeVariableMethod(minValue = 6, maxValue = 70, initialValue = 20)
    public void setLabelSize(Float fontSize) {
        indicator.setLabelSize(fontSize);
    }
 
    @BooleanVariableMethod(initialValue = true)
    public void showLabels(Boolean showLabels) {
        indicator.showLabels(showLabels);
    }
 
    @BooleanVariableMethod
    public void showStepNumberInstead(Boolean showStepNumberInstead) {
        indicator.showStepNumberInstead(showStepNumberInstead);
    }
 
    @BooleanVariableMethod
    public void useBottomIndicator(Boolean useBottomIndicator) {
        indicator.useBottomIndicator(useBottomIndicator);
    }
 
    @ColorListVariableMethod(limitedToValues = {0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setIndicatorColor(Integer indicatorColor) {
        indicator.setIndicatorColor(indicatorColor);
    }
 
    @ColorListVariableMethod(limitedToValues = {0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setLineDoneColor(Integer lineDoneColor) {
        indicator.setLineDoneColor(lineDoneColor);
    }
 
    @ColorListVariableMethod(limitedToValues = {Color.BLACK, Color.WHITE, 0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setLabelColor(Integer labelColor) {
        indicator.setLabelColor(labelColor);
    }Copy the code

The RangeVariableMethod annotation generates a Silder control, which you can guess by name.

That’s all the code is, isn’t it pretty simple?

Post the complete code below:

public class MainActivity extends AppCompatActivity { StepperIndicator indicator; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ViewPager pager = findViewById(R.id.pager); assert pager ! = null; pager.setAdapter(new PagerAdapter(getSupportFragmentManager())); indicator = findViewById(R.id.stepper_indicator); // We keep last page for a "finishing" page indicator.setViewPager(pager, true); indicator.addOnStepClickListener(new StepperIndicator.OnStepClickListener() { @Override public void onStepClicked(int step) { pager.setCurrentItem(step, true); }}); RemixerInitialization.initRemixer(getApplication()); Remixer.getInstance().setSynchronizationMechanism(new LocalStorage(getApplicationContext())); RemixerBinder.bind(this); final FloatingActionButton remixerButton = findViewById(R.id.remixerButton); RemixerFragment.newInstance().attachToFab(this, remixerButton); } @RangeVariableMethod(minValue = 6, maxValue = 70, initialValue = 20) public void setLabelSize(Float fontSize) { indicator.setLabelSize(fontSize); } @BooleanVariableMethod(initialValue = true) public void showLabels(Boolean showLabels) { indicator.showLabels(showLabels); } @BooleanVariableMethod public void showStepNumberInstead(Boolean showStepNumberInstead) { indicator.showStepNumberInstead(showStepNumberInstead); } @BooleanVariableMethod public void useBottomIndicator(Boolean useBottomIndicator) { indicator.useBottomIndicator(useBottomIndicator); } @ColorListVariableMethod(limitedToValues = {0xFF00b47c, 0xFF3f51b5, 0xFFf44336}) public void setIndicatorColor(Integer indicatorColor) { indicator.setIndicatorColor(indicatorColor); } @ColorListVariableMethod(limitedToValues = {0xFF00b47c, 0xFF3f51b5, 0xFFf44336}) public void setLineDoneColor(Integer lineDoneColor) { indicator.setLineDoneColor(lineDoneColor); } @ColorListVariableMethod(limitedToValues = {Color.BLACK, Color.WHITE, 0xFF00b47c, 0xFF3f51b5, 0xFFf44336}) public void setLabelColor(Integer labelColor) { indicator.setLabelColor(labelColor); }}Copy the code

If you are careful, you will notice that the title on the setup screen is “Remixer”, which is obviously not a good idea if you want to use it in the product. However, Remixer does not provide the function to modify the title.

Fortunately, the title is set using a String resource named remixer_framework_name, which we simply override in strings.xml:

   <string name="remixer_framework_name">xxxx</string>Copy the code

Finally, the framework also supports Firebase for setting UI parameters remotely.

The source code

The code in this article is from the project mentioned in the quoted foreign language:

Github.com/rakshakhegd…