CODEWITHSUNDEEP
androidxmlandroid-linearlayout
Matthias Vanb
Matthias Vanb

Reputation: 943

xml centered textview to much to left

I try to create somekind of stroke on top of my screen which displays 4 things. An backbutton on the left, the level name in the center and scoreInfoOne and scoreInfoTwo on the right, but below each other. I use following code, but the strange thing is that the level name doesn't appear to be centered, the longer the value of scoreInfoTwo is, the more the level name is on the left. Any ideas? 

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="35dp"
        android:background="#25ab89"
        android:orientation="horizontal"
        android:weightSum="4" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/ivBackButton"
                android:layout_width="18dp"
                android:layout_height="18dp"
                android:src="@drawable/arrow" />
        </LinearLayout>

        <TextView
            android:id="@+id/tvScoreBoard"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="2"
            android:gravity="center"
            android:text="level"
            android:textColor="#ffffff"
            android:textSize="18dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="right"
            android:orientation="vertical"
            android:paddingRight="2dp" >

            <TextView
                android:id="@+id/tvScoreInfoOne"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="0/30"
                android:textColor="#ffffff"
                android:textSize="12dp" />

            <TextView
                android:id="@+id/tvScoreInfoTwo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="score:"
                android:textColor="#ffffff"
                android:textSize="12dp" >
            </TextView>
        </LinearLayout>

Upvotes: 0

Views: 80

Answers (2)

Matt
Matt

Reputation: 690

First off, you cannot use android:layout_gravity="anything" in a LinearLayout. For LinearLayouts you use the weights to define how much space you want to use. For what you are trying to do, I suggest using a RelativeLayout then you can just define where you want your TextView or other items by using android:layout_below="@+id/other_textview and there are lots of android:layout_[direction] to choose from, and you can use layout_gravity="center_horizontal" with these.

    <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="35dp"
            android:background="#25ab89">

                <ImageView
                    android:id="@+id/ivBackButton"
                    android:layout_width="18dp"
                    android:layout_height="18dp"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:src="@drawable/arrow" />

                <TextView
                    android:id="@+id/tvScoreBoard"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_below="@id/ivBackButton"
                    android:gravity="center"
                    android:text="level"
                    android:textColor="#ffffff"
                    android:textSize="18dp" />

                 <TextView
                    android:id="@+id/tvScoreInfoOne"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_below="@id/tvScoreBoard"
                    android:alignParentRight="true"
                    android:text="0/30"
                    android:textColor="#ffffff"
                    android:textSize="12dp" />

                <TextView
                    android:id="@+id/tvScoreInfoTwo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_below="@id/tvScoreInfoTwo"
                    android:alignParentRight="true"
                    android:text="score:"
                    android:textColor="#ffffff"
                    android:textSize="12dp" />
</RelativeLayout>

Upvotes: 1

Phil
Phil

Reputation: 36289

Your child views must set the layout_width to zero:

android:layout_width="0px"

So your layout would then look like:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="35dp"
    android:background="#25ab89"
    android:orientation="horizontal"
    android:weightSum="4" >

    <LinearLayout
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/ivBackButton"
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:src="@drawable/arrow" />
    </LinearLayout>

    <TextView
        android:id="@+id/tvScoreBoard"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="2"
        android:gravity="center"
        android:text="level"
        android:textColor="#ffffff"
        android:textSize="18dp" />

    <LinearLayout
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="right"
        android:orientation="vertical"
        android:paddingRight="2dp" >

        <TextView
            android:id="@+id/tvScoreInfoOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="0/30"
            android:textColor="#ffffff"
            android:textSize="12dp" />

        <TextView
            android:id="@+id/tvScoreInfoTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="score:"
            android:textColor="#ffffff"
            android:textSize="12dp" >
        </TextView>
</LinearLayout>

Upvotes: 1

Related Questions