Assign width to half available screen width declaratively

Question

Is it possible to assign a widget width to half the available screen width, and do it using declarative xml?

synic · Accepted Answer · 2017-05-30T21:52:37.617

285

If your widget is a Button:

<LinearLayout android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="2"
    android:orientation="horizontal">
    <Button android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="somebutton"/>

    <TextView android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
</LinearLayout>

I'm assuming you want your widget to take up one half, and another widget to take up the other half. The trick is using a LinearLayout, setting layout_width="fill_parent" on both widgets, and setting layout_weight to the same value on both widgets as well. If there are two widgets, both with the same weight, the LinearLayout will split the width between the two widgets.

edited May 30 '17 at 21:52

answered Apr 05 '10 at 22:57

synic

26,359
20
111
149

16

Better use android:layout_width="0dp" for both child elements, avoiding sizing them twice. – tomash Dec 21 '12 at 10:42
2

I never got why you had to declare the layout_width="0dp" – Andrew Oct 01 '13 at 03:06
You can also use on the later versions of Android as fillers. I think View is a little lighter than TextView if you just intend to use it as a filler. layout_width="0dp" is actually the recommended approach according to Android documentation. – Muz Oct 10 '13 at 10:02
1

@Andrew: because this way the layout renderer does not try to work with the layout_width of the component, it skips directly to sharing the extra width according to weights. – njzk2 Nov 28 '14 at 20:54
As a side note I just tried using layout_weight with a tableview, works great there as well!! – FujiRoyale Mar 27 '15 at 21:07
How would you extend this method to enable an nth width of the screen? – Sam Nov 08 '20 at 00:29

score 61 · Answer 2 · edited Jun 20 '20 at 09:12

Using constraints layout

Add a Guideline
Set the percentage to 50%
Constrain your view to the Guideline and the parent.

If you are having trouble changing it to a percentage, then see this answer.

XML

<?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="match_parent"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="81dp">

    <android.support.constraint.Guideline
        android:id="@+id/guideline8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <TextView
        android:id="@+id/textView6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    
</android.support.constraint.ConstraintLayout>

I'm new to android and almost every spinner answer I find for my questions uses RelativeLayout which i see in the Legacy section in Android Studio. Your answer is simple, fast and very user friendly. Thanks you very very much. — Claudiu Razlet, Sep 18 '20 at 21:21

score 19 · Answer 3 · answered Nov 18 '13 at 14:21

give width as 0dp to make sure its size is exactly as per its weight this will make sure that even if content of child views get bigger, they'll still be limited to exactly half(according to is weight)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1"
     >

    <Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="click me"
    android:layout_weight="0.5"/>


    <TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Hello World"
    android:layout_weight="0.5"/>
  </LinearLayout>

I think that android:layout_width="0dp" is correct but setting each weight to 0.5 and weitghtSum to their sum it's not needed. Seems like you just need to have the same weight on both child views.. — Redoman, Jan 28 '15 at 20:27

score 5 · Answer 4 · answered Sep 09 '15 at 14:10

Another way for single item in center, which fill half of screen:

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

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:visibility="invisible" />

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2" />

       <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:visibility="invisible" />

</LinearLayout>

score 2 · Answer 5 · answered Dec 14 '14 at 06:12

<LinearLayout 
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
    android:id="@+id/textD_Author"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="Author : "
    android:textColor="#0404B4"
    android:textSize="20sp" />
 <TextView
    android:id="@+id/textD_Tag"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="Edition : "
    android:textColor="#0404B4"
    android:textSize="20sp" />
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:weightSum="1" >
    <Button
        android:id="@+id/btbEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:text="Edit" />
    <Button
        android:id="@+id/btnDelete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:text="Delete" />
</LinearLayout>
</LinearLayout>

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. — gunr2171, Mar 30 '15 at 17:01

score 0 · Answer 6 · answered Jan 22 '23 at 15:33

0

For Layouts inside of Constraintlayout one can use

app:layout_constraintHeight_percent="x"

for vertical arrangements and

app:layout_constraintWidth_percent="y"

for horizontal arrangements where 0<=x,y<=1

answered Jan 22 '23 at 15:33

C.F.G

817
8
16

Assign width to half available screen width declaratively

6 Answers6

Using constraints layout

XML

Linked

Related