XeniaSis XeniaSis - 6 months ago 44
Android Question

Android layout_weight not working as intended

I'm trying to implement a layout which will be divided in 2 sublayouts. I want the left layout to be 1/4 of the screen, while the right one will be the remaining 3/4 of the screen. My goal is the following: if the user presses a button, then the left layout will get hidden and the right layout will take up the whole screen (not sure if this will work).

In order to achieve this, I tried using the following layout, which doesn't really seem to be as intended.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="@style/ToolbarTheme" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<LinearLayout
android:id="@+id/categoriesLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#000000"
android:orientation="vertical">

<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

<View
android:layout_width="2dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@android:color/holo_blue_light" />

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#FFFFFF">

<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>


As seen in the following picture, the problem is that the left
LinearLayout
is only as wide as it's content and not actually taking 1/4 of the screen.

enter image description here

Answer

your problem is because you set the width of its parent layout to wrap_content, and if you want to have a full screen width just set it to match_parent, so it will be like that:

<LinearLayout 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:orientation="vertical"
    tools:context="xeniasis.mymarket.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:elevation="4dp"
        android:padding="5dp"
        android:theme="@style/ToolbarTheme" />

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

    .
    .
    .
Comments