Question

I do have a view, which looks like this atm:

I want that first 3 black rows to fill out ~70% of screen. Doesnt matter what will be the screen size. I thought i can achieve it by assigning weights to Layouts, seems it is not so easy. As you can see I have achieved it with buttons, they are always stretch to width.

So, here is my code for this xml:

 <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="wrap_content"        
    android:orientation="vertical" 
    android:id="@+id/main"
    android:weightSum="10" //mean summary 100%

    > 
<LinearLayout
    android:id="@+id/lin1"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:orientation="horizontal"
    android:weightSum="3"    
    android:layout_weight="2.3"   //23% for each row 
     >
    <Button
        android:id="@+id/button1"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_marginRight="2dp"
        android:layout_weight="1" 
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Layout Normal" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_marginRight="2dp"
       android:layout_weight="1" 
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Pad2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1" 
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Pad3" />
</LinearLayout>

<LinearLayout
    android:id="@+id/lin2"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_marginTop="2dp"
    android:orientation="horizontal"
    android:weightSum="3" 
    android:layout_weight="2.3" >

    <Button
        android:id="@+id/button4"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_marginRight="2dp"
        android:layout_weight="1"
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Pad4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_marginRight="2dp"
        android:layout_weight="1"
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Pad5" />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Pad6" />
</LinearLayout>



<LinearLayout
    android:id="@+id/lin3"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_below="@id/lin2"
    android:orientation="horizontal"
    android:weightSum="3"
    android:layout_weight="2.3"  >

    <Button
        android:id="@+id/button7"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_marginRight="2dp"
        android:layout_weight="1"
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Pad7" />


    <Button
        android:id="@+id/button8"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_marginRight="2dp"
        android:layout_weight="1"
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Pad8" />

    <Button
        android:id="@+id/button9"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/greenbtn"
        android:onClick="onClick"
        android:text="Pad9" />
</LinearLayout>

    <LinearLayout
    android:id="@+id/lin5"
    android:layout_width="fill_parent"
    android:layout_below="@id/lin3"
    android:layout_height="60dp"
    android:layout_marginBottom="5dp"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:layout_weight="2.1"  > //21% for toggles

    <ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:onClick="onClick"
        android:textOff="Loop1 Off"
        android:textOn="Loop1 ON" />

    <ToggleButton
        android:id="@+id/toggleButton2"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:onClick="onClick"
        android:textOff="Loop2 Off"
        android:textOn="Loop2 ON" />

    <ToggleButton
        android:id="@+id/toggleButton3"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:onClick="onClick"
        android:textOff="Loop3 Off"
        android:textOn="Loop3 ON" />

    <ToggleButton
        android:id="@+id/toggleButton4"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:onClick="onClick"
        android:textOff="Loop4 Off"
        android:textOn="Loop4 ON" />
</LinearLayout>


<LinearLayout
    android:id="@+id/lin6"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
     android:layout_weight="1"       //10% for webview
     >

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="50dp"

    />
</LinearLayout>
</LinearLayout>

As you can see, in my idea, I have gave to each black row 23% of screen(23×3=69%), for toggles 21%, and for webview 10%.

Any help would be much appreciated.

Answer 1

@Daler you’re trying to balance the heights using weight, so you must set the layout_height to 0dp

also, it seems to me that you’re using way too many LinearLayouts, maybe you can eliminate a few to save in memory, processing time, responsiveness. Something like that I guess:

<Linear Layout - vertical - match_parent >

   // 0.269 * 3 = 0.7
   <linear layout 1 - horizontal weight = 0.269 layout_height=0dp> the three views </>
   <linear layout 2 - horizontal weight = 0.269 layout_height=0dp> the three views </>
   <linear layout 3 - horizontal weight = 0.269 layout_height=0dp> the three views </>
    // the other 30%
   <linear layout 4 - horizontal weight = 0.15 layout_height=0dp> the three views </>
   <linear layout 5 - horizontal weight = 0.15 layout_height=0dp> the three views </>


</end the top linear layout>

that is assuming that it’s 3 rows on the black area that should be 70%. That’s what I understood from your image.