Since I have a Nexus 5, I'm seeing strange stuff regarding text sizes.
An example: I am creating listview items. I put a bigger text at 22sp, a smaller one at 17sp.
On my HTC One X it looks like this:
So I think "ok, that's nice!"
Then I run it on my Nexus 5:
I do not understand why this is happening? Shouldn't the 'sp' part make sure it will look ok
with the default values? I am not talking about the user increasing the font sizes in the settings, I've left everything to defaults.
Eventhough, if I would (don't hit me) use DP here to disable the font size changes for text, it will give the same result (not tested, but I am fairly certain this is the case from other tests).
What is the problem here? Is it the newer Android version, or is it the 1080p screen vs the 720p ?
Should I use different values for different DP using 'values' folder?
here is de layout:
<?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="80dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/background"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="2">
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:adjustViewBounds="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_toLeftOf="#id/arrow"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif-condensed"
android:textSize="22sp"
android:textStyle="bold" />
<TextView
android:id="#+id/address"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="17sp" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
For instance, the default size for same SP value may vary depending on device, just to match its readability designed for the device.
The problem you got is because you have some elements sized to fixed size, post your XML code you use for the row and we can make a deep analyse.
Edit -- After xml
Well, instead of point you the wrongs, I did prefer to rebuild your layout, take a look:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image"
android:layout_toLeftOf="#+id/arrow"
android:fontFamily="sans-serif-condensed"
android:textSize="22sp"
android:textStyle="bold" />
<TextView
android:id="#+id/address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image"
android:layout_toLeftOf="#id/arrow"
android:layout_below="#id/name"
android:textSize="17sp" />
<ImageView
android:id="#id/arrow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true" />
</RelativeLayout>
Your layout was too complex to a simple row... now the layout will be as tall as the TextViews needs it to be, and it is not a problem, as the user is already used with his text size.
you have to Create two different layout folder and see the result
Related
The problem is when I run the program the view cuts like what shown in the picture above
I don't know what the exact sort of problem, so if you need anything to show just ask
I am using kotlin by the way
EDIT 1:
result_row.xml this is the XML for the row that shows in the ListView
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/itemName"
android:layout_width="200dp"
android:layout_height="40dp"
android:gravity="center"
android:text="Name"
android:textColor="#000000"
android:textSize="16sp" />
<View
android:id="#+id/lineView2"
android:layout_width="2dp"
android:layout_height="40dp"
android:background="#010101" />
<TextView
android:id="#+id/itemWeight"
android:layout_width="100dp"
android:layout_height="40dp"
android:gravity="center"
android:text="Item Weight"
android:textColor="#000000"
android:textSize="16sp" />
<View
android:id="#+id/lineView1"
android:layout_width="2dp"
android:layout_height="40dp"
android:background="#010101" />
<TextView
android:id="#+id/itemPrice"
android:layout_width="100dp"
android:layout_height="40dp"
android:gravity="center"
android:text="Price"
android:textColor="#000000"
android:textSize="16sp" />
</LinearLayout>
</FrameLayout>
Your TextViews have fixed widths that total greater than the width of the screen:
android:layout_width="200dp"
...
android:layout_width="100dp"
...
android:layout_width="100dp"
Android phones can be as narrow as 320dp, so it'll get cut off. You need to modify your layout to use the available space, not hardcode fixed widths. Or, if you really want to use fixed widths, they need to be smaller (shouldn't add up to more than 320dp).
in your layout xml file edit
layout_width="0dp"
layoyt_height="0dp"
Hello I would like to ask
Now I have lots of textviews adjusted and styled correctly the problem is when screen size changes the textviews either become too big or too small
I have tried making different layout files but It does not work though
I used SP and still text overlaps the screen when switching from a device to another
I have made over than 10 layout files for different screens and still I cannot control over it
The question is :
Is there a way to change text size logically instead of having to create alternative layouts or dimens files ??
Here is an example of my code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="org.ultradroid.metaldetectorfree.welcome1"
android:orientation="vertical"
android:weightSum="1"
tools:ignore="UseCompoundDrawables">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="UselessParent">
<ImageView
android:id="#+id/imageView8"
android:layout_width="match_parent"
android:layout_height="260dp"
app:srcCompat="#drawable/metal"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/welcome"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
android:textColor="#color/aqua"
android:textSize="60sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/WelcomeTextDescription"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/aqua"
android:textSize="40sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatButton
android:id="#+id/next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/next"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
app:backgroundTint="#color/aqua" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Hello guys I found the answer
This awesome library will help everyone do it https://github.com/intuit/sdp
No need for many dimens or many layouts you just need this
You can use autosizing for TextView
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
app:autoSizeTextType="uniform" />
This will automatically adjust the text size according to your screen width
for more details read android official documentation
What you are doing wrong is you are defining a static text size for all the text views use dimens.xml for different screen sizes and assign the values of the dimen to the textViews like in the below image
I would suggest you to have a look at Dimenfy plugin and also at this link.
I am new to android programming but I know how everything works, recently I was trying to create an app just like uber after I finished creating the launch activity i tested it on my actual device just to check whether everything looks fine but when I launched it on my device everything (layouts, imageViews, Textviews..etc) were misplaced, I have never had this problem before its just this time. could anyone please tell me where am I going wrong?
I am attaching screenshots below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context="com.example.keyur.uber.MainActivity">
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/layout1"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/showtext"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:background="#ffffff"
android:fontFamily="monospace"
android:text="#string/get_moving_with_uber"
android:textColor="#000000"
android:textSize="20sp"
android:typeface="monospace" />
<ImageView
android:layout_width="40dp"
android:id="#+id/imgv"
android:layout_height="30dp"
android:layout_below="#id/showtext"
android:layout_marginLeft="30dp"
android:background="#drawable/india"
/>
<TextView
android:layout_width="40dp"
android:id="#+id/countrycode"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginStart="13dp"
android:layout_toEndOf="#+id/imgv"
android:text="#string/_91"
android:textColor="#000000"
android:textSize="22sp"
android:fontFamily="monospace"
/>
<EditText
android:id="#+id/editText"
android:layout_width="250dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="#ffffff"
android:fontFamily="monospace"
android:hint="#string/enter_your_mobile_number"
android:textColor="#000000"
android:textColorHint="#484848"
android:textSize="17sp"
android:inputType="number"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgone"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/layoutbg" />
</RelativeLayout>
</LinearLayout>
screenshots-
this is what the app looks on pixel 4 as it is set on default.
enter image description here
this is what it looks when I switch it to pixel xl, everything gets messed up
enter image description here
Due do you are fixing the layout hight an width so each and very device have different screen size. You should use match_parent and wrap_content. If you want to split all device space in the same manner, you have to use weight.
How to use weight reference
Either you can go for "Weight Sum", or you should set your
TextView for country-code "layout_toRightOf" to image view
instead of "layout_toEndOf".
Here i am trying to handle different screens ,These are several screens i am trying to handle ,Here if i adjust for one screen remaining screens getting error ,not getting what is problem
here is
Here is my code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/transactionpagebg" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="160dp"
android:gravity="center"
android:paddingLeft="50dp"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:inputType="number" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="150dp"
android:layout_height="50dp" />
</LinearLayout>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/saveButton"
android:layout_width="113px"
android:layout_height="wrap_content"
android:layout_x="61dp"
android:layout_y="330dp"
android:background="#drawable/savebutton" />
<Button
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="208dp"
android:layout_y="330dp"
android:background="#drawable/settingbutton" />
</AbsoluteLayout>
</RelativeLayout>
to do as it need to be, you need to have support for different screen sizes you need to have different layouts, and also some changes in your manifest file...
check this question How to support different screen size in android
and this link http://developer.android.com/guide/practices/screens_support.html
There are many ways to make each view look right on various screens. However, I have found two methods are working best for me (at the moment):
To get the views to dynamically set their screen positions, wrap the widgets in a LinearLayout (LL), and put those LLs in a single LL. Set the weight of the inner LL to 1, and they will space themselves equally within the parent LL. This works for horizontal and vertical layouts. The distance between the widgets gets adjusted automatically by the OS.
create different dimens.xml folders/files for the different screen sizes (small, medium, large) and further differentiate them by density of needed (mdpi, hdpi, xhdpi, etc.). This way you can set margins, paddings, font sizes, for each size/density to get what you want.
EDIT: I see you put "TRANSACTION" in the background drawable? You can't do that! You need to create an image with just the text, and put it in an ImageView at the top of the layout. That way, you can set its position and size as needed for different screens, and make the other widgets adjust their positions relative to that image.
Even better would be to find a free font (ttf file) you can use that matches what you want, and put it in a TextView.
Here is a quick example of your layout with the ideas I mentioned. You would put the margins and font sizes in a dimens.xml file, so that you can adjust them.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ee"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/hh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="36dp"
android:text="TRANSACTION"
android:textColor="#ffffff"
android:textSize="28sp" />
<TextView
android:id="#+id/test_textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/test_linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/test_editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:background="#ffffff"
android:inputType="number" />
<Spinner
android:id="#+id/test_spinner1"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#999999" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/test_saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:text="Save" />
<Button
android:id="#+id/test_settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
There has been a flaw on my design for most of .xml files where the sizes usually goes larger on some screens and some on lower screens. I use px(Pixels).
I know that this might be a bad choice on my end because new phones will end up with more pixel ratio. eg Samsung Galaxy Nexus making all text into tiny text.
What would be a far more suitable type to use for future phones to come?
Extra:
I have been using linear layout for a long time but now that I need a scrolling for long menu I designed a RelativeLayout that nested a ScrollView which ScrollView nests a linear layout. Would it be a better Option to nest a tableLayout to have more control over the view?
Didn't want to flood the question screen cause it would look ugly.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tab_tv_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/auto_Action"
android:background="#666666"
android:text="#string/options_dialog_menu_Action"
android:textSize="27px"
/>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:id="#+id/FirstOption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/manual_Action"
android:layout_below="#+id/tab_tv_one"
android:text="#string/options_dialog_menu_Auto_Action"
android:textSize="27px" />
<RadioButton
android:id="#+id/SecondOption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/tab_tv_two"
android:layout_below="#+id/auto_Action"
android:text="#string/options_dialog_menu_Manual_Action"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
<RadioButton
android:id="#+id/ThirdOption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/tab_tv_two"
android:layout_below="#+id/manual_Action"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
</RadioGroup>
<TextView
android:id="#+id/tab_tv_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/text_size"
android:layout_below="#+id/manual_Action"
android:background="#666666"
android:text="#string/options_dialog_menu_Layout_Options"
android:textSize="27px"
/>
<TextView
android:id="#+id/text_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/background_clr"
android:layout_below="#+id/tab_tv_two"
android:text="#string/options_dialog_menu_Text_Size"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
<TextView
android:id="#+id/Options_clr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/brightness_ctrl"
android:layout_below="#+id/text_size"
android:text="#string/options_dialog_menu_Color_Options"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
<TextView
android:id="#+id/brightness_ctrl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/background_clr"
android:text="#string/options_dialog_menu_Brightness_color"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
<TextView
android:id="#+id/backToBasics"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/brightness_ctrl"
android:text="#string/options_dialog_menu_Back_To_Basics"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
Don't use pixels, use dp (aka dip aka density independent pixels). Otherwise, as you noted, size will be dependent on density, which isn't good.
Its not just the galaxy nexus, ldpi phones will look different than mdpi, which will look different than hdpi etc. There is rarely any good reason to use px sizes, particularly with regards to view dimensions.
With regards to your extra question it depends entirely on what you want your layout to look like. Without seeing code and/or at least knowing what you want to occur (vs what you see now), no one is going to really be able to answer that.