CODEWITHSUNDEEP
android
fish man
fish man

Reputation: 101

new to android: need to line buttons up horizontally

I need to line buttons up horizontally, however, my buttons are appearing vertically. They are all stacked up on top of each other.. do you know how I can do this horizontally?

<TableLayout
    android:id="@+id/tableRow1"
    android:layout_width="match_parent"
    android:layout_height="88dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:orientation="horizontal" >


       <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />

</TableLayout>

Upvotes: 0

Views: 105

Answers (7)

james
james

Reputation: 1035

Or encapsulate the Button objects within a TableRow tag e.g

<TableRow>
    <Button></Button>
</TableRow>

Upvotes: 0

Ahmed Alaa El-Din
Ahmed Alaa El-Din

Reputation: 1833

Add TableRow to TableLayout and here is the working code

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableRow1"
    android:layout_width="wrap_content"
    android:layout_height="88dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:orientation="horizontal" >


    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center_horizontal" >

        <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />
    </TableRow>

</TableLayout>

Upvotes: 0

Mohammod Hossain
Mohammod Hossain

Reputation: 4114

Using Linear layout you can easily represent your button in horizontally.

<LinearLayout
    android:id="@+id/tableRow1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

    android:orientation="horizontal" >


       <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />

        <Button android:layout_weight="1" />

</LinearLayout>

Upvotes: 1

paibhavesh
paibhavesh

Reputation: 167

There are many ways to do this.Please check following is one of the way

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="4" >

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

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

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

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

</LinearLayout>

Upvotes: 0

Kaloer
Kaloer

Reputation: 3773

Instead of a TableLayout, I think you should use a LinearLayout with a WeightSum. To distribute the widths of the 4 buttons evenly, set their widths to 0 and their weight to 1. Then set the weight sum of the LinearLayout to 4 (the number of buttons). Like this:

<LinearLayout
    android:id="@+id/tableRow1"
    android:layout_width="match_parent"
    android:layout_height="88dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:orientation="horizontal" 
    android:weightSum="4">

    <Button 
       android:layout_width="0dip"
       android:layout_height="fill_parent" 
       android:layout_weight="1" />

    <Button 
       android:layout_width="0dip"
       android:layout_height="fill_parent" 
       android:layout_weight="1" />

    <Button 
       android:layout_width="0dip"
       android:layout_height="fill_parent" 
       android:layout_weight="1" />

    <Button 
       android:layout_width="0dip"
       android:layout_height="fill_parent" 
       android:layout_weight="1" />

</LinearLayout>

Upvotes: 0

Niraj Adhikari
Niraj Adhikari

Reputation: 1728

Use a linearlayout as follows: 

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#646464"
    android:gravity="center|center_vertical"
    android:paddingBottom="5dp"
    android:paddingTop="5dp" >

    <Button
        android:id="@+id/inner_artist_profile"
        android:layout_width="60dp"
    android:layout_height="25dp"
        android:text="Profile"
        android:textColor="#AEAEAE"
        android:background="@drawable/sub_nav_left" />

   <Button
       android:id="@+id/inner_artist_news"
       android:layout_width="60dp"
    android:layout_height="25dp"
       android:text="News"
       android:textColor="#AEAEAE"
       android:layout_alignParentTop="true"
       android:layout_toRightOf="@+id/inner_artist_profile"
       android:background="@drawable/sub_nav_middle" />

<Button
    android:id="@+id/inner_artist_events"
 android:layout_width="60dp"
    android:layout_height="25dp"
    android:text="Events"
    android:textColor="#AEAEAE"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/inner_artist_news"
    android:background="@drawable/sub_nav_middle" />

<Button
    android:id="@+id/inner_artist_videos"
   android:layout_width="60dp"
    android:layout_height="25dp"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/inner_artist_events"
    android:background="@drawable/sub_nav_middle"
    android:text="Videos"
    android:textColor="#AEAEAE" />
<Button
    android:id="@+id/inner_artist_albums"
   android:layout_width="60dp"
    android:layout_height="25dp"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/inner_artist_videos"
    android:background="@drawable/sub_nav_right"
    android:text="Albums"
    android:textColor="#AEAEAE" />
</RelativeLayout>

this is from a working project modify id's according to need

Upvotes: 0

jimmithy
jimmithy

Reputation: 6380

You have not identified a TableRow for your TableLayout. Imagine how a table is created, row's go horizontally and columns go vertically.

Fixing your code would look something like this

<TableLayout
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >

    <TableRow     
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <Button android:layout_weight="1" />
        <Button android:layout_weight="1" />
        <Button android:layout_weight="1" />
        <Button android:layout_weight="1" />
    </TableRow>
</TableLayout>

Alternatively, to make things easier, I would recommend using a LinearLayout with the orientation set to horizontal.

Upvotes: 0

Related Questions