XML layout overlapping text issue - android

I used relativelayout and here is what I've got. I can't get the image to fill the section I want. I don't know how to fix it. I've heard something about using layout weight, is that some thing I should use?
<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">
<ImageView
android:id="#+id/imagehome"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_margin="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvtitle1"
android:src="#drawable/one" />
<TextView
android:id="#+id/tvtitle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Voted Best Dentist five years running by"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvtitle2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="6dp"/>
<TextView
android:id="#+id/tvtitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="The Oakland Tribune"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvhome"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"/>
<TextView
android:id="#+id/tvhome"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" You&apos;ll be cared for by our highly trained staff of dental professionals,energized to work as a team while providing the highest quality of care for your dental health. We offer complete dentistry for the entire family at a single location. "
android:textColor="#4C2016"
android:textSize="15dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/special"
android:layout_marginBottom="25dp" />
<Button
android:id="#+id/special"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:text="Specials"
android:textColor="#F6E6C6"
android:textSize="17dp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvbutton"
android:layout_marginBottom="15dp" />
<TextView
android:id="#+id/tvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App provided by Bay Area Dental Marketing"
android:layout_centerHorizontal="true"
android:textSize="10dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
on the xml file,
and on the device
It got better but it'snot there yet!

Not sure how much flexibility you have but the best solution would be to remove the text and image from the background and add them as views instead. As you have experienced unless each piece is added as a view it is nearly impossible to guarantee it will look correct on all devices.

When working with multiple screen sizes, I have found it best practice to either (a) use RelativeLayout, or (b) set a LinearLayout inside a ScrollView.

Use RelativeLayout so you won't have to specify the pixels.
Alternativley if you are doing that for one particular phone select corresponding screen size in the XML designer in Eclipse. Yet, using RelativeLayout guarantees it will work on all the phones

Even using the suggested answers above you may still run into problem on different size screens. The best solution I can think of is to create separate image resources for the background and foreground then add an image view with the foreground image as the source.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background" >
<!-- This method makes this layout redundant, dont need this anymore
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:layout_marginRight="15dip"
android:layout_marginTop="255dip"
android:orientation="vertical" >-->
<!-- put the foreground image in an imageview -->
<ImageView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/foregroundImage"/>
<TextView
android:layout_width="276dp"
android:layout_height="132dp"
android:textSize="15dp"
android:gravity="center_vertical"
android:text="some text"
android:textColor="#4C2016"/>
<Button
android:id="#+id/special"
android:layout_width="131dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:layout_marginTop="20dip"
android:layout_marginLeft="75dip"
android:textSize="17dp"
android:textStyle="bold"
android:text="Specials"
android:textColor="#F6E6C6" />
</LinearLayout>

Related

Adjust xml android with imageView,button and text

There has a listView and imageView in Activity A. If listView.size is equal to 0, it will display the image in the imageView, it not equal to 0, it will display the list.
This is the xml of my Activtiy A. I want to make the text and button display below the image but I found it so difficult to adjust.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ImageView
android:src="#mipmap/data"
android:paddingTop="30dp"
android:layout_gravity="center"
android:layout_width="330dp"
android:layout_height="300dp"
android:id="#+id/imageView2"
android:paddingLeft="20dp"></ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No Data"
android:textSize="15dp"
android:layout_marginLeft="140dp"
android:paddingTop="160dp"
android:textColor="#color/honey_dew2"
android:layout_gravity="center"
android:id="#+id/NoData"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Data"
android:paddingTop="20dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="130dp"
android:id="#+id/button2"
android:layout_centerVertical="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
</RelativeLayout>
This is what I want. Thanks
http://i.stack.imgur.com/OSL4I.png
I think this is pretty much what you are looking for
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:src="#mipmap/data"
android:paddingTop="30dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView2"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="No alarms"
android:textSize="15sp"
android:textColor="#color/honey_dew2"
android:id="#+id/NoData"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="Add alarms"
android:paddingTop="48dp"
android:id="#+id/button2" />
</LinearLayout>
Notice that I changed from a RelativeLayout to a LinearLayout with a orientation value of vertical. I think that the RelativeLayout adds unnecessary complexity to this problem.
By using the layout_centerVertical and layout_centerHorizontal attributes instead of the padding you solve two problems at once.
The position now scales to different devices.
The layout is far less complex.
Notice also that the TextView textSize attribute is now in the units sp (scaling pixels) instead of dp (density-independent pixels). The size of your text should always be defined in sp and the size of your views should be defined either relatively or in dp.
This tutorial from the prolific mkyong should provide a strong foundation for manipulating the XML with your Java code.
I'd rework your entire approach. Use ListView.setEmptyView(View) to set a separate view to display when the list is empty. Then your base layout is just the list, and you have a separate layout for what to display for the empty case.

How to make android layout scalable for different screen size?

I found a lot of question were asked on supporting different screen size where the screen size are varies from Tablet to phone and etc. I am writing my first android application and when I am looking at the layout in different phone, All of them are not relatively scalable to screen.
I am pasting a small RelativeLayout code here to understand how to make it proper scalable in less changes. I also followed the android official doc and learn two things
drawable images for different screen
use sp for mentioning text size and for rest of them use dp
But it's not helping me
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="#ffd5d6d6">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:background="#ffffffff"
android:elevation="#dimen/abc_action_bar_default_height_material">
<ImageView
android:id="#+id/back"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:src="#drawable/ic_back" />
<TextView
android:id="#+id/profileDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Test"
android:textColor="#ff3c3f41"
android:textSize="15dp" />
<ImageView
android:id="#+id/flag"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_alignWithParentIfMissing="false"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="#drawable/temp_ic_share" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="52dp">
<TextView
android:id="#+id/roommate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="false"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="Who are you?"
android:textColor="#ff3c3f41"
android:textSize="18dp" />
<Button
android:id="#+id/foodie"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="60dp"
android:layout_height="38dp"
android:layout_alignParentStart="false"
android:layout_marginLeft="56dp"
android:layout_marginTop="80dp"
android:background="#fa6425"
android:text="Foodie"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
<Button
android:id="#+id/button4"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="80dp"
android:layout_height="38dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="80dp"
android:layout_toEndOf="#+id/foodie"
android:background="#fa6425"
android:text="Beach bum"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
<Button
android:id="#+id/button5"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="80dp"
android:layout_height="38dp"
android:layout_alignTop="#+id/button4"
android:layout_marginLeft="15dp"
android:layout_toEndOf="#+id/button4"
android:background="#fa6425"
android:text="Tree hugger"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
</RelativeLayout>
<Button
android:id="#+id/button"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#fa6425"
android:text="Send"
android:textColor="#fff4f4f4" />
</RelativeLayout>
As you can see that I am including two Parallel RelativeLayout in one main RelativeLayout. here the views on three different size:
nexus one
nexus 5
nexus 6
Best alignment is in Nexus 5 screen. Do I need to create different layout folder i.e. hdpi, mdpi and etc? If I am not wrong then I don't need to because my application is going to run only on phone devices (in portrait mode only).
How can I make scalable screen layouts. Any help would be appreciable :)
If you want to force all the views to have the same ration on screen the only way is to give it a size dynamically after you calculated the ratio between the desired pixels and the screen density, which is not really a solution, What you need to understand is when working with various screen sizes, each one suppose to behave differently, a Tablet screen is expected to be bigger and thus having more room for elements to show up on screen, a phone screen is smaller and less elements should be showed on screen, you need to adjust your view to support all of these screens and the proper way is to write a different layout for tablets and phones, or even different layout by screen dpi.
I am pretty new, I am using Android Studio, is that what you are using? First thing first, if you always want you activity to be in portrait mode, use this code in your manifest, you have to add the code to each activity you want to stay in portrait mode. If you don't, and you don't add code to handle the switch in screen orientation, the phone will likely crash.
<activity
android:name=".TitleActivity"
android:label="#string/title_activity"
android:screenOrientation="portrait" >
</activity>
Instead of a relative view, Try the Linear Layout.
You would have your Main Layout, with a few nested Linear Layouts.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/example">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Title Here"
android:id="#+id/Title"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="20dp"
android:gravity="center_horizontal"
android:layout_marginBottom="20dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_weight="1"
android:layout_marginLeft="10dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_weight="1"
android:layout_marginRight="10dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal"
android:background="#drawable/test"
android:layout_margin="50dp" />
</LinearLayout>
This layout has A title Above the three buttons, Then three buttons, then an image view below, it scales from 3.7 to 7.0. Larger than 7, I would make another layout.
You need an image named test in your drawable file.
use this Library will help you to set a Responsive scalable Views for all the devices Layouts
https://github.com/intuit/sdp
irs really easy and simpl just replace.
android:layout_width="50dp"
android:layout_height="60dp"
with.
android:layout_width="50sdp"
android:layout_height="60sdp"
and for textView
android:textSize="60ssp"
instead of. sp

Trying to understand Android layouts, image sizes and relations

I'm developing apps for android since over a year now with success, but one thing is still a problem for me:
How to design a layout with a combination of TextViews, ImageViews and Buttons while retaining the relation between each elements on different screen sizes.
I want to build a layout like this:
It's for a listview, so many of these layouts are used. The app has a different layout for smartphones and tablets.
So the orange button on the right should always have 3 lines of text but should still have a maximum width, the image on the left should have the same height as the button on the right. The 3 lines of text in the middle should take up as many space as they can. The star image should have the same hight as the text on their right.
I've managed to build a similar test layout with a TableLayout, here are the previews from AndroidStudio:
Nexus S
Nexus 6
On the Nexus S screen size, the layout is OK but on bigger screens it's ugly. The button is too small, the image on the left is also too small.
Here is the code for my test layout:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:contentDescription="#string/dummy"
android:padding="#dimen/raster4dp"
android:scaleType="fitXY"
android:src="#drawable/avatar_1" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv1"
android:src="#drawable/ic_male_user_bw"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv2"
android:layout_alignBottom="#id/iv2"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/iv2"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_male_user_bw"
/>
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv3"
android:layout_alignBottom="#id/iv3"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
</RelativeLayout>
<Button
android:id="#+id/btn1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#drawable/button_dropshadow_black_xml"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</TableRow>
</TableLayout>
So hopefully my question is not too silly, but i have some problems understanding how to fix this. Currently I'm using a width of fixed 80dp on the button and the image to the left. I think this is not realy the way it works on Android.
What sizes do i need to use here, what kind of layouts?
The sections about sreensizes etc. on the developer site is known by me (https://developer.android.com/guide/practices/screens_support.html) but it wasn't that helpful to me.
Thanks for help! :)
Each terminal has different dimensions. If you put a button that has a size of 80dp, when other terminal screen is larger, that button is going to be smaller compared to the terminal screen you were doing the tests.
You should play with WEIGHT.
| | | |
|_____________|_________________________|____________|
0.3 0.5 0.2 0.3 + 0.5 + 0.2 = 1 <-Weight.
Read this, will help.
Also there's a question similar to yours, check it too.
DP is for setting a fixed amount of pixels, if you don't want to consider the pixel density of your device's screen. This lets you that a button would be shown with the same size in a Nexus 4,5 or in a Samsung Galaxy Mini.
The same "absolute" size. This means that if your image is too big, it could fit in Nexus, but no in the other because of its smaller screen. This is due to the fact that it does not depend on the screen size, neither the pixel density.
What I hardly recommend you is the use of LinearLayouts (with their attribute weight) and RelativeLayouts as direct children (in case you need them). This could be "the same" (not exactly) than the use of "%" in CSS.
Here, you can see an example of weight attribute (The second answer gives you more tips).
Linear Layout and weight in Android
I hope this helps!!
check this .... increase parent layout height if needed:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="dummy"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#565657"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</LinearLayout>

Is there a way to make text, buttons, progress bar stay in around the same area with any resolution

Is there a way to make text, buttons, progress bar stay in around the same area with any resolution. So if you on a nexus 10 and nexus 7 the text, buttons, progress bar will say around the same place. As my app just looks silly on nexus 10. Heres my xml 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="#drawable/background"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:textSize="20dp"
android:layout_marginTop="40dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#FFFFFF"/>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="150dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp" />
<ImageButton
android:id="#+id/pauseicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/pauseicon"
android:layout_gravity="center"
android:layout_marginTop="20dp"
style="?android:attr/borderlessButtonStyle"/>
I would not recommend that you write your layout like you have. To make your app look similar on different devices, you should align all the views so that they are relational to each other.
There is a lot of information here
I would also advise that you use a relative layout rather than a linear layout, because it is easier to make the views relational to each other, which (usually) makes your app look better at different screen sizes.
Here is an example of a relative layout(from the dev docs)
<EditText
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/reminder" />
<Spinner
android:id="#+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/times" />
<Spinner
android:id="#id/times"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/name"
android:layout_alignParentRight="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/times"
android:layout_alignParentRight="true"
android:text="#string/done" />

android - another android UI question

I have a scrollview ( mainly for landscape purposes, as I don't have a different xml file, I'm using android:configChanges="orientation")
which contains a RelativeLayout and within it there's a Linear Layout.
The code looks like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:background="#color/background"
android:padding="10dip" android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_gravity="center"
android:orientation="vertical">
<TextView android:textSize="24.5sp" android:textStyle="bold"
android:layout_height="wrap_content" android:layout_gravity="center"
android:text="#string/main_title" android:layout_width="wrap_content">
</TextView>
<ImageView android:src="#drawable/icon"
android:layout_marginTop="20px" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center" />
<TextView android:textSize="15sp" android:layout_marginTop="20px"
android:layout_height="wrap_content" android:text="#string/time_window_please_select_label"
android:layout_width="wrap_content"></TextView>
<Spinner android:layout_height="wrap_content" android:id="#+id/spinner"
android:prompt="#string/time_window_prompt" android:layout_width="fill_parent"></Spinner>
<Button android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/start_button"
android:text="#string/start_label" android:layout_width="fill_parent"></Button>
<TextView android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/status_label"
android:layout_width="wrap_content"></TextView>
<TextView android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/status_time_label"
android:layout_width="wrap_content">
</TextView>
</LinearLayout>
<ImageView android:id="#+id/info_button" android:src="#drawable/info"
android:layout_alignParentBottom="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="bottom|right" />
</RelativeLayout>
</ScrollView>
Everything works fine, both in portrait and loandscape mode except for the ImgView (info_button) at the very end.
I used a Relative Layout because I thought I'd be able to position it on bottom right hand corner (a bit of margin would be desirable bottom and right) of the screen...
This is what I get instead...
http://www.doc.ic.ac.uk/~am907/wrong.png
any help appreciated!
EDIT: The link to the full XML file http://pastebin.com/Cce4AC4v (for some reason I can't see it all in preview mode but it's there when I try to re-copy in the text form)
Thanks
andreas
Instead of:
android:layout_gravity="bottom|right"
Try:
android:layout_alignParentRight="true"
Edit: Reading your question again, I believe the problem is the ScrollView. I'm not sure why you are using this type of layout. You could get rid of it in favor of the relative layout and that should solve your problem. I'm not sure why you feel this activity needs to support landscape. If so, I would boil the ScrollView down to a single view object and try to troubleshoot that.
I have understood that u want to place that image at bottom - right location. If so, then give:
<ImageView android:id="#+id/info_button" android:src="#drawable/info"
android:layout_alignParentBottom="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true" />
If this is not the solution, could you place ur desired screen to be prepared, so that we can cross check ur layout.

Categories

Resources