Develop Reference

Android - Text size the same across all screen sizes

In my Android app I have the following layout:
<android.support.v7.widget.CardView
android:id="#+id/difficultyCardView"
app:layout_widthPercent="60%"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:cardUseCompatPadding="true"
android:layout_centerHorizontal="true"
android:layout_above="#+id/noHighScoresCardView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/yellow"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:src="#drawable/pushpin" />
<TextView
android:id="#+id/diffNameTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="12dp"
android:maxLines="1"
android:singleLine="true"
android:text="FÁCIL"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
In my Nexus 5, setting the text size to 20sp as shown above, makes text occupy, approximately, 75% of CardView's width. The problem is that, when I test this on a smaller phone, it adds ellipsis to the text.
What I want to achieve is that, on EVERY screen size and resolution, the text will exactly occupy 75% of the card with.
So, how can I solve this problem, creating multiple scale folders (ldpi, mdpi, ...) and adjusting font size in each of them, calculating it via code as a percentage, or any other solution?
Thank you.

Get the card width on the specific device and multiply by .75, then set the text size to that value.

if you want textview to take 75% of cardview with textsize 20sp then text will spilt into multiple lines.
android:maxLines="1"
android:singleLine="true"
remove these properties there is no need and allow textview for multiline

Will the text always be the same? If so the solution is pretty simple.
int ratio = 15;
int width = difficultyCardView.getWidth();
diffNameTv.setTextSize(width/ratio);
Adjust the ratio till the size is where you want it, then the text will be the same relative size compared to the card no matter what the screen size is.

What you want to do is to create a responsive layout. To do so create additional layout folders in the res directory. Add the pixel density name at the end of the folder name, separating the text "layout" and the density using a dash (e.g. layout-hdpi, layout-mhdpi, layout-xhdpi etc.) Within these folders, create the layout you want for each density. You can then resize the textview to 75% of each of the different screen sizes based on the pixel density. Therefore if 20sp fills 75% of the hdpi layout then you might need to increase the text size for a the mhdpi to fill 75% of the card.
Android will automatically select the correct layout for a particular device based on the screen size.

How to create a layout in android which should support all the devices?

This question might be asked more than 1000 times,I am still here confused,which will be the proper approach?As I Googled I found some related links link1 ,link2,link3 etc.Solution what i found is use Relative layouts in xml design.All layouts will be in layout-folder(if you are creating a phone app) and dimensions should be given in dimens.xml(which is in values-mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi folders) to support all screen.
how can i give marginTop for an image view.I am doing calculation like this:in ratios
(1:1.5:2:3:4)-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi)-(10dp-15dp-20dp-30dp-40dp).
Whether my approach is correct or?
I have given different images of different resolutions in drawable-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi) folders.
My question is in values-mdpi/dimens.xml-margintop-10dp,
values-hdpi/dimens.xml-margintop-15dp,values-xhdpi/dimens.xml-margintop-20dp etc.Giving dimension values for different screen in the ratios of (1 : 1.5 : 2 : 3 : 4) is correct?
in Main.xml:
<RelativeLayout
android:id="#+id/rl_submain"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/iv_papa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/s_mtop"
android:background="#drawable/papa1"
android:gravity="center"/>
<TextView
android:id="#+id/tv_power"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginBottom="#dimen/s_mbot"
android:textSize="12sp"
android:textColor="#color/white"
android:layout_alignParentBottom="true"
android:text="#string/poweredby"/>
</RelativeLayout>
<resources>
<!--Splash-->mdpi
<dimen name="s_mtop">10dp</dimen>
<dimen name="s_mbot">2dp</dimen>
<resources>
<!--Splash-->hdpi
<dimen name="s_mtop">15dp</dimen>
<dimen name="s_mbot">3dp</dimen>
<resources>
<!--Splash-->xhdpi
<dimen name="s_mtop">20dp</dimen>
<dimen name="s_mbot">4dp</dimen>
<resources>
<!--Splash-->xxhdpi
<dimen name="s_mtop">30dp</dimen>
<dimen name="s_mbot">6dp</dimen>
<resources>
<!--Splash-->xxxhdpi
<dimen name="s_mtop">40dp</dimen>
<dimen name="s_mbot">8dp</dimen>

how can i give marginTop for an image view.I am doing calculation like
this:in ratios
(1:1.5:2:3:4)-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi)-(10dp-15dp-20dp-30dp-40dp).
Whether my approach is correct or?
Dimension Ratio (1:1.5:2:3:4)-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi) is correct but it not for dimension unit dp/dip...it is for px
dp :Density-independent Pixels - An abstract unit that is based on the
physical density of the screen. These units are relative to a 160 dpi
(dots per inch) screen, on which 1dp is roughly equal to 1px. When
running on a higher density screen, the number of pixels used to draw
1dp is scaled up by a factor appropriate for the screen's dpi.
Likewise, when on a lower density screen, the number of pixels used
for 1dp is scaled down.
For more detail on different dimension unit refer doc
So as per your example let marginTop = 10dp then as per ratio (1:1.5:2:3:4)-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi)-(10px-15px-20px-30px-40px)
than means you can also do marginTop =10px but it would remain 10px across all..so higher the dpi the marginTop would look small in this case..
For advantage of dip/dp over px you can refer here
sp is similar to dp; but it is used in context of font size for reason refer dimension unit doc
You can also refer the converter here
dimensions should be given in dimens.xml(which is in
values-mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi folders) to support all screen.
Coming to this again for dimension you should not do values-mdpi, hdpi...and so on.Because if you use unit dp then it is independent of density of screen as mentioned.
if you use unit px then you can go for values-mdpi, values-hpdi...and so on, but again this would become overhead of manual calculation and possibility of inducing error by getting unwanted value.
So it is better that dimesnion value would only defer in terms of screen size not in terms of screen density. so your layout or values folder can be as per Android OS(API) version, and screen size like normal, large or as mentioned in link1, link2 and in comment by Eenvicible
Updates BASED on Comments
If you go through Supporting Different Screens then you will realize that for layout we have folder structure layout-normal, layout-large, layout-large-land...but again this might varyIn the same link you can see drawable-mdpi..and so on. Here images we use are generally not density independent so we need same image in different densities and we add it in accordingly in folderfor values we have folder structure like values, values-fr in case you Supporting Different Language
Regardingly values-mdpi,values-hpdi I already explained above.
Please go through each and every link properly..bcoz I am refering to OFFICAL DOC ONLY

Yes, the values in your dimens.xml file are completely wrong. Please delete all your different dimens.xml. The different densities are for the actual images when you edit them with your image editor.
If you want a margin around your image, use linear layouts with weights or relative layouts, but do not use dps. Weighted linear layouts or relative layouts are much more flexible.
But if you do choose dps, which again, I do not recommend, know that one set of measurements in your dimens.xml is enough.
Ideally, do not create more xml layout/dimens variations than you need. You can tweak those if you need to, but make sure that you're solving an actual problem before you start adding on more qualifiers.

Why dont you use weight for layout instead. Have one blank view above image and weight it according to your requirement it will stretch automatically. You can find example here
Or try like this. Give weight for space as per your need for blank layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_dark"
android:layout_weight="0.2"
android:id="#+id/view1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_register"
android:layout_weight="0.8"
/>
</LinearLayout>
</RelativeLayout>

Too much padding around Button's Text

I have a fragment that takes up the whole screen, with Buttons and a SeekBar which scale to fit it, as well as fixed size TextViews. I use linear horizontal and vertical layouts with weights to achieve this.
The problem is I can't get the button text large enough without it making the buttons expand in size. For some reason, any text size greater than about 35sp makes the button expand, no matter how big the button is. This screen shot shows the button sizes have plenty of space for the text:
Ideally I would like the "<" and ">" characters to fill the buttons. (I was going to programmatically change the font size according to the button size, e.g. for different screen sizes) but haven't tried since I can't even get the static layout to work.
Edit: I would like to avoid images, since if I had 15 buttons, and 8 buckets, that would be 120 images I need!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/VerticalLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="0dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp" >
<!-- ........ -->
<TextView
android:id="#+id/trackTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2" >
<Button
android:id="#+id/trackPreviousButton"
style="android:buttonBarStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/button_track_previous"
android:textSize="35sp" />
<Button
android:id="#+id/trackNextButton"
style="android:buttonBarStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/button_track_next"
android:textSize="35sp" />
</LinearLayout>
<SeekBar
android:id="#+id/seekBar"
style="#style/tallerBarStyle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!-- ........ -->
</LinearLayout>
I have tried adding the following line to Buttons, but it only makes a small difference, if any:
android:padding="0dp"
Advice on getting the font height to fill the buttons without padding is my primary question. (But if the problem of dynamically sizing the text to fill the buttons for different screen sizes can be solved at the same time, that would be brilliant).
Edit: it turns out that using larger font sizes affects the effect of weighting for the height of the linear layouts, which is why there seemed to be padding - larger font size increased the button size, not because of the padding (which was 0) but because of the weighting

Button is not the right widget for your purpose. Use an ImageButton (or even an ImageView) instead.
I was going to programmatically change the font size according to the button size, e.g. for different screen sizes
Your current approach will land you in a lot of problems regarding proper sizing of your UI components. Given the plethora of android devices out there, screen size is just one aspect of the problem. You will also be dealing with varying screen densities. Best approach would be to put size/density buckets (drawable-mdpi/hdpi/xhdpi) to use. Help android in working for you.
Use drawables to indicate next and previous. If you're worried about the drawables being too small for tablet screens, create appropriate drawable resources/folders:
// Phones - 4 to 7 in
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
// Tablets - 7 to 10 in
drawable-large-mdpi
drawable-large-hdpi
// Tablets - 10 in
drawable-xlarge-mdpi
This list may not be exhaustive. Consider doing some research before finalizing your size/density buckets.
Output:
# drawable size 32dp:
# drawable size 64dp
Now it becomes quite straightforward - finalize drawable size by visual inspection on a phone, on a 7 inch tablet, and on a 10 inch tablet. Then use density scales to create and store appropriately sized drawable in the folders I mentioned above. Let android deal with what bucket to pick from.

The problem is by default buttons include a minHeight attribute. I had the same problem and solved it with just a single line of code in my XML file:
android:minHeight="0dp"

There is a quick and easy solution to your problem!
Auto-sizing text in Android is fiendishly difficult in my experience, especially when padding is involved. I would advise that instead of using an angle bracket character, you use a drawable - there are plenty of arrow icons available online - and an ImageButton. For example:
<ImageButton
android:id="#+id/trackNextButton"
style="android:buttonBarStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/left_arrow"
android:scaleType="fitXY"
android:padding="0dp"
android:textSize="35sp" />
By using different ScaleTypes you can alter the stretching of the image. Even better, the screen sizes problem is solved because you can add different drawables for different densities.

Use minWidth="0" or "1" to reduce the horizontal padding on a text Button.

density pixels(dp) is not working fine for all resolutions

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/gray"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/darkgray"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/attenders"
android:layout_width="110dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#color/gray"
android:layout_marginRight="8dp"
android:text="Attenders" />
<Button
android:id="#+id/send"
android:layout_width="110dp"
android:layout_height="40dp"
android:layout_marginLeft="8dp"
android:layout_gravity="center"
android:background="#color/gray"
android:text="Send IM" />
</LinearLayout>
</LinearLayout>
this is my code but the dp is not working fine for all screen resolutions.
suggestions plz, plz tell me if i am doing anything wrong

problem is that when i use dp for setting height or width of a button
it does not gets fits to all resolutions i-e on small screens it looks
big and on big screens it looks small, whereas i know that when we use
dp for setting height and width of any component it automatically
converts/adjusts according to screen resolution
What I understand from this is that you thought using dp instead of px (or in, or cm) will magically work such that they will all have the same physical size on all devices, regardless of that device's density (ppi).
That's not the case.
dp, or dip, as explained here, is
An abstract unit that is based on the physical density of the screen.
These units are relative to a 160 dpi (dots per inch) screen, on which
1dp is roughly equal to 1px.
A screen with more dpi (denser, meaning more pixels are packed into a square area of the screen), will essentially draw a physically smaller image compared to a screen that has 160dpi when tasked to draw the same, say, 100x100 dp image.
When running on a higher density screen, the number of pixels used to
draw 1dp is scaled up by a factor appropriate for the screen's dpi.
Solution
There are two easy ways to have your app look proportionally the same on different screen sizes.
The first is to use different layout folders (layout-ldpi, layout-mdpi, etc.). This technique is well-explained here. A much more recommended way would be to use different style values for each density, so you can still maintain one layout folder and refer to the styles instead for measurement. This can be done using the same technique, but instead you will have values-ldpi, values-mdpi, etc. This is useful for having standard sized UI elements across screen sizes.
The other way is to use weights all over your layout. Weights adjust automatically regardless of screen size of density. This will help a lot if you want, say, three columns that have varying width -- you can easily use weights to tell the layout that column A needs to occupy 40% of the available width of the screen, and B and C will have 30% each. This is useful for having a standard layout across screen sizes.
A clean-looking, nicely coded app will implement both.

It is beacause you are giving fixed dimensions which can only be fit for a particular screen size which you are using. So try avoiding static dimensions and make use of match_parent,wrap_content and fill_parent so that you can get your layout fit for every screen size.

Single Layout for all screen sizes

I have read many documentation on supporting multiple screen sizes but still confused.
I have read like if specified in dp it will get automatically scaled.
In my sample i just have a single layout. there i have placed an edit text.
and given width , suppose 170 dp. suppose width wise it is half the screen in a 5 inch phone emulator.
What i was expecting is, if i show it on an tablet 7inch or 10 inch , there also it will be half the width of the screen (i.e it will get automatically scaled). But it didnt. in a 10 inch tablet it is only very small size.
what should i do to achieve this only through layout xml ( only single xml )

Dont set a Static width for the Textview as android will automatically scale it the the correct size using
android:layout_width="fill_parent"
android:layout_height="wrap_content"
Basically what this does is makes the TextView the full size of the width of the device, and wraps the Height only to the needed height of the text.
YOu could also do warp_content for width to if you wanted. This is the best way. If you set it statically, you will need to create different layouts using XML.

Learn to use layout weights, you can use them like a percentage of 100.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<View
android:layout_width="0dip"
android:layout_height="0dip"
android:layout_weight="50" />
</LinearLayout>
Here the textview takes up 50% of the screen width and the other view is a kind of invisible spacer taking up the other 50% of the screen width.
Which looks something like this (Eclipse XML preview):
As you can see the textview wraps when it gets to 50% of the screen. Working on all sizes of screen.