How do I setup my fragments such that the layout I am using for phone also works well with tablets?

Question

I am using my app currently ,made of fragments , just on phone. I am planning to add tablet version of the same , but seems like some fragments don't work exactly as expected on the tablet and often many mess up on landscape.So I just needed some pointers how to go about the same? Here is my code for one of the fragments layout in xml :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/altercolor2" >

    <HorizontalPageView
        android:id="@+id/headline_gallery"
        android:layout_width="match_parent"
        android:layout_height="140dp" />

    <include layout="@layout/loading_no_results" />

</FrameLayout>

How do I alter it such that the height even works on tablet as expected without cutting off some data? Also, should i add another duplicate layout somewhere for this or there's way around it? Any help appreciated,thanks!

Answer 1

Try this. Make a new layout-xlarge folder in /res directory and place all your tablet related xml files in that folder. Android system automatically fetches layout files from this layout-xlarge folder for 7-10 inch screens. And to support landscape mode, design your layout files specifically for landscape mode and put it in layout-land folder. But make sure that the name of the files in all the folders are same.

Answer 2

Android Training guide covers this best. You should read it

http://developer.android.com/guide/practices/screens_support.html#support

Answer 3

Theory, logic and best practices are a bit long to be explained here. So, my suggestion is to read this tutorial from the official documentation, http://developer.android.com/training/basics/fragments/index.html, checking all the topics and the links suggested by Google. Also check the example application provided by them as well. Having done that, if you have a more specific issue, please ask here and we will be more than happy to help you.

Answer 4

Try putting your main views i.e HorizontalPageView in a linear layout and make use of the weight and orientation attributes of the linear layout.

As I understand from your code you want to align the views vertically, in this case the "weight" attribute does wonders

Answer 5

first you need to figure out whether you will use a different ui for tablet version besides the phone version, if you use the same ui disign, (one pane or two panes), just thinking about portrait/landscape is enough, otherwise you need use style and value-swxxx to arrange the layout files for tablet and phone.

Besides the phone/tablet issue, you also need use layout-land to define the same layout unit for the landscape mode. so there are (phone-portrait, phone-landscape, tablet-portrait, tablet-landscape) four scenarios.