LinearLayout with LayoutWeight not working - android

I have the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_brand"
android:weightSum="100">
<LinearLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:background="#color/color_white">
<View
android:layout_width="match_parent"
android:layout_height="10dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:background="#color/color_black"
android:layout_below="#id/top">
<View
android:layout_width="match_parent"
android:layout_height="10dp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:background="#color/color_white"
android:layout_below="#id/middle">
<View
android:layout_width="match_parent"
android:layout_height="10dp"/>
</LinearLayout>
</RelativeLayout>
I want a 40-20-40 split between the layouts, and I've tried everything, but nothing seems to work. I've tried adding an empty view in the linear layouts, I've given the views in the linear layout the weight, but nothing is working. Can someone point out what I'm doing wrong?

Change your main root parent to LinearLayout and give it a vertical orientation. RelativeLayout don't support weightsum, as you see in your code you are defining 0dp for height so you have to make your root view LinearLayout with vertical orientation to make weightage work.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_brand"
android:weightSum="100">
--------
</LinearLayout>

Try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/color_brand">
<LinearLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:background="#color/color_white"
>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:background="#color/color_black"
android:layout_below="#id/top"
>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:background="#color/color_white"
android:layout_below="#id/middle"
>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
/>
</LinearLayout>
Your parent is Relative layout that why doesn't work

android:weightSum is not an attribute of RelativeLayout it is an attribute of LinearLayout. So you can change the parent layout to LinearLayout or you can use PercentRelativeLayout
code snippet
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
app:layout_marginTopPercent="25%"
app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentRelativeLayout>

remove your Relative Layout OR change it to Linear with your orientation. It will work.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40">
<View
android:layout_width="match_parent"
android:layout_height="10dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:background="#color/colorBlack"
android:layout_below="#id/top">
<View
android:layout_width="match_parent"
android:layout_height="10dp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:layout_below="#id/middle">
<View
android:layout_width="match_parent"
android:layout_height="10dp"/>
</LinearLayout>
</LinearLayout>
Use this will solve your issue. And one more thing when your want to manage your layout according to weight then you have to use LINEAR LAYOUT because the weight concept is not working in RELATIVE LAYOUT.

WeightSum only work with the LinearLayout. So you have to change your parent RelativeLayout to LinearLayout.
So Change your this code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_brand"
android:weightSum="100">
to this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_brand"
android:weightSum="100"
android:orientation="vertical">
Note : add orientation in the LinearLayout.

You must have to take LinearLayout as parent for use weightSum because,RelativeLayout don't support weightSum.
Now you have to take LinearLayout instead of RelativeLayout.
You have to write your CODE like below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_brand"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:background="#color/color_white">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/top"
android:layout_weight="20"
android:background="#color/color_black">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/middle"
android:layout_weight="40"
android:background="#color/color_white">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
</LinearLayout>

Try This For 20-40-20
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="40"
android:background="#android:color/darker_gray">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="20"
android:background="#android:color/black"
android:layout_below="#id/top">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="40"
android:background="#android:color/darker_gray"
android:layout_below="#id/middle">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
</LinearLayout>
Output:
Try this for 40-20-40
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="10">
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="3"
android:background="#android:color/black"
android:layout_below="#id/top">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="4"
android:background="#android:color/darker_gray">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="3"
android:background="#android:color/black"
android:layout_below="#id/middle">
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
</LinearLayout>
Output

Related

Android Layout Weight Exactly Twice Of Others

I would like to simply divide a Linear Layout to 3 piece. I did something as in the code below. If I change the weight of second inner layout anything else than 2, it works. But if I change it to 2(two), the second inner layout doesn't appear in the design ?
<LinearLayout
android:id="#+id/Main"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#ffffff"
android:orientation="vertical"
android:gravity="center"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
>
<ImageView
android:id="#+id/HomePageIcon"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:adjustViewBounds="true" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingHorizontal="33dp"
android:paddingBottom="30dp"
>
</LinearLayout>
Use it like below height set to 0dp when orientation is vertical.
<LinearLayout
android:id="#+id/Main"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#ffffff"
android:orientation="vertical"
android:gravity="center"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorAccent"
android:layout_weight="1"
>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#color/background_dark"
android:gravity="center"
>
<ImageView
android:id="#+id/HomePageIcon"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:adjustViewBounds="true" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorPrimaryDark"
android:orientation="vertical"
android:paddingHorizontal="33dp"
android:paddingBottom="30dp"
>
</LinearLayout>
Use the Constraint Layout and forget the Linear and Relative layout.
Pls try this,
<LinearLayout
android:id="#+id/Main"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#ffffff"
android:orientation="vertical"
android:gravity="center"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:id="#+id/HomePageIcon"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:adjustViewBounds="true" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:paddingHorizontal="33dp"
android:paddingBottom="30dp"
>
</LinearLayout>
As you are using layout_weight that means your inner layouts will take the height as much as is available to it. So, in that case there is no need of using layout_height = "wrap_content" just change it to android:layout_height="0dp"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center">
<ImageView
android:id="#+id/HomePageIcon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="30dp"
android:paddingHorizontal="33dp"></LinearLayout>
</LinearLayout>
When you are using weight than use 0dp to android:layout_width or android:layout_height which you want for affect using weight. And its good to use android:weightSum in parent layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center">
<ImageView
android:id="#+id/HomePageIcon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="30dp"
android:paddingHorizontal="33dp"></LinearLayout>

LinearLayout position is shifting to up , When video is playing in Videoview

When the application is launched layout is fine. But when the video is playing. the Layout of the button is moving up.
How to resolve this?
When the application is launched?
When the video is playing the button is moving upwards
Below I had placed the layoutfile.xml which i had been working on.
<?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"
android:weightSum="1"
android:baselineAligned="false"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:background="#android:color/background_dark">
<ListView
android:id="#+id/VideoList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:foreground="#android:color/background_light" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1"
android:layout_weight="0.7">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:layout_gravity="center_vertical">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoView"
android:layout_gravity="center" />
</FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:text="New Button"
android:id="#+id/button"/>
</LinearLayout>
</LinearLayout>
You should make the LinearLayout(that contains FrameLayout and Button) height match_parent
No need for weight-sum, just make the layout_weights integers like 1 and 9 instead of 0.1 and 0.9
Also, fill_parent is deprecated, use match_parent instead.
You have a LinearLayout with single child. No need, just put ListView with same layout_params.
Lastly, your vertical LinearLayout on the right should have a height of match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">
<ListView
android:id="#+id/VideoList"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#android:color/darker_gray"
android:foreground="#android:color/background_light" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="7">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
android:layout_gravity="center_vertical">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoView"
android:layout_gravity="center" />
</FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="New Button"
android:id="#+id/button"/>
</LinearLayout>
</LinearLayout>
Edit: Fixed layout Params on LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">
<ListView
android:id="#+id/VideoList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#android:color/darker_gray"
android:foreground="#android:color/background_light" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="7">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
android:layout_gravity="center_vertical">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoView"
android:layout_gravity="center" />
</FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="New Button"
android:id="#+id/button"/>
</LinearLayout>
</LinearLayout>
I have done changes in listview "layout_width" and "layout_height" both should be match_parent ,Now it is working

How to embed a ViewPager and a LinearLayout in a Linearlayout?

The inner LinearLayout is gone although I have set its layout_height to be '100dp'.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/page_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp">
<SeekBar
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="match_parent"
android:id="#+id/seek_bar"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:id="#+id/toggle"/>
</LinearLayout>
</LinearLayout>
Edit: I want the orientation of inner layout to be horizontal. So I set its layout_height to be wrap_content. Now, it is almost done. However, something is wrong with SeekBar, the thumbnail is not central at the vertical bar.
<android.support.v4.view.ViewPager
android:id="#+id/page_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<SeekBar
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="match_parent"
android:id="#+id/seek_bar"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:id="#+id/toggle"/>
</LinearLayout>
Use the weight instead. I've modified the 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/page_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!-- app:layout_behavior="#string/appbar_scrolling_view_behavior" -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<SeekBar
android:id="#+id/seek_bar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/toggle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>

Dividing screen into two equal parts , can not set layout_weight

I guess question is silly, but I am missing something in this and want to understand.
I am dividing the screen into two equal parts. I know this can be done by setting weight. But I do not know why I can not set weight in Linear layout. Instead I am setting weightSum, but what I understood about weightSum is, it is space on screen left after setting width and height I guess.
here is what I am doing
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent"
android:id="#+id/main_panel">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/top"
android:weightSum="100">
<ListView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/list"
android:divider="#null"
android:dividerHeight="0dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/top"
android:weightSum="50"
android:layout_alignParentBottom="true"
android:id="#+id/ bottom">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/data"
android:orientation="vertical"
android:background="#D3D3D3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<View
android:id="#+id/drag_line"
android:layout_width="50dp"
android:visibility="visible"
android:background="#drawable/bar"
android:layout_gravity="center_horizontal|top"
android:layout_height="170dp"
android:src="#drawable/line" />
</FrameLayout>
</LinearLayout>
</RelativeLayout>
PS: I cannot set layout_weight property using android lollipop
Try with below code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent"
android:id="#+id/main_panel">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:id="#+id/top"
>
<ListView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/list"
android:divider="#null"
android:dividerHeight="0dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_below="#id/top"
android:layout_weight="1"
android:layout_alignParentBottom="true"
android:id="#+id/ bottom">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/data"
android:orientation="vertical"
android:background="#D3D3D3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<View
android:id="#+id/drag_line"
android:layout_width="50dp"
android:visibility="visible"
android:background="#drawable/bar"
android:layout_gravity="center_horizontal|top"
android:layout_height="170dp"
android:src="#drawable/line" />
</FrameLayout>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/color_in_palette"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCFFFF"
android:text="Button"
android:layout_weight="50"
android:textSize="0sp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="50">
<TextView
android:id="#+id/color_id"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="(204,255,255)"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge" />
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:numColumns="13"
android:layout_weight="48" >
</GridView>
</LinearLayout>
</LinearLayout>
In this button will occupy the half of the screen , and the other half is occupied by another Linear Layout , which contains a TextView & GridView
Problem:
You cant add a weightSum within a Relative layout that it is only bounded to linearlayout layout params itself.
solution:
add another linearlayout inside your relatie layout as a parent to both of the inner linear layout.
sample:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent"
android:id="#+id/main_panel">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/parent"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/top"
android:weightSum="0.5">
<ListView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/list"
android:divider="#null"
android:dividerHeight="0dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/top"
android:weightSum="0.5"
android:layout_alignParentBottom="true"
android:id="#+id/ bottom">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/data"
android:orientation="vertical"
android:background="#D3D3D3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<View
android:id="#+id/drag_line"
android:layout_width="50dp"
android:visibility="visible"
android:background="#drawable/bar"
android:layout_gravity="center_horizontal|top"
android:layout_height="170dp"
android:src="#drawable/line" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Weightsum is property used by parent to find the total weight sum by its children.This property is only applicable to LinearLayout. Its childrens should specify its weight with width or height as 0dp. You can find the tutorial here. So your layout.xml will be
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
android:weightSum="100" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_weight="50"
android:divider="#null"
android:dividerHeight="0dp" />
<FrameLayout
android:id="#+id/data"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#D3D3D3"
android:orientation="vertical" >
<View
android:id="#+id/drag_line"
android:layout_width="50dp"
android:layout_height="170dp"
android:layout_gravity="center_horizontal|top"
android:visibility="visible" />
</FrameLayout>
</LinearLayout>
Get Root attribute always be <Relative> and with in that write your remaining XML code.
e.g.
<?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="0dp"
android:layout_weight="1"
android:background="#color/black">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white">
</LinearLayout>
</LinearLayout>
//Replace above XML code by...
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/black">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white">
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Android percentage width layout

I need to set the width of my view as 50% of the width of the screen and then center this view horizontally while potentially having 1 or more buttons which can appear attached to the left or the right side of the screen.
I'm using a relative layout so that I can place a linear layout with weights to get my 50% centered while placing any buttons on top of that LL attached to the left or right edge of the RL. However this layout is missing the blue middle bar. If I set the middle view layout_weight to 1 I get 3 equal sized bars.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp">
<LinearLayout
android:id="#+id/stupid_android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:layout_weight="1" />
<View
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#0000FF"
android:layout_weight="2" />
<View
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#00FF00"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
You should set view's width to 0dip
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp">
<LinearLayout
android:id="#+id/stupid_android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="0dip"
android:layout_height="match_parent"
android:background="#FF0000"
android:layout_weight="1" />
<View
android:layout_width="0dip"
android:layout_height="match_parent"
android:background="#0000FF"
android:layout_weight="2" />
<View
android:layout_width="0dip"
android:layout_height="match_parent"
android:background="#00FF00"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
You can achieve this with the new percent library:
https://developer.android.com/tools/support-library/features.html#percent
by doing something like this:
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="48dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#FF0000"
app:layout_widthPercent="25%" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#0000FF"
android:centerHorizontal="true"
app:layout_marginLeftPercent="25%"
app:layout_widthPercent="50%" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:alignParentRight="true"
android:background="#00FF00"
app:layout_marginLeftPercent="75%"
app:layout_widthPercent="25%" />
</android.support.percent.PercentRelativeLayout>
Use new percentage support library.
compile 'com.android.support:percent:24.0.0'
Example :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
>
<View
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FF0000"
app:layout_widthPercent="33%" />
<View
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#0000FF"
app:layout_marginLeftPercent="33%"
app:layout_widthPercent="33%" />
<View
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00FF00"
app:layout_marginLeftPercent="66%"
app:layout_widthPercent="33%" />
</android.support.percent.PercentRelativeLayout>
</LinearLayout>
For more Info Android Doc
*For Sample & Tutorial * Tutorial1 Tutorial2 Tutorial3
If I understand correctly, you need this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp">
<LinearLayout
android:id="#+id/stupid_android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:layout_weight="1" ></View>
<View
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#0000FF"
android:layout_weight="1.5" ></View>
<View
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#00FF00"
android:layout_weight="1.5" ></View>
</LinearLayout>
</RelativeLayout>

Categories

Resources