Android how to set the width of a view to a certain ratio of the width of the screen?

Question

I create 3 TextViews placed horizontally in a LinearLayout. Now, I want them to averagely take up 1/3 of the width of screen respectively. In another word, the width of any TextView is determined by the width of the screen and the ratio is always 1/3.

I wonder if there's any way to achieve this target with only modifying the xml file?

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView3" />

</LinearLayout>

Please refer to http://developer.android.com/guide/topics/ui/layout/linear.html#Weight for details — Alexander Zhak, Sep 02 '14 at 08:46

score 1 · Answer 1 · answered Sep 02 '14 at 08:43

Try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:text="TextView1"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:text="TextView2"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:text="TextView3"
        android:layout_weight="1" />

</LinearLayout>

instead `0px` it shouldn't be `0dp` [Difference between px, dp, dip and sp in Android?](http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android) — Kaushik, Sep 02 '14 at 09:02

score 1 · Answer 2 · answered Sep 02 '14 at 08:45

Try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="3" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="TextView1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="TextView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="TextView3" />

</LinearLayout>

0px is exactly 0dp , so I think this answer is completely same with mine. — suitianshi, Sep 02 '14 at 09:06
Yes, I started to answer when there was no response and both options are correct. — Yeray, Sep 02 '14 at 09:55

score 0 · Answer 3 · answered Sep 02 '14 at 08:48

You should did it programmatically :

TypedValue tv = new TypedValue();
TypedValue.complexToDimensionPixelSize(tv.data,activity.getResources().getDisplayMetrics());

Or with that :

DisplayMetrics displayMetrics = activity.getResources().getDisplayMetrics();
int px = Math.round(dp * (displayMetrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT));

score 0 · Answer 4 · answered Sep 02 '14 at 08:48

0

apply weight android:layout_weight="?" to every view in your xml file.

answered Sep 02 '14 at 08:48

shashi2459

581
1
6
15

score 0 · Answer 5 · answered Sep 02 '14 at 08:49

add a extra linear layout on the textview. Set the width of linear layout like android:layout_width = "0px" and the text via toandroid:layout_width="full_parent"

Do not forget to make on the parent linear layout to set a weigthsum and layout_weigth in childs

score 0 · Accepted Answer · answered Sep 02 '14 at 09:00

You only need to add one code line on each textview

android:layout_weight="0.3"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView1"
    android:gravity="center_horizontal"
    android:layout_weight="0.3"/>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView2"
    android:gravity="center_horizontal"
    android:layout_weight="0.3"/>

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView3"
    android:gravity="center_horizontal"
    android:layout_weight="0.3"/>

</LinearLayout>

enter image description here

Android how to set the width of a view to a certain ratio of the width of the screen?

6 Answers6