Menu
I am using Table Layout to display data as shown below.
What i want to do ?
I want the Text in the second column to be aligned to the left and the text should wrap and be displayed in the next line and over flow as you see in the image.
Code:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/icon_category"
android:textAlignment="textStart" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="230 kms"
android:textSize="16sp" >
</TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/icon_category"
android:textAlignment="textStart" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="Hill Station, Wild Life"
android:textSize="16sp" >
</TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/icon_category"
android:textAlignment="textStart" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="Summer 23-40°C, Winter 10-32°C"
android:textSize="16sp" >
</TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/icon_category"
android:textAlignment="textStart" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="Tippus Drop, Tippus Summer Residence, Brahmashram, Cycling, Paragliding"
android:textSize="16sp" >
</TextView>
</TableRow>
</TableLayout>
What it should look like
925
Since a TableRow is pretty much a horizontally oriented LinearLayout, simply use the principles of weights to make the TextView fill up all the space after the ImageView. It means you'd have to change the rows to somewhat like this:
<!-- no need to set width/height as those are implicitly enforced -->
<TableRow
android:id="@+id/tableRow2"
android:paddingBottom="10dp" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/icon_category" />
<!-- width of '0' and weight of '1' will make this view fill up all remaining space -->
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:text="230 kms"
android:textSize="16sp" />
</TableRow>
I've also removed/changed some superfluous attributes. Do mind that I just typed this directly in the browser - there may be the odd typo or tweak required.
146
The easiest way I can think of is to wrap each TableRow content with a LinearLayout like this:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="230 kms"
android:textSize="16sp" >
</TextView>
</LinearLayout>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="Hill Station, Wild Life"
android:textSize="16sp" >
</TextView>
</LinearLayout>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="Summer 23-40°C, Winter 10-32°C"
android:textSize="16sp" >
</TextView>
</LinearLayout>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/place_category_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:contentDescription="ss"
android:paddingRight="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="Tippus Drop, Tippus Summer Residence, Brahmashram, Cycling, Paragliding"
android:textSize="16sp" >
</TextView>
</LinearLayout>
</TableRow>
</TableLayout>
And this is the result:
Hope I correctly understood your requirements.
25
My guess - change the layout_width and get rid of the gravity:
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
...
>
</TextView>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
