First time posting here. Sorry if this has already been asked. I searched for days, and while some posts seemed relevant, they did not seem to address my exact issue.
I have a RelativeLayout inside a ScrollView. Inside the RelativeLayout, I have some TextViews. I have set the TextView gravities to center_vertical. Everything works fine when the page's contents fit on a single page without the need to activate the ScrollView. However, whenever the content exceeds the page and the ScrollView gets activated, the center_vertical gravity gets ignored. The funny thing is, the left/right (start/end) gravities are not being ignored, only the center_vertical ones.
Here's the main part of my code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/ScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:fillViewport="true" >
<RelativeLayout
android:id="#+id/RelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<TextView
android:id="#+id/cup1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/cup1"
android:textColor="#21386f"
android:textSize="24sp"
android:textStyle="bold" />
<Space
android:id="#+id/Space1"
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_below="#id/cup1" />
<ImageView
android:id="#+id/canadienslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#id/Space1"
android:contentDescription="#string/logo"
android:src="#drawable/canadienslogo" />
<TextView
android:id="#+id/score1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/canadienslogo"
android:layout_alignTop="#id/canadienslogo"
android:layout_below="#id/Space1"
android:layout_centerInParent="true"
android:gravity="center_vertical|center_horizontal"
android:paddingLeft="16sp"
android:paddingRight="16sp"
android:text="#string/score1"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:id="#+id/team_canadiens"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/canadienslogo"
android:layout_alignTop="#id/canadienslogo"
android:layout_toEndOf="#id/canadienslogo"
android:layout_toLeftOf="#id/score1"
android:layout_toRightOf="#id/canadienslogo"
android:layout_toStartOf="#id/score1"
android:gravity="center_vertical|start"
android:paddingLeft="2sp"
android:paddingRight="2sp"
android:text="#string/team_canadiens"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rosebudslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#id/Space1"
android:contentDescription="#string/logo"
android:src="#drawable/rosebudslogo" />
<TextView
android:id="#+id/team_rosebuds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/rosebudslogo"
android:layout_alignTop="#id/rosebudslogo"
android:layout_toEndOf="#id/score1"
android:layout_toLeftOf="#id/rosebudslogo"
android:layout_toRightOf="#id/score1"
android:layout_toStartOf="#id/rosebudslogo"
android:gravity="center_vertical|end"
android:paddingLeft="2sp"
android:paddingRight="2sp"
android:text="#string/team_rosebuds"
android:textSize="14sp"
android:textStyle="bold" />
Below this, there is another Space followed by a TableLayout. If the table is too big to fit on a single page, the center_vertical gravity above gets ignored. The gravity does not appear to be affected within the table.
Here are two screenshots of the issue. The first has the issue, the second does not (because all the contents fit on a single page)...
Issue
No Issue
Notice how the text "Montreal Canadiens" "3 - 2" and "Portland Rosebuds" gets moved up. The center_vertical gravity is not being applied.
For the record, I only took screenshots in landscape mode because it would force ScrollView to kick in and show the issue. If I were to have bigger tables, the same issue occurs in portrait mode as well, so it's not an orientation issue. I've modified my code countless times but nothing seems to fix it. I'm sure it's something simple, I just can't figure it out. It might have something to do with the overall density of the height, since that's really the only thing that changes when ScrollView kicks in. I enabled the "Show layout bounds" under Developer Options and the actual containers are fine, it's just the contents that get pushed up. The weird thing is, both Eclipse and Android Studio do not show the issue in Design Mode. FWIW, I've tested it on my Galaxy Nexus and a Galaxy Tab 3 Lite, same thing occurs on both.
Hopefully one of you can make me look foolish and resolve it promptly.
Thanks in advance for all the help.
Regards,
EDIT: New working code...
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/ScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:fillViewport="true" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<TextView
android:id="#+id/cup1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/cup1"
android:textColor="#21386f"
android:textSize="24sp"
android:textStyle="bold" />
<Space
android:id="#+id/Space1"
android:layout_width="match_parent"
android:layout_height="24dp" />
<LinearLayout
android:id="#+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/canadienslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/logo"
android:src="#drawable/canadienslogo" />
<TextView
android:id="#+id/team_canadiens"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:paddingLeft="2sp"
android:paddingRight="2sp"
android:text="#string/team_canadiens"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/score1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:text="#string/score1"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:id="#+id/team_rosebuds"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|end"
android:paddingLeft="2sp"
android:paddingRight="2sp"
android:text="#string/team_rosebuds"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rosebudslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/logo"
android:src="#drawable/rosebudslogo" />
</LinearLayout>
cannot say that it will solve your problem but you have a few quirks:
android:id="#+id/score1"
android:layout_alignBottom="#id/canadienslogo"
android:layout_alignTop="#id/canadienslogo"
You cannot align both bottom and top. if you want to match the height of 2 Views - then give them an height
another layout with the same issue:
android:id="#+id/team_canadiens"
android:layout_alignBottom="#id/canadienslogo"
android:layout_alignTop="#id/canadienslogo"
android:layout_toEndOf="#id/canadienslogo"
Related
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".
As part of the on-boarding for my app, I have a series of translucent overlays that highlight the UI. Each one is a LinearLayout, initially invisible (actually "gone"), that I make visible in turn. I am having a very tough time getting one of these to display correctly on both tablets and phones, in both portrait and landscape. I can tune it to work on the phone, but then it doesn't display well on tablet-portrait.
The images here are set up to work well on 10" tablets in portrait, and they work for 7" tablets and phones in portrait, but not in landscape. In the images below, I would like the arrows (two ImageViews) to resize as needed to make room for the text. However, the Layout seems to give priority to the ImageViews no matter what I do.
(Note that I do realize I could make this work, in a way, with a RelativeLayout, however, I cannot get the translucent backgrounds to work, filling the screen, using a RelativeLayout, as far as I know.)
My question in brief: Is there a way to make LinearLayout prioritize the TextViews, giving them enough space, and resizing the ImageViews to fit the rest?
Here is a good layout (10" tablet, portrait, shown at reduced scale):
Here is a bad one with some of the text cut off (10" tablet, landscape, reduced scale):
Here is another bad one (phone):
I don't have a screenshot of the other tuning, but it displayed big arrows and no central "Tap to Continue" button.
Here is my current XML:
<RelativeLayout
android:id="#+id/main_holder"
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">
<LinearLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<LinearLayout
android:id="#+id/intro3_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="top|center_horizontal"
android:orientation="vertical"
android:gravity="top|center_horizontal">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:layout_gravity="center_horizontal|top"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:layout_weight="0"
android:background="#85000000"
android:gravity="center">
<TextView
android:id="#+id/button_intro3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/intro3_bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="bottom|center_horizontal"
android:gravity="bottom|center_horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_weight="1"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:layout_gravity="center_horizontal|bottom"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
There're several possible way of doing it. I've updated your layout a bit, so now it should meet your expectations:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/main_holder"
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">
<RelativeLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:gravity="center"
android:layout_alignParentTop="true"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button_intro3"
android:layout_below="#+id/textViewIntro3_1"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
<TextView
android:id="#+id/button_intro3"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_below="#+id/button_intro3"
android:layout_above="#+id/textViewIntro3_2"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:gravity="center"
android:layout_alignParentBottom="true"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</RelativeLayout>
</RelativeLayout>
What I did here is to rewrite the layout with RelativeLayout instead of LinearLayouts. It suits better here, in my humble opinion.
I hope, it helps.
i noticed recently when i checked my app in android 4.1.1 that my content goes off the screen but works very well in 4.2.2 above. Please check the screenshot.
and yes, its a bilingual app (English/Tamil). After few research i found out that English ListItem works well but Tamil causes problem
Layout Code :
activity_latest_news.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".LatestNews" >
<ListView
android:id="#+id/LatestNewsView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
</ListView> </RelativeLayout>
latest_news_single_view.xml
<?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="match_parent" >
<TextView
android:id="#+id/LatestNews_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/latest_news_dummy_title"
android:textSize="15sp" />
<TextView
android:id="#+id/LatestNews_description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#id/LatestNews_title"
android:text="#string/latest_news_dummy_desc"
android:textColor="#color/getCCC"
android:textSize="14sp" />
<TextView
android:id="#+id/LatestNews_posted_on"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/LatestNews_description"
android:paddingLeft="3dp"
android:paddingTop="2dp"
android:text="#string/latest_news_posted"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#911991" />
<ImageView
android:id="#+id/latest_news_addfav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/LatestNews_posted_on"
android:src="#drawable/star"
android:layout_alignParentRight="true" />
</RelativeLayout>
Is this Unicode issue? or layout problem?
And also please take a look at both emulator. if u notice, in 4.1.1 the theme is like greyish white while in 4.2.2 is complete white.. and even the drawable (refresh image) is looking weird (Yea, i know i haven't setup separate drawable for mdpi,hdpi etc) But what causes the difference? Is this App Theme issue?
Any help will be much appreciated. Thank you!
Try changing your layouts as below and check what happens.
your listview layout :
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LatestNewsView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
Row Layout :
<?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" >
<TextView
android:id="#+id/LatestNews_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/latest_news_dummy_title"
android:textSize="15sp" />
<TextView
android:id="#+id/LatestNews_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/LatestNews_title"
android:text="#string/latest_news_dummy_desc"
android:textColor="#color/getCCC"
android:textSize="14sp" />
<TextView
android:id="#+id/LatestNews_posted_on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/LatestNews_description"
android:paddingLeft="3dp"
android:paddingTop="2dp"
android:text="#string/latest_news_posted"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#911991" />
<ImageView
android:id="#+id/latest_news_addfav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/LatestNews_posted_on"
android:src="#drawable/star"
android:layout_alignParentRight="true" />
</RelativeLayout>
Image problem:
as you can see one emulator is Nexus S and one is Nexus One so there is a difference in their ppi values which is causing the problem. you need to set appropriate image for corresponding density.
Update :
check this it may help
Try and manually specify the number of lines for each text view. For instance, change the first TextView to look like this:
<TextView
android:id="#+id/LatestNews_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:singleLine="false"
android:maxLines="3"
android:ellipsize="end"
android:text="#string/latest_news_dummy_title"
android:textSize="15sp" />
Note that I added:
android:singleLine="false" <!-- Allows content to wrap into other lines -->
android:maxLines="3" <!-- Makes maximum no. of line wraps = 3 -->
android:ellipsize="end" <!-- Adds an ellipsis (...) to the end of line-->
Side note: you're mixing fill_parent and match_parent. They do the same thing. For more consistency, stick to match_parent.
EDIT: Also, get rid of layout_alignParentRight="true". I don't think you need it because the width is already going to fill the parent view. Using layout_alignParentLeft="true" is sufficient since both English and Tamil are written left-to-right.
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) :
So I'm having a problem that is driving me crazy. Knowing the purpose of my app isn't important/relevant so I'll just paste my code from the xml file. The layout is a RelativeLayout, but the problem I'm having is inside of this LinearLayout.
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:orientation="vertical"
android:background="#drawable/background_orange"
android:id="#+id/rel_layout" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/component_1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:src="#drawable/source1"
/>
<ImageView
android:id="#+id/component_2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#id/component_1"
android:src="#drawable/source2"
android:layout_alignRight="#id/component_1"
android:layout_marginRight="-50dip"
android:layout_marginBottom="-25dip"
/>
</RelativeLayout>
<LinearLayout
android:id="#+id/problemIsHere"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal"
>
<EditText
android:id="#+id/edit_text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="What's your question?"
android:imeOptions="actionDone"
android:inputType="textCapSentences|textAutoComplete"
android:textSize="25sp"
android:layout_gravity="left"
android:textStyle="bold" />
<ImageButton
android:id="#+id/image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:layout_weight="0"
android:layout_gravity="right"
android:background="#drawable/source3"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/problemIsHere"
android:gravity="center"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/source4"
android:onClick="computeUserInput" />
<ImageButton
android:id="#+id/image_button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_view"
android:layout_alignTop="#id/image_view"
android:layout_marginLeft="-2dip"
android:background="#drawable/voice_recognition_touse"
/>
</RelativeLayout>
Again, this is nested inside of the parent, RelativeLayout. In the preview, when clicking on the "Graphical Layout" tab, this looks like exactly what I want; EditText to the left of a small ImageButton, with correct proportions and margins. However, when I run this on my device, the LinearLayout is REVERSED, meaning now that the EditText is to the RIGHT of the ImageButton. The proportions and margins are still accurate though. Does anyone know what is going wrong here?
Note: I've already cleaned and refreshed my project; this was ineffective. I've also tried removing the layout_gravity attributes, and that did nothing.
Thanks