android:layout_below doesn't seem to work - android

Using Xamarin in Visual Studio 2015 I am trying to edit the Main.axml file. in the file I have the TextView item:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout1" >
<TextView
android:text="Search By Postal Code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/PostalCodeSearchLabel"
android:layout_margin="10dp" />
<EditText
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/PostalCodeSearchLabel"
android:id="#+id/zipCodeEntry"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:width="165dp" />
<Button
android:id="#+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/zipCodeEntry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:text="OK" />
</RelativeLayout>
But the lines "layout_below" shows as invalid and the item doesn't display properly. All the examples I've read show this as being a valid parameter but it doesn't work.
Why?

It seems to be a simple matter of saving my changes. When switching back to the designer after making changes in the source mode you have to save the changes before the designer will render properly.

You have to define the EditText after the view want it to go below.
<!-- Your view here -->
<EditText
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ZipCodeSearchLabel"
android:id="#+id/zipCodeEntry"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:width="165dp" />
If you reference an element by id-#id/foo but the element comes after the reference in xml then it won't work

Related

EditText disappears on Android Marshmallow 6.0 devices

This is how my xml layout file in IDE looks like:
It looks like that on every device BUT Marshmallow ones, which ended up looking like this:
As you can see, the password EditText and Remember CheckBox disappeared without a trace, yet I still can declare them in the class file normally.
This is my xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_log_in"
android:layout_width="match_parent"
android:layout_height="match_parent"
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="my.app.LogInActivity">
<!-- Dummy item to prevent AutoCompleteTextView from receiving focus -->
<LinearLayout
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_width="0px"
android:layout_height="0px"
android:id="#+id/linearLayout5"
android:orientation="horizontal" />
<!-- :nextFocusUp and :nextFocusLeft have been set to the id of this component
to prevent the dummy from receiving focus again -->
<AutoCompleteTextView android:id="#+id/autotext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:nextFocusUp="#id/autotext"
android:visibility="invisible"
android:nextFocusLeft="#id/autotext"
android:textSize="15sp" />
<TextView
android:id="#+id/txtname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/txt_customer"
android:layout_alignBottom="#+id/txt_customer"
android:text="Name"
android:textSize="14sp" />
<EditText
android:id="#+id/txt_customer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/autotext"
android:layout_toEndOf="#+id/bt_exit"
android:ems="10"
android:imeOptions="flagNoExtractUi"
android:inputType="textPersonName"
android:maxLength="100"
android:textSize="15sp" />
<EditText
android:id="#+id/txt_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView2"
android:layout_alignBottom="#+id/textView2"
android:layout_alignParentEnd="true"
android:layout_alignStart="#+id/txt_customer"
android:ems="10"
android:imeOptions="flagNoExtractUi"
android:inputType="textPassword"
android:maxLength="100"
android:textSize="15sp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtname"
android:layout_alignStart="#+id/txtname"
android:layout_below="#+id/txt_customer"
android:layout_marginTop="25dp"
android:text="Pasword"
android:textSize="14sp" />
<Button
android:id="#+id/bt_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="LogIn"
android:textColor="#000000" />
<Button
android:id="#+id/bt_exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toEndOf="#+id/linearLayout5"
android:text="Quit"
android:textColor="#000000" />
<CheckBox
android:id="#+id/check_remember"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/txt_password"
android:layout_below="#+id/txt_password"
android:text="Remember" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayout5"
android:layout_toEndOf="#+id/linearLayout5"
android:text="Log In" />
The Name EditText and Password EditText are the same yet only the Password one disappears on Marshmallow 6.0 devices. I have already tried to change theme, Build Target, position but it's still the same. What had go wrong?
EDIT #1:This question mentioned "messy code" and it was solved by "cleaning up" the code. I am using RelativeLayout as parent like him, but changing to LinearLayout isn't viable.
EDIT #2: I tried to preset a value just to login, and it worked normally like I just typed it in manually. Inside layouts file are the same: Only one EditText appears, the rest (EditText, CheckBox, RadioButtons) disappear. What is going on?? Example:
On Marshmallow:
Solved the disappearing bug. From this SO answer which leads me to this Google issue. I have to delete android:layout_alignBaseline attribute and they will render fine.

Number picker in android not showing properly

I'm starting to build an app with android studio and right away I'm having a bit of an issue. Currently my number pickers look like this in the XML preview:
But when I run the app (on the emulator) it looks like this:
There is a text view that you can't see in the preview but appears when the app is run, that is why you see the text "Time's up" in the emulator screenshot. What I'm wondering is why are the number pickers so close to my textview and off to the left? I don't mind the change in style (in fact I welcome it) but I can't figure out why they moved. Any help is greatly appreciated! Here is my XML code:
<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="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.skytbest.intervaltrainer.MainActivity">
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:paddingRight="10dip"
android:paddinBottom="50dip"
android:textSize="50dp"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Start" />
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/timer"
android:layout_toLeftOf="#+id/timer"
android:paddingTop="50dp" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/numberPicker"
android:layout_toRightOf="#+id/numberPicker"
android:paddingTop="50dp" />
</RelativeLayout>
Here is a working layout using the suggestion in my comment. Note that it is helpful to put some text in the TextView to better enable the UI designer to show the layout. Even then it sometimes does not match what you see on screen, especially when you have invalid combinations of layout constraints.
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
tools:context="com.skytbest.intervaltrainer.MainActivity">
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:text="Label"
android:paddingBottom="50dp"
android:paddingTop="50dp"
android:textSize="50dp"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Start"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/timer">
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
You need to set setMinValue and setMaxValue otherwise it will get stack on 0.

Content goes off screen in Android 4.1.1

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.

Android: changing the order of views causes "Unfortunately, app has stopped" OK. Why?

I have an application called "Yamba". The only layout XML file it has is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/titleStatus"
android:textSize="30sp" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top|center_horizontal"
android:hint="#string/hintText" />
<TextView
android:id="#+id/textCounter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:text="000" />
<Button
android:id="#+id/buttonId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/buttonUpdate"
android:textSize="20sp" />
</LinearLayout>
The application shows everything well.
The only change I made is changing the order of (EditText id/editText") with (TextView id/textCounter) so that it becomes:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/titleStatus"
android:textSize="30sp" />
<TextView
android:id="#+id/textCounter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:text="000" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top|center_horizontal"
android:hint="#string/hintText" />
<Button
android:id="#+id/buttonId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/buttonUpdate"
android:textSize="20sp" />
</LinearLayout>
After this change the emulator shows me: Unfortunately, Yamba has stopped" OK.
When I restore it back to its previous order, everything works well. why?
When you change the order of Views in the XML layout, their numerical IDs are changed (they are assigned from top to bottom), then when you refer to the previous ID in your code for example in findViewById() you'll get the wrong one and an ClassCastException (I guess because you didn't include the logcat).
Cleaning before building will solve the problem.
When in doubt with things that don't make sense. Project Clean/Exit eclipse and reopen.
I've encounter strange things like this before and that's ultimately what solved it.

How can I nest a linear layout inside a relative layout to achieve the desired UI experience?

I am trying to get the following look (screenshot from my iOS app) on the Android version of my app.
I have defined my layout file as follows in Android:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<EditText
android:id="#+id/postTextTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/shareLILayout"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:ems="10"
android:gravity="top|left|start"
android:inputType="textMultiLine" >
<requestFocus />
</EditText>
<LinearLayout
android:id="#+id/shareLILayout"
android:layout_alignParentBottom="true"
android:background="#999999"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<ImageButton
android:contentDescription="#string/li_btn_desc"
android:id="#+id/postToLIButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="#android:color/transparent"
android:src="#drawable/linkedin_switch_off" />
<TextView
android:id="#+id/postToLITextView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/share_on_linkedin"
android:layout_gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
</LinearLayout>
</RelativeLayout>
If I swap my ImageButton and TextView above, my app just crashed with a RuntimeException! Also I am not able to center the text so that its aligned to the center of the button. What am I doing wrong?
Simply swap the ImageButton and TextView order. Your runtime error is either unrelated or is caused by the need to clean your project before you need to redeploy it (sometimes resource IDs get funky). Also use android:gravity="center_vertical" for you TextView to center it properly

Categories

Resources