Borom1r
Borom1r

Reputation: 155

How to make TableLayout Responsive

currently i am developing some android application which contains list. I've made one in Mobile(handset) device. and I want to make it responsive in tablets (7"-10") display. so the header and the column will look same as in mobile display.

here is the defference between 5" and 7" display:

5" display

Tablet Dispaly

this is my current xml code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:tag="reqtag"
>
<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:showDividers="beginning|end"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Date"
            android:id="@+id/tvClaimDateReimbursementRequest"

            android:layout_marginRight="50dp"
            android:textSize="12dp"
            android:width="100dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Type"
            android:textSize="12dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:id="@+id/tvTypeRequestReimbursement"
            android:width="80dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Amount"
            android:textSize="10dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:width="100dp"
            android:id="@+id/tvAmountReimbursementRequest" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Status"
            android:textSize="12dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:id="@+id/tvStatusReimbursementRequest" />
    </TableRow>
</TableLayout>

I've seen the documentation here https://developer.android.com/guide/practices/screens_support.html

but I still don't get it, is there any best-practices to do things like this?

thanks

Upvotes: 2

Views: 3070

Answers (4)

user7130986
user7130986

Reputation: 1

You should use sp for text and dp for Views. So instead of android:textSizes="12dp" it should be android:textSize="12sp"

Look here for more details: https://developer.android.com/guide/topics/resources/more-resources.html#Dimension

Upvotes: 0

Vijay Kumar M
Vijay Kumar M

Reputation: 182

Try this code in your table row A layout that arranges its children horizontally. A TableRow should always be used as a child of a TableLayout. If a TableRow's parent is not a TableLayout, the TableRow will behave as an horizontal LinearLayout.

The children of a TableRow do not need to specify the layout_width and layout_height attributes in the XML file. TableRow always enforces those values to be respectively MATCH_PARENT and WRAP_CONTENT.

Upvotes: 0

Sourabh Bans
Sourabh Bans

Reputation: 3134

assign you tablerow layout a weightsum.. then devide and assign that weight to all your textviews equally. like:

<TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weight_sum="1"  >

<TextView
            android:layout_width="0dp"
            android:layout_weight=".2" // for five texts .2 for each
            android:layout_height="wrap_content" 
            ......  />

Upvotes: 0

Sviatoslav Melnychenko
Sviatoslav Melnychenko

Reputation: 543

You could try set

android:layout_width="0dp"
android:layout_weight="1"

for every header TextView, because TableRow is a LinearLayout.

But I believe TableView is not the best approach. If you describe what do you want to achieve, we could figure out better way.

Upvotes: 2

Related Questions