Android Layout dynamic width - android

Is it possible to dynamically create Layouts which be 50% width, so 3rd one to be under first one? I have tried with android:layout_weight=".5", but it doesn't working.
EDIT: No proper answer by far

You can do the follwoing with a LinearLayout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:text="Takes up half the width" />
</LinearLayout>
By setting the weightSum on the parent, you're saying that the weights of the children should equal that amount. By setting the single child's weight to half of that, it'll take up half the space. Make sure to set the width of the child to 0 so it knows to use the weight value to calculate its space relative to its parent.

You could use the Percent Support Library:
add the library
compile 'com.android.support:percent:23.3.0'
Example:
<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.PercentFrameLayout>

Related

android:Why "layout_weight=1" makes the view align parent bottom in linearlayout? [duplicate]

This question already has answers here:
What does android:layout_weight mean?
(13 answers)
Closed 2 years ago.
The xml layout is like this:
<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="match_parent"
android:layout_weight="1">
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bottom"/>
</LinearLayout>
And it turns out that the textview will be placed to the bottom of its parent.I think layout_weight is used to allocate unusesd space and it's very common to use layout_weight with code like :
android:layout_width="0dp"
But in this case,the first layout asks to occupy all spaces with:
android:layout_width="match_parent"
android:layout_height="match_parent
So how does layout weight work here?
PS:I have read this question: What does android:layout_weight mean? but I don't think it accounts for this question.
layout_weight specifies how much of the extra space in the layout to be allocated to the View.
The first linearlayout has already taken the whole space with attribute match_parent,why setting layout_weight enables the second view to showup at the bottom ?
I believe this is not the common usage of layout_weight.Hope somebody point out my mistake.
When you use layout_weight attribute it is used to calculate the weightage of child views of the single parent.
As you have not mentioned weight of all other views it's behaving wrong.
layout_weight is useful when you want your child views to be certain percentage of the parent view.
for example,
in parent view you need to mention:
android:weightSum="1"
So your parent view will have total weight as 1, and in both of the views you need to mention the:
android:layout_weight=".9" and android:layout_weight=".1"
so the first view will take 90%, and second view will take 10% of the space.
To be more clear Ideally the sum of weights of all the childs should be equal to the weightsum mentioned in parent, to it work as expected.
**And as you have provided android:layout_width,android:layout_height` of the textview, this is the mistake as it will make issue in the weight.
So to use weight attribute correctly you need to give other specs as 0dp in order to weight to apply successfully.**
Note: When you use weight other specs like android:layout_width,
android:layout_height should be set to 0dp.
To understand it practically, why don't you play around with below
layout:
Just Try to change the weight of linear_layout, text_view and you will see, how it's supposed to works ideally:
<?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:weightSum="100" >
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="#android:color/holo_blue_bright" >
</LinearLayout>
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="90"
android:background="#android:color/white"
android:text="bottom"
android:textColor="#android:color/black" />
</LinearLayout>
If you want to place your components in separate boxes in layout ,you should use LinearLayout.
You can define the manner of boxes place with orientation vertical or horizental.
You can define their size easily with layout_weight.
look here:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id=#+id/parent_linear>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4">
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="bottom"/>
</LinearLayout>
parent_linear divides your layout in 2 parts(because you use 2 components) vertically. Now you can set weights to child's components width. So,(for TextView) you set android:layout_width="0dp" for its width and android:layout_weight="2" ..follow it for LinearLayout- .
The result of this is parent_layout divide itself into 6 parts (2+4=6),and allocates 4 parts to LinearLayout and 2 for TextView.

create a grid with cell heights and widths relative to screen size

I am new to Android programming and I would like to make a table/grid (generically speaking, not sure the best layout to use just yet). I want the table to fill the entire screen, but I want to have variable sized height and width for cells. For example I would like column one to be 1/3 of the display width, and column 2 to be 2/3 of the display width. Similarly, I would like some cells to be 1/4 of the screen height, and others to be 1/2 of the screen height, etc. What is the best layout to use for this? I am looking at GridLayout, LinearLayout, and TableLayout.
Tx!
You can do it easily using LinearLayout.
Set its layout_weight at 1.
Then, set the layout_weight of your first element at 0.3 and the layout_weight of your second at 0.66. Then it will give to your first element 1/3 or the screen and the rest to your second one.
Put for each element a width of 0dp. Then according to the weight your gave to your elements, your elements will spread on the screen.
Hope it helps.
There are two approaches to this:
1) If you know what all your items will be and can pre-define them.
I would use LinearLayouts inside LinearLayouts (parent orientation set to vertical, children set to horizontal). Then use weight_sum on the parent (e.g. 3) and layout_weight on the children (e.g. 2, 1). Set the children layout_width to 0dp.
2) If you are trying to represent a variable list of data
This is a little more complicated, but you might be best off using a RecyclerView with a GridLayoutManager which will allow you to programmatically set the span of the items based on type.
Edit:
Example of #1:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4">
<TextView
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:background="#abc"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#cda"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4">
<TextView
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:background="#af0"/>
<TextView
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:background="#ffa"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4">
<TextView
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="wrap_content"
android:background="#f00"/>
</LinearLayout>
</LinearLayout>
</ScrollView>

Android - Position Views Based on Percentages instead of Pixels

Is it possible to arrange the XML-based position of a TextView or related element based upon percentages of screen width and height rather than pixels? For example, could
android:layout-marginLeft="150dip"
be replaced with something like
android:layout-marginLeft="25%"?
If not, is it possible to do so programmatically?
The layout_margin attributes do not accept a percentage value.
You are looking for the LinearLayout attribute android:layout_weight which allows you to use percentages to define your layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".25" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".75" />
</LinearLayout>
In this example, the left TextView uses 25% of the screen and the right TextView 75%.
Use the PercentRelativeLayout (http://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html)
<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.PercentFrameLayout>

layout_weight meaning in the case of nested LinerLayout

In this layout definition:
<?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="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="7"
android:id="topLayout"
android:background="#android:color/holo_green_light">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_weight="2"
android:id="bottomLayout"
android:background="#android:color/holo_orange_light">
</LinearLayout>
</LinearLayout>
I don't understand why the named "bottomLayout" is higher than the topLayout. You can see a commented screenshot of the result in Android Studio.
First of all fix your xml and change layout_height to 0dp.This is because your are using weights to manage height and at the same time your are instructing it to fill parent.
Second, if you'll experiment by giving weights as 1 for each you'll notice that both the layouts are now divided equally.What I assume is that weight is the calculation of available space that's left after adding the view i.e The weight is calculated according to the available space.
Check in your preview by clicking on the outline for any overflowing of layouts out of screen, you might find that some part of your layout is out of screen. To get some clarity either use your weights according to percentage for example instead of giving in 2 and 7 try with 0.2 and 0.8, this will balance the weigts. Or you can use the attribute "weight_sum" to declare total available weight and then distribute it evenly, for example with weight_sum 100 you can follow a percentage based approach.
See this link for further clarity.
LinearLayout children are laid out in order they are declared.
layout_weight mechanism only distributes any remaining space to elements in proportion to their weight, it doesn't affect the ordering.
This is unlike some other environments where a "weight" parameter affects an item's position in a container.
If you make your code to like this then you can find solution
<LinearLayout
android:![enter image description here][1]orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="7"
android:id="topLayout"
android:background="#android:color/holo_green_light">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="3"
android:id="bottomLayout">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="b"
android:id="#+id/button4"
android:layout_gravity="center"
android:background="#android:color/holo_orange_light"/>
</LinearLayout>
if you want to use layout_weight in linearlayout then you have to add weightSum in parent LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:orientation="vertical"
>
<--70% of free space in parent LinearLayout-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"
>
</LinearLayout>
<--30% of free space in parent LinearLayout-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
>
</LinearLayout>
</LinearLayout>
in xml comments i wrote 70% of free space in parent LinearLayout
if you add some layout with exact height then both your linearlayouts will occupy 70% and 30% of left height in that particular linearlayout
for example if height of your parent linearlayout is 100dp
your child layouts will be drawn first one 70dp and the second one will be 30dp tall
but if you add some imageview with height 50dp then your first child linearlayout will be about 35dp tall and 15dp for second one

Question related to button in android

Is it possible to represent dimensions for layout_width or layout_height in percentage for button in android?? if not is there any alternative so that the effect will be same???
use android:layout_width="100dip" and android:layout_height="100dip"
i believe that the best practice on changing sizes is textAppearance attribute.
the doc about it is in here: http://developer.android.com/reference/android/widget/TextView.html#attr_android:textAppearance and here: http://developer.android.com/reference/android/R.attr.html#textAppearance
so if you don't really need static size and only want it to be relatively smaller or bigger, you should use this approach.
So, you want a view to occupy i.e. 30% of parent's space? You can do the trick using linear layout with dummy view occupying 70% of space (it can be done using weights). But best approach is just write your own layout for this purpose.
As per my knowledge you cannot specify size in percentage for any layout. But there is one layout introduced in support library example called PercentageRelativeLayout:
<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>
Another alternative solution is to use weightSum and layout_weight attribute for any parent and child layout. An example is shown below. This will work same as percentage and both child layouts will be alloted 50% width on screen.weightSum is used for parent layout and layout_weight is used for child layout.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bg"
android:orientation="horizontal"
android:tileMode="repeat" >
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bg2"
android:orientation="horizontal"
android:tileMode="repeat" >
</LinearLayout>
</LinearLayout>

Categories

Resources