Search code examples
androidxmlandroid-recyclerviewandroid-linearlayout

Button out of bound using LinearLayout


I tried to use LinearLayout in order to put 3 Buttons in one row. The left button (fixed size) should be aligned to left part of screen, right button (fixed size) to the right. Size of middle button should be variable and should fill out rest of space. Result of below stated code is, that the right button is out of bound and not seeable. Can anyone help me solving this issue?

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:clickable="true"
  android:focusable="true"
  android:focusableInTouchMode="true"
  android:orientation="horizontal"
  android:weightSum="1.0">

  <Button
    android:id="@id/LeftButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:elevation="9dp"
    android:focusable="true"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp"
    android:layout_weight="0.2"/>

  <Button
    android:id="@id/MiddleButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="15dp"
    android:paddingTop="18dp"
    android:layout_weight="0.6"/>

  <Button
    android:id="@id/RightButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.2"/>

</LinearLayout>

Solution

  • You should change the Middle Button width to 0dp this will scale it to fit the missing part.

    You can change you layout to:

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:focusable="true"
      android:focusableInTouchMode="true"
      android:orientation="horizontal">
    
      <Button
        android:id="@id/LeftButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:elevation="9dp"
        android:focusable="true"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"/>
    
      <Button
        android:id="@id/MiddleButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingLeft="15dp"
        android:paddingTop="18dp"
        android:layout_weight="1"/>
    
      <Button
        android:id="@id/RightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
    </LinearLayout>