2

I am developing an android app where I have 3 buttons at the top of the screen and i have defined them using the layout_weight property. The buttons adjust to all screen sizes including tablets but its text does not.

This is what it looks like on a nexus 5:

This is what it looks like on a nexus 10:

See the difference?
On the nexus 5, It is quite legible but on the nexus 10 you can hardly see anything!

Here is my XML:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:background="#000000"
    android:orientation="horizontal"
    android:weightSum="3" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="Button 1"
        android:layout_weight="1"
        android:id="@+id/button" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="Button 2"
        android:layout_weight="1"
        android:id="@+id/button2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="Button 3"
        android:layout_weight="1"
        android:id="@+id/button3" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center_vertical"
    android:background="#000000"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="3" >

</LinearLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:background="#000000"
    android:orientation="horizontal"
    android:weightSum="3" >

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:background="#000000"
    android:orientation="horizontal"
    android:weightSum="3" >

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:background="#000000"
    android:orientation="horizontal"
    android:weightSum="3" >

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:background="#000000"
    android:orientation="horizontal"
    android:weightSum="3" >

</LinearLayout>

So how do I get the button text size to adjust automatically on different screen sizes without having to make different layouts for different screen sizes?

Please help me out with the code as I am pretty much a beginner!

Thanks in advance!

Chinmay Dabke
  • 5,070
  • 11
  • 40
  • 63
  • 1
    possible duplicate of [Text size and different android screen sizes](http://stackoverflow.com/questions/9877946/text-size-and-different-android-screen-sizes) – StarsSky Jan 19 '14 at 13:25
  • @StarsSky I want to avoid making different folders and was looking for a solution to make a single layout that will support all screen sizes. Please help me if you have a solution. Thanks! – Chinmay Dabke Jan 19 '14 at 13:28
  • different layout folders has been introduced to satisfies your request – StarsSky Jan 19 '14 at 13:29
  • Yeah i know that but that's what i want to avoid. I want just one layout that will automatically adjust to all screens sizes. I have done half of it by using 'layout_weight' but I'm stuck at the text size of the buttons. Please help me if you have a solution. Thanks! – Chinmay Dabke Jan 19 '14 at 13:32
  • try using textsite in sp in your buttons. – StarsSky Jan 19 '14 at 13:34

2 Answers2

3

You're currently trying to scale up the whole application, instead of building a proper tablet UI. You set the width of the buttons to 1/3th of the screen, which is working as intended. You didn't change the textSize of the buttons, so Android picks the default textSizes. The default textSizes are a specific size, independent of the View's dimensions. You can't (and don't want) to scale up the full UI to be the same on a 4" phone and a 10" tablet.

You can't build a (proper) UI for both phones and tablets in just a single layout, since you should display more information on a tablet than on a phone. Although you can re-use most of the layout. You might want to read the Supporting Different Screen Sizes training on the Android Developers site.

fifarunnerr
  • 617
  • 4
  • 12
  • I read that before. Basically what i want to do is to make the text sizes of the buttons fit automatically on a big screen. – Chinmay Dabke Jan 19 '14 at 13:49
2

You can set button textSize in sp (i.e.: 24sp).

Keeping in mind that this value is referred to an mdpi screen, it will be scaled up or down accordingly to the screen resolution.

So, on an ldpi screen it would be scaled down to 18sp, while on an xhdpi screen it would be scaled up to 48sp.

Other than this you can define a dimension value in your dimens.xml file in your values folder (but you have to make several values folders, one for each resolution you'll support).

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
  • Actually I have 119 buttons in my layout and 24sp is too large for them. I mean on an xhdpi screen, your solution works well but on a small device, it is too large. Please help me out with that. Thanks! – Chinmay Dabke Jan 19 '14 at 13:40
  • To get 24 sp on an xhdpi screen, your initial value should be 12sp. But this is quite small and on an ldpi screen it would become 10sp. Anyway, i have doubts that you can fit 119 buttons on such a small screen. Anyway, you can use the dimens solution to set a custom dimension that varies for each resolution. – Phantômaxx Jan 19 '14 at 13:44
  • OK will use dimensions. Can you please guide me with that as I am beginner? Thanks! – Chinmay Dabke Jan 19 '14 at 13:47
  • In what ratio sizes are? – John R Jan 19 '14 at 13:49
  • @JohnR I didn't get you. – Chinmay Dabke Jan 19 '14 at 13:50
  • Here is a very good [guide](http://developer.android.com/guide/topics/resources/more-resources.html#Dimension) on using custom dimensions – Phantômaxx Jan 19 '14 at 13:50
  • some days ago I have same question about sizes. In your link 1dp=1px. Is it means if i want to create background screen for ldpi then 480dp x 320dp means I have to create image with 480px x 320px? – John R Jan 19 '14 at 14:27
  • 1dp = 1px is only true fro mdpi screens (density scale factor = 1). 1 dp will be scaled to 2 px on an xhdpi screen (density scale factor = 2). Don't forget the dpi part. on a mdpi screen you should make your graphics at a resolution of 160 dpi, while on an hdpi screen the resolution of your graphics should be 240 dpi. This means working with a graphics editor. – Phantômaxx Jan 19 '14 at 14:35
  • Mainly I use adobe photoshop and there height width in px and resolution without any dimension. If you tell me what size of dimesion and resolution background image I have to create for ldpi I am really thankful to you. – John R Jan 19 '14 at 15:01
  • 1
    Well, dimension is in px and resolution in dpi. Set these values accordingly (i.e: a normal phone screen with an mdpi screen is typically 320*480 @ 160 dpi for portrait and 480*320 @ 160 dpi for landscape orientation). For an ldpi phone screen, you typically have these dimensions Portrait: 240*320 @ 120dpi and Landscape: 320*240 @ 120dpi.Then, the dimensions are set in your res/values-resolution/dimens.xml files, as shown in the reference link. Once set, refer these dimensions in your xml or code and you're done. pretty straightfoard. I'd say that a font size of 12sp is good for an ldpi screen – Phantômaxx Jan 19 '14 at 15:16
  • Can you please see this http://stackoverflow.com/questions/21144388/difficulty-to-understand-how-to-support-multiple-screen I am not satisfied with that 2 answers. I think you can answer really straight forward. And easy to understand for other newbie. – John R Jan 19 '14 at 15:51
  • It's more or less what's depicted [here](http://developer.android.com/guide/practices/screens_support.html), the reference page for this argument. – Phantômaxx Jan 19 '14 at 15:57
  • Yes but everyone provide this link. Why no one answer direct according to my question. According to tyler answer px = dp * (dpi / 160) but the link you send me first written px=dp. – John R Jan 19 '14 at 16:14
  • It's not really so: it says **These units are relative to a 160 dpi (dots per inch) screen, on which 1dp is roughly equal to 1px**. As I said this is only true on mdpi screens (160 dpi). Hope it's clear now. – Phantômaxx Jan 19 '14 at 16:21
  • yes I understand if you provide answer there. I m really thankful to u. – John R Jan 19 '14 at 16:25