CODEWITHSUNDEEP
javaandroidandroid-linearlayout
AKIWEB
AKIWEB

Reputation: 19612

Split the section in a Layout in Android

I am working on a Android Project in which I need to design a User Interface like below image-

enter image description here

I need to show some text on top as Student App, then below that there will be different objects of a Student. Suppose if I have 10 Students then there will be 10 rows for each student. And in each row there will be image on left hand side, then in the middle some text will be there and then on the right hand side there will be another three text.

I made some progress and I have below code. But it's not exact the way I am looking for in the image.

<ImageView
        android:id="@+id/icon"
        android:src="@drawable/action_eating"
        android:layout_width="60dp"
        android:layout_height="60dp" />
<LinearLayout
        android:orientation="vertical"
        android:layout_gravity="center_vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp" >
    <TextView
            android:id="@+id/text1"
            android:text="test"
            android:textColor="#333"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp" />
    <TextView
            android:id="@+id/text2"
            android:text="test2"
            android:textColor="#6699CC"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp" />
</LinearLayout>

And I need to make that list scrollable.

Can anyone help me out with this? Thanks for the help.

Upvotes: 1

Views: 259

Answers (2)

Rich
Rich

Reputation: 36806

You need a ListView for your students list, and create a custom class that derives from ArrayAdapter<Student> and override getView(). The list of student objects gets passed to the adapter and the adapter gets passed to the ListView. If you're doing this for a class and your intention is to learn, this is great stuff to get familiar with and is very practical for professional Android development. For extra credit, find a video on YouTube called "World of ListView" from Google I/O 2012 and make your lists faster than the rest of your classmates.

Upvotes: 0

DjHacktorReborn
DjHacktorReborn

Reputation: 2928

Using Table view how you can create column

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

    <!-- 2 columns -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <TextView
            android:id="@+id/textView1"
            android:text="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <Button
            android:id="@+id/button1"
            android:text="Column 2" />
    </TableRow>

    <!-- edittext span 2 column -->
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <EditText
            android:id="@+id/editText1"
            android:layout_span="2"
            android:text="Column 1 &amp; 2" />
    </TableRow>

    <!-- just draw a red line -->
    <View
        android:layout_height="2dip"
        android:background="#FF0000" />

    <!-- 3 columns -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <TextView
            android:id="@+id/textView2"
            android:text="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <Button
            android:id="@+id/button2"
            android:text="Column 2" />

        <Button
            android:id="@+id/button3"
            android:text="Column 3" />
    </TableRow>

    <!-- display this button in 3rd column via layout_column(zero based) -->
    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/button4"
            android:layout_column="2"
            android:text="Column 3" />
    </TableRow>

    <!-- display this button in 2nd column via layout_column(zero based) -->
    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/button5"
            android:layout_column="1"
            android:text="Column 2" />
    </TableRow>

</TableLayout>

Upvotes: 1

Related Questions