The Layout is looking as expected on the phone and looking different on the emulator. I am using SDK API 10 (Android 2.3). The test phone is a Motorola Milestone with Android 2.3.3 (Cyanogen Mod 7).
The SDK layout preview renders the preview like the Emulator.
The following image shows the expected rendering on the right side (rendered by phone) and the unexpected rendering on the left side (SDK API 10, emulator and preview).
What is the reason for the difference and how do I fix it? Removing margin and padding (by setting it to 0dp at TextView1) did not help.
main layout (parent)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/test_bg_red"
android:padding="20dp"
>
<include
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
layout="#layout/test_child" />
/>
<include
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
layout="#layout/test_child" />
</RelativeLayout>
child layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="26dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="4dp"
android:gravity="top"
android:includeFontPadding="false"
android:text="42"
android:textSize="32dp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_toRightOf="#+id/textView1"
android:includeFontPadding="false"
android:text="TextView2"
android:textSize="12dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_alignParentTop="true"
android:includeFontPadding="false"
android:text="TextView3"
android:textSize="10dp" />
</RelativeLayout>
I believe this is caused by different screens having different aspect ratios. Since phones have 4x4 cells regardless of physical screen size, each cell must be wider or narrow to fit 4 in a row. Using DP takes care of density, but screens which are more or less square will still require cells to be more or less square. That means the number of DP per cell will vary and cause your views to not look the same on different devices.
The only solution I have found is to make your layouts as flexible as possible.
Related
I'm relatively new in the area of App Development and still cant get behind the proper way to set up an xml file (in this case for a normal layout) to fit every mobile device that uses this layout type.
For example: I have a Pixel 2 Emulator and a Nexus 5 Emulator (both use the normal layout). However the result on the screen looks different on the devices:
Pixel 2 (1080x1920 - 420dpi): https://i.stack.imgur.com/5zmZ3.png
Nexus 5 (1080x1920 - xxhdpi): https://i.stack.imgur.com/sSLtb.png
After some research in the Google developers section about Device compability I found out that it could be due to the different pixel densities, but I have no clue how to fix this.
The xml code of this layout:
<?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="#drawable/mybackground"
tools:context=".Start">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#00FFFFFF"
android:padding="5dp"
android:scrollbars="none"
android:layout_below="#id/name_add"
android:layout_marginTop="15dp"
android:layout_marginBottom="160dp"
android:layout_marginStart="200dp"
/>
<EditText
android:id="#+id/name_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:layout_marginTop="200dp"
android:width="180dp"
android:ems="10"
android:hint="Name"
android:importantForAutofill="no"
android:inputType="text"
android:singleLine="true"
android:textColor="#424242"
android:textColorHint="#424242"
app:backgroundTint="#585858" />
<ImageButton
android:id="#+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/name_add"
android:layout_marginBottom="11dp"
android:layout_toEndOf="#id/name_add"
android:layout_marginStart="9dp"
android:src="#drawable/ic_plus"
android:background="#android:color/transparent"
android:contentDescription="add"/>
<Button
android:id="#+id/goToSelection"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="520dp"
android:background="#drawable/play_btn"
android:fontFamily="sans-serif"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:text="#string/btn_play"
android:textAllCaps="false"
android:textSize="20sp"
/>
<Button
android:id="#+id/languagegbr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="15dp"
android:background="#drawable/gbr"
/>
<Button
android:id="#+id/languagedr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="55dp"
android:background="#drawable/germanyr"
android:visibility="gone"/>
</RelativeLayout>
All of the images will later be replaced by vector graphics.
My question now is, how I can make my layout on the Nexus 5 (and on any other mobile device with a resolution of 1080x1920 or that uses the normal layout in general) look the same as it looks on the Pixel 2?
I've struggled with this kind of issues for a long time.
This stuff happens when you mess too much with dp's in margins and paddings usually. Given that dp's stay almost equal between different phone sizes, you will get variations of your display, such as the one you're showing us.
The way I solved it is by using Constraint Layout. It's very simple to use, and it has a lot of advantages. If there's no particular reason why you're not using Constraint Layout I highly suggest you to start now.
In a Constraint Layout all you need to do for your error to be solved is set the horizontal constraints to the parent and that's it.
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".login.YourActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Just by saying you'll be attached to your parent's left and right, sets the view right in the middle of your screen. Of any screen actually.
I am very novice in android platform.I am trying to design an application.For the design purpose i have taken RelativeLayout .But the unique thing that i am noticing is while seeing it in graphical Layout in eclipse ,Buttons and EditText are at different position while it is at right position when seeing in emulator.
Here is my code..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/pnr_bg"
android:orientation="vertical"
android:padding="0dp" >
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:layout_marginTop="220dp"
android:maxHeight="30dp"
android:src="#drawable/pnr_normal" />
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="266dp"
android:layout_marginTop="220dp"
android:maxHeight="30dp"
android:src="#drawable/tenq_normal" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10" >
<requestFocus />
</EditText>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:src="#drawable/submit" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_column="0"
android:layout_columnSpan="6"
android:layout_gravity="right|bottom"
android:layout_row="6"
android:layout_height="match_parent"
android:textColor="#0f0f0f" />
Why is this happening.Will it do any impact on the different size of the mobile screens.
Please help me..
Yes that's correct thing. Whatever layout/UI you see, it won't be the same in emulator or real device. Reason being is android comes with multiple and variety of resolutions. The layout which you see while designing is just to preview the design or we can say just a sample preview of UI with controls/widgets you have taken.
You can consider it as an advantage of designing UI/layout in android for different resolutions/multiple screens.
When I say advantage, it means you can design just a single layout and can preview it for multiple screens, and so you would be having better idea.
Update:
Just check the image and do the same thing as depicted in image, to preview all screens. Once again I am repeating, the preview which you are seeing is just a preview, it would looks somewhat different in real devices.
I'm playing around with making a random recipe collection app.
Now I came across a problem: at the moment I have designed it with my mobile's resolution in mind. But what if the app is used on a device with larger resolution eg. a tablet.
What I want to achieve is that I want the buttons to grow shrink depending on the resolution. For example: when holding my phone vertically, there are 2 columns of buttons. When holding it horizontally, there still are 2 columns, but the view gets wider. Then there should be 4 columns to fill as much of the white space as possible.
Two pictures to illustrate my thoughts:
vertical
horizontal with 2 more columns
My code:
<?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:background="#ffcc33"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1000" >
<EditText
android:id="#+id/search_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1000"
android:ems="5"
android:hint="#string/search_hint" />
<Button
android:id="#+id/search_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/search_button" />
</LinearLayout>
<ScrollView android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<RelativeLayout
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_below="#+id/search_box"
android:layout_gravity="center"
android:layout_marginTop="15dp" >
<Button
android:id="#+id/btn_lihatoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:drawableTop="#drawable/lihatoidud"
android:layout_alignParentTop="true"
android:text="Lihatoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_kypsetised"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_lihatoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/kypsetised"
android:text="Küpsetised"
android:textSize="18sp" />
<Button
android:id="#+id/btn_seenetoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_kypsetised"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/seenetoidud"
android:text="Seenetoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_juustutoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_seenetoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/juustutoidud"
android:text="Juustutoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_lisandid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_juustutoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/lisandid"
android:text="Lisandid"
android:textSize="18sp" />
<Button
android:id="#+id/btn_supid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:drawableTop="#drawable/supid"
android:text="Supid"
android:textSize="18sp" />
<Button
android:id="#+id/btn_voileivad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_supid"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/voileivad"
android:text="Võileivad"
android:textSize="18sp" />
<Button
android:id="#+id/btn_pudrud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_voileivad"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/pudrud"
android:text="Pudrud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_joogid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_pudrud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/joogid"
android:text="Joogid"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Android has a few mechanisms for dealing with this kind of thing. For most people simply having a different layout for different classes of device will be sufficient. i.e:
res/
layout/
my_layout.xml
layout-land/ # landscape
my_layout.xml
layout-sw600dp # bigger devices
my_layout.xml
layout-sw600dp-land # Big and landscape
Android will automatically pick the right layout on the device your app gets loaded on. See the Developer Guide for details there. Alternatively, you might need to define your own custom view that resizes your grid based on the available size. An example of this is a CellLayout, a class written for the grid of apps in Launcher
I would actually reccomend you use the GridView pattern.
https://developer.android.com/guide/topics/ui/layout/gridview.html
Benfits include
Easily customize able if you need multiple rows/columns
Faster performance because you re-use a lot the same views. Scales much better than scrollview approach
Here example with two column for Phones
Here example with four column for tablets
All changing only the number of columns the grid should show. The best way to do this by what "JRaymond" recommended, by having multiple values resposnes depending on if its a tablet/phone. Example
->values ->attrs_arin_view.xml
->values-land->attrs_arin_view.xml
->values-sw600dp -> attrs_arin_view.xml
inside values ->attrs_arin_view.xml
<resources>
<integer name="number_of_column">2</integer>
</resources>
and then change in the values-land to have number_of_column to 4.
Then in your in your xml you mention the integer once
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<GridView
android:id="#+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:horizontalSpacing="8dp"
android:numColumns="#integer/number_of_column"
android:padding="8dp"
tools:listitem="#layout/grid_cell_note"
>
</GridView>
</LinearLayout>
You need to create xml files for different screen sizes
http://developer.android.com/guide/practices/screens_support.html
design your XML files to use references instead of hardcoded strings. You can then assign a reference to layouts, buttons and so on which has a different value depending on screen sizes.
(use android:padding="#dimen/pagepadding" instead of android:padding="16dp" and define the dp in values/dimens.xml like this: <dimen name="pagepadding">16dp</dimen>)
To do that you have to create new folders in your Project like values-sw600dp for devices with 600dp smallest width (like Nexus 7 I believe) or values-sw720dp-land for devices with the smallest width of 720dp (10 inch tablets I believe) in landscape.
Do some reading on the developer page and on the internet for that. It's not too difficult
I'm having a lot of trouble finding references for lockscreen widgets that were introduced in Android 4.2.
I've created a widget that works fine on the launcher and it is sized as I expect. However I've enabled this widget to be on the lockscreen and it doesn't size properly, vertically.
According to http://developer.android.com/guide/topics/appwidgets/index.html#lockscreen it will take up the size available vertically if you set android:resizeMode="vertical"
If the widget marks itself as vertically resizable, then the widget
height shows up as "small" on portrait phones displaying an unlock UI.
In all other cases, the widget sizes to fill the available height.
Also I used the sizing described at http://developer.android.com/guide/practices/ui_guidelines/widget_design.html
Tiles > Size
1 > 40dp
2 > 110dp
3 > 180dp
4 > 250dp
… > …
n > 70 × n − 30
I've set this and at appears to be even smaller than a "small" widget. Basically, does anyone know what is wrong with the widget in image 1 that it won't expand? My code is below.
1) What it looks like in its default state.
2) What it looks like when expanded on another screen.
xml/clock_widget.xml
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialKeyguardLayout="#layout/clock_widget"
android:initialLayout="#layout/clock_widget"
android:minHeight="110dp"
android:minWidth="180dp"
android:resizeMode="vertical"
android:updatePeriodMillis="1000"
android:widgetCategory="keyguard|home_screen" >
</appwidget-provider>
layout/clock_widget.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/clock_widget"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/widget_hour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=":"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
<TextView
android:id="#+id/widget_minute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
</LinearLayout>
<TextView
android:id="#+id/widget_date"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
Looks like this only happens in the emulator. Testing on real hardware works fine.
I want to make a match game layout in android.
I'm having problem with making my layout compitable to all screen resolutions.
What I want, is an image icon of the home team on the left, a strechable home team image name, home team score text, seperator, away team score text, a strechable away team image name, an image icon of the away team on the right.
The score should be in the middle. I just can't get it right. before this try, I've tried to divide the main layout to 3 layouts: home team layout, score layout and away layout - with no success of getting the expected result.
Can someone please help ?
Here is my piece of code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/GamesBGColor" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/homeTeamIcon"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/holonlogo" />
<ImageView
android:id="#+id/homeTeamText"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/holontext"
android:layout_width="115dip"
android:layout_marginLeft="3dip" />
<TextView
android:id="#+id/homeTeamScore"
android:layout_width="25dip"
android:layout_height="wrap_content"
android:text="123"
android:textColor = "#color/purple"
android:layout_gravity="center"
android:textStyle="bold"
android:layout_marginLeft="5dip" />
<TextView
android:id="#+id/seperator"
android:layout_width="10dip"
android:layout_height="wrap_content"
android:text="-"
android:layout_gravity="center"
android:layout_marginLeft="7dip" />
<TextView
android:id="#+id/awayTeamScore"
android:layout_width="25dip"
android:layout_height="wrap_content"
android:text="122"
android:textColor = "#color/red"
android:layout_gravity="center"
android:textStyle="bold"
android:layout_marginLeft="7dip" />
<ImageView
android:id="#+id/awayTeamText"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/jerusalemtext"
android:layout_width="115dip"
android:layout_marginLeft="3dip"/>
<ImageView
android:id="#+id/awayTeamIcon"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/jerusalemlogo" />
</LinearLayout>
</LinearLayout>
If you want your layouts to work on different resolution screens your should be sizing them using dip as the unit. For example:
android:layout_marginRight="10dip"
dip stands for Device Independent Pixel and using these in your layout means that Android will automatically scale your layout depending on which display the device running your application has.
You can read about these in the Supporting Multiple Screens page in the Android Developer Documentation. This document also has some other options for handling different displays but I think using dip is probably the easiest.