Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

LinearLayout with two children of equal width

I'm having some issues getting two children of a LinearLayout to have the same width. This is what I am getting:

screenshot

And here is my layout xml for the grey box:

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2"
    android:background="@color/medium_grey"
    >

    <ImageView 
        android:id="@+id/profile_photo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@drawable/placeholder_profile_photo"
        android:scaleType="fitCenter"
        android:contentDescription="@string/blank"
        android:layout_weight="1"
        />

    <LinearLayout 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:background="@color/alert"
        >

        <TextView
            android:id="@+id/profile_rate_header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Rate User"
            />

        <LinearLayout 
            android:id="@+id/profile_action_rate_user"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:gravity="center"
            >

            <ImageView 
                android:id="@+id/profile_action_rate_up"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/user_rate_up"
                />

            <ImageView 
                android:id="@+id/profile_action_rate_down"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/user_rate_down"
                />

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

I was assuming that setting the layout_weight of the children of the root LinearLayout along with a weightSum and width of 0dp would produce the desired effect (image being the same size as the pink 'rate user' section) however this isn't the case.

What am I missing?

Edit:

This is what I want it to look like

enter image description here

The photo and the pink linear layout should be equal widths.

like image 691
boz Avatar asked Jul 08 '13 15:07

boz


People also ask

Is it possible to evenly distribute buttons across the width of an android LinearLayout?

I suggest you use LinearLayout's weightSum attribute. Adding the tag android:weightSum="3" to your LinearLayout's xml declaration and then android:layout_weight="1" to your Buttons will result in the 3 buttons being evenly distributed.

What is the difference between LinearLayout and Framelayout?

Frame Layout: This is designed to block out an area on the screen to display a single item. Linear Layout: A layout that arranges its children in a single column or a single row. Relative Layout: This layout is a view group that displays child views in relative positions.

How do you do a vertical LinearLayout?

To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1" .

How do you get a child of LinearLayout?

You can do like this. ViewGroup layoutCont= (ViewGroup) findViewById(R. id. linearLayout); getAllChildElements(layoutCont); public static final void getAllChildElements(ViewGroup layoutCont) { if (layoutCont == null) return; final int mCount = layoutCont.


2 Answers

android:weightSum="2" should be on the parent of the two children ImageViews, not on the upper parent. Or else try to set weightsas 0.5 and see if it works.

Also, the widths of the two image views should be android:layout_width="0dp" when using weights like this.

Next, scale up your images to fill space. Details here.

like image 107
SK9 Avatar answered Oct 17 '22 12:10

SK9


Equally weighted children

To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1". Refer : http://developer.android.com/guide/topics/ui/layout/linear.html

like image 31
dreamdeveloper Avatar answered Oct 17 '22 12:10

dreamdeveloper