How can I change the way I display the fragments in differents display sizes?

I’m currently making an app for Android devices and I would like to know how can I change the way I display the fragments in differents display sizes (ex. Tablet).

At this point I have an activity for all my fragments and this causes me to replace the fragments when I change page but for tablets I would like to display 2 fragments inside that activity.

I’ve created a layout-large version for my main activity:

<?xml version="1.0" encoding="utf-8"?>
<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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".PaginaInicial"
    tools:showIn="@layout/app_bar_pagina_inicial">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
            class="pt.ipp.estg.schoolhelperapp.apontamento.ListaApontFragment"
            android:id="@+id/a_fragment"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent" />
        <fragment
            class="pt.ipp.estg.schoolhelperapp.apontamento.VerApontFragment"
            android:id="@+id/b_fragment"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="match_parent" />

</LinearLayout>

</android.support.constraint.ConstraintLayout>

The fragment container is inside layout-small version of the main activity.

One of the fragments displays a list of items (@+id/a_fragment) and the other one displays the information of one specific item that I previously selected (@+id/b_fragment).

Answer

For further details refer to this document: https://developer.android.com/training/multiscreen/screensizes

• Create a default alias resource value file in res/values/refs.xml and place the following code inside it. This value will refer to your layout file that has only one fragment.

<resources>
        <item name="activity_masterdetail" type="layout">@layout/layout_with_single_fragment</item>
     </resources>

• Now need to create an alternative resource so that the activity_masterdetail alias will point to layout_with_two_fragment.xml on larger devices. Create a new file with same name refs.xml but with resource qualifiers for Smallest Screen Width under Available qualifiers. Use smallest dimension of 600dp or more (sw600dp qualifier)

<resources>
<item name="activity_masterdetail" type="layout">@layout/layout_with_two_fragment</item>
</resources>

Your goal here is to have logic that works like this:

• For devices that are under a specified size i.e mobile phones, use layout_with_single_fragment.xml.

• For devices that are over a specified size, use layout_with_two_fragment.xml.

• Now in your man activity which shows a list, use setContentView(R.layout.activity_masterDetail) i.e the name of referenced layout

• If this code will run on mobile phones, normal refs.xml file will be referenced by activity_masterDetailbut if this code runs on a tablet, resource qualified refs.xml file will be used.

• In your activity logic, where you want to show master and detail layout on the same screen on tables but open another activity on phones, use the following logic inside onClick() of your list items

  if (findViewById(R.id.a_fragment) == null) {
    Intent intent = A_Activity.newIntent(this, listItem.getId());
    startActivity(intent);
  } else {
    Fragment newDetail = B_Fragment.newInstance(list_item.getId());
    getSupportFragmentManager().beginTransaction()
        .replace(R.id.b_fragment, newDetail)
        .commit();
  }