I have a FrameLayout with many children. One of the children is a LinearLayout. I want the width of the LinearLayout to match_parent but about 90% so; which means I want to add some sort of paddingLeft/Right or margingLeft/Right. But when I add the padding or margin, it is not applied in the Graphical Layout. How do I do this correctly?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#color/red"
android:marginLeft="20dp"
android:marginRight="20dp"
android:orientation="vertical" >
....
you have
android:marginLeft="20dp"
android:marginRight="20dp"
instead change it to:
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
If it still doesnot work, put this layout inside another layout and set the margins to the other layout.
You worte following code, which is not correct
android:marginLeft="20dp"
android:marginRight="20dp"
Try This :-
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
**android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"**
android:background="#android:color/white"
android:orientation="vertical" >
</LinearLayout>
</FrameLayout>
Similarly you can give margin at Top and Bottom
Related
I'm reading a book about Android and I'm stuck here
Here are the instructions:
Use the Real UI project we recently created but let's start with a completely
clean sheet for the layout. Right-click the layout folder in the project
explorer. From the pop-up context sensitive options menu, choose New |
Layout resource file.
Make sure LinearLayout is selected for the Root element.
Name the file list_detail_layout then left-click OK.
In the Properties window, find the orientation property of the
LinearLayout, which is provided by default, and change it to horizontal.
Drag a LinearLayout(vertical) onto the design.
Now drag a LinearLayout(horizontal) onto the design
Select the first (vertical) LinearLayout within the root LinearLayout, find
its layout:weight property, and set it to 40. Set its background to a color of
your choice by finding and left-clicking the background property ellipses ...,
then left-clicking the Color tab and choosing a color.
Select the second (horizontal) LinearLayout within the root LinearLayout,
find its layout:weight property, and set it to 60. We now have two
clearly discernible areas of the screen: one taking up 40%, the other 60%,
as shown next:
Screen Shot
I follow all the steps but I still do not get the result of the image. This is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
If I change both layout_width values to "wrap_content" it works but I don't know why is not mentioned in the book...
The android:layout_weight attribute tells the LinearLayout how to distribute its children. If you give both widgets the same value, but that does not necessarily make them the same width on screen. To determine the width of its child views, LinearLayout uses a mixture of the layout_width and layout_weight parameters.
LinearLayout makes two passes to set the width of a view. In the first pass, LinearLayout looks at layout_width(or layout_height, for vertical orientation). If the value for layout_width for both of the LinearLayout is wrap_content, then each view will get only enough space to draw itself.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
I guess you are a beginner. I want to mention you that writing your own code for UI design is a better practice than drag and drop.
You have to use weightSum in the parent.
It should look like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent
android:weightSum="100">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
When you are using android:layout_weight make sure either you have android:weightSum set in the parent LinearLayout or set the android:layout_width = 0
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="60">
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
my name is Josh. I am trying to achieve the below layout in Android but I can't seem to split the inner layout to get the layout I want. Can someone help please.
This is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.firstapplication.myapplication.MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="Name"
android:ems="10"
android:id="#+id/editText" />
</LinearLayout>
</RelativeLayout>
The only problem I am having is, I can't figure out how to split the layout as shown in the picture.
You can solve this multiple ways. I don't know the requirement for your layout but you really don't need two LinearLayout to solve this. However, with what you have currently all you have to do is give your first LinearLayout an id, and set the height to wrap_content like so:
<LinearLayout
android:id="#+id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
then in your second layout set the positioning to be below your first one, set the height to wrap_content and remove layout_alignParentTop otherwise your second layout will overlap to your first. So you have something like this for the second:
<LinearLayout
android:layout_below="#id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
This will put the second layout underneath the first, but the sizing will vary unless the first layout is always a constant height.
If you know you always want a 70:30 ratio regardless of the first layout height, you can use layout_weights instead. I can add that in if that's what you're looking for instead.
To have a constant ratio, change your root layout to be LinearLayout instead of RelativeLayout then set the orientation to be vertical and a weightSum to 1.
Then set your first LinearLayout to be a layout_weight of 0.7 and your second LinearLayout to be a layout_weight of 0.3. Like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="vertical">
<LinearLayout
android:id="#+id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"></LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"></LinearLayout>
</LinearLayout>
Set the LinearLayout's height parameters accordingly to achieve the desired ratio between two layouts.
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="**XYZ dp**"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
How can I create layout like this properly?
I want LinearLayout 2 under ViewPager (not inside).
I know there are few ways to archieve this, but what is the best way?
You must set layout_weight your viewpager. You can use this xml copy paste.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></LinearLayout>
<ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></LinearLayout>
</LinearLayout>
Put all your controls in RelativeLayout control
use this in ViewPager control with this attribute
android:layout_below="#+id/linearlayout1"
android:layout_above="#+id/linearlayout2"
android:layout_alignParentBottom="true" on LinearLayout 2.
I would like the ScrollView to fill the entire screen and the Relative layout either centered in the ScrollView with its contents centered or filling the ScrollView and centering its contents. The scrollView is just there in case the app is run on a small screen.
I had achieved the effect with just the RelativeLayout as the root, but when I add the scrollView as a wrapper I can not get it to center, the RelativeLayout is just added to the top. I tried chaning layout_height of the RelativeLayout, but this doesn't work either and just gives me a warning.
The funny thing is it looks fine on the graphical layout within Eclipse.
<ScrollView 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=".MainActivity" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fillViewport="true"
android:gravity="center" >
....
After MUCH ado, this is what finally worked.
<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:gravity="center"
tools:context=".MainActivity" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
You could always put the RelativeLayout inside a LinearLayout which will allow it to be centered.
The problem you are having is there is no gravity attribute for ScrollView, so you need another Layout inside the ScrollView that does accept gravity.
<ScrollView 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=".MainActivity" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center">
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fillViewport="true"
android:gravity="center" >
</RelativeLayout>
</LinearLayout>
</ScrollView>
Try changing the height and width of both the ScrollView and the RelativeLayout to fill_parent. If this doesn't work, please post your whole xml file.
Put another rootview, either RelativeLayout or LinearLayout, inside the existing RelativeLayout and add those attributes to the new one.
android:layout_height="wrap_content"
android:layout_centerVertical="true"
It's a question about Android layouts. Here's what I eagerly want to get:
Dark-gray is a LinearLayout. Orange is layout X and then Green is a FrameLayout. I need to put Green outside its parent - layout X. The layout hierarchy described can't be changed. The only option is layout X - it could be whatever you want.
Any ideas?
Use -
android:clipChildren="false"
android:clipToPadding="false"
in every parent of your child view, then you put 'left margin' of your view to be negative,which will put your child view outside of parent view and will not even clip the view.
You can't put the Green part in Layout X, because it can not be drawn outside its parents.
So, you should implements a RelativeLayout or FrameLayout (root Layout) as the parents of all of these Views.
And Put the Green View as the childView of the root Layout.
<?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="200dp"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/layout_dark_grey"
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/layout_orange"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/layout_dark_grey"
android:orientation="vertical" >
</LinearLayout>
<RelativeLayout
android:id="#+id/layout_green"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="300dp" >
</RelativeLayout>
</RelativeLayout>
Just add android:clipChildren="false" to the parent layout.
<?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="horizontal"
android:clipChildren="false">
<LinearLayout
android:layout_marginLeft="-25dp"
android:background="#color/colorGray"
android:layout_width="100dp"
android:layout_height="100dp"/>
<LinearLayout
android:gravity="center|left"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#color/colorOrange">
<LinearLayout
android:layout_marginLeft="-25dp"
android:background="#color/colorGreen"
android:layout_width="50dp"
android:layout_height="50dp"></LinearLayout>
</LinearLayout>
</LinearLayout>