I want to achieve this
I am doing this
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/upper"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/wallet_dim_foreground_inverse_disabled_holo_dark">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:layout_below="#+id/upper"
android:background="#color/blueAccentColor">
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/upper"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/lower"
android:background="#color/wallet_dim_foreground_inverse_disabled_holo_dark">
</LinearLayout>
<LinearLayout
android:id="#+id/lower"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:background="#color/blueAccentColor"></LinearLayout>
</RelativeLayout>
You have to set the first Layout to be above the seconde.
With the code you provided you will have a top layout taking all space, and a bottom layout being below him. If you think about it you can see that it's logic that the result will be different.
If you remove android:layout_below="#+id/upper"and add android:layout_alignParentBottom="true"from the lower one, this Layout will be anchored to the bottom side, whichever the screen size is.
Than adding android:layout_above="#+id/lower" to the top Layout, he will take all space(thanks to android:layout_height="fill_parent") but it will stay above the lower Layout.
Here is the result you want :)
Related
I want to design a divided screen into two non equal parts in a landscape mode of screen. So, I thought automatically in using fragments. But the problem that I have encountered is that each fragment match the half of the screen. And that's not what I want exactly. What I want is a screen with two parts non equal in their width. I want something like this:
You can make use of the weight parameter.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3" />
</LinearLayout>
Please notice the weights used for the two LinearLayouts. The first one has a weight of 1 (it can occupy 1/4 th of the screen) and the second one 3 (it can occupy 3/4 th of the screen).
Just use this exact same concept for your fragments and maintain nay proportion as you wish.
Hope I could make myself clear.
Use weight parameter
<LinearLayout android:orientation="vertical" android:layout_height="fill_parent" android:layout_width="fill_parent">
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
<LinearLayout android:layout_weight="3" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
</LinearLayout>
set Linear layout weight to achieve this...
<?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="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>
I'm trying to split the screen in 2 areas, to the left an ImageView and to the right a ScrolView. I'm adding the ImageView and the content of the ScrollView programatically, so the xml file of the layout looks like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:id="#+id/scene_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="left"
>
</FrameLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_width="#dimen/scrollmenu_width"
android:layout_gravity="right"
>
<LinearLayout
android:id="#+id/scrollmenu"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_width="fill_parent"
>
</LinearLayout>
</ScrollView>
</FrameLayout>
What am I doing wrong? because I'm getting the ScrollView to the right, but the ImageView centered (relative to the screen) placed on the left of the screen. The resolution of the image exceeds the screen's resolution so I get black sp
I think you should make use of the LinearLayout and the weight parameter to solve this problem.
I have edited your snippet to give you an idea of how you should use it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<FrameLayout
android:id="#+id/scene_view"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:layout_weight=1>
</FrameLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight=1
android:layout_gravity="right">
<LinearLayout
android:id="#+id/scrollmenu"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_width="fill_parent">
</LinearLayout>
</ScrollView>
</FrameLayout>
I hope it helps..
I've searched for an answer for this all over but the solutions offered did not solve my problem.
I have a layout where I display some views (a few buttons and a background). To this i've added a custom control i've made extending linear layout. This control is displayed above the layout quite nicely.
What I wish to do is add an additional ImageView which is larger than this control but it will be in front of it.
edited: Sorry, I hope this will clear things up.
I have one large layout (Relative) for my activity, I would like to stack on this layout two additional views\layout so the final version will be the picture attached:
This is my layout - which stacks the imageview right on the menubar, and not over the others. Trying to put the FrameLayout elsewhere still didn't give me the wanted result.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="450dip">
<com.myproject.controls.SearchControl
android:id="#+id/scSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ExpandableListView android:id="#+id/lstItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scSearch"
android:layout_marginLeft="26dip"
/>
</RelativeLayout>
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.myproject.controls.MenubarMain
android:id="#+id/mbMenuBarMain"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
/>
<ImageView android:src="#drawable/myicon"
android:layout_width="200dip"
android:layout_height="200dip"
/>
</FrameLayout>
</LinearLayout>
Not sure it this will work or not cause I'm typing this up at work. But moral of the story here is get used to using RelativeLayout. You have much more control over your layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<com.myproject.controls.MenubarMain
android:id="#+id/mbMenuBarMain"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</com.myproject.controls.MenubarMain>
<com.myproject.controls.SearchControl
android:id="#+id/scSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
</com.myproject.controls.SearchControl>
<ExpandableListView android:id="#+id/lstItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scSearch"
android:layout_above="#id/mbMenuBarMain"
android:layout_paddingLeft="26dp"/>
<ImageView android:src="#drawable/myicon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#id/mbMenuBarMain"
android:layout_alignRight="#id/mbMenuBarMain"/>
</RelativeLayout>
I would like to make the following layout, see picture below, where the place of the EditText views stay correct positioned w.r.t. the arrows.
The layout below I've made with a RelativeLayout making use of margins, but this doesn't work when someone installs this app on a 540x960 resolution phone like the HTC sensations.
Thanks in advance for your help!
Valid XHTML http://www.tricky.dds.nl/gui.png.
Use a combination of LinearLayout and RelativeLayout. With LinearLayout you can create spaces on the screen that will be exactly alike on all devices. Let your top level container be a LinearLayout. For instance, to create the second row in the image you reffered to, do something like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
If I have 2 LinearLayouts split %50/%50 everything is fine. Weights are 1 and 1. As soon as I add a TextView inside the top LinearLayout, it stretches that layout. I use wrap_content as the documentation says I should when it comes to weights.
As you can see the red and green should be split evenly and text on grey background should be inside red box. Here is the code:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ff0000"
>
<TextView
android:text="#string/hello"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#cccccc"
android:textColor="#000000"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00ff00"
>
</LinearLayout>
Now if I switch to "fill parent" as follows it actually works but it creates another problem. Here is the code (so far so good):
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff0000"
>
<TextView
android:text="#string/hello"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#cccccc"
android:textColor="#000000"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00ff00"
>
</LinearLayout>
So looking at above we were forced to use fill_parent and we would think like we fixed the problem but here is the problem if we are using fill_parent (I took out the TextView just to show the problem, TextView doesn't make the problem go away anyways):
<?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"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#ff0000"
>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:background="#00ff00"
>
</LinearLayout>
</LinearLayout>
As you can see I assign the weights 3 (top red) and 2 (bottom green) but what actually happens is they get flipped: The red becomes 2 and bottom becomes 3. Just measure the pixels too see.
Here are the results of the 3 codes:
Just to be clear, every single time the layout was wrapped inside this (the top layout):
android:layout_width="fill_parent"
android:layout_height="fill_parent"
With XML version="1.0" encoding="utf-8" and proper namespace.
Combined child view weights should add up to 1..... Eg. .3, .3, .4 = 1, or 100%
Try adding a child view to the bottom layout.