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.
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 am trying to understand the weight layout with this example.
It is definitely not a rocket science. However, this example making it...
The weightSum dictate how big the size is and
Then divide the layout based on layout_weight value for the view in LinearLayout.
In this example I have a layout, weighted with 5, that is then divided between two views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transactionRowBackground"
android:paddingBottom="5dp"
android:paddingTop="5dp" android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="2" >
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:gravity="top"
android:padding="5dp"
android:text="Test Title"
android:textColor="#color/textColor"
android:textSize="#dimen/subHeadingTextSize"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:gravity="top"
android:padding="5dp"
android:text="This is a test description"
android:textColor="#color/textColor"
android:textSize="#dimen/normalTextSize" />
</LinearLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:src="#drawable/ic_launcher"
android:layout_gravity="top"
android:contentDescription="" />
</LinearLayout>
The thing that I cannot understand is the bigger number I give to ImageViewer the smallest space it get from the parent. So how it is actually calculating the size for ImageView.
You can try with the above xml. If you change the layout weight of an ImageView to 1 , and child linearlayout to 4, that I believe makes more sense, then the opposite will occur.
ImageView will expend and child linearlayout will shrink. I thought the bigger the number is more you get some space.
Since on your outermost layout you have android:orientation="horizontal", I believe you want to vary the size/space taken by ImageView and internal LinearLayout in horizontal direction. For this case try using
android:layout_width="0dp"
on the layouts where you've put android:layout_weight. If your orientation of the outer layout was vertical, I would have used android:layout_height="0dp" in order for the weights to handle width/height of the layouts.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transactionRowBackground"
android:paddingBottom="5dp"
android:paddingTop="5dp" android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="2" >
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:gravity="top"
android:padding="5dp"
android:text="Test Title"
android:textColor="#color/textColor"
android:textSize="#dimen/subHeadingTextSize"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:gravity="top"
android:padding="5dp"
android:text="This is a test description"
android:textColor="#color/textColor"
android:textSize="#dimen/normalTextSize" />
</LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:src="#drawable/ic_launcher"
android:layout_gravity="top"
android:contentDescription="" />
</LinearLayout>
Reading over Android docs might help: Layout Weights
With layout_weight you can specify a size ratio between multiple views. E.g. you have a MapView and a table which should show some additional information to the map. The map should use 3/4 of the screen and table should use 1/4 of the screen. Then you will set the layout_weight of the map to 3 and the layout_weight of the table to 1.
To get it work you also have to set the height or width (depending on your orientation) to 0dp.
Example
If there are three text boxes and two of them declare a weight of 1, while the third one is given no weight (0), then remaining space is assigned as follows:
1st text box = 1/(1+1+0)
2nd text box = 1/(1+1+0)
3rd text box = 0/(1+1+0)
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);
My layout have 4 EditText views aligned vertically. but there is empty spacing after the last EditText. I want to align these views evenly so that the spacing b/w, before and after the views is same.
How to achieve this?
--nehatha
You can wrap every of your EditText to a FrameLayout with equal layout weight and set the Gravity of those frame layouts to center (or layout_gravity of EditTexts).
Edited:
Well, my initial solution leaves less space at top and bottom than between the edit texts. But this one works fine: simply add FrameLayout between each view and at top and bottom with layout_weight="1":
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="fill_parent"
>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
></FrameLayout>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
>
</FrameLayout>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
>
</FrameLayout>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
>
</FrameLayout>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
>
</FrameLayout>
</LinearLayout>
if you are using xml, then in all EditText add this tag,
android:layoutMargin = "5dip"
and in your parent layout (i ll assume its LinearLayout )
android:layoutHeight = "wrap_content"
Updated
adding hard coded values does't harm your code, since "dip" and "dp" are all units which get adapted to different screen resolutions. it has zero affect evn if the screen resolution changes..
chek this.. http://developer.android.com/resources/samples/MultiResolution/index.html
I just implemented a ListView inside a LinearLayout, but I need to define the height of the LinearLayout (it has to be 50% of the screen height).
<LinearLayout
android:id="#+id/widget34"
android:layout_width="300px"
android:layout_height="235px"
android:orientation="vertical"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
<ListView
android:id="#+id/lv_events"
android:textSize="18sp"
android:cacheColorHint="#00000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
</ListView>
</LinearLayout>
Is that possible?
I did something similar for a button and an EditText, but doesn't seem to work on Layouts.
This is my Code:
//capture the size of the devices screen
Display display = getWindowManager().getDefaultDisplay();
double width = display.getWidth();
//my EditText will be smaller than full screen (80%)
double doubleSize = (width/5)*4;
int editTextSize = (int) doubleSize;
//define the EditText
userName = (EditText) this.findViewById(R.id.userName);
password = (EditText) this.findViewById(R.id.password);
//set the size
userName.setWidth(editTextSize);
password.setWidth(editTextSize);
Set its layout_height="0dp"*, add a blank View beneath it (or blank ImageView or just a FrameLayout) with a layout_height also equal to 0dp, and set both Views to have a layout_weight="1"
This will stretch each View equally as it fills the screen. Since both have the same weight, each will take 50% of the screen.
*See adamp's comment for why that works and other really helpful tidbits.
This is easy to do in xml. Set your top container to be a LinearLayout and set the orientation attribute as you wish. Then inside of that place two linearlayouts that both have "fill parent" on width and height. Finally, set the weigth attribute of those two linearlayouts to 1.
This is my android:layout_height=50%
activity:
<?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="vertical" >
<LinearLayout
android:id="#+id/alipay_login"
style="#style/loginType"
android:background="#27b" >
</LinearLayout>
<LinearLayout
android:id="#+id/taobao_login"
style="#style/loginType"
android:background="#ed6d00" >
</LinearLayout>
</LinearLayout>
style:
<style name="loginType">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_weight">0.5</item>
<item name="android:orientation">vertical</item>
</style>
best way is use
layout_height="0dp"
layout_weight="0.5"
for example
<WebView
android:id="#+id/wvHelp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" />
<TextView
android:id="#+id/txtTEMP"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:text="TextView" />
WebView,TextView have 50% of the screen height
To make sure the height of a view is 50% of the screen then we can create two sub LinearLayouts in a LinearLayout. Each of the child LinearLayout should have "android:layout_weight" of 0.5 to cover half the screen
the parent LinearLAyout should have "android:orientation" set to vertical
.
.
here is code for your reference....
this code contains two buttons of height half the screen
<LinearLayout
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_weight="0.5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:padding="10dp"
android:layout_weight="0.5"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="button1"
android:id="#+id/button1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
/>
<Button
android:padding="10dp"
android:layout_weight="0.5"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="button2"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="0.5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
This kind of worked for me.
Though FAB doesn't float independently, but now it isn't getting pushed down.
Observe the weights given inside the LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/andsanddkasd">
<android.support.v7.widget.RecyclerView
android:id="#+id/sharedResourcesRecyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="bottom|right"
android:src="#android:drawable/ic_input_add"
android:layout_weight="1"/>
</LinearLayout>
Hope this helps :)
You should do something like that:
<LinearLayout
android:id="#+id/widget34"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
<ListView
android:id="#+id/lv_events"
android:textSize="18sp"
android:cacheColorHint="#00000000"
android:layout_height="1"
android:layout_width="fill_parent"
android:layout_weight="0dp"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true"
/>
</LinearLayout>
Also use dp instead px or read about it here.
it's so easy if you want divide your screen two part vertically ( top30% + bottom70%)
<LinearLayout
android:id="#+id/LinearLayoutTop"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2">
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutBottom"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</LinearLayout>
To achieve this feat, define a outer linear layout with a weightSum={amount of weight to distribute}.
it defines the maximum weight sum. If unspecified, the sum is computed by adding the layout_weight of all of the children. This can be used for instance to give a single child 50% of the total available space by giving it a layout_weight of 0.5 and setting the weightSum to 1.0.Another example would be set weightSum=2, and if the two children set layout_weight=1 then each would get 50% of the available space.
WeightSum is dependent on the amount of children in the parent layout.
You can use android:weightSum="2" on the parent layout combined with android:layout_height="1" on the child layout.
<LinearLayout
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:weightSum="2"
>
<ImageView
android:layout_height="1"
android:layout_width="wrap_content" />
</LinearLayout>