CODEWITHSUNDEEP
androidandroid-layout
Sam
Sam

Reputation: 104

How to equally divide two buttons horizontally without using layout_weight?

I have two Buttons called btnBeginner and btnAdvanced.
I have divided these two Buttons equally by using the layout_weight property. But the layout_weight is bad for performance.
Because of that, I would like to change my existing code - which is shown below.

  <LinearLayout
        android:id="@+id/lLayoutBeginAdv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btnBeginner"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@color/color_exam_btn_hlight"
            android:text="beginner"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textStyle="normal" />

        <Button
            android:id="@+id/btnAdvanced"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@color/color_exam_btn_normal"
            android:text="advanced"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textStyle="normal" />

    </LinearLayout>

enter image description here

Please help me to do the same without using the layout_weight property.

Upvotes: 1

Views: 3174

Answers (5)

Amol Gursali
Amol Gursali

Reputation: 82

If you are looking out to divide two buttons in single row using constraint layout then below is the example for you.

<?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="wrap_content"
   tools:context="com.com.schooldemo.example.MainActivity">


<Button
    android:id="@+id/buttonA"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="A"
    app:layout_constraintEnd_toStartOf="@+id/buttonD"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toStartOf="parent" />


<Button
    android:id="@+id/buttonD"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="D"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@+id/buttonA" />


 </android.support.constraint.ConstraintLayout>

Upvotes: 0

Burak Cakir
Burak Cakir

Reputation: 928

EDIT : PercentRelativeLayout was deprecated in API level 26.1.0. consider using ConstraintLayout and associated layouts instead.

Nested weights are bad for performance because :

Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.

So in your case, weight will not create the performance problem. But still if you want to divide the layout into two equal parts without using weight, you can use PercentRelativeLayout

Sample :

   android.support.percent.PercentRelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

       <Button
        android:id="@+id/btnBeginner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/color_exam_btn_hlight"
        android:text="beginner"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textStyle="normal"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%"
         />

    <Button
        android:id="@+id/btnAdvanced"    
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/color_exam_btn_normal"
        android:text="advanced"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textStyle="normal"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%"/>

</android.support.percent.PercentRelativeLayout>

Visit this Github repo for more information

Upvotes: 5

user6339740
user6339740

Reputation:

I'd place a dummy View in the center of a RelativeLayout.
Then set a Button to the right of it and another one to the left of it.

Something like so

<RelativeLayout>
    <!-- Dummy in the center -->
    <View
        android:id="@+id/dummy"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
    />
    <!-- Left Button -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:toLeftOf="@id/dummy"
        android:text="New Button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
    />
    <!-- Right Button -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:toRightOf="@id/dummy"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
    />
</RelativeLayout>

Upvotes: 3

Ritesh Mathur
Ritesh Mathur

Reputation: 829

If you don't want use layout_weight use Relative Layout` 

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button2"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>`

Upvotes: 0

KishuDroid
KishuDroid

Reputation: 5451

You should set layout_width = "0dp" for all the buttons in Linear Layout.

As layout_weight, superseding layout_width. So essentially the layout_width is getting ignored.

So basically you code should be like :

<LinearLayout
        android:id="@+id/lLayoutBeginAdv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="2">


        <Button
            android:id="@+id/btnBeginner"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            ...../>


        <Button
            android:id="@+id/btnAdvanced"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            ..... />

    </LinearLayout>

For more reference you should this link : layout_width and layout_weight - performance

Upvotes: 1

Related Questions