Different UI for Tablet and Mobile

Question

I am working with one Application for Tablet and Mobile mode.

I have confusion.

There is totally different UI and WEBAPI for one screen only.

Can I make these changes in the same app?

Or

I have to create a different application for Tablet mode?

score 3 · Answer 1 · answered Nov 03 '16 at 09:21

3

You can Just Create a new layout with same name for that particular page like

res/layout/main_activity.xml           # For handsets (smaller than 600dp available width)
res/layout-sw600dp/main_activity.xml   # For 7” tablets (600dp wide and bigger)
res/layout-sw720dp/main_activity.xml   # For 10” tablets (720dp wide and bigger)

answered Nov 03 '16 at 09:21

Nivedh

971
1
8
19

I know that bro. This is possible if I have the same layout for tablet and mobile. But In my case, there is a totally different UI for tablet and mobile. – Chirag Savsani Nov 03 '16 at 09:25
Its just for one activity right. Then you check programatically whether its a tab or mobile and divert your activity. Its better than creating 2 app I think. – Nivedh Nov 03 '16 at 09:31
How about adopt `fragment` too? – Prisoner Nov 03 '16 at 09:32
There is also too much other stuff like, Tablet mode should support rotation while mobile mode should only in portrait mode. WEB API is also for both screens. If tablet mode, then whole app should support rotation while in mobile mode, there is only portrait mode. – Chirag Savsani Nov 03 '16 at 09:38
1

I think Its better to make Changes in same app than creating a new application. But you have to check programaticaly and divert to different fragments. If you are building in same app you can reuse fragments if needed. I will suggest you to do in same app than a different one – Nivedh Nov 03 '16 at 09:43
@ChiragSavsani for the rotation, maybe you need to handle it in code: [reference](http://stackoverflow.com/questions/22885288/force-android-screen-orientation-depending-on-screen-size). – Prisoner Nov 03 '16 at 09:54

score 1 · Accepted Answer · answered Dec 26 '16 at 13:06

Finally I solve my question by Using below code.

Create bool.xml file under app > src > main > res > values > bool.xml

Same for values, values-sw600dp, values-sw720dp

bool.xml for values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <bool name="isTablet">false</bool>
</resources>

bool.xml for values-sw600dp

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <bool name="isTablet">true</bool>
</resources>

bool.xml for values-sw720dp

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <bool name="isTablet">true</bool>
</resources>

Now do just following things.

// Global Variable
boolean isTablet;

//Get Value from values bool.xml file
 isTablet = getResources().getBoolean(R.bool.isTablet);

//Now check condition
if(isTablet){
      //Device is tablet
}else{
      //Device is mobile
}

score 0 · Answer 3 · answered Nov 03 '16 at 09:37

You can create layouts that have a min-width constraint. If goes like this:

XML Layout folder => New File => Layout Resource File =>

Same name as other file
Available qualifiers => Smallest width => (example) 600

Then go and make a layout that makes sense for a tablet. *Android will pick the right XML for the screen size.

Different UI for Tablet and Mobile

3 Answers3