Develop Reference

Responsive Layout Design

I finished the java codes and function of my little project. At the end, i check to support a big amount of android devices according to their size. But it was fail.
While researching, i understand that i should use sp for textsizes and dp for all other parameters. The layout -xml- is existed via sp and dp. But it is not like that i expected.
I create a new project for example.
My xml; (in ConstraintLayout)
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:text="Hello World!"
android:textSize="105sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="144dp"
android:text="Check"
android:textSize="160sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
For 1080 x 1920 xxhdpi; Click here to see layout
For 1440 x 2960 hdpi(samsung galaxy s8 ) Click here to see layout
In galaxy s8, elements are really small and there is problem in view. I guess that i misunderstand a basic concept. Can you clear up my mind please?

You're missing something here: when you set android:layout_marginTop="72dp" the 72dp wil lbe interpreted the same way in both layout files.
A solution is to use dimens instead of values directly in your xml file.
Watch here : https://stackoverflow.com/a/32861248/5778152
Hope it helps.

You have to be careful at screen size and pixel density.
The best way to treat all screen sizes is to use ConstraintLayout, or weightSum in LinearLayout (but it slows UI performance). This will help you keep the same position of the elements on all screens.
Pixel density is harder to treat. For text size, for example, I find it useful to use different dimens files.
Right click values folder and click Values resource file, put the name dimens and then choose Density from the left. There you can select what density you like to treat. In each file you make you can make a text size with the same name, like this:
<dimen name="normal_text_size">15sp</dimen>
and each time you set a text size use this tag. This way depending on the phone density the appropriate text size will be automatically selected.
You can read about ConstraintLayout here
Read about screen size here
And about pixel density here

TextView getting cut in some resolutions

I have a RecyclerView which consists of CardViews that have a TextView and an ImageView, among some other layouts.
The problem is, in some screen resolutions the TextView gets cut off or shoved to the next line, which I don't want.
In other resolutions, the TextView has plenty of room.
Small Resolutions:
High Resolutions:
How do I organize the layout so that there is enough room for the TextView, and the ImageView will be sized accordingly?
This is my xml for the RecyclerView items:
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:id="#+id/zmanCard"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
cardview:cardUseCompatPadding="false"
cardview:cardPreventCornerOverlap="false"
cardview:cardCornerRadius="4dp"
cardview:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="top"
android:gravity="center"
android:orientation="vertical"
android:background="?attr/colorPrimaryDark">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/zmanCardTitle"
android:textColor="#ffffff"
android:gravity="center"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="24dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="4dp"
android:alpha="0.8"
android:id="#+id/zmanCardImage" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="4dp">
<TextView
android:text="5:40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:id="#+id/zmanCardTime"
android:textColor="#ffffff"
android:textSize="18sp" />
<ProgressBar
android:id="#+id/zmanProgressBar"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="top|left"
style="#style/Base.Widget.AppCompat.ProgressBar" />
</FrameLayout>
</LinearLayout>
</LinearLayout>

Try this. Works 100%.
AutoResizeTextView or sdp unit can help you.
SDP - a scalable size unit
An android SDK that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size. It can help Android developers with supporting multiple screens.
for text views please refer to ssp which is based on the sp size unit for texts.
https://github.com/intuit/sdp
Auto Scale TextView Text to Fit within Bounds
And if you want support different layout designs for different screen:
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
Fore more information look here

A TextView that automatically resizes text to fit perfectly within its bounds.
Usage:
dependencies {
compile 'me.grantland:autofittextview:0.2.+'
}
Enable any View extending TextView in code:
AutofitHelper.create(textView);
Enable any View extending TextView in XML:
<me.grantland.widget.AutofitLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
/>
</me.grantland.widget.AutofitLayout>
Use the built in Widget in code or XML:
<RootElement
xmlns:autofit="http://schemas.android.com/apk/res-auto"
...
<me.grantland.widget.AutofitTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:maxLines="2"
android:textSize="40sp"
autofit:minTextSize="16sp"
/>
Reference Link : https://github.com/grantland/android-autofittextview

I can suggest two step solution one for your text size so with wrap_content attribute it gets fit to text and I suggest using a qualifier to provide several alternative layouts to target different screen configurations. You do so by using configuration qualifiers, which allows the run-time to automatically select the appropriate resource based on the current device’s configuration (such as a different layout design for different screen sizes). Supporting Different Screen Sizes
from this part till the end i copied my answer from this link from #Herry's answer:
I think you need to check this Google IO Pdf for Design. In that pdf go to Page No:77 in which you will find how there suggesting for using dimens.xml for different devices of android for example see below structure:
res/values/dimens.xml
res/values-small/dimens.xml
res/values-normal/dimens.xml
res/values-large/dimens.xml
res/values-xlarge/dimens.xml
for Example you have used below dimens.xml in values.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text_size">18sp</dimen>
</resources>
In other values folder you need to change values for your text size.
for example:
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="font_size_small">10sp</dimen>
<dimen name="font_size_medium">20sp</dimen>
<dimen name="font_size_large">30sp</dimen>
</resources>

If you want scalable screens, You shouldn't use fixed height or width as much as possible. In your case, you should place your components proportionately with layout_weight.
For more details;
What does android:layout_weight mean?

For more simple way create your layout using relative layout with some proper technic sure it will resolve. if still haveing issue ask me for .xml file

You should use padding so that textview always has some fixed padding and it never gets cut.
In your code make following changes
<TextView
android:text="5:40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:id="#+id/zmanCardTime"
android:textColor="#ffffff"
android:padding:"3dp"
android:textSize="18sp" />

I think you should not fix the spanCount of GridLayout. It would be better if for high resolutions you will display 4 items, for small resolutions you display 3 items, for landscape display 5 items, ...
To do that you should create a constants for all values folder that you will support like
res/values-small/dimens.xml
constants.xml
res/values-large/dimens.xml
constants.xml
for each constants.xml, it will look like
<resources>
<integer name="span_count">3</integer>
</resources>
Then when you create GridLayoutManager
GridLayoutManager lm = new GridLayoutManager(Context context, getContext().getResources().getInteger(R.integer.span_count));
After you do like this, your problem will not happend

try giving weight to the textview layout and imageview layout give weight 1 to both layouts

Use AutoScaleTextView
The AutoScaleTextView takes the android:textSize value and uses it as the preferred text size. You can also set the minimum text size. The default for the minimum text size is 10dp. The AutoScaleTextView now tries to take the maximum value between the preferred and minimum size that fits into the Views width (with regarding the padding).
Please find full AutoScaleTextView class and its implementations in below LINK
http://ankri.de/autoscale-textview/

Here you go again 2nd time with the key word
Resolution
What are the options you have in hand now?
Supporting Multiple Screens
1 Multiple layouts 2.Multiple dimens
Famous Answer on this particular question (Auto Scale Text-view Text to Fit within Bounds)
Usage of Weight_sum attribute
GitHub Libraries like AutoFitTextView , SDP
Just summarized those answers(All-in-one)! any other options left?
As I can see your problem is bound with two hand in hand cases.
Of course your text does not resize 2.Your layout is too much flexible.
See sometimes TextView itself go down.Any other options that you can try to avoid this, instead of your solutions that you have?
PercentRelativeLayout
Any extra advantage of this ? Yes, this supports percentage based dimensions and margins,You have set fixed margins and this will give you them using a percentage.It even have a cool attribute called layout_aspectRatio. Here is a link for a small tutorial.
Give sizes based on ratio / absolute position of a view
Before PercentRelativeLayout I mostly used this.First you need to have a model image/sketch of your view.
My model is with 1920 px in height and 1080 in width (Normally its an HDTV resolution,16:9 aspect ratio)
In that image we know where the views are positioned.
Then for any view/any other screen I can use the same ratio to position them using LayoutParams. Now view stays according to your rules.
Here is an example:
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
height = displaymetrics.heightPixels;
width = displaymetrics.widthPixels;
LinearLayout.LayoutParams topLenP= new LinearLayout.LayoutParams(300 * width / 1080, 400 * width / 1920);
//topLenP.topMargin = x* height / 1920;
//topLenP.leftMargin = y* width / 1080;
myView.setLayoutParams(topLenP);
What actually I did here,as I said in my model view this view took 300 width , 400 in height,with this I am adjusting that same ratio for my currant screen.(using currant screen size).
Moving back to auto scaling since now we have a same ratio based view here is another good answer.
Auto-fit TextView for Android
android:textAppearance
Finally there are fixed sizes given in the android \platforms\android-X\data\res\values\themes.xml based on small, large and medium.
Without specifying what you exactly need you can also use it as
<TextView
android:textAppearance="?android:attr/textAppearance"
....
/>
Hope this helps!

Solution 1
https://developer.android.com/guide/practices/screens_support.html
// The TEXT SIZE in dp
private static final float TEXT_SIZE_DP = 16.0f;
// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;
// Convert the dps to pixels, based on density scale
int textSize = (int) (TEXT_SIZE_DP * scale + 0.5f);
textView.setTextSize(TypedValue.COMPLEX_UNIT_PX,textSize);
Solution 2:
float dpi = getResources().getDisplayMetrics().widthPixels;
dpi = dpi / 320;
textView.setTextSize(TypedValue.COMPLEX_UNIT_PX,TEXT_SIZE_DP*dpi);
How its Work refer below link
http://canvasonandroid.blogspot.in/2016/04/how-to-scale-font-size-for-different.html
Note: It will work only on the device, not on the tablet. we need to write different logic for the tablet. for this you need to set font size in dimen.xml

My experience in android I always use dp instead of sp, so u fix the dp value for all your textviews and will fit anyscreen.
Let me know if any issue.
Best Regds

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.

Android, images and dpi

I am using WVGA800 skin in Android emulator, so the density (hw.lcd.density) is 240. I have to put 4 image buttons (72 pixels per inch) at the bottom of activities view. As the resolution is 480X800, I asummed that the width of image must be 120 pixels. The problem is when application is launched, the 3 buttons take all width and there is no place for 4th button... Then I created button image in Fireworks with resolution 240 pixels per inch and in 120px width, but problem remains. Could somebody explain how to make correct drawables (sizes and dpi) so that they can be displayed pixel in pixel on Android?

If you put your images in res/drawable, Android assumes they're for 160dpi and scales them accordingly for different resolutions.
Your options are either to put the button images into res/drawable-hdpi signaling that they're intended for densities around 240dpi, or into res/drawable-nodpi to make them never scale regardless of the current screen density.
You still reference them as #drawable/whatever in layouts, the engine picks the best match automatically.

Disregard the image DPI entirely. It's irrelevant, all you need to know is the pixel size. What I would actually suggest is to create a NinePatch image to use as your button background. You'll actually need a few to put into a StateListDrawable, as this is how the different focus states are defined (e.g. Pressed, Focused). Once you have your NinePatch, just create a LinearLayout like so:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_nine_patch"
android:text="button 1"
android:layout_weight="1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_nine_patch"
android:text="button 2"
android:layout_weight="1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_nine_patch"
android:text="button 3"
android:layout_weight="1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_nine_patch"
android:text="button 4"
android:layout_weight="1"
/>
</LinearLayout>
Set all the buttons to fill_parent and give them all an equal weight. They'll stretch to fit evenly to the parent, and you don't have to worry at all about specifying a constant pixel or dip size. Also, it'll evenly split onto any Android device, no matter the resolution.

The width is actually 320 pixels, so for 4 buttons across the entire screen set each to 80dip. Android will then adjust your density independent pixels to the proper screen size of 480 pixels.