Combine layout_weight with minWidth - android

I have a layout which I want to split into 2 views using layout_weight (1:2). But, I want the left view to have at least 400dp width.
For example, if the left view gets 420dp width by using weight then leave it, but if it has less than 400dp, than let it be 400dp and give the other view all the rest.
This is the layout I've tried and did not work for me.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="400dp"
android:background="#android:color/holo_blue_bright"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light"/>
</LinearLayout>
Please help,
Thanks!

I think this is what you need:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="400dp"
android:background="#android:color/holo_blue_bright"/>
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light"/>
</LinearLayout>
Basically, let the first layout take the needed space but no less than 400dp. The second one will take all the remaining. As with all the cases when weight is involved, be sure that the needed space (for width) for the 2 children is less than what the parent can offer, otherwise you will have things off screen.
Note: I tried it on phone layout, but 400dp was off screen in portrait so it seemed like the first layout was taking all the space, so please make sure to try it out on a device with more than 400dp in the direction you want your layout span :-)

Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:weightSum="3" >
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_bright"
android:minWidth="400dp" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light" />
</LinearLayout>

Related

Children views having equal height

I have a horizontal LinearLayout with two buttons with text inside.
The LinearLayout's and the buttons layout_height is wrap_content.
The text of one of the two buttons takes two lines unlike the other's which takes one line.
So at the end one of the buttons has a bigger height than the other which is something that I don't want.
I know how to solve this programmatically. So the reason I making this question is to know whether I can solve this through xml.
One possible solution is, for the button whose text is one line, set
layout_height="match_parent"
and it works fine.
But the problem here is that generally I don't know which button will occupy the biggest height.
In essence what I want to do is: having a LinearLayout with Views inside
I want to set the height of all the children Views to be equal to the height of the View which when has its content wrapped has the max height.
And the question is if this is possible through xml?
An example XML. Also I forgot to add that I already have 0dp in the widths.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/some_string" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/some_other_string" />
</LinearLayout>
I guess what you search is android:baselineAligned="false", this will avoid that the text are on the same baseline and the buttons will start at the same y position on the screen.
Here without android:baselineAligned="false":
And here with:
However if you also want that both buttons are equal sized try this layout example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="false">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="aaaaa"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="bbbbbbb bbbbbbbb bbbbbbbb bbbbbbbbbbbb bbbbbb"/>
</LinearLayout>
That will look like this:
Use this thing to set weigh Sum and weight layout
<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:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button 2" />
</LinearLayout>
</LinearLayout>

How to separate layouts with weightSum in android?

I seem to be having issues understanding weightSum and LayoutWidth. My code is below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3">
<LinearLayout
android:background="#cccccc"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:padding="20sp"
android:textSize="30sp"
android:gravity="center_horizontal"
android:text="Cheapest Fare Option"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:background="#666666"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
My understanding of this is the 1st layout will take up 1/3 of the space and 2nd layout will take 2/3 of the space, but the reverse is happening, i.e. 1st layout is taking 2/3 and 2nd layout is taking 1/3
Why is this happening? Trying hard to understand this.
Taking your android:orientation="vertical", you want to get this ratio vertically therefore your android:layout_height attribute should be 0dp for both the child LinearLayout.
Set -
android:layout_height="0dp"
for both the inner LinearLayout.
Alternatively if you want to obtain the ratio horizontally then use android:orientation="horizontal" set -
android:layout_width="0dp"
for both the inner LinearLayout.
The thing is when you want to achieve ratio then you don't set that particular dimension (width or height) to match parent. Rather set it to 0dp so that Android can handle it for you automatically.
<LinearLayout
android:background="#cccccc"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:padding="20sp"
android:textSize="30sp"
android:gravity="center_horizontal"
android:text="Cheapest Fare Option"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:background="#666666"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0dp">
</LinearLayout>

Forcing a view to take at least a percentage of its parent's height

I have a LinearLayout, the direct child of a ScrollView, with two children. The first child can be almost any height (it's an Image), but the second child will have content that is much larger than the height of the viewport. I tried using layout_weight to achieve this, but that only resulted in the image being set to something like 1dp and the second child taking the rest, because the weights are only assigned to the remaining space.
How do I force the image to take up at least 40% of the screen space?
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:src="#drawable/my_image" />
<LinearLayout
android:id="#+id/prediction_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="[really long text]" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You're missing android:adjustViewBounds="true" on your ImageView
Change your ImageView code to something like this
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:src="#drawable/my_image"
android:adjustViewBounds="true"
/>

ImageButton relative size and position

I am trying to scale an ImageButton to fit 50% of the screen width and center it horizontally, no matter what the original image or device screen sizes are. This image describes more accurately what is the final result I am looking for.
Any help would be very much appreciated. Thank you.
One way to achieve the effect you are looking for is to use the weight attribute of the children of a LinearLayout combined with 2 invisible Views that will act as 25% padding on either side. Seriously, though, your question could have been way better, please read the SO posting guidelines next time.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="20dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:visibility="invisible"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:layout_weight="0.5"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:visibility="invisible"/>
</LinearLayout>

Divide screen by percentage

I am trying to create a Relative layout in when it 3 views layed out vertically. The first view is text and supposed to take 10% of the screen. Second view is image and is supposed to take 50% of the screen. 3rd view is text and is supposed to take the remaining 40%.
The way I do it is that by adjusting the dimensions of the image manually and estimating that it is close to what I want by looking at it. I am sure this is not the right way. So how can I do it? Bascially how can I devide the screen percentage wise and can I do it with Relative layout
Thank you
You should use LinearLayout with android:weightSum.
use android:weightSum="100" on the root layout and give the android:layout_weight according to your requirement. And android:layout_height="0dp" for each View.
<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" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:contentDescription="#string/image"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40" />
</LinearLayout>
Hope this will help you.
You can do it using LinearLayout and android:layout_weight attribute:
<?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">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="5" />
<View
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="4" />
</LinearLayout>

Categories

Resources