9

We have just started Android Tablet development. I need to prototype for 7in and 10in tablets.

Is there any wireframe stencil i can get hold of ?

What are the dimensions of the canvas i need to start designing on ?

3 Answers 3

19

Just like phones, tablets have all sorts of dimensions and sizes. Here is a quick list of different models with their respective sizes and dimensions:

  • Samsung Galaxy Tab 10.1 3G - 10.1 inches, 1280 x 800 pixels
  • Samsung P1000 Galaxy Tab - 7.0 inches, 600 x 1024 pixels
  • Dell Streak 7 - 7-inch 800×480
  • Motorola Xoom - 10.1-inch, 1280×800
  • Viewsonic G - 10.1-inchs 1024×600

These are the dimensions you'll find most often.

1
6

Rather than considering actual pixel dimensions (which can vary in size depending on pixel density), it might be easier to think in density independent pixels (dp). This is the smallest device width as given in the configuration examples from the docs:

7” tablet:   600dp 
10” tablet:  720dp 

Notes

  • For actual pixels size, multiply by 1 to get mdpi, multiple by 2 to get xhdpi, by 3 to get xxhdpi, etc. See here for more.

  • To provide different resources for the various screen sizes, see this answer.

1

Old topic but i think i've got a good way to resolve your probleme. If it can help some..

First of all, if you do right, All your activities should be composed ONLY with fragments.

You may know that when a screenSize is defined as exemple by 384* 640, that means your maxWidth is 384dp and your maxHeight is 640dp.

And so, it's easy to determine how height you should use without trying on emulator.

Still using my screenSize exemple : 384 (Widht) * 640 (Height) : 640dp 292dp 264dp '

<dimen name="max_height">640dp</dimen> <!-- screen maxHeight -->
<dimen name="half_height">292dp</dimen> <!-- ScreenMaxHeight with actionBar  -->
<dimen name="half_height_bigactionbar">264dp</dimen> <!-- height without actionBar and its subActionBar -->

Down here, this is my fragment size :

 <fragment
    android:layout_width="match_parent"
    android:layout_height="@dimen/half_height_bigactionbar"

Both of my fragmennts should now fill all the sreen

My action bar height is 56dp . If you do the map if i want he half of my screen i do ((maxScreenHeight) - (ToolBarSize) ) / 2. I got ((640) - (56)) / 2 = 292dp !

Do the same for All of resolution you might know with all the window part you may use: And you will have THE perfect match in every phone you know. You can do the same math for width if you use tablet. But remember, use as much as possible wrap_content + marginLeft and MarginRight to place your components !

When you wana create an activity. Draw it in a sheetwith small-paned . And think only with percent. Then do the math, and use ONLY fragments.

You should be fine then :). Ask if i wasn't clear enought !

1
  • I think my XLS file would be better than my answer. Do you know a place where i should put it for share ? Jan 13, 2016 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.