title: Constraint layout with child constraint layouts not expanding horizontally
body: <p>I'm trying to build a rectangular view (spanning the width of the screen) which is split horizontally into three blocks, and I am doing so using a constraint layout. The left and right blocks have a specified width, but the centre block should expand to fit the remaining space. Because I require that the left-most block have a different background colour to the parent, I have grouped its children into another constraint layout. I have given the layout XML below:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="100dp"
      android:layout_marginTop="8dp"
      android:background="#10000000"
      xmlns:tools="http://schemas.android.com/tools"&gt;
  
      &lt;android.support.constraint.ConstraintLayout
          android:id="@+id/abc"
          android:layout_width="100dp"
          android:layout_height="match_parent"
          android:background="#50000000"
          android:layout_marginEnd="8dp"
          android:padding="2dp"
          app:layout_constraintHorizontal_chainStyle="spread_inside"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toStartOf="@+id/jkl"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"&gt;
  
          &lt;TextView
              android:id="@+id/def"
              android:gravity="start"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textColor="#ffffffff"
              android:textSize="18sp"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/ghi"
              android:gravity="start"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textColor="#ffffffff"
              android:textSize="14sp"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toBottomOf="@+id/def" /&gt;
  
      &lt;/android.support.constraint.ConstraintLayout&gt;
  
      &lt;!-- This should expand to fit the remainder of the screen width --&gt;
      &lt;android.support.constraint.ConstraintLayout
          android:id="@+id/jkl"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          app:layout_constraintHorizontal_chainStyle="spread_inside"
          app:layout_constraintEnd_toStartOf="@+id/stu"
          app:layout_constraintStart_toEndOf="@+id/abc"&gt;
  
          &lt;TextView
              android:id="@+id/mno"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="top|start"
              android:textColor="#a0000000"
              android:textSize="14sp"
              android:textStyle="bold"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/pqr"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="top|start"
              android:textColor="#a0000000"
              android:textSize="14sp"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toBottomOf="@+id/mno" /&gt;
  
      &lt;/android.support.constraint.ConstraintLayout&gt;
  
      &lt;ImageButton
          android:id="@+id/stu"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginEnd="16dp"
          android:src="@drawable/x"
          app:layout_constraintHorizontal_chainStyle="spread_inside"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@+id/jkl"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>Unfortunately, the middle block does not expand to fit the remaining width of the screen. Does anyone know how to achieve this? Am I doing anything fundamentally wrong here?</p>
  
  <hr>
  
  <p><strong>Edit:</strong></p>
  
  <p>Based on Ben P.'s response it may be that the XML above is fine, but the layouts in which this layout is contained are at fault. I have therefore provided them below.</p>
  
  <p>This layout XML is the parent of the XML above:</p>
  
  <pre><code>&lt;android.support.v7.widget.RecyclerView
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/parent_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context="com.example.Parent"&gt;
  
  &lt;/android.support.v7.widget.RecyclerView&gt;
  </code></pre>
  
  <p>This layout XML is the parent of the RecyclerView XML above:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context="com.example.MainActivity"&gt;
  
      &lt;FrameLayout
          android:id="@+id/fragment_container"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
      &lt;include layout="@layout/bottom_navigation" /&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>As requested I've provided the complete code base:</p>
  
  <p>MainActivity.java:</p>
  
  <pre><code>public class MainActivity extends AppCompatActivity {
  
      private FragmentManager mFragmentManager;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          mFragmentManager = getFragmentManager();
  
          FragmentTransaction fragmentTransaction = mFragmentManager.beginTransaction();
          fragmentTransaction.replace(R.id.fragment_container, new Foo());
          fragmentTransaction.addToBackStack(null);
          fragmentTransaction.commit();
      }
  }
  </code></pre>
  
  <p>Foo.java:</p>
  
  <pre><code>public class Foo extends Fragment {
      private String[] mDataset;
  
      private OnFragmentInteractionListener mListener;
  
      private RecyclerView mRecyclerView;
      private RecyclerView.Adapter mAdapter;
      private RecyclerView.LayoutManager mLayoutManager;
  
      public Foo() {
          // Required empty public constructor
      }
  
      /**
       * Use this factory method to create a new instance of
       * this fragment using the provided parameters.
       *
       * @param param1 Parameter 1.
       * @param param2 Parameter 2.
       * @return A new instance of fragment Foo.
       */
      // TODO: Rename and change types and number of parameters
      public static Foo newInstance(String param1, String param2) {
          Foo fragment = new Foo();
          return fragment;
      }
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setHasOptionsMenu(true);
          initDataset();
      }
  
      private void initDataset() {
          mDataset = new String[1];
          mDataset[0] = "Hello World";
      }
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
                               Bundle savedInstanceState) {
          View view = inflater.inflate(R.layout.fragment_foo, container, false);
  
          mRecyclerView = view.findViewById(R.id.foo_view);
          mRecyclerView.setHasFixedSize(true);
  
          mLayoutManager = new LinearLayoutManager(getActivity());
          mRecyclerView.setLayoutManager(mLayoutManager);
  
          mAdapter = new FooAdapter(mDataset);
          mRecyclerView.setAdapter(mAdapter);
  
          return view;
      }
  
      // TODO: Rename method, update argument and hook method into UI event
      public void onButtonPressed(Uri uri) {
          if (mListener != null) {
              mListener.onFragmentInteraction(uri);
          }
      }
  
      @Override
      public void onAttach(Context context) {
          super.onAttach(context);
          if (context instanceof OnFragmentInteractionListener) {
              mListener = (OnFragmentInteractionListener) context;
          } else {
              throw new RuntimeException(context.toString()
                      + " must implement OnFragmentInteractionListener");
          }
      }
  
      @Override
      public void onDetach() {
          super.onDetach();
          mListener = null;
      }
  
      /**
       * This interface must be implemented by activities that contain this
       * fragment to allow an interaction in this fragment to be communicated
       * to the activity and potentially other fragments contained in that
       * activity.
       * &lt;p&gt;
       * See the Android Training lesson &lt;a href=
       * "http://developer.android.com/training/basics/fragments/communicating.html"
       * &gt;Communicating with Other Fragments&lt;/a&gt; for more information.
       */
      public interface OnFragmentInteractionListener {
          // TODO: Update argument type and name
          void onFragmentInteraction(Uri uri);
      }
  }
  </code></pre>
  
  <p>FooAdapter.java:</p>
  
  <pre><code>public class FooAdapter extends RecyclerView.Adapter&lt;FooAdapter.ViewHolder&gt; {
  
      private String[] mDataset;
  
      public static class ViewHolder extends RecyclerView.ViewHolder {
          private TextView mFoofoo;
          private TextView mBarbar;
  
          public ViewHolder(View itemView) {
              super(itemView);
  
              mFoofoo = itemView.findViewById(R.id.foofoo);
              mBarbar = itemView.findViewById(R.id.barbar);
          }
  
          public TextView getFoofoo() {
              return mFoo;
          }
  
          public TextView getBarbar() {
              return mBar;
          }
      }
  
      public FooAdapter(String[] mDataset) {
          this.mDataset = mDataset;
      }
  
      @Override
      public FooAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
          View view = LayoutInflater.from(parent.getContext())
                  .inflate(R.layout.bar, parent, false);
  
          return new ViewHolder(view);
      }
  
      @Override
      public void onBindViewHolder(FooAdapter.ViewHolder holder, int position) {
          String text = mDataset[position];
          holder.getBarbar().setText(text);
          holder.getFoofoo().setText(text);
      }
  
      @Override
      public int getItemCount() {
          return mDataset.length;
      }
  }
  </code></pre>
  
  <p>activity_main.xml:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context="com.example.MainActivity"&gt;
  
      &lt;FrameLayout
          android:id="@+id/fragment_container"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#eaff73"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>fragment.xml:</p>
  
  <pre><code>&lt;android.support.v7.widget.RecyclerView
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/foo_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="#8df78b"
      tools:context="com.example.Foo"&gt;
  
  &lt;/android.support.v7.widget.RecyclerView&gt;
  </code></pre>
  
  <p>bar.xml:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="104dp"
      android:layout_marginTop="4dp"
      android:background="#10000000"
      xmlns:tools="http://schemas.android.com/tools"&gt;
  
      &lt;ImageView
          android:id="@+id/backg"
          android:background="#50000000"
          android:layout_width="104dp"
          android:layout_height="match_parent"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
      &lt;TextView
          android:id="@+id/foofoo"
          android:gravity="start"
          android:layout_width="100dp"
          android:layout_height="wrap_content"
          android:textColor="#ffffffff"
          android:textSize="18sp"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
      &lt;ImageButton
          android:id="@+id/action"
          android:layout_height="wrap_content"
          android:layout_marginEnd="16dp"
          android:layout_width="wrap_content"
          android:src="@drawable/pic"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@+id/barbar"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
      &lt;TextView
          android:id="@+id/barbar"
          android:autoSizeMaxTextSize="24sp"
          android:autoSizeMinTextSize="14dp"
          android:autoSizeStepGranularity="2dp"
          android:autoSizeTextType="uniform"
          android:background="#ef0505"
          android:gravity="top|start"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:paddingStart="8dp"
          android:textColor="#a0000000"
          android:textSize="24sp"
          android:textStyle="bold"
          app:layout_constraintEnd_toStartOf="@id/action"
          app:layout_constraintStart_toEndOf="@id/backg"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>Any help is greatly appreciated!</p>