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"
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">
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
I designed a headerlayout(background is transparent) which is not in the scrollview and a scrollview which is in below of that header,in that scrollview have a layout with fixed height 1000dp and in the scrollview i added the views dynamically upto this its fine for me..But my problem is when i scroll the scrollview the background image also moving(background image height is 1550px) at the same time i want to change the background for the header as it is in scrollview background.....
i am not able to implement this please anyone help me in this designing..Below is my designing code..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/navbar"
android:background="#drawable/navbar_blooptransprant64"
/>
<ScrollView
android:layout_below="#+id/navbar"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1000dp"
android:background="#drawable/new_bg"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/outer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</ScrollView>
I'm new with Android (used to develop with Visual Studio...) and so far I have a doubt with the layouts:
What I want to do is a layout with a bar at the top (just to put some button or extra information) and a scroll view that fills the rest of the screen.
This is the way I am doing it so far:
<RelativeLayout 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=".Home" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white" >
<!-- I can put any button or text I want in here -->
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
android:background="#drawable/wallpaper" >
</ScrollView>
This is working as I expected, but my question is if I'm doing it the correct way or should I do it in a better way (most efficient).
Thanks in advance
Absolute positioning isn't recommended. For example, if you need to increase the height from 50dp to 100dp, you will have to change this value in several different places.
I know at least 2 ways to improve your layout.
1) Use features of RelativeLayout (android:layout_below="#id/linearLayout1" or its counterpart layout_above)
<RelativeLayout ...>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white">
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/linearLayout1"
android:fillViewport="true"
android:background="#drawable/wallpaper" >
</ScrollView>
</RelativeLayout>
2) Replace by LinearLayout (and use android:layout_weight="1.0")
<LinearLayout ...>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white">
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1.0"
android:fillViewport="true"
android:background="#drawable/wallpaper" >
</ScrollView>
</LinearLayout>
The line android:layout_height="0dip" may look strange. Actually you can use match_parent, but Eclipse IDE highlights such line and recommends to use 0dip if you have specified android:layout_weight.
Also I added android:fillViewport="true" to your scrollview. It indicates that the content inside the scrollview will expand to the full height if it is necessary, you can read about this property here