CODEWITHSUNDEEP
android
Kalanamith
Kalanamith

Reputation: 20648

Right and Left align linear layouts placed inside a table row

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/homeTableLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

<TableRow
    android:id="@+id/homeFirstRow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dip" >

    <LinearLayout
        android:id="@+id/navigationLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginLeft="10dp"
        android:background="#669cb7"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btnCall"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_call_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnPicture"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_take_pictures_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnNavigate"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_navigate_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnedo"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_pod_text"
            android:textSize="15sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/distanceLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="#FFC58F"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tv"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="SOURCE TO DESTINATION COMES HERE" />

        <TextView
            android:id="@+id/txtFrom"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="" />

        <TextView
            android:id="@+id/txtTo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="" />

        <TextView
            android:id="@+id/txtETA"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="" />

        <TextView
            android:id="@+id/txtDistance"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/expandingLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginLeft="10dp"
        android:background="#FFC58F"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btnLanguage"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_language_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnImages"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_image_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnMessages"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_job_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnAlerts"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_alert_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnlogout"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="@string/btn_logout_text"
            android:textSize="15sp" />
    </LinearLayout>
</TableRow>

Hi Above is my implementation for a home screen and and I want to left align the first Linear layout , center align the second layout and right align the last lay out.Any one knows how to do it?

Upvotes: 0

Views: 1757

Answers (3)

ps2010
ps2010

Reputation: 871

By default, if all the children inside the TableRow can be drawn within the bounds of the screen, then the TableView will assign equal area to each of the LinearLayout children and they will automatically be left-aligned, centered and right-aligned.

In your case, each of the LinearLayouts have 4 or more views with some text which is difficult to get fitted within the screen bounds. The TableLayout will thus only draw whatever fits the screen starting from first child.

  1. You can try using LinearLayout with weightSum=3 instead of the TableRow and give each of the child LinearLayout a weight of 1.
  2. Furthermore, check if your Buttons have a default MinWidth and remove it if you are confident that all the text can be shown on the screen without views overflowing the screen
  3. Use gravity (left, centre, right) to control the position of the inner layouts with respect to parent. Note that layout_gravity only works if the parent is a LinearLayout.

  4. You can also use RelativeLayout but inner LinearLayouts may overlap if you will try to position them exactly on left, Centre and Right respectively.

    <LinearLayout android:orientation=horizontal
              android:weightSum=3 >
    <LinearLayout android:layout_width=0dp 
                  android:layout_weight=1
                  android:layout_gravity=left >
    <LinearLayout android:layout_width=0dp 
                  android:layout_weight=1
                  android:layout_gravity=center >
    <LinearLayout android:layout_width=0dp 
                  android:layout_weight=1
                  android:layout_gravity=right >
</LinearLayout>

Upvotes: 2

KDeogharkar
KDeogharkar

Reputation: 10959

try using weightsum and orientation to achieve what you want.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/homeTableLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:weightSum="10"
    android:orientation="horizontal"
     >

<LinearLayout
        android:id="@+id/navigationLayout"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_gravity="left"
        android:background="#669cb7"
        android:orientation="vertical"
        android:layout_weight="3.3"

        >

        <Button
            android:id="@+id/btnCall"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="btn_call_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnPicture"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="btn_take_pictures_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnNavigate"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="btn_navigate_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnedo"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="btn_pod_text"
            android:textSize="15sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/distanceLayout"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:background="#FFC58F"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_weight="3.3" 
        >

        <TextView
            android:id="@+id/tv"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="SOURCE TO DESTINATION COMES HERE" />

        <TextView
            android:id="@+id/txtFrom"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="" />

        <TextView
            android:id="@+id/txtTo"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="" />

        <TextView
            android:id="@+id/txtETA"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="" />

        <TextView
            android:id="@+id/txtDistance"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:text="" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/expandingLayout"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_gravity="right"
        android:background="#FFC58F"
        android:orientation="vertical"
        android:layout_weight="3.4" 
        >

        <Button
            android:id="@+id/btnLanguage"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="btn_language_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnImages"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="btn_image_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnMessages"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="btn_job_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnAlerts"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="btn_alert_text"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnlogout"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:text="btn_logout_text"
            android:textSize="15sp" />
    </LinearLayout>

</LinearLayout>

the result will something like this:

enter image description here

Upvotes: 0

agamov
agamov

Reputation: 4427

  1. Are you sure all this buttons will fit one screen?
  2. You can use RelativeLayout as wrapper for 3 linearlayouts
  3. Or you can user LinearLayout wrapper with weightSum
<RelativeLayout>
<LinearLayout android:layout_alignParentLeft="true">
<LinearLayout android:layout_toRightOf="@id/linear1>
<LinearLayout android:layout_toRightOf="@id/linear2 android:layout_alignParentRight="true">
<RelativeLayout>

Upvotes: 0

Related Questions