In LinearLayout we can populate elements horizontally by using Layout_Weight which makes them occupy all the width and the width each take depends on their Layout_Weight value(or ratio). My question is how can I do the same in case of RelativeLayout. There is no attribute like Layout_Weight.
I am using a RelativeLayout in my project and it contains 4 buttons which need to be at the bottom of the screen and must fill the whole width. If I use hardcode Layout_Width="20dp" or something like that. It created a problem when I change the orientation from Portrait to Landscape or vice versa.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/feed_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/feed"
android:textColor="#FF000000" />
<Button
android:id="#+id/iwant_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/feed_button"
android:text="#string/iwant"
android:textColor="#FF000000" />
<Button
android:id="#+id/share_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/iwant_button"
android:text="#string/share"
android:textColor="#FF000000" />
<Button
android:id="#+id/profile_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/share_button"
android:text="#string/profile"
android:textColor="#FF000000" />
</RelativeLayout>
for making relative layout to take full width
android:layout_width="fill_parent"
to add it at the bottom
android:layout_alignParentBottom="true"
I think that there is no attribute like layout_weight in Relative layout .
But android has given functionality with Linear Layout . In that case, why would you want to go with Relative layout?
I think you know how to use layout_weight in Linear Layout.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
<Button
android:id="#+id/feed_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="feed"
android:textColor="#FF000000" />
<Button
android:id="#+id/iwant_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="iwant"
android:textColor="#FF000000" />
</LinearLayout>
I know you have compulsory use Relative Layout But if you put above code in your activity it show all buttons at bottom of display and If want to show those button layout at below of any other layout then use android:layout_below attributte in <LinearLayout > tag and use outer most layout as Relative Layout
Thanks
The only way to ensure the buttons are all equal with would be to put them in a LinearLayout that fills the area you want the buttons to cover like so:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<Button
android:id="#+id/feed_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/feed"
android:textColor="#FF000000" />
<Button
android:id="#+id/iwant_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_toRightOf="#id/feed_button"
android:text="#string/iwant"
android:textColor="#FF000000" />
<Button
android:id="#+id/share_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/share"
android:textColor="#FF000000" />
<Button
android:id="#+id/profile_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/profile"
android:textColor="#FF000000" />
</LinearLayout>
</RelativeLayout>
The LinearLayout will fill the entire width of the parent layout and will divide the buttons evenly based on their weight.
There is a very nifty trick if you have two layouts that you want to divide evenly in RelativeLayout. Create an "invisible" layout of 0x0 pixels, align it to the center of the parent view, then align the two layouts to the invisible layout relative to where you want them.
in relative layout we can achieve this dynamically.
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int height = metrics.heightPixels;
int width = metrics.widthPixels;
Button1.setWidth(width / 2);
Button2.setWidth(width / 2);
Related
I have a relative layout that sits at the bottom of screen
It has 3 elements horizontal
firstElement - fixed width
middleElement - width as fill_parent
last element - fixed width
MiddleElement is edit text with maxLines = 5. It starts with fixed width and then expands as typed.
With the layout below, I use center_vertical for left/right and they adjust accordingly to center.
My goal is to keep left/right elements to bottom while the edit text expands. I could not make it work,
Below is just one example of layout I tried. I have tried align_parentBottom, layout_gravity=bottom, gravity=bottom.
I could not make it work.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottomComponent"
android:background="#color/red"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="50dp">
<LinearLayout
android:background="#color/green_theme"
android:id="#+id/firstElement"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="center"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp">
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="20dp"
android:layout_height="20dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/firstImage" />
</LinearLayout>
</LinearLayout>
<EditText
android:id="#+id/middleElement"
android:layout_centerVertical="true"
android:layout_marginTop="7.5dp"
android:layout_marginBottom="7.5dp"
android:maxLines="5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="35dp"
android:layout_toLeftOf="#+id/lastElement"
android:layout_toRightOf="#+id/firstElement"
android:paddingLeft="6dp"
android:paddingRight="0dp"/>
<Button
android:id="#+id/lastElement"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="65dp"
android:layout_height="50dp"
android:textColor="#color/title_gray"
android:background="#color/green_theme"
android:textSize="18dp"
android:textAllCaps="false"
android:text="#string/lastElement" />
</RelativeLayout>
Ok this post solved my issue Android LinearLayout fill-the-middle
What I did not know that for linearlayout layout_weight=1 will work as fill_parent in relative layout
I'd like to have two adjacent views, a first that is a fixed size and a second that adjacent to the first that uses the remaining space.
I could easily do this with LinearLayout and weights, but I would like to avoid the "nested weights are bad for performance" problem.
Is there another layout type that can accomplish the equivalent? Please provide an example if so.
A RelativeLayout could do what you want, for example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Button"
android:background="#99cc00" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Button"
android:background="#0077cc"/>
</RelativeLayout>
The first Button will be 200dp in width and the second will stretch to fill the rest of the parent's remaining width.
You could also use a RelativeLayout to split two views in equal sizes to avoid having double weights on some layouts.
I believe this could be done with a RelativeLayout. Example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/button">
...
</LinearLayout>
</RelativeLayout>
You can try
<?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:orientation="horizontal" >
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="view with fixed size " />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="view with remaining space" />
</LinearLayout>
this is how weight works in LinearLayout:
At first, it will deduct the fixed dimension, then according to the weight, divide the available space, assign to the views which specify the weight attribute
Why the button on the middle dissapears? Instead of stretch to fill all the width of their parent? And whereas when I set layout_height = 0dp it doest with height and fills their parent?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
Since the linear layout orientation is vertical, only remaining height will be occupied if the layout_weight is "1", orientation is key here. if you want width to be shared, you might to change the orientation to "horizontal". keep in mind that your children then will be placed horizontally.
I would like to know if, with RelativeLayout, you can position 2 or three buttons side by side and their width is evenly set across the view. e.g. If the screen is 300 pixels the buttons will automatically adopt 100 pixels width each (assuming no padding etc).
I can't really provide code... Because I don't know how to do it =0)
I would put a linear layout inside your relative layout (assuming you need the relativelayout for something else) with orientation horizontal and give each button equal weight.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="right|center_vertical">
<!-- Some stuff above -->
<LinearLayout android:id="#+id/LinearLayout01" android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_alignParentLeft="true">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/btn"
android:text="left" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/btn1"
android:layout_weight="1"
android:text="center"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/btn2"
android:layout_weight="1"
android:text="right"/>
</LinearLayout>
<!-- Or below -->
</RelativeLayout>
As part of a larger UI, I have a RelativeLayout with three Views that I would like to have the same width. The three views are "stacked" on top of each other like this
ImageView
TextView
ImageView
I've tried various things such as setting the Views' android:layout_width to "wrap_content", setting android:layout_width to "0px" and android:layout_weight to "1" as suggested by this answer, and placing the Views in a LinearLayout with no success.
How can I get these three views to be the same width?
Relevant portion of the layout xml:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1">
<ImageView
android:layout_above="#string/window_text"
android:layout_below="#string/eighteen_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:layout_alignParentRight="true"
android:paddingBottom="5dp"
android:src="#drawable/line1"
android:id="#string/line_1_id"/>
<TextView
android:layout_above="#string/line_2_id"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="right"
android:layout_centerVertical="true"
android:textColor="#000000"
android:id="#string/window_text"/>
<ImageView
android:layout_above="#string/top_row_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="5dp"
android:paddingBottom="10dp"
android:src="#drawable/line1"
android:id="#string/line_2_id"/>
</RelativeLayout>
This is very simple, see below. The "magic" is simple. Set the parent to wrap_content, and the child views to fill parent. The smaller child views then always get set to the size of the largest child view.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/bottom_row"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/view1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="123" />
<Button
android:id="#+id/view2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="more text" />
<Button
android:id="#+id/view3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="even more text" />
</LinearLayout>
</RelativeLayout>
Did you try setting android:layout_width="fill_parent" for the two image views, just like you have it for the TextView? If you want the three views to be the width of the widest, you can wrap all three in a LinearLayout that has android:layout_width="wrap_content".
You can get the image views to fill the parent width by setting android:scaleType="" in the ImageView but if the text doesn't fill the screen width and you want the image width to match the text width exactly, you'll have to do it programatically by getting the text views width and then setting the imageview's width to that.