I was wondering if I could get some help with a layout issue. Basically, I need three things (eventually more) to show up on the screen, and the middle on is doing it's own thing.
I need it to look like the following image (but with the space background shown on the other pictures):
But it looks like this (this is from a Nexus One AVD and my Galaxy Nexus phone):
That, or it shows the 'Please select which variables you already know' text about halfway down the screen. I have a main screen that shows fine. I've tried different layouts, different heights, manually entering heights and widths, I just can't seem to get it to work for me.
Here's the code for the 'broken' xml layout...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal" >
<TextView
android:id="#+id/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFF"
android:textSize="28sp" />
<TextView
android:id="#+id/recommend_instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/app_name"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:text="#string/recommend_instructions"
android:textAppearance="?android:attr/textAppearanceSmall" />
<Button
android:id="#+id/button_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="#string/button_submit" />
</RelativeLayout>
The RelativeLayout has been able to get me close, but I was hoping that somebody would be able to look over my XML file and let me know if there's anything you can see that would be causing a re-size of the middle text. I've tried using a gravity='center_horizontal' with a placeholder layout to keep it at the top, but it keeps expanding. So I know that either the 'The Grand Unified theory' is expanding out to about the midway point and pushing down on it, or it's posting itself in the middle of the screen.
I thought it was the gravity = 'center' code I had earlier, but I changed that and it still did the issue.
Any help is greatly appreciated.
Again, I'm hoping someone can help me figure out what is re-sizing my text code.
Related
I want to make a layout as given in the image below, but I am unable to make same as it is showing in the image. I have to align the buttons exactly same as that they are given in the image attached. Here is my code how I am making it and I am not able to get the alignment exact as displayed.
I have added my resources also (buttons and background)
<Button
android:id="#+id/button_home_driver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="60dp"
android:layout_marginLeft="38dp"
android:background="#drawable/driverbtn" />
<Button
android:id="#+id/buttonPassengerHomeScreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button_home_driver"
android:layout_marginBottom="10dp"
android:layout_marginLeft="70dp"
android:background="#drawable/passengerbtn" />
</RelativeLayout>
I am not able to align the buttons along the Tilted Black Divider Screen.
Anyone please help me in the same. (Both the buttons should start from the Black Boundary as shown in the image)
First let me attempt to layout what I am trying to accomplish here.
EditText
EditText SearchButton
ListView (search result. there can be only one, ListView with adapter and height of wrap_content seems to work for this, there is a button to add the result to the ListView below. Once the add button is clicked this ListView collapses, which is exactly what I am after)
TextView (label for objects added)
ListView (list of objects added, again I'm using an adapter for the list row layout)
SaveButton
I was going to paste the code that I have but there is just too much to go through. The issues I am having are with the ListViews. Basically, the ListView that contains the objects added will end up pushing the SaveButton off of the screen. I have tried a ton of solutions laid out on this and many other sites but they just don't seem to work right.
Basically, I want the SaveButton to always be at the bottom and I don't want it to get pushed off the screen when the ListView gets too big. The only solution I have found to "work" was to explicitly set the height of the ListViews. However, this causes problems when going from tablet to phone (Nexus7 & Galaxy S3). I thought that using dip for sizes would prevent this from happening but apparently not.
If anyone has a good strategy for creating this type of layout that would be great. Or even a good resource for learning how to use Android's clunky UI system (it really leaves a bit to be desired).
Edit: here is my attempt at using a RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/main_background"
android:orientation="vertical" >
<EditText
android:id="#+id/plan_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ems="10"
android:hint="#string/plan_name_hint"
android:textColor="#color/text_color" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/object_search_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/plan_name"
android:ems="10"
android:hint="#string/search_objects_text"
android:textColor="#color/text_color" >
</EditText>
<Button
android:id="#+id/objects_search_button"
style="#style/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/object_search_text"
android:layout_below="#id/plan_name"
android:layout_alignParentRight="true"
android:background="#drawable/black_button"
android:text="#string/search_objects_button_label" />
<ListView
android:id="#+id/search_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/object_search_text"
android:background="#color/main_background"
android:textColor="#color/text_color" >
</ListView>
<TextView
android:id="#+id/objects_list_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/search_result"
android:paddingBottom="8dip"
android:paddingLeft="8dip"
android:text="#string/plan_objects_list_label"
android:textColor="#color/text_color"
android:textSize="22sp"
android:textStyle="bold" />
<ListView
android:id="#+id/plan_objects"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/objects_list_label"
android:background="#color/main_background"
android:textColor="#color/text_color" >
</ListView>
<Button
android:id="#+id/save_plan_button"
style="#style/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/black_button"
android:paddingLeft="8dip"
android:text="#string/save_button_label" />
If you think the Android UI system is clunky, you obviously haven't tried to understand it. For most things its extremely well designed.
If you want a certain view (or views) to always be at the bottom, then you want to make your screen a RelativeLayout and put android:layout_alignParentBottom="true" on those element(s). Then add android:layout_above="id" on whatever you want to be above them, where id is the id of the element you want at the bottom.
Make the SaveButton and ListView at the same hierarchy level. e.g if your parent layout is RelativeLayout in your SaveButton add this property android:layout_alignParentBottom="true"
It looks like the only real solution here is to use explicit sizes for the list views and plan accordingly for different screen sizes (i.e. create different layouts for different screens and outlined here.). I was hoping for something a little more generic. Oh well.
I am developing an application for android. My main layout is a RelativeLayout.
When I'm opening the app for debug within a large-screen emulator, everything works fine.
But when I open it on a QVGA device, I see al the layout distorted.
Do I actually need to make a new layout for every screen size? I have seen at some places that android can automatically stretch everything to fit the layout...
Developer.android.com says:
By default, Android resizes your application layout to fit the current device screen.
(http://developer.android.com/guide/practices/screens_support.html)
Could you please help me figure out why a layout would look distorted ion a small device?
As you can see the images do get stretched, but the layout is not displayed well.
Thanks in advance!
Big Screen Image http://www.interload.co.il/upload/6549026.png
Small Screen Image http://www.interload.co.il/upload/9617759.png
Edit: XML code of the problematic page.
All the graphics are in "drawable-hdpi" folder, but again, the problem is not with the images themselves, but with the 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="match_parent"
android:background="#drawable/background" xmlns:android1="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/selectionHead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/header" />
<ImageView
android:id="#+id/chooseFormatTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/selectionHead"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:src="#drawable/step1_choose_format" />
<ImageView
android:id="#+id/videoBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="42dp"
android:onClick="VideoClick"
android:src="#drawable/step1_video" />
<ImageView
android:id="#+id/orTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/videoBtn"
android:layout_centerHorizontal="true"
android:layout_marginBottom="19dp"
android:src="#drawable/step1_or" />
<ImageView
android:id="#+id/audioBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/orTxt"
android:layout_alignLeft="#+id/videoBtn"
android:layout_marginBottom="22dp"
android:layout_centerHorizontal="true"
android:onClick="AudioClick"
android:src="#drawable/step1_audio" />
<ImageView
android1:id="#+id/step1Share"
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:layout_alignBottom="#+id/selectionHead"
android1:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="5dp"
android1:src="#drawable/share" />
</RelativeLayout>
Do I actually need to make a new layout for every screen size?
You need to make a new layout when your existing layouts do not work and you elect to make a new layout instead of solving the problem in other ways.
Could you please help me figure out why a layout would look distorted ion a small device?
Your layout is perfectly fine, insofar as it is doing precisely what you told it to do:
The video button is 42dp above the bottom of the layout
The "or" line is 19dp above the video button
The audio button is 22dp above the "or" line
That is 83dp plus the sizes of the various images, which clearly makes it too tall.
If that is not what you want it to do on a small screen, either:
Come up with a different layout for -small devices, or
Use dimension resources instead of hard-coded values, and use different values for those dimension for -small devices, or
...
I'm struggling to finish my Android app, but I'm having some problems with the UI. My problem is very basic, I've developed the UI using the default AVD when using AVD manager in Eclipse (HVGA, with a density of 160 dpi), and when I execute the app I see it as I designed, but if I change the target device (i.e. WVGA or QVGA) all the components in the layout are in a different position than the original. As far as I saw in the recommendations for support multiple screens, I should not use AbsoluteLayouts, in fact I'm using RelativeLayouts, I'm not using "px" for the dimensions (or positions), just "wrap_content" or "fill_parent", and in case I need an specific position I'm using "dp" (tested too with "sp"), also I've scaled the images for ldpi (0.75x), and still have the issue (not a particular screen, the hole app) ...so, my question is, is there any other UI tip that I'm missing?.
I'm putting a sample code and the results that I observe when testing it with a HVGA AVD (bigger image) and with a QVGA AVD. As you can see, the position of the yellow/green squares is different, as well as the size of the last row of images.
PS: I'm using a TabLayout also, so the background is loaded through code (tabHost.setBackgroundDrawable(getResources().getDrawable(R.drawable.background1)))
Any help will be appreciated.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/row1"
android:layout_centerHorizontal="true"
android:layout_marginTop="140dp"
>
<ImageView
android:id="#+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button1"
/>
<ImageView
android:id="#+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button2"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#id/row1"
android:layout_centerHorizontal="true"
>
<ImageView
android:id="#+id/btn3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button3"
/>
<ImageView
android:id="#+id/btn4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button4"
/>
</LinearLayout>
</RelativeLayout>
Your layout looks fine to me, except for having that white box title on the background as it will make more difficult to put things in their position. Also, RelativeLayout does not have orientation but that is ignored.
In the bigger screenshot it looks like there is more space between the white box and the top of the screen. What it does not make sense to me is the different size in the second row. Are you 100% sure you are loading the correct images in the smaller screenshot?
You need to create different layout for diff. resolution i.e for large screen use layout-large folder..
I hope this link help to you.
Did you follow the steps given on the developer site to make ur app to support multiple screens?
I've got a ListView with items composed of RelativeLayouts. This is the relevant XML from the list items:
<?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="wrap_content">
<TextView
android:id="#+id/xx"
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_centerInParent="true"
android:layout_alignParentLeft="true"/>
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/xx" />
<TextView
android:id="#+id/tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/xx"
android:layout_below="#id/title" />
<TextView
android:id="#+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/tag"
android:layout_below="#id/title" />
</RelativeLayout>
On Android 2.1 (tested on a Nexus One), this shows the desired behavior: Android 1.5 http://img42.imageshack.us/img42/7668/85324076.png
On Android 1.5 however (tested on a HTC Hero), it shows up like this: Android 1.5 http://img257.imageshack.us/img257/2849/72229324.png
[edit] On 1.6 (emulator), it works as expected as well.
The small grey line on the top left is what shows up in the first pic as "xx", so that should be vertically centered. As far as I can see, the XML dictates this, but for some reason, 1.5 ignores it.
Why is this? I can't find anything about this difference, and I've been brute forcing any combination of layout_center, center, alignParent*, but to no avail...
Can anyone shed some light on this? Thanks!
For relative layout layout_gravity is not used.
Also, you're using conflicting attribtues centerInParent and alignParentLeft.
Use only one of them.
You can use layout_centerVertical="true" layout_alignParentLeft="true"
RelativeLayout receives many bug fixes in 1.6 and then 2.0 :)
For one, judging by the fact that it's broken in the earliest version you're testing with and works as expected in the later versions...sounds like a bug that was fixed.
However, unless I'm oversimplifying because you're only showing a few basic sample screen shots, I would do this with nested LinearLayouts anyway.