From the course: Android App Development: Accessibility

Apply visual attributes to tab layout - Android Tutorial

From the course: Android App Development: Accessibility

Start my 1-month free trial

Apply visual attributes to tab layout

“

- [Instructor] In our simple project, we have a tab layout activity with a simple example of a tab layout. Let's see its current behavior on Talk Back. - [Talk Back] Tab Layout button, double tap to activate. Tab layout, navigate up button, tab layout, selected about, double tap to activate, mistakes, double tap to activate, learn, double tap to activate. - [Instructor] When I select a tab on Talk Back, it won't announce the role or the value for me automatically. The only two things that I hear is the name and the state. I can actually hear the value if I change my selection to a different tab. - [Talk Back] Learn, page three of three. - [Instructor] This is the default behavior and implementation of the view pager when a page has changed, but announcing only after I select it is very bad. So, let's fix this by adding what we need to the content description. In Android Studio, let's first create the string for the content description that we need. Under the resources folder, let's scroll down to the values folder, and then open the strings.xml file. In the tab layout activity section, let's create a new string. It's name is going to be tab_layout_content_description, and the value is going to be a string format, which we will use to interpolate the values that we need to pass. So first, we add the role, and then we add the value. The value is going to be %1$d of %2$ of d. These two parameters will be interpolated, and we receive first the current value of the tab, and the total value of the tab. Save it, and let's go to the activity to implement this. Under the activities folder, open the TabLayoutActivity. Instead of the tab layout activity, let's find the place where we set the name of the tab, and let's add the content description here. First, let's create the string. We're gonna call it tabRoleValue, and it's going to be a String.format, and let's get the string that we just created. Resources, .getstring, or .string.tab, content description. Now, we will pass the parameters that it needs. The tabs are set in an array, so we can just set the index to i + 1, and then the tab layout.getTabCount will be the total. Now, we can go and set the content description to the tab using setContentDescription. And first, we're going to set the name, where we'll concatenate comma here, and I'll give the tabRoleValue. Let's run it and see how it works. - [Talk Back] Apps, home, accessibility examples. - [Instructor] Go to the tab layout. - [Talk Back] Tab layout. - [Instructor] And let's focus on one tab. - [Talk Back] Selected about tab, one of three, double tap, mistakes tab, two of three, double, learn tab, three of three, double tap to activate. - [Instructor] Once again, I would like to remind you that adding these attributes to the content description is not ideal, because the content description was made to only store the label or name of the view. But because there is no good API at the moment, to declare roles and values, it is better to keep them in the content description until Google decides to change it's API to something similar as Web or iOS, where roles, states, and values, are much simpler to assign. So, make sure your code can be easily changed in the future, if that ever happens. If you're interested in how these attributes work in different platforms, I suggest you take a look at iOS accessibility courses.

Contents