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.
Related
I have a RelativeLayout with an ImageView that has the following properties,
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="100dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="100dp"
android:layout_marginBottom="300dp"
So, aparently 100dp doesn't look the same on different devices.
How can I make the ImageView to look the same on tablet as it looks on phone? using just 1 layout
phone
tablet
You could use a ConstraintLayout's layout_constraintGuide_percent attribute so that the size is always relative to the screen width and height.
See the example in the docs of the (deprecated) PercentRelativeLayout on how to use a ConstraintLayout to reach your goal.
The problem is that you've defined your ImageView to be the size of the screen, minus some margins. So on small screens it will be really small, and on large screens it will be really large.
You'd be better off simply defining how large you want it to be directly. Your "phone" screenshot looks like you're probably working with a 320dp wide screen, so you could just write this instead:
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"/>
Now your image view will always be ~2.5cm wide/tall on every screen, centered horizontally, and ~2cm from the top edge of the screen.
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
i am developing webview android app for phone and tablet, and i am using tablelayout, this is my front page
i want to set width and height that will fit to screen when comes to tablet or big screen, how can i ? this is my xml
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/button"
android:layout_weight=".50"
android:layout_height="150dp"
android:background="#drawable/hindi"
/>
<Button
android:id="#+id/button1"
android:layout_weight=".50"
android:layout_height="150dp"
android:background="#drawable/punjabi"
/>
</TableRow>
Do you mean you want different layouts that will fill the screen for tablets and other big screens?
Example:
tablets = 1 row has 3 buttons
big screens = 1 row has 5 buttons
I think the best way to do this is to create different XML layouts for each screen size. You can have 1 layout for phones (ex. 2 buttons per row) and 1 layout for tablets (ex. 3-4 buttons per row). You can then adjust the layout separately. I suggest you read the How to Support Multiple Screens section of the Android developer docs for more info, since I can't see you're entire XML.
Also, if you're table and TableRow fills-up the entire width of the screen, I suggest using match_parent instead of wrap_content.
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.
I have a layout that features six buttons. All of them have the size of 72x72dip, so they appear to be larger on small screens and vice versa.
How can I tackle this problem? I want the buttons to be relatively the same size (eg 10% of the screen's width), but I don't know how to do it.
This is how my layout looks:
The layout's sourcecode can be found here.
1 - Did you fix all you 'image views' to layout_width & height of 72dip ?
2 - Normally 72dip is the same thing on every screen size... But you still can have 3(or 4 if you support XHDPI) resolution of your images...
2 - Add 4 différent fonder for you Drawable :
2.1 drawable
2.2 drawable-ldpi
2.3 drawable-mdpi
2.4 drawable-hdpi
Consider the following ratio for your images :
ldpi is 3
mdpi is 4
hdpi is 6
So make sure to make HDPI images first, so you can isealy resize other images applying ration 1.5 and 2 (just divide by 2 for LDPI for example).
3.By the way, why did you just did it all by yourself ? Seems you are on android 4.0, why don't you just use the new "DashBoard" class from Android ?
I usually do this by setting the width and height to wrap_content and then tweaking the layout_weight on the ImageButton widgets so that each button takes up the same amount of space. I usually do scaleType="center_inside" to make them line up nicely. Then pad around the edges of the TableView with margins as necessary.
Few quick observations:
a. You do not need TableLayout, just use LinearLayout
b. You do not need separate ImageView and TextView, you can use Button and image to it using
android:drawableTop="#drawable/"
c. Never use absolute values in width/height of any views, so use wrap_content.
Sample Layout should be like this:
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical">
<!-- Row 1 -->
<LinearLayout
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1.0"
android:orientation="horizontal">
<Button
android:layout_height="wrap_content"
android:layout_width="0"
android:layout_weight="1.0"
android:text="Preferences"
android:drawableTop="#drawable/Preferences" />
<Button
android:layout_height="wrap_content"
android:layout_width="0"
android:layout_weight="1.0"
android:text="Preferences"
android:drawableTop="#drawable/Preferences" />
</LinearLayout>
.
.
.
</LinearLayout>
</LinearLayout>