placing three android linear layouts - android

I want to place 3 linear layouts on same page of android.
Two besides each other and the other one below the two.
The view is in landscape mode and it should cover the whole screen.
How to do that in xml file?
I am not being able to post my code. Seems like its not working

You will do something like this
<LL orientation=vertical android:layout_height="fill_parent">
<LL orientation:horizontal>
<LL><!-- First of the two who are beside--></LL>
<LL><!-- Second of the two who are beside--></LL>
</LL>
<LL>
</LL>
</LL>

You can use RelativeLayout for that:
<?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">
<LinearLayout
android:id="#+id/layoutLeftTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true">
<!-- Content of the first layout -->
</LinearLayout>
<LinearLayout
android:id="#+id/layoutRightTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true">
<!-- Content of the second layout -->
</LinearLayout>
<LinearLayout
android:id="#+id/layoutBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<!-- Content of the third layout at bottom -->
</LinearLayout>
</RelativeLayout>

Related

Android LinearLayout as screen footer

I have a layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="#dimen/action_bar_default_height"
android:layout_marginTop="25dp"
android:background="#drawable/gradient"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageButton ... />
<TextView ... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView ... />
<ImageButton ... />
<ImageButton ... />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- All extra views are inflated here, if needed -->
</LinearLayout>
<!-- Main view -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<!-- HERE I WANT TO PUT A FOOTER -->
<LinearLayout
android:id="#+id/FOOTER"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- footer.xml WILL BE INFLATED HERE -->
</LinearLayout>
</LinearLayout>
The footer is another .xml file (footer.xml) that will be inflated in the FOOTER LinearLayout.
I tried to change FOOTER to RelativeLayout and add android:layout_alignParentBottom="true" to the footer.xml LinearLayout, but it did not work.
footer.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
...
</LinearLayout>
Any ideas?
Since all of your LinearLayout in you XML are "wrap_content", you need to set the weight of one of them to be "1" so that guy will actually takes all the possible space. I would give it to the "Main View". basically you should add android:layout_weight="1" to it.
Changing footer to relativelayout won't work. those "relative parent bottom" stuff works if the PARENT is relative layout. not the child.
Try adding
android:layout_weight="1"
To the LinearLayout you want to take up all of the extra vertical space (I assume this would be the one under your Main view comment?)
That will force the footer linear layout to the bottom of its parent.
Also, you may want to consider just using an include tag for your footer.xml layout instead of placing it as a child of your LinearLayout with id FOOTER.
So you should be able to remove the LinearLayout with id FOOTER altogether and replace it with an include tag.
Something like:
<include android:id="#+id/FOOTER" layout="#layout/footer" android:layout_width="fill_parent" android:layout_height="wrap_content"/>
I can't see any reason why changing the patent layout to relative wouldn't work. Try removing all of the XML except the footer and see if it works. Then add it back in bit by but

Nested Layouts inside Linear Layout (vertical) - Ensuring the last nested layout displays its contents

I have a linear-layout (vertically-oriented) that contains two nested linear layouts inside of it.
The first linear-layout has a background image that is applied dynamically based on the context o the particular activity. The image pretty much takes up the whole size of the screen
The second linear-layout contains two checkboxes (horizontally-oriented) that should be displayed at the bottom of the activity.
My question is, how can I ensure that the second linear-layout displays at the bottom of the screen and just shows the minimal amount it needs to, allowing the first linear-layout to display as much as its background image as possible? Currently it's being pushed off the screen by the first LL's bg image.
Thank you.
Using Weight you can do what you want:
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#FF0000"
android:layout_weight="1"
>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#00FF00"
android:layout_weight="1"
>
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox" />
<CheckBox
android:id="#+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox" />
</LinearLayout>
</LinearLayout>
You can use RelativeLayout as the outer layout instead of LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/bottomLayout"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
...
</LinearLayout>
<LinearLayout
android:id="#+id/topLayout"
android:layout_above="#id/bottomLayout"
android:layout_centerHorizontal="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
...
</LinearLayout>
</RelativeLayout>
<LinearLayout
... >
<LinearLayout
...
android:layout_height="0dp"
android:layout_weight="1"
>
...
</LinearLayout>
<LinearLayout
...
android:layout_height="wrap_content"
>
...
</LinearLayout>
</LinearLayout>
Notice on the weighted layout, the height is set to "0dp". With only one weighted, the weighted one will stretch to fit the rest of the available area.

Creating an Android Layout with 2 resizing views

In my layout, I need a header, a list-view, and a footer with a TextView. The TextView needs to be resizable to up to 5 lines. Think facebook chat, where you have the blue header with the name of your friend, the middle content pane, and a text box down below, that grows as you type stuff in:
[header] a fragment that takes up about 50dp
[content]
[content]
[content]
[content] something like a ViewGroup with a ListView in it
[content]
[content]
[content]
[footer] a ViewGroup that contains an EditText and Buttons
I've tried all sorts of different layout settings, but can't get it right. Either the footer takes up all the space, or the content covers the footer.
Here's what I have so far:
<LinearLayout ...>
<!-- Slot to put Header fragment in -->
<FrameLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Here's where the content goes. This is supposed to be a ListView
inserted as a fragment -->
<FrameLayout
android:id="#+id/content"
... />
<include
android:id="#+id/footer"
... />
</LinearLayout>
I left out the layout_width and layout_height values empty, because I don't know what to set them to.
UPDATES
Initially, I thought the problem was because my EditText was set to maxLines=5 and TextMultiline, but I tried removing everything but one button with a hardcoded height, and the insert still covered everything. I also tried setting <footer below="content"> but then content just covered footer
The problem was that the footer layout included is another RelativeLayout. The footer layout contains elements that set layout_alignParentBottom="true", which made the footer layout take up the entire screen. I have no idea why it would do that, but that's what happens.
For creating a UI like this create a layout
header.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="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:text="xyz"
android:textSize="10dp" />
</LinearLayout>
for footer:
footer.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="wrap_content"
android:orientation="horizontal" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:text="xyz"
android:textSize="10dp" />
</LinearLayout>
Create another layout that will contain listView as you said :
main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >
**<include layout="#layout/header.xml" android:layout_alignParentTop="true"/>**
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
>
</ListView>
**<include layout="#layout/footer.xml" android:layout_below="#+id/listview" android:layout_alignParentBottom="true"/>**
</RelativeLayout>
check this...I hope it helps. At the moment I have defined an array.xml in Values folder with some empty entries for ListView. You will have to handle it with code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:text="HEADER" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/chats"
android:layout_weight="1">
</ListView>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="5"
android:inputType="textMultiLine"
android:hint=" Please enter your Chat" />
</LinearLayout>

Android ScrollView and buttons at bottom of the screen

I want to implement this: A ScrollView that contains many elements (ImageViews, TextViews, EditTexts etc) and then after the ScrollView some buttons (which are custom ImageViews) that appear always exactly at the bottom of the screen.
If I use the android:fillViewport="true" attribute, then if the elements of the ScrollView are too big to fit in the screen size the buttons get invisible . If I use the android:Weight=1 attribute then the ScrollView gets only 50% of the Screen when the screen is big and it can fit (I want the buttons to take a small percentage, about 10%). If I set the android:Weight to bigger values then the buttons appear very small.
Please help! Maybe it is something simple that I overlooked but I’ve been banging my head for hours!
Just created and tested it. Looks like you want.
<?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">
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button2"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons">
<!--Scrollable content here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="test text"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
<?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="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hallo Welt"
/>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go next page"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
This worked for me. Give the scroll view a weight of 1. Put all the other widgets following the scroll view in a layout. The scroll view will grow enough to not block the rest.
Widgets in scroll view and rest at bottom
scrollview cannot fit the screen because you put it on a linear layout, so linear layout fit in the screen,
just try to make scrollview as root elemen on xml layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Here you can put some XML stuff and BOOM! your screen fit to scrollview -->
</LinearLayout>
</ScrollView>
If you do not want to use RelativeLayout, it is better to use LinearLayout. This method is better in my opinion.
Just set the layout_weight to one

How to achieve alignParentBottom="true" property in LinearLayout

If i want to set an image to the bottom of any screen then we can use android:layout_alignParentBottom="true" in relative layout. But because of some reason i am bound to use LinearLayout. There are other views (button, image button, listview) in the screen also. I want to place image at the bottom of my screen. Whatever may be the situation user wil be able to see this imageview at the bottom of the screen. How to achieve alignParentBottom="true" property in LinearLayout. See the folowing sample xml. I am using example1.xml but i want look and file that of example2.xml
example1.xml
<?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">
<TextView
android:id="#+id/textview1"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:background="#ffffff"
android:textColor="#000000"
android:text="I am sunil"
android:gravity="bottom"/>
</LinearLayout>
example2.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="fill_parent">
<TextView
android:id="#+id/textview1"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:background="#ffffff"
android:textColor="#000000"
android:text="I am sunil"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Thanks
Assuming that you have both a gallery view and a listview, you could add weight to one of them, meaning that it would grow as much as possible. If you give a weight to more than one view, they will share the extra space proportionally.
For instance, add to your gallery and listview android:layout_weight="1"
You can use gravity="bottom" for LinearLayout.
For more information about Gravity property look here
Here is sample code, Try this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom">
<TextView
android:id="#+id/textview1"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:background="#ffffff"
android:textColor="#000000"
android:text="I am sunil"
android:gravity="bottom"/>
</LinearLayout>
Use gravity="bottom" for LinearLayout instead of TextView.

Categories

Resources