(#) Button order
!!! WARNING: Button order
This is a warning.
Id
: `ButtonOrder`
Summary
: Button order
Severity
: Warning
Category
: Usability
Platform
: Android
Vendor
: Android Open Source Project
Feedback
: https://issuetracker.google.com/issues/new?component=192708
Since
: Initial
Affects
: Resource files
Editing
: This check runs on the fly in the IDE editor
See
: https://d.android.com/r/studio-ui/designer/material/dialogs
Implementation
: [Source Code](https://cs.android.com/android-studio/platform/tools/base/+/mirror-goog-studio-main:lint/libs/lint-checks/src/main/java/com/android/tools/lint/checks/ButtonDetector.java)
Tests
: [Source Code](https://cs.android.com/android-studio/platform/tools/base/+/mirror-goog-studio-main:lint/libs/lint-tests/src/test/java/com/android/tools/lint/checks/ButtonDetectorTest.java)
Copyright Year
: 2012
According to the Android Design Guide,
"Action buttons are typically Cancel and/or OK, with OK indicating the
preferred or most likely action. However, if the options consist of
specific actions such as Close or Wait rather than a confirmation or
cancellation of the action described in the content, then all the
buttons should be active verbs. As a rule, the dismissive action of a
dialog is always on the left whereas the affirmative actions are on the
right."
This check looks for button bars and buttons which look like cancel
buttons, and makes sure that these are on the left.
(##) Example
Here is an example of lint warnings produced by this check:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~text
res/layout/buttonbar.xml:12:Warning: OK button should be on the right
(was "OK | Cancel", should be "Cancel | OK") [ButtonOrder]
<Button
------
res/layout/buttonbar.xml:44:Warning: OK button should be on the right
(was "OK | Cancel", should be "Cancel | OK") [ButtonOrder]
<Button
------
res/layout/buttonbar.xml:92:Warning: OK button should be on the right
(was "OK | Cancel", should be "Cancel | OK") [ButtonOrder]
<Button
------
res/layout/buttonbar.xml:124:Warning: OK button should be on the right
(was "OK | Cancel", should be "Cancel | OK") [ButtonOrder]
<Button
------
res/layout/buttonbar.xml:140:Warning: OK button should be on the right
(was "Ok | CANCEL", should be "CANCEL | Ok") [ButtonOrder]
<Button
------
res/layout/buttonbar.xml:156:Warning: OK button should be on the right
(was "OK | Abort", should be "Abort | OK") [ButtonOrder]
<Button
------
res/layout/buttonbar.xml:177:Warning: Cancel button should be on the
left (was "Send | Cancel", should be "Cancel | Send") [ButtonOrder]
<Button
------
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Here are the relevant source files:
`res/layout/buttonbar.xml`:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~xml linenumbers
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Hardcoded strings, wrong order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
<!-- Hardcoded strings, right order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
</LinearLayout>
<!-- @android:string resources, wrong order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/ok" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/cancel" />
</LinearLayout>
<!-- @android:string resources, right order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/cancel" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/ok" />
</LinearLayout>
<!-- @string/ok/cancel resources, right order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cancel" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok" />
</LinearLayout>
<!-- @string/ok/cancel resources, wrong order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cancel" />
</LinearLayout>
<!-- Random name resources, right order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/giveup" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/resume" />
</LinearLayout>
<!-- Random name resources, wrong order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/resume" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/giveup" />
</LinearLayout>
<!-- Random name resources with varying case, wrong order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/resume2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/giveup2" />
</LinearLayout>
<!-- Resources with only one of OK and Cancel, wrong order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/abort" />
</LinearLayout>
<!-- Resources with only one of OK and Cancel, wrong order -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content" android:background="?android:attr/selectableItemBackground"
android:layout_height="wrap_content"
android:text="@string/send" />
<Button
android:layout_width="wrap_content" android:background="?android:attr/selectableItemBackground"
android:layout_height="wrap_content"
android:text="@string/cancel" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/goback" />
</LinearLayout>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
`res/values/buttonbar-values.xml`:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~xml linenumbers
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="button"> Button </string>
<string name="ok"> OK </string>
<string name="cancel"> Cancel </string>
<string name="resume"> OK </string>
<string name="giveup"> Cancel </string>
<string name="resume2"> Ok </string>
<string name="giveup2">"CANCEL"</string>
<string name="send"> Send </string>
<string name="abort">Abort</string>
<string name="goback">'Back'</string>
</resources>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can also visit the
[source code](https://cs.android.com/android-studio/platform/tools/base/+/mirror-goog-studio-main:lint/libs/lint-tests/src/test/java/com/android/tools/lint/checks/ButtonDetectorTest.java)
for the unit tests for this check to see additional scenarios.
The above example was automatically extracted from the first unit test
found for this lint check, `ButtonDetector.testButtonOrder`.
To report a problem with this extracted sample, visit
https://issuetracker.google.com/issues/new?component=192708.
(##) Suppressing
You can suppress false positives using one of the following mechanisms:
* Adding the suppression attribute `tools:ignore="ButtonOrder"` on the
problematic XML element (or one of its enclosing elements). You may
also need to add the following namespace declaration on the root
element in the XML file if it's not already there:
`xmlns:tools="http://schemas.android.com/tools"`.
```xml
<?xml version="1.0" encoding="UTF-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
...
<Button tools:ignore="ButtonOrder" .../>
...
</resources>
```
* Using a special `lint.xml` file in the source tree which turns off
the check in that folder and any sub folder. A simple file might look
like this:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<lint>
<issue id="ButtonOrder" severity="ignore" />
</lint>
```
Instead of `ignore` you can also change the severity here, for
example from `error` to `warning`. You can find additional
documentation on how to filter issues by path, regular expression and
so on
[here](https://googlesamples.github.io/android-custom-lint-rules/usage/lintxml.md.html).
* In Gradle projects, using the DSL syntax to configure lint. For
example, you can use something like
```gradle
lintOptions {
disable 'ButtonOrder'
}
```
In Android projects this should be nested inside an `android { }`
block.
* For manual invocations of `lint`, using the `--ignore` flag:
```
$ lint --ignore ButtonOrder ...`
```
* Last, but not least, using baselines, as discussed
[here](https://googlesamples.github.io/android-custom-lint-rules/usage/baselines.md.html).