0

android:layout_weight beginner's question

and

Understanding weight and layout_weight, the bigger layout_weight is, more it shrinks in the layout.

both these links post a similar question, but those solutions have not helped me.

The xml code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.pranavhd.assign1.MainActivity">


<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="10">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal"></LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal"></LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

So if I put total weight as 10, and divide it in 7:3 ratio, I get this uneven layout. As it can be seen, the one with weight as 7, looks smaller than the one with 3. I also tried setting layout_height = 0px or layout_width = 0px. In this case, the layout was shrinked to 0.Where weight ratio are 7:3 enter image description here

With layout_height = 0 enter image description here

PLNech
  • 3,087
  • 1
  • 23
  • 52
pranavhd
  • 25
  • 7

2 Answers2

1

Step 1

Create a new project and open the xml layout file, drag on a LinearLayout (horizontal), and add two buttons to the linear layout.

You layout file should now look like the image on the right.

Notice how the buttons are bunched up to the left, this is where weights can be useful.

enter image description here

Step 2

Now switch over to the text view and give the LinearLayout (horizontal) a weightSum of 100.

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:weightSum="100">

Step 3

Now add a layout_weight attribute to each of the buttons, make the value of 50.

<Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="New Button"
       android:id="@+id/button"
       android:layout_weight="50"/>

Step 4

Now if you look at the display again your buttons should be spaced out evenly.

A way of thinking about how this works is if weightSum is thought of as 100 percent of the available space, and layout_weight is the percentage that the element will take up of that 100%.

Since we gave the buttons a weight of 50 each, both will take up 50% of the space.

We also could have made the weightSum a value of 1, and given the buttons a layout_weight of 0.5 for the same effect.

enter image description here

hope it is useful for u :)

Ali
  • 3,346
  • 4
  • 21
  • 56
0

to get the layout_weight effect, you have to let the layout_height with wrap_content

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:orientation="horizontal"></LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:orientation="horizontal"></LinearLayout>
Sofyan Thayf
  • 1,322
  • 2
  • 14
  • 26
  • so the rule is : 1)if outer layout vertical, then inside layouts heights should wrap content 2)if outer layout horizontal, then inside layouts widths should wrap content. And thanks – pranavhd Feb 11 '18 at 07:06