CODEWITHSUNDEEP
androidandroid-layout
kabuto178
kabuto178

Reputation: 3167

TableLayout styling each row

I want to set 5 rows within a TableLayout to have a sort of bubble outline. I want to get each row to be isolated with curved edges and a different shade background color. Is it possible to get this done with a TableLayout? At the moment I only have a basic table structure with 3 rows, each containing only a normal TextView. Thanks for your time.

Upvotes: 3

Views: 4897

Answers (2)

Abdullah Shoaib
Abdullah Shoaib

Reputation: 2095

Yes It is possible to create separate layouts for different rows of a table layout.

Try something like this:

<TableLayout
        android:orientation="vertical" 
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TableRow
            android:layout_width="match_parent"
            android:layout_marginTop="30dp"
            android:layout_height="wrap_content"
            android:gravity="center">
            <RelativeLayout             
                android:id="@+id/dashboard1BtnMyOwn"
                android:clickable="true"
                android:background="@drawable/click_effect_dashboard"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                >
                <ImageView
                    android:id="@+id/dashboard1ImgMyOwn"
                    android:layout_width="45dp"
                    android:contentDescription="@string/myOwned"
                    android:layout_height="45dp"
                    android:gravity="center"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/personal"
                    />
                <TextView
                    android:id="@+id/dashboard1TxtMyOwn"
                android:layout_width="95dp"
                    android:layout_height="wrap_content"
                    android:lines="2"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:layout_below="@id/dashboard1ImgMyOwn"
                    android:text="@string/myOwned"
                    />
            </RelativeLayout>
            <TableRow/>
            ....

Use a custom Drawable for the RelativeLayout inside TableRow for borders such as :

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
     <gradient android:startColor="@android:color/holo_blue_light" android:endColor="@android:color/holo_blue_light" 
            android:angle="270"/> 

    <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>

This should be the result (set your own image): enter image description here

Upvotes: 2

TheFlash
TheFlash

Reputation: 6027

Something like this?

row_blue_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle" >
         <solid   android:color="#2ca4ea"/>
         <corners android:bottomRightRadius="5dp" 
                 android:bottomLeftRadius="5dp" 
                 android:topLeftRadius="5dp" 
                 android:topRightRadius="5dp" />                         

    </shape>
</item>
</layer-list>

row_red_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle" >
         <solid   android:color="#e3977d"/>
         <corners android:bottomRightRadius="5dp" 
                 android:bottomLeftRadius="5dp" 
                 android:topLeftRadius="5dp" 
                 android:topRightRadius="5dp" />                         

    </shape>
</item>
</layer-list>

table_layout.xml

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

<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*" 
    android:background="#373737"
    >
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/row_red_bg"
        >

          <!-- First  -->
            <LinearLayout
            android:id="@+id/first_text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1" >

                  <TextView
                    android:id="@+id/tvMyBooking"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:textColor="#ffffff"
                    android:gravity="center"
                    android:text="r11"
                    android:padding="5dp"
                     />

           </LinearLayout>

        <!-- Second  -->
            <LinearLayout
            android:id="@+id/second_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"

            android:layout_weight="1"  >

                <TextView
                    android:id="@+id/tvPrivate"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r12" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />


           </LinearLayout>

          <!-- third  -->
            <LinearLayout
            android:id="@+id/third_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"

            android:layout_weight="1" >

                <TextView
                    android:id="@+id/tvPublic"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r13" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />



           </LinearLayout>


          <!-- fourth  -->
            <LinearLayout
            android:id="@+id/fourth_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" 
            android:layout_weight="1" >

                <TextView
                    android:id="@+id/tvAddBooking"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r14" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />



           </LinearLayout>

    </TableRow>

     <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/row_blue_bg"
        >

          <!-- First  -->
            <LinearLayout
            android:id="@+id/first_text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1" >

                  <TextView
                    android:id="@+id/tvMyBooking"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:textColor="#ffffff"
                    android:gravity="center"
                    android:text="r21"
                    android:padding="5dp"
                     />




           </LinearLayout>

        <!-- Second  -->
            <LinearLayout
            android:id="@+id/second_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"

            android:layout_weight="1"  >

                <TextView
                    android:id="@+id/tvPrivate"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r22" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />


           </LinearLayout>

          <!-- third  -->
            <LinearLayout
            android:id="@+id/third_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"

            android:layout_weight="1" >

                <TextView
                    android:id="@+id/tvPublic"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r23" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />



           </LinearLayout>


          <!-- fourth  -->
            <LinearLayout
            android:id="@+id/fourth_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" 
            android:layout_weight="1" >

                <TextView
                    android:id="@+id/tvAddBooking"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r24" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />



           </LinearLayout>

    </TableRow>
     <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/row_red_bg"
        >

          <!-- First -->
            <LinearLayout
            android:id="@+id/first_text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1" >

                  <TextView
                    android:id="@+id/tvMyBooking"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:textColor="#ffffff"
                    android:gravity="center"
                    android:text="r31"
                    android:padding="5dp"
                     />

           </LinearLayout>

        <!-- Second  -->
            <LinearLayout
            android:id="@+id/second_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"

            android:layout_weight="1"  >

                <TextView
                    android:id="@+id/tvPrivate"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r32" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />


           </LinearLayout>

          <!-- third  -->
            <LinearLayout
            android:id="@+id/third_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"

            android:layout_weight="1" >

                <TextView
                    android:id="@+id/tvPublic"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r33" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />



           </LinearLayout>


          <!-- fourth  -->
            <LinearLayout
            android:id="@+id/fourth_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" 
            android:layout_weight="1" >

                <TextView
                    android:id="@+id/tvAddBooking"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="r34" 
                    android:textColor="#ffffff"
                    android:padding="5dp"
                    />

           </LinearLayout>

    </TableRow>

</TableLayout>

</LinearLayout>

Upvotes: 5

Related Questions