Android percentage width layout - android

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>

Related

LinearLayout with LayoutWeight not working

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

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

Remove Strange Space between RecyclerView Items

I am newbie to android development and learning it to my own. I have a very strange problem of having strange space that comes in between every item of my recycler view. I have the following:
My recycler view is vertical with grid view layout of 2 spans(columns). What I have been trying is:
Code for 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="wrap_content"
android:layout_marginLeft="#dimen/size_five"
android:layout_marginRight="#dimen/size_five"
android:layout_marginTop="#dimen/size_fifteen"
android:background="#color/blackColor"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">
<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="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/lowerline"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15"
android:background="#color/hotpinkColor"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/size_ten">
<TextView
android:id="#+id/album_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="left"
android:text="Album Title"
android:textColor="#color/whiteColor"
android:textSize="#dimen/size_eight"
android:textStyle="bold"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/size_ten"
android:layout_weight="5"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/downloader"
android:layout_width="#dimen/size_thirty_six"
android:layout_height="#dimen/size_thirty_six"
android:layout_centerInParent="true"
android:src="#drawable/donwloaderimager"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/setteraswall"
android:layout_width="#dimen/size_fourty"
android:layout_height="#dimen/size_fourty"
android:layout_centerInParent="true"
android:src="#drawable/setteras"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Screen Shot
The Black space is showing the extra strange space that I want to remove.
Change:
<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="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
to
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
That is change the height of the second parent linear layout to wrap_content

How to design below format in Android

I have a requirement in Android where I have to design four buttons as shown in Image below. I am not sure which Layout should I use and how to make it happen where 60-40% ratio will be resizable across all screens. Thankyou!
You can make your layout relative by using the weight attribute. I provided an example suiting your case. Note that the weight sum in this example is always 1.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6">
<Button
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#color/red"/>
<Button
android:id="#+id/button_2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#color/black"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4">
<Button
android:id="#+id/button_3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#color/green"/>
<Button
android:id="#+id/button_4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#color/orange"/>
</LinearLayout>
This is the result
After drag and drop, without any alterations to layout_width and layout_height
LinearLayout (Vertical)
LinearLayout (Horizontal) //layout_weight: 0.4
FrameLayout //layout_weight: 0.4
FrameLayout //layout_weight: 0.6
LinearLayout (Horizontal) //layout_weight: 0.6
FrameLayout //layout_weight: 0.6
FrameLayout //layout_weight: 0.4
NOTE: If you change match_parent to 0dp, you shall have the weights in the right places as in 0.6 for 60% and 0.4 for 40%.
Code:
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#d00000"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#9be412" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#12b9a3" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#b208a7" />
</LinearLayout>
</LinearLayout>
Using 3 Linear Layout. First Linear layout will be vertical and weigthSum=2 with 2 Linear Layout children and their weight be 1 and each child linear layout will be horizontal and have 2 buttons.
you should probably use percent support library to your project.
dependencies {
compile 'com.android.support:percent:xx.x.x'
}
<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">
<View
android:id="#+id/top_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#ff44aacc"
app:layout_heightPercent="20%"
app:layout_widthPercent="70%" />
<View
android:id="#+id/top_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/top_left"
android:background="#ffe40000"
app:layout_heightPercent="20%"
app:layout_widthPercent="30%" />
<View
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/top_left"
android:background="#ff00ff22"
app:layout_heightPercent="80%" />
</android.support.percent.PercentRelativeLayout>
This will help you..
<?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"
android:background="#android:color/black"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="60"
android:weightSum="100"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button1"
android:layout_weight="60"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button2"
android:layout_weight="40"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:weightSum="100"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button3"
android:layout_weight="40"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button4"
android:layout_weight="60"/>
</LinearLayout>
</LinearLayout>
Thanks...

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>

Categories

Resources