I want to create a layout for four image button. With two buttons in a row, so that it looks like a cube in the layout. Because I want to support API Level 8 i cannot use grid layout, so I tried it with a combination of LinearLayout.
A root LinearLayout with horizontal orientation, this contains two linearlayout with vertical orientation. These contain my buttons, but i does not work as expected, only one row with two buttons is visible. Can someone help me, thanks
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_screen"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:paddingTop="30px">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btn_start_cam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startCamAction"
android:src="#drawable/photo_button" />
<ImageButton
android:id="#+id/btn_photo_lib"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startPhotoLibAction"
android:src="#drawable/library_blau" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btn_start_barcode"
android:onClick="startBarcodeAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/barcode_blau" />
<ImageButton
android:id="#+id/btn_start_qr_barcode"
android:onClick="startQRcodeAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/qr_code_blau" />
</LinearLayout>
</LinearLayout>
Set the height of the two child LinearLayouts to wrap_content. Otherwise the first LinearLayout will take up the whole height of the parent layout.
Related
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.
I have a LinearLayout that has 3 layouts at the top. (So the grey bar at the top is split into 3 pieces) Each will have a button in them. I only have 2 with buttons in them at the moment.
This is what it should look like (imagine another button at the top right) The top bar with the buttons in it is 60dp high:
And I want to have a LinearLayout under it. But when I add one and set it at
android:layout_marginTop="60dp"
Thinking it would just set itself under the top grey bar, it moves the middle layout over. The third layout is all the way off the screen.
Like so:
But I want it to look like this (sorry for my lack of MS Paint skills):
So how do I set it so the LinearLayout on the bottom doesn't interfere with the Layouts above it?
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:background="#drawable/background"
android:baselineAligned="true"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="120dp"
android:layout_height="60dp"
android:background="#drawable/topbar"
android:orientation="vertical" >
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/camerabuttonmew"
android:background="#null"
android:layout_margin="5dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="120dp"
android:layout_height="60dp"
android:background="#drawable/topbar"
android:orientation="vertical" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#null"
android:src="#drawable/homebuttonnew"
android:layout_margin="5dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/topbar" >
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="60dp" >
</LinearLayout>
Have you considered using a Relative Layout and with the images at the top and the LinearLayout under it. A helpful tutorial, http://www.higherpass.com/Android/Tutorials/Exploring-Android-Linearlayout-And-Relativelayout/
Create a vertical linear layout with two sub layouts, another horizontal linear layout for the buttons in the top row, and whatever layout you want for the area under the buttons. Right now your outer layout is a horizontal linear layout so every time you add subviews/layouts it pushes everything over.
<LinearLayout
android:id="#+id/outer_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
...
</LinearLayout>
<FrameLayout
android:id="#+id/everything_else"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
...
</FrameLayout>
</LinearLayout>
The everything else layout doesn't need to be a frame layout, i'm just using it as a placeholder.
Say I wanted to list buttons so that the last one was anchored to the bottom of the screen, how would I go about this. From my understanding, LinearLayout will give me the 'list' of buttons but it will be anchored to the top. RelativeLayout, on the other hand, will allow me to anchor to the bottom but each and every element will have to have a reference to the next element and the XML file will be in reverse order (so that references are valid).
How should I approach this?
EDIT: Apologies, this would be roughly what I would be looking for -
You can try adding an extra LinearLayout with a weight of 1 to take up all of the remaining space, and push the list of buttons to the bottom of the Activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/widget32"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
<Button
android:id="#+id/widget33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Sample XML is for a single button that gets pushed by a LinearLayout to the bottom of the Activity; root layout is Linear too.
i have a hard time understanding your question exactly.
But i assume that what you want is a horizontal list of buttons which is anchored to the bottom of the screen?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- put your other views in here -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/button_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="5dp"
android:text="cancel" />
<Button
android:id="#+id/button_ok"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="5dp"
android:text="ok" />
</LinearLayout>
</LinearLayout>
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
I'm trying to make an Android layout: 3 components inside a vertical LinearLayout. The center component is a ScrollView that contains a TextView. When the TextView contains a significant amount of text (more than can fit on the screen), the ScrollView grows all the way to the bottom of the screen, shows scrollbars, and pushes the last component, a LinearLayout with a Button inside, off the screen.
If the text inside the TextView inside the ScrollView is short enough, the button at the bottom of the screen is positioned perfectly.
The layout I'm trying to achieve is:
The XML for the layout I've written is:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:text="Title />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:textColor="#FFFFFF"
android:background="#444444"
android:padding="10dip" />
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button android:id="#+id/login_button"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:text="#string/next_button"/>
</LinearLayout>
</LinearLayout>
The scrollview is the second view object and is set to wrap_content, which is more than the screen.
I recommend a RelativeLayout. Top textview first with android:alignParentTop="true", the bottom LinearLayout next with android:alignParentBottom="true" and the scrollview listed last in the xml with the value android:alignBelow="#id/whatYouCallTheHeader.
This will align the bottom bar at the bottom of the screen, and the header at the top, no matter the size. Then the scrollview will have its own place, after the header and footer have been placed.
you should go for relativeLayout rather than LinearLayout. And you can use some properties like alignBelow and all.
Try adding a layout weight into the ScrollView ie.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
This worked for me in a situation almost identical to the one you're presenting but left me wondering why, because it is counter-intuitive that increasing the layout weight of a control from 0 (the default if you don't specify a layout_weight) to 1 should make a control which is already using too much space smaller.
I suspect the reason it works is that by not specifying a layout_weight you actually allow the layout to ignore the size of the scroll view relative to other controls and conversely if do specify one you give it permission to shrink it in proportion to the weights you assign.
![Fixed Header-Footer and scrollable Body layout ][1]
This is what you are looking for . Most of the app in android had this type of layout ,
a fixed header and footer and a scrollable body . The xml for this layout is
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:background="#5599DD"
android:layout_height="fill_parent">
<!-- Header goes here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:textSize="20sp"
android:layout_gravity="center"
android:text="Title" />
<!-- Body goes here -->
<ScrollView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:text="#string/lorem_ipsum"
android:textColor="#FFFFFF"
android:padding="10dip" />
</ScrollView>
<!-- footer goes here -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/login_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentRight="true"
android:text="Button"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>