Android Layout - How to create a dynamic tablelayout based on screen size?

Question

Do I need to create 2 fragment layout for it? 1st layout is (FirstName, Gender, Category and etc..) and 2nd layout is (LastName, DOB and etc...)

Then use fragment to arrange it according to screen size?

But I dont think is good right? because then we need to decide how many row I need to put in one layout.

What is the best approach to achieve it?

View in tablet:

View in phone:

Answer 1

Use a single Fragment or Activity and then use a different layout for different screen sizes & orientations. If you use separate Fragments, the code that processes the user interaction will be in multiple places. Using a single Fragment or Activity will make your code much simpler.

Here are some example layouts to get you started. I'm using all TextViews but you could replace the gender TextView with a Spinner quite easily.

For phone or smaller screens you would use this layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/first_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Chee"/>

    <TextView
        android:id="@+id/last_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Kin"/>

    <TextView
        android:id="@+id/gender"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Male"/>

    <TextView
        android:id="@+id/date_of_birth"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="dd/mm/yy"/>

</LinearLayout>

And then for landscape or larger screens, this one will put last name and date of birth in a second column.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <TextView
            android:id="@+id/first_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Chee"/>

        <TextView
            android:id="@+id/last_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Kin"/>

    </LinearLayout>

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

        <TextView
            android:id="@+id/gender"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Male"/>

        <TextView
            android:id="@+id/date_of_birth"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="dd/mm/yy"/>

    </LinearLayout>
</LinearLayout>

Give them the same filename (e.g. person_info.xml) and put them in resource folders for the different screen sizes & orientation. (e.g. layout & layout-land).

In your fragments onCreate() you then inflate the layout and Android handles choosing the correct file based on the users screen size & orientation.

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        fragmentView = inflater.inflate(R.layout.person_info, container, false);

        firstNameTextView = (TextView) fragmentView.findViewById(R.id.first_name);
        lastNameTextView = fragmentView.findViewById(R.id.last_name);
        genderTextView = (TextView) fragmentView.findViewById(R.id.gender);
        dobTextView = (TextView) fragmentView.findViewById(R.id.date_of_birth);

        return fragmentView;
}

Since the TextViews have the same android:id in both layouts, your code can treat them the same no matter which layout gets loaded.