CODEWITHSUNDEEP
androidandroid-layout
0xSina
0xSina

Reputation: 21603

Android layout with two columns

New to Android and the whole linear/relative layout thing. Need help figuring out exactly how to make this layout:

enter image description here

What I have done so far is:

Linear Layout(Vertical)
---Textview ("fixpix.")
---Linear Layout (Horizontal) //first column
------Linear Layout (Vertical, weight 1) //even more nesting here
------Linear Layout (Vertical, weight 1) //even more nesting here
------Linear Layout (Vertical, weight 1) //even more nesting here
---Linear Layout (Horizontal) //last column
------Linear Layout (Vertical, weight 1) //even more nesting here
------Linear Layout (Vertical, weight 1) //even more nesting here
------Linear Layout (Vertical, weight 1) //even more nesting here
---Button ("Learn More.")

I get a lot of warnings that weights should not be nested, etc. I am not even sure if this is the right way to do it. Can someone suggest a better way and not as complicated

Upvotes: 2

Views: 10742

Answers (6)

Simon
Simon

Reputation: 14472

Top tip when building even moderately complex layouts.

Instead of ImageViews, TextViews etc, use plain Views as placeholders. Set the background color of each element, including the enclosing Linears/Relatives/Frames etc, to a different color. That way, you can see exactly what each element is doing and adjust your weights, "relativities" (e.g. layoutToTheRightOf etc) and sizes until the layout looks perfect. Then replace the placeholders with the elements you want.

If you are struggling with an existing layout, copy/paste the XML into your text editor. Do the above, then copy/paste the individual elements one by one over their placeholders. You'll get your layout under control in short order.

Of course, a good understanding of how each ViewGroup works is fundamental to building good Android apps.

Good luck.

Upvotes: 5

Rishi
Rishi

Reputation: 330

You can use GridLayout or the TableLayout.

But I'll suggest you to use TableLayout.

Upvotes: 0

Shrikant Ballal
Shrikant Ballal

Reputation: 7087

Consider using GridView

Definitely, the LinearLayout will solve your problem, but always consider using best practices or approach for developing anything.

You can also use this.

Upvotes: 0

Venkatesh S
Venkatesh S

Reputation: 5492

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="top_center_text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_launcher"
            android:gravity="center"
            android:text="names"
            android:textColor="@android:color/background_dark" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_launcher"
            android:gravity="center"
            android:text="names"
            android:textColor="@android:color/background_dark" />
    </LinearLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_launcher"
            android:gravity="center"
            android:text="names"
            android:textColor="@android:color/background_dark" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_launcher"
            android:gravity="center"
            android:text="names"
            android:textColor="@android:color/background_dark" />
    </LinearLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_launcher"
            android:gravity="center"
            android:text="names"
            android:textColor="@android:color/background_dark" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_launcher"
            android:gravity="center"
            android:text="names"
            android:textColor="@android:color/background_dark" />
    </LinearLayout>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="top_center_text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Below is the code that you need

Upvotes: 1

Tapan Desai
Tapan Desai

Reputation: 848

Try creating "Creating Multi-Column Layout with ArrayAdapter"

*Step 1. insert a simple list view which you would turn it to multi column. * main.xml

<ListView android:id="@+id/mylist" android:layout_width="wrap_content" android:layout_height="wrap_content">
</ListView>

Step 2. create a row format which will be shown for each row in the list. (multi column view).

file: mylistrow.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:paddingTop="4dip"
 android:paddingBottom="6dip"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
 <TextView android:id="@+id/column1"
    android:gravity=”left”
     android:layout_width="50dip"
     android:layout_height="wrap_content"/>
 <TextView android:id="@+id/column2"
    android:gravity=”center”
     android:layout_width="70dip"
     android:layout_height="wrap_content"
     android:layout_weight="1"/>
 <TextView android:id="@+id/column3"
     android:gravity=”right”
     android:layout_width="60dip"
     android:layout_height="wrap_content"
       android:layout_weight="1"/>
</LinearLayout>

Step 3. using SimpleAdapter to configure the data binding to these columns

ListView list = (ListView) findViewById(R.id.mylist);
ArrayList<HashMap<String, String>> mylistData =
               new ArrayList<HashMap<String, String>>();

String[] columnTags = new String[] {"col1", "col2", "col3"};

int[] columnIds = new int[] {R.id.column1, R.id.column2, R.id.column3};
for(int i=0; i<3; i++)
{
HashMap<String,String> map = new HashMap<String, String>();
 //initialize row data
 for(int j=0; j<3; j++)
 {
   map.put(columnTags[j], "row”+i+”col"+j);
 }
 mylistData.add(map);
 }
 SimpleAdapter arrayAdapter =
           new SimpleAdapter(this, mylistData, R.layout.mylistrow,
                         columnTags , columnIds);
 list.setAdapter(arrayAdapter);

Upvotes: 1

yansigner
yansigner

Reputation: 895

Try to solve this problem with a GridView. It's more common to use that instead of LinearLayouts: http://developer.android.com/guide/topics/ui/layout/gridview.html .

Upvotes: 1

Related Questions