Create custom layout for tablet and phone

Question

I need to create a custom layout that will contain two rows on tablet that will show featured and regular items(no scrolling needed), and listview on a phone that shows only the featured items. Is it possible to create a layout like this, is there some library that someone can share with me that will help me create this kind of layout?

Here is how it should look on the tablet:

enter image description here

And here is how it should look on the phone:

enter image description here

this might be flagged as duplicate, google gives tons of resources - one possible solution here http://stackoverflow.com/questions/4185507/layout-for-tablets-in-android — mihail, Jul 10 '14 at 07:22
yes its possible use two layouts one for tablet and other for phone **layout-sw720dp** for 10 inches tablet **layout-sw600dp** for 7 inches tablet *layout* for other sizes P.S.:-Add these folders in res and add xml with same names — Rohit, Jul 10 '14 at 07:23
Go through this link http://developer.android.com/guide/practices/screens_support.html — Rohit, Jul 10 '14 at 07:30
Question hardly shows any research. As @mihail points out, there are tons of easy to find resources, including [Android Developers' website](http://developer.android.com/guide/practices/screens_support.html) — Marius, Jul 10 '14 at 07:37

SuppressWarnings · Accepted Answer · 2014-07-10T07:57:16.287

You have to use different layout folders for tablet and phone.

Default folder is res/layout.

For tablet just create a new folder as res/layout-large, and place tablet mode layout there. Remember these layout xml files need to have the same name. Android system will now look for layout-large folder layouts when application is run under large screens.

You have official documentation about supporting multiple screen sizes (more specifically) here.

<<<<<---------- EDIT : ---------->>>>>

Use under activity to control code under different screen size:

int screenSize = getResources().getConfiguration().screenLayout &
        Configuration.SCREENLAYOUT_SIZE_MASK;

String toastMsg;
switch(screenSize) {
    case Configuration.SCREENLAYOUT_SIZE_LARGE:
        toastMsg = "Large screen";
        break;
    case Configuration.SCREENLAYOUT_SIZE_NORMAL:
        toastMsg = "Normal screen";
        break;
    case Configuration.SCREENLAYOUT_SIZE_SMALL:
        toastMsg = "Small screen";
        break;
    default:
        toastMsg = "Screen size is neither large, normal or small";
}

yes but as you see the layouts are very different, so that means the layout for tablet and phone will not have the same structure. Ex. the phone version has a listview, the tablet one has a linear layout for example. Will that be a problem? — Darko Petkovski, Jul 10 '14 at 07:26
Not necessarily. You just need to handle them differently depending on user device. If for instance say you only want to look for R.id.listview1 when phone, use the activity as "controller" of the application. A good way to do it is: (check edited answer) — SuppressWarnings, Jul 10 '14 at 07:32

score 4 · Answer 2 · answered Jul 10 '14 at 08:34

4

Create layouts in following folders

res/layout-w1280dp - for 10 inch devices

res/layout-w820dp - for 7 inch devices

res/layout - for everything else

Do not use:

res/layout-large may be not correctly detected. Rely on dp size shown above

answered Jul 10 '14 at 08:34

robotoaster

2,967
1
23
22

Hi robotoaster. I have one question regarding to this answer. Does It Support all tablet layout screen? Today in Market there is one more device dell venue 8 This device have 8inch screen Is this layout you mention will support it for all tablet? – Sulabh Gajjar Nov 05 '14 at 06:05
try to establish what is width dp of that device and add extra res/layout for it. Some devices are more troublesome e.g. LG Pad, has 8 inches but system recognises it as 7in – robotoaster Nov 07 '14 at 17:15

score 1 · Answer 3 · answered Jul 10 '14 at 07:29

First detect the device is a phone or a tablet. You can do it by calculating the device screen size.

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
double x = Math.pow(metrics.widthPixels/metrics.xdpi,2);
double y = Math.pow(metrics.heightPixels/metrics.ydpi,2);
double screenInches = Math.sqrt(x+y);
Log.d("debugging","Screen inches : " + screenInches);

And also use different layouts in res folder. In your code decide whether to initiate a ListView or a LinearLayout.

Create custom layout for tablet and phone

3 Answers3