I'm trying to program an activity in android studio that will be, at least, similar in any device. In order to achieve this, I'm already using:
Constraint Layout;
Text size as sp and other sizes as dp;
Same resolution (1920x1080) in my android preview and my physical device.
But, I'm getting a different screen behavior in each screen, as you can see by the pics.
Major differences are:
Text size seems different even using "sp" unit to define it;
Phone have a line break but preview not;
Preview has a much larger blank space when compared to the phone.
What is happening? How could I prevent this behavior and design similar layouts for different phone screens?
xml file
<?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"
tools:context=".MainActivity" >
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp" >
<LinearLayout
android:background="#color/colorWhite"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="45dp"
android:layout_marginBottom="45dp">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp">
<TextView
android:id="#+id/templatetv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1"
android:textColor="#color/colorPrimary"
android:textStyle="bold"
android:textSize="25sp"
android:layout_marginTop="30dp" />
<TextView
android:id="#+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name: John Sample"
android:textSize="18sp"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Document number: XXX.XXX.XXX-XX"
android:textSize="18sp"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Father name: John Sample"
android:textSize="18sp"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/textview4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mother name: Eva Sample"
android:textSize="18sp"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/textview5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Birthdate: 01/01/1901"
android:textSize="18sp"
android:layout_marginTop="10dp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Android Studio Screen Preview
Phone Screen
Try to remove this part, I think that can be the margin:
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp" >
You need to define different layouts for different screens. Also, if you follow material design guidelines most of the problems will not arise. checkout the google material design documentation.
Related
I have test on two phones.
Moto G5s
Mi note 7 pro
My UI is look perfect on Moto g5s
but on Mi note 7 pro it's look small font size.
I have attached screenshots of both phones.
Moto G5s: http://prntscr.com/nw9rhi
Note 7 pro: http://prntscr.com/nw9r4y
Actual UI: http://prntscr.com/nw9rvv
What I expected It looks same on all device.
This is my layout. I have a viewpager.So created Item layout for Text.When Swipe it.It change text like this.
I want like this. I have issue only on design on different phones.
http://prntscr.com/nw9u1j
//TourLayout.axml
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/tourbg"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:id="#+id/imageView" />
<LinearLayout
android:layout_width="match_parent"
android:weightSum="1"
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="0.24"
android:layout_height="0dp">
<RelativeLayout
android:id="#+id/welcomeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<JammberSplits.Droid.Views.PieView
android:layout_height="#dimen/margin_90"
android:id="#+id/pieView"
android:layout_marginLeft="#dimen/margin_30"
android:layout_marginTop="#dimen/margin_10"
android:layout_width="#dimen/margin_90">
</JammberSplits.Droid.Views.PieView>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="0.56"
android:layout_height="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/LoginCenterLayout">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp">
<RelativeLayout
android:id="#+id/SignUpLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true">
<LinearLayout
android:id="#+id/viewPagerCountDots"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/margin_05"
android:layout_above="#+id/btnNext"
android:layout_centerHorizontal="true"
android:gravity="center"
android:orientation="horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="#dimen/margin_40"
android:text="Next"
android:layout_marginTop="#dimen/margin_10"
android:layout_marginBottom="#dimen/margin_20"
android:layout_alignParentBottom="true"
android:id="#+id/btnNext"
android:textColor="#color/colorWhite"
android:textSize="#dimen/textSize_15"
android:background="#drawable/button_transparen"
app:fontFamily="#font/lato_light"
android:paddingLeft="#dimen/margin_50"
android:paddingRight="#dimen/margin_50"
android:layout_centerHorizontal="true"
android:inputType="none|textCapWords" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
//TourItemLayout.axml
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_centerVertical="true"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SONG"
android:lines="1"
android:maxLines="1"
android:ellipsize="end"
android:id="#+id/lblTourWizFirstLine"
android:layout_marginRight="#dimen/margin_38"
app:fontFamily="#font/lato_bold"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:textSize="#dimen/textSize_73"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SPLITS"
android:lines="1"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginRight="#dimen/margin_38"
android:layout_marginTop="#dimen/margin_20_minus"
android:id="#+id/lblTourWizSecondLine"
android:layout_below="#+id/lblTourWizFirstLine"
app:fontFamily="#font/lato_bold"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:textSize="#dimen/textSize_73"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="MADE"
android:lines="1"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginRight="#dimen/margin_38"
android:layout_marginTop="#dimen/margin_20_minus"
android:id="#+id/lblTourWizThirdLine"
android:layout_below="#+id/lblTourWizSecondLine"
app:fontFamily="#font/lato_bold"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:textSize="#dimen/textSize_73"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EASY"
android:lines="1"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginRight="#dimen/margin_38"
android:layout_marginTop="#dimen/margin_20_minus"
android:id="#+id/lblTourWizFourthLine"
android:layout_below="#+id/lblTourWizThirdLine"
app:fontFamily="#font/lato_bold"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:textSize="#dimen/textSize_73"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Invite your co-writers\nto collaborate on a\nnew project"
android:layout_marginTop="#dimen/margin_70"
android:lines="3"
android:maxLines="3"
android:ellipsize="end"
android:id="#+id/lblDescriptionText"
android:layout_below="#+id/lblTourWizThirdLine"
app:fontFamily="#font/lato_regular"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:layout_marginRight="#dimen/margin_85"
android:textSize="#dimen/textSize_18"/>
<!--<ImageView android:id="#+id/TextTour"
android:src="#drawable/tour1text"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/margin_38"
android:scaleType="fitStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>-->
</RelativeLayout>
</RelativeLayout>
There are a lot of ways to achieve such a behavior. For example, you may define dimens resources for a different phones with smallest width qualifiers.
https://developer.android.com/training/multiscreen/screensizes
Inorder to support multiple devices and multiple screen support , there are different options available.
1) You can create different dimens file,dimens.xml(small,normal,large,xlarge) inside res->values folder.
2) Provide different xml files for different screen sizes. (Not preferable)
3) Use Constraint Layouts.
According to your description, you want to support different screen size, I find one article that you can take a look:
1.Declare the screen size the application supports
2.Layouts for different screen sizes
https://www.c-sharpcorner.com/article/xamarin-android-create-android-app-supporting-multiple-screens/
I have a problem with the preview design on the Android Studio platform.
I will attach two photos:
Designer: here
My phone: here
The problem is that the preview on the Android Studio doesn't show the exact same thing as my phone.You can definitely see that the description field is not being shown on my phone.
The XML code-snippet is below:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<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"
tools:context=".MainActivity">
<ImageView
android:id="#+id/yoyaku_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/yoyakulogo2" />
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/linear_layout_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/yoyaku_image"
android:orientation="horizontal">
<TextView
android:id="#+id/phone_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="Phone number:" />
<TextView
android:id="#+id/actual_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="076767674764764" />
</android.support.v7.widget.LinearLayoutCompat>
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/linear_layout_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linear_layout_1"
android:orientation="horizontal">
<TextView
android:id="#+id/location_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="Location:" />
<TextView
android:id="#+id/location_view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="74 rue des cascades 75020 Paris " />
</android.support.v7.widget.LinearLayoutCompat>
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/linear_layout_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linear_layout_2"
android:orientation="horizontal">
<TextView
android:id="#+id/description_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="Description:" />
<TextView
android:id="#+id/description_view_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text=" record storespecialized in Electronic Music based in Paris" />
</android.support.v7.widget.LinearLayoutCompat>
</RelativeLayout>
The problem can be solved using a ScrollView,but initially i did not want to use it.
What caused this?
The problem is that preview is just an estimate of what a layout will look like. Android phones come in a wide variety of sizes and the reason you needed to wrap your layout in a ScrollView is that your view content's height is larger than the height of the physical device. Now that's not necessarily a bad thing, but maybe you just don't want a ScrollView. To fix this, You could use something like ConstraintLayout and then setting up the correct constraints would allow you to resize the content to fit everything on any device's screen.
Google puts out a lot of great resources, here's a short training doc they have for ConstraintLayout: https://developer.android.com/training/constraint-layout/
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
I have gone through many relative answers on stockoverflow and link's such as Supporting Different Screens or Screen Compatibility Mode
I have created the following relative layout and I am trying to make it look alike in all android screens.
My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.
Does anyone have any suggestion how to improve that?
And preferably without increasing the size of my app.
Thanks in advance!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/Switch_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="someMethod"
android:background="#drawable/switch_off"/>
<ImageView
android:id="#+id/warning_shot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/more"
android:onClick="someMethod" />
<ImageView
android:id="#+id/imageViewBatteryState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/Switch_off"
/>
<ImageView
android:id="#+id/sh"
android:layout_width="147dp"
android:layout_height="54dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
android:background="#drawable/me"/>
<ImageView
android:id="#+id/sit"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewBatteryInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="monospace"
android:layout_alignBottom="#+id/sit"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I will suggest you to use LinearLayout instead of Relativelayout specially for the issue :
My images fit perfect for 4.8 inch phones but when I try to use a 2.8
inch display or something like like that, some buttons go on top of
others, and they do not shrink.
Because When you give orientation to Linearlayout then Its child will never get on top of each other for any resolution or screen size.
And If you give them Weight then Views will be in fix position for Each and Every device.
For example Put below Xml in your project and Check this out in Any resolution, It will give the same Result.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
</LinearLayout>
I have tested this app on mobile devices and the layout looks fine but when tested it on a 7 inch tablet the main activity is missing textViews and images,the rest of the activities are fine though.
Could someone show me how to fix this situation as I'm sure its a fairly simple fix.The layout for the activity is shown below.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="none"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
tools:context=".MainActivity"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<LinearLayout
android:id="#+id/llayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="271dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="0.68"
android:src="#drawable/mark3" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="#string/depth_"
android:textColor="#90f030"
android:textSize="30sp" />
<EditText
android:id="#+id/ductDepth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="#string/enter_duct_depth_mm"
android:inputType="numberDecimal"
android:singleLine="true" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="Duct Depth:"
android:textColor="#90f030"
android:textSize="30sp" />
<EditText
android:id="#+id/offDepth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:ems="10"
android:hint="#string/enter_offset_depth_mm"
android:inputType="numberDecimal"
android:singleLine="true" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Length:"
android:textColor="#90f030"
android:textSize="30sp" />
<EditText
android:id="#+id/offLength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="#string/enter_offset_length_mm"
android:inputType="numberDecimal"
android:singleLine="true" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!--
This title strip will display the currently visible page title, as well as the page
titles for adjacent pages.
-->
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
<ImageButton
android:id="#+id/calc"
android:layout_width="200dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/llayout"
android:background="#drawable/calcbttrans" />
</RelativeLayout>
</ScrollView>
what exactly is the problem? the stretched image at the bottom?
if so, it's probably because you've set it to an exact size without allowing it the freedom to keep its aspect ratio. a possible solution is using 9-patch image or an xml drawable, or just keep the aspect ratio of the current image.
btw, the action bar doesn't look well. have you considered using the support library or actionBarSherlock? google already has guidelines about native look and feel (for example here: http://developer.android.com/design/patterns/pure-android.html )
EDIT: it seems the problem is on the layouts .
looks like the viewPager is on top of all the layouts, while the imageButton is beneath the linearLayout, when you scroll all the way to the bottom (not a native android UX, btw).
just check the UI designer and the outline . it clearly shows the problem (i had to replace all images since i don't have them, but this isn't the important thing) :