title: Android Accessibility - content grouping with ImageView not working
body: <p>I'm working on making an existing Android app accessible and find it quite frustrating, many things that ought to work just don't.</p>
  
  <p>I'm trying to group together content for description just like described in the <a href="https://codelabs.developers.google.com/codelabs/basic-android-accessibility/index.html?index=..%2F..%2Findex#5" rel="nofollow noreferrer">Google Codelabs example</a>, but still it makes part of the Content focusable for Gesture navigation:</p>
  
  <p>I have a <code>Fragment</code> with a <code>LinearLayout</code> with vertical orientation as root view three <code>RelativeLayouts</code>, which each contain an <code>ImageView</code> and a <code>TextView</code>. </p>
  
  <p><a href="https://i.stack.imgur.com/z4sTKm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z4sTKm.png" alt="layout"></a></p>
  
  <p>Like in the codelabs, I have set the <code>RelativeLayout</code> to focusable, for the <code>ImageViews</code> I have set the <code>ContentDescription</code> to null, as they are purely decorative.</p>
  
  <p>This is the <code>XML</code> layout for one of these <code>RelativeLayouts</code> with the root <code>LinearLayout</code>:</p>
  
  <pre><code>&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@android:color/white"
      android:orientation="vertical"
      tools:context="com.my.fancyapp.fragments.OtherFragment"&gt;
  
      &lt;RelativeLayout
          android:id="@+id/item_youtube"
          android:layout_width="match_parent"
          android:layout_height="@dimen/other_item_height"
          android:focusable="true"
          android:background="?attr/selectableItemBackground"
          android:padding="@dimen/other_item_padding"&gt;
  
          &lt;ImageView
              android:id="@+id/ivYouTube"
              android:layout_width="@dimen/other_icon_width"
              android:contentDescription="@null"
              android:layout_height="match_parent"/&gt;
  
          &lt;TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_centerVertical="true"
              android:layout_marginLeft="@dimen/other_text_margin_left"
              android:text="YouTube"
              android:textAppearance="@style/ArtistTextAppearance" /&gt;
      &lt;/RelativeLayout&gt;
      ...
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>In the <code>Fragment</code>, I set an <code>onClickListener</code> for each <code>RelativeLayout</code>, which links to the perspective view (Youtube channel, Facebook page or a Webview with the impressum) and load the <code>ImageView</code> with <code>Picasso</code>:</p>
  
  <pre><code>itemYoutube.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
              Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(youTubeUrl));
              startActivity(intent);
              }
          }
      });
  
  Picasso.with(getActivity())
          .load(R.drawable.icon_youtube)
          .fit()
          .centerInside()
          .into(iconYoutube);
  
  itemYoutube.setContentDescription(getString(R.string.youtube));
  </code></pre>
  
  <p>Now the problem is, trying to click on an item and then to navigate by swiping to the next item leads to the text being highlighted, not by navigating to the next <code>RelativeLayout</code></p>
  
  <p><a href="https://i.stack.imgur.com/CmakVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CmakVm.png" alt="enter image description here"></a></p>
  
  <p>Does anyone have an idea, why the focus jumps to the <code>TextView</code> instead of the next <code>RelativeLayout</code>? </p>
  
  <p>I have tried the following:</p>
  
  <ul>
  <li>set the ContentDescription for the <code>RelativeLayouts</code> in XML</li>
  <li>set the ContentDescription for the <code>TextViews</code> to null (probably not good)</li>
  <li>changed order when to set the Content Description</li>
  <li>set the <code>TextViews</code>to focusable:false </li>
  <li>removed the ContentDescription for the <code>RelativeLayouts</code>, which resulted in navigating to the <code>TextViews</code>only and not highlighting the whole <code>RelativeLayout</code> as wished</li>
  </ul>
  
  <p>Could it be a problem that contrary to the Codelabs example I have an <code>ImageView</code> inside the <code>RelativeLayout</code> whereas there were only <code>TextViews</code> that should all be read out? Or is there an issue when to set some values by xml and others like <code>ClickListener</code> dynamically by code?
  I'm absolutely clueless.</p>