Develop Reference

Using RelativeLayout, LinearLayout and layout_weight at the same time - weird behaviour

I've got an activity layout specified in an XML file - activity_intro.xml - and I'm trying to create another one that is similar but slightly different - that's going to be activity_instructions.xml.
The Intro activity has a 9patch image at the bottom of the screen that is supposed to stay there and only adjust to different widths of the screens.
The Instructions activity is supposed to contain the same image but above 2 more buttons - all three of these views need to be always located at the bottom of the screen.
activity_intro.xml:
<?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:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/introAnimationImageView"
android:layout_width="152dip"
android:layout_height="176dip"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/intro_animation_content_description"
android:src="#drawable/animation_intro01" />
<TextView
android:id="#+id/introTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/introTextViewSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/introButtonLoginSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/intro_button_label_login_signup" />
<Button
android:id="#+id/introButtonInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/introButtonLoginSignup"
android:text="#string/intro_button_label_instructions" />
<Button
android:id="#+id/introButtonReportAnonymously"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introButtonLoginSignup"
android:layout_centerHorizontal="true"
android:text="#string/intro_button_label_report_anonymously" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/footer_cityscape" />
</LinearLayout>
Result:
Since I've got working code for Intro, I wanted to make Instructions follow its example but the layout_weight property isn't behaving as expected. First of all, I was only trying to put in the 2 buttons and leave out the image:
<?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:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/instructionsTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/instructions_title_1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<ImageView
android:id="#+id/instructionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/instructions_image_content_description"
android:src="#drawable/forms" />
<TextView
android:id="#+id/instructionsTextViewDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/instructions_description_1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/instructionsButtonPrevious"
style="#style/ButtonPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/instructions_button_label_previous" />
<Button
android:id="#+id/instructionsButtonNext"
style="#style/ButtonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/instructions_button_label_next" />
</RelativeLayout>
</LinearLayout>
This only worked when I set the layout_weight of the bottom RelativeLayout to 1 (instead of 0) and for the ScrollView 0.1 (instead of 1). If I used the original values the RelativeLayout would take up all the screen. Could anyone explain to me why that is?
I also tried googling the issue and noticed people would suggest to set layout_height to 0dip which I tried but it also didn't work as expected.
Secondly, I tried adding the already mentioned ImageView to the bottom RelativeLayout. This, however, basically displays only the ImageView and not the buttons - or one of the buttons is on top of the image (hiding it). Why is that? Don't I specifically set the buttons to be placed below it?
What should the code look like in order for it to be doing what I expect it?
Further explanation:
Below are images that should help indicate what exactly I want to achieve. The green bits are the ScrollViews - I added them because Android devices tend to have diverse screen sizes. Their purpose is to present the content properly independently of the screen size, i.e. if the screen is small, the user will be able to scroll that part to read the entire text and view the image.
The red bit on the left (Intro) shows the ImageView that is supposed to always be at the bottom of the screen; it'll always be there, visible, and it's the green bit above it that will be movable.
If you take a look at the red bit on the right (Instructions), there's a Next button that's covering the image with the lorry/truck that was visible in the Intro screenshot. Now that's wrong - there should be 2 buttons BELOW the image, as seen on the last screenshot (the 2 blue rectangles).

Strange Output when Overlapping Views..?

Hi Everyone iam new to android and in my project requirement i need to create two LinearLayouts in same Position and they are animated later in the Java Code,For Testing Purpose initially i inserted image views on those layouts got succesfully after that i removed image views and Inserted EditTexts on the same layout but strange previous image is showing on one linear layout after executing which is not shown in preview
I tested all the options like cleaning the project ,uninstalling from device and reinstaling iam getting the same problem
<?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="fill_parent"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Animate Now"/>
<LinearLayout
android:id="#+id/image_list_fragment"
android:layout_width="250dip"
android:layout_below="#+id/button1"
android:layout_height="200dip"
android:background="#FF00FF"
android:layout_centerInParent="true"
>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Please Enter some text here"
android:singleLine="false"
/>
</LinearLayout>
<LinearLayout
android:layout_width="200dip"
android:layout_height="300dip"
android:orientation="vertical"
android:layout_below="#+id/button1"
android:visibility="visible"
android:background="#32FFFF"
android:layout_centerInParent="true"
android:id="#+id/image_details_fragment"
>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Please Enter some text here"
android:singleLine="true"
/>
</LinearLayout>
</RelativeLayout>
Here is the output the preview in Eclipse and output in Emulator After running

Please check your backend java file(activity class) once or paste it here. You might be setting an imageview with that background somewhere at runtime.

Textview act like a terminal

Hello I am trying to get text to display like it does in terminal or cmd. And by that I mean a window of text that with each input makes a new line and then displays the bottom line of the TextView, and there would be a set amount of lines always on the screen.
It sounded easy to do, but now that I started I'm not sure how to do it.
I tried putting a TextView in a ScrollView like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="100" >
<ScrollView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView android:id="#+id/tv1"
android:layout_width="wrap_content"
android:minLines="11"
android:maxLines="11"
android:layout_height="wrap_content"/>
</ScrollView>
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="10" >
<requestFocus />
</EditText>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="10"
android:onClick="buttonclick"
android:text="Button" />
</LinearLayout>
and then
sss=et1.getText().toString();
tv1.append("\n"+sss);
to add new lines
This all works but I really have no idea how to make the TextView go to the bottom, right now it just cuts off when I hit the max number of lines.
I definitely don't expect anyone to write my program for me. I am here to learn
Thanks for your time!

Call fullScroll(View.FOCUS_DOWN) on the ScrollView after appending the text.

Align dynamic Image and Text in Android

I have a header where I have the text: "Huidige Locatie" and beneath that I have an image of a country flag.
I declared the TextView and ImageView in the layout as follows:
<LinearLayout
android:id="#+id/locatiebalk"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="5sp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/vlaggenlocatie"
android:layout_width="105sp"
android:layout_height="fill_parent"
android:paddingLeft="14sp"
android:orientation="vertical">
<TextView
android:id="#+id/huidiglocatie"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Huidige locatie"
android:textColor="#000000"
android:textSize="12sp"/>
<ImageView
android:id="#+id/flag"
android:layout_width="fill_parent"
android:layout_height="46sp"
android:gravity="left"
android:src="#drawable/nl"/>
</LinearLayout>
(I close the tags correctly later on, just showing the relevant part)
In the Graphical Layout of Eclipse it shows it the right way:
But in the Simulator and on my phone it showes it like this:
What is the best way to do this?

Fixed it.
For the ones wondering: android:scaleType="fitStart" did the job.

Button text appears vertical

My project was working fine, when suddenly the text on my buttons was being displayed vertically. By which I mean instead of map_infobutton displaying
Info
it was displaying
I
n
with the f and o beyond the bounds of the button, even though I have specified height=wrap_content in the TableLayout containing the buttons.
It appears fine in the Layout tab in eclipse, and only appears vertical in the emulator (not tried on target hardware)
getPaddingLeft for one of the buttons returns 11 at various points in the code. Not sure where it gets that from, but the spacing looks bigger than that anyway. I did have three buttons and took one away, but the problem existed with both two and three buttons.
My layout is:
<?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="fill_parent">
<TextView
android:id="#+id/map_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingTop="8px"
android:paddingBottom="8px"
android:gravity="center"
android:textColor="#color/header_foreground"
android:background="#color/header_background"
android:text="#string/map_header"/>
<TableLayout
android:id="#+id/map_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingTop="4px"
android:paddingLeft="2px"
android:paddingRight="2px"
android:stretchColumns="*"
android:textColor="#color/footer_foreground"
android:background="#color/footer_background">
<TableRow>
<Button
android:id="#+id/map_infobutton"
android:layout_width="0px"
android:layout_weight="1"
android:text="#string/map_infobutton" />
<Button
android:id="#+id/map_selectbutton"
android:layout_width="0px"
android:layout_weight="1"
android:text="#string/map_selectbutton" />
</TableRow>
</TableLayout>
<LinearLayout
android:id="#+id/map_selectiondetails"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/map_footer"
android:orientation="horizontal"
android:gravity="center"
android:textColor="#color/main_foreground"
android:background="#color/main_background" >
<TextView
android:id="#+id/map_selectionname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectiondistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
</LinearLayout>
<SurfaceView
android:id="#+id/map_map"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_above="#id/map_selectiondetails"
android:layout_below="#id/map_header"
android:clickable="true"/>
</RelativeLayout>
Any ideas? Also if you have any comments on how I'm creating the layout, as I'm new to this and it seems like there are a lot of options available, but I'm trying to make it as simple as possible.

I had a similar problem.
I see that you have multiple buttons that you want to have the same width, so you specify the button's width as "0px" and the weight as "1". This is exactly what I did.
When I set the button text within the XML file, things look fine. However, I have one button that changes is text depending on whether a process is running or not. In my case, it is similar to the situation where a button toggles from "Start..." to "Stop..." After the text changes, it prints vertically and only the top one or two letters of each button are shown.
After reading your post, it occurred to me that, perhaps, the text was being set before the button width had been determined, and then not updated once the button width changes according to the "weight".
I modified it such that in each button, it now reads:
android:layout_width="fill_parent" instead of "0px"
In theory, this should have the same effect. However, in practice, the button width is adjusted before the text is updated. The behaviour is now correct.
Rob