Android set layout_weight to width in vertical LinearLayout - android

I got a vertical LinearLayout, in which there's a button. I want to make this button 70% of the width of the LinearLayout and center it.
I've tried setting layout_weight to 0.7 while setting the layout_width to 0, but since it's a vertical LinearLayout, it doesn't affect the width, but can only affect the height.
How can I change the weight of the width in a vertical layout? Will I must add a nesting horizontal LinearLayout just for the button so I can set its weight?

Try using new PercentRelativeLayout, and you can achieve what you are trying without nested layouts.
include this in your dependencies :com.android.support:percent:25.1.0
And then in your code
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
<Button
app:layout_widthPercent="70%"
android:layout_height="wrap_content"/>
...
</android.support.percent.PercentRelativeLayout>

linearLayout -> orientation = horizontal
button -> layout width = 0dp
-> layout height = wrap_content
-> layout weight = 1

Please check this out.
<?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="0.7"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/yourRequiredButton"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="#+id/container"
android:layout_weight="0.3"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>

Try this:
<LinearLayout>
<Space android:layout_weight=0.15/>
<Button android:layout_weight=0.7/>
<Space android:layout_weight=0.15/>
</LinearLayout>
https://developer.android.com/reference/android/widget/Space.html
I also suggest you put the values in dimens.xml file.

Related

Android: how to show a TextView below a ScrollView layout?

I am trying to show a rectangular box with a centered TextView as a footer bar at the bottom of a UI (just like the toolbar/actionbar is shown as a header bar above the main UI). The TextView should be below the main UI (which is a ScrollView) and the TextView doesn't show at all. Everything else shows correctly. Any ideas on what I'm doing wrong?
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:focusableInTouchMode="true"
tools:context=".CardViewActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" >
</include>
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
...>
...
</ScrollView>
<TextView
android:id="#+id/skychilltext2"
android:text="skychill"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"
android:textColor="#FFFFFF"
android:background="#color/colorPrimary"
android:textAppearance="?android:attr/textAppearanceMedium"
android:clickable="true" />
</LinearLayout>
because you set the height to match_parent, it will take up all the room. I'm not sure exactly how you want it, but you could add a weight to it to expand to as much room as possible.
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
...>
...
</ScrollView>
Weight specifies how much percentage of the screen the view will take, so if every view has the same weight they will equally take up the same amount of space on the screen.
view 1 - weight 1
view 2 - weight 1
view 3 - weight 1
view 4 - weight 3 since this is weight 3 and all the weights above add up to
| 3, this view will take up exactly half the screen.
| the other ones will take 1/6 of the screen because (1+1+1+3 = 6)
Try below
<RelativeLayout
(...)>
<LinearLayout android:id="#+id/ll1"
android:layout_alignParentTop="true"
(...)/>
<TextView android:id="#+id/button"
android:layout_alignParentBottom="true"
(...)/>
<ScrollView
android:layout_above="#id/button"
android:layout_below="#id/ll1"
(...)/>
</RelativeLayout>
For reference see here How to make a static button under a ScrollView? or How can I place new items under scrollview
The problem is android:layout_height="match_parent" in ScrollView. It directs LinearLayout to give all the height to it, leaving nothing for TextView.
Change ScrollView:
android:layout_height="wrap_content"
android:layout_weight="1"
Change TextView:
android:layout_weight="0"
set android:layout:weight on TextView.
You need weightsum to scale layout. Your code set match_parent for height scrollView
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...>
...

Android - How do I make the button taller in a linear layout?

I have a linear layout inside a relative layout, and I want to make the buttons 'taller' to fit the height of the linear layout.
I tried adding padding, as you can see in the screenshot, the layout is 'taller' but the buttons are not. I tried 'fill_parent', 'match_parent' but it didn't make a difference. How do I make the buttons expand in height?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/timerLayout">
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="48dp"
android:text="#string/chronometer"
android:textSize="50sp" />
<LinearLayout
android:id="#+id/buttonLayout"
android:orientation="horizontal"
android:paddingLeft="4.0dp"
android:paddingTop="50.0dp"
android:paddingRight="4.0dp"
android:paddingBottom="4.0dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnReset"
android:layout_width="0.0dp"
android:layout_height="fill_parent"
android:drawableLeft="#drawable/ic_restore_white_24dp"
android:drawableStart="#drawable/ic_restore_white_24dp"
android:text="#string/pause_btn"
android:layout_weight="1.5" />
<Button
android:id="#+id/btnStart"
android:layout_width="0.0dp"
android:layout_height="fill_parent"
android:text="#string/start_btn"
android:drawableLeft="#android:drawable/ic_media_play"
android:drawableStart="#android:drawable/ic_media_play"
android:layout_weight="1.5" />
<Button
android:id="#+id/btnSave"
android:layout_width="0.0dp"
android:layout_height="fill_parent"
android:text="#string/save_btn"
android:drawableLeft="#drawable/ic_save_white_24dp"
android:drawableStart="#drawable/ic_save_white_24dp"
android:layout_weight="1.0" />
</LinearLayout>
The extra space you are seeing is from the padding values in your linear layout, and your buttons are already filling the parent linear layout. But your linear layout has specified the following.
android:layout_height="wrap_content"
If you want to see buttons with a larger height, change the height value for your linear layout to something else like:
android:layout_height="300dp"
your linearlayout says height:wrap_content
so the child elements will takeup only as much space as specified.
Try giving either minHeight for linearlayout or simply remove linearlayout and in your buttons specifiy "alignparentbottom = true".
For left-most button give alignparentStart = true.
Take a look at your xml layout file very closely
<LinearLayout
android:id="#+id/buttonLayout"
android:orientation="horizontal"
android:paddingLeft="4.0dp"
android:paddingTop="50.0dp" //this guy
android:paddingRight="4.0dp"
android:paddingBottom="4.0dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
the android:paddingTop is the space on the top of every child in your LinearLayout so if you remove it the buttons will fit.

two views with match_parent in linear_layout in scrollview

Is it possible to have two views that are the same height of the activity screen inside of a linear_layout inside of a scrollview? I tried achieving this like so:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</ScrollView>
The only thing that appears one button with the height of the screen. The other button seems to have disappeared.
I suppose it is paradoxical to have two views to with the attribute match_parent.
However, I was hoping to get two views the same size of the available screen using xml, and having the scrollview make both views accessible. I am aware that it can be done via java, but I want an answer for xml.
In Linear Layout you have to define two things...
1 .android:orientation="vertical"
2 .android:weightSum="2"
weightSum is sum of all element in it's parent layout.It Enable you to define the proportion of width/height a element should take in a layout..
For further details go to weightSum
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/textView1"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2" >
<Button
android:id="#+id/but1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="but 1" />
<Button
android:id="#+id/but2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="but 1" />
</LinearLayout>
</ScrollView>
output
You cannot achieve this in XML only.
As android support multiple screen sizes, At runtime you need to check for each device , the height for each device can be calculated like this
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int height = size.y;
With above code you will get the height of screen and you need to set this height in dp to your view at runtime.
Do this in your activity for both the buttons:
// get view you want to resize
Button but1= (Button) findViewById(R.id.but1);
LinearLayout.LayoutParams listLayoutParams = new LinearLayout.LayoutParams(
height , LinearLayout.LayoutParams.MATCH_PARENT);
but1.setLayoutParams(listLayoutParams);

Custom Button Class not resizing based on layout_weight android

I have a CircularMeter class which is derived from Button. The problem is that it is not resizing even if the weight given is 0.5 (ie. half the vertical screen).
<LinearLayout
android:id="#+id/WidgetDataLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_weight="0.5"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<com.test.CircularMeter
android:id="#+id/cm1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal" />
</LinearLayout>
Any Ideas ?
You can take help from this example to make your circularmeter fill half of the vertical screen
eg.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="1">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.5"
android:background="#123456"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#123456"
android:text="#string/hello_world" />
</LinearLayout>
</LinearLayout>
There's no layout_weight in CircularMeter.
It's parent LinearLayout has both android:layout_alignParentTop="true" and android:layout_weight="0.5" which is not correct since layout_alignParentTop is a layout attribute for a RelativeLayout parent while android:layout_weightis an attribute for a LinearLayout parent. The layout XML does not show what is the parent layout actually is. android:layout_height="0dp" would make the layout invisible unless there really is a vertical LinearLayout as a parent.
Also note that layout_weight="0.5" won't make the view size half the screen. After doing first pass layout for a linear layout, the weight mechanism just distributes any remaining space in proportion of element weights. By default an element's weight is 0. So if you have just one element with non-zero weight, it will get all remaining space in its linear layout parent.

How to scale an Android layout object during runtime?

I want to set the width of a LinearLayout to half of the screen width dynamically in my UI initialization. I have a RelativeLayout wrapped around the LinearLayout, the hierarchy is the following:
<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/left_linear_layout"
android:layout_alignParentLeft="true"
android:layout_height="fill_parent"
android:layout_width="155dp" <!--want to set this to 1/2 screen width-->
android:orientation="vertical">
...
</LinearLayout>
<LinearLayout
android:id="#+id/right_linear_layout"
android:layout_alignParentRight="true"
android:layout_height="fill_parent"
android:layout_width="385dp"><!--want to set this relative to screen width as well-->
....
</LinearLayout>
</RelativeLayout>
Alternatively, can this problem be solved using View instead of Layout? Any suggestion is appreciated!
You can do this by using layout_weight, but you'll need to add some invisible views for padding. For instance the following would make your top panel half the screen width:
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/left_linear_layout"
android:layout_alignParentLeft="true"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:orientation="vertical"
>
...
</LinearLayout>
<!-- need this view to fill the other half of the screen -->
<View
android:id="#+id/spacer"
android:layout_toRightOf="#id/left_linear_layout"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
....
</RelativeLayout>
The amount each view will take up is layout_weight/total_layout_weight. In this case total_layout_weight = 1+1 = 2 and each view has a layout_weight of 1, so each view takes up 1/2 of the screen.
You could simply use a LinearLayout as your top-level layout, and then set the weight of the two child layouts.

Categories

Resources