TableRows change size when content changes - android

I'm trying to build a quiz app, and every time I change the text in a TextView or Button, the relative sizes of the TableRows change.
I have set all the TableRow heights to be 0dp, and all of the enclosed view heights to match_parent, but the heights still change.
The code below is my layout (quiz.xml), which I call from an activity using setContentView(R.layout.quiz).
All of the text is added programmatically.
I'm using Android IDE.
How can I force the TableRows/Buttons/TextViews to maintain their height (even if the text itself is too large)?
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:weightSum="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TableRow
android:layout_weight="0.05"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:weightSum="1"
>
<Chronometer
android:id="#+id/chrono"
android:textSize="12sp"
android:gravity="top|left"
android:layout_weight="0.33"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
<TextView
android:id="#+id/progress_text"
android:textSize="12sp"
android:gravity="top|center_horizontal"
android:layout_weight="0.34"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
<TextView
android:id="#+id/score_text"
android:textSize="12sp"
android:gravity="top|right"
android:layout_weight="0.33"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</TableRow>
<TableRow
android:layout_weight="0.15"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
>
<TextView
android:id="#+id/question_text"
android:textSize="12sp"
android:gravity="top|left"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</TableRow>
<TableRow
android:layout_weight="0.1"
android:layout_width="match_parent"
android:layout_height="0dp"
>
<Button
android:id="#+id/choice1"
android:textSize="12sp"
android:gravity="top|left"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</TableRow>
<TableRow
android:layout_weight="0.1"
android:layout_width="match_parent"
android:layout_height="0dp"
>
<Button
android:id="#+id/choice2"
android:textSize="12sp"
android:gravity="top|left"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</TableRow>
<TableRow
android:layout_weight="0.1"
android:layout_width="match_parent"
android:layout_height="0dp"
>
<Button
android:id="#+id/choice3"
android:textSize="12sp"
android:gravity="top|left"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</TableRow>
<TableRow
android:layout_weight="0.1"
android:layout_width="match_parent"
android:layout_height="0dp"
>
<Button
android:id="#+id/choice4"
android:textSize="12sp"
android:gravity="top|left"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</TableRow>
<TableRow
android:layout_weight="0.1"
android:layout_width="match_parent"
android:layout_height="0dp"
>
<Button
android:id="#+id/choice5"
android:textSize="12sp"
android:gravity="top|left"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</TableRow>
<TableRow
android:layout_weight="0.3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
>
<TextView
android:id="#+id/explanation_text"
android:textSize="10sp"
android:gravity="top|left"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</TableRow>
</TableLayout>

Related

How to put 2 ListView and put TextView in TableView after Listview?

I have 2 listview in 1 activity
Example:
[Tablerow - 4 Textview in 1 row]
[ListView1]
[Tablerow - 4 Textview in 1 row]
[ListView2]
I tried: LinearLayout and set to Vertical; layout_weight; RelativeLayout; android:width="0dp"; layout_below / above
Sometimes, the listview overlap, second tablerow not displayed.
May I know how to solve it ?
Here is my activity xml file.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.bus">
<TableRow
android:id="#+id/table1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border"
android:gravity="center_horizontal">
<TextView
android:id="#+id/tvleaving"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/leaving"
android:textStyle="bold" />
<TextView
android:id="#+id/hc1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/ch"
android:textStyle="bold" />
<TextView
android:id="#+id/hc2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/westlake"
android:textStyle="bold" />
<TextView
android:id="#+id/arriving"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/arrive"
android:textStyle="bold" />
</TableRow>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="40dp" />
<TableRow
android:id="#+id/table2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="600dp"
android:background="#drawable/border"
android:gravity="center_horizontal">
<TextView
android:id="#+id/tvleaving2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/leaving"
android:textStyle="bold" />
<TextView
android:id="#+id/hc3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/ch"
android:textStyle="bold" />
<TextView
android:id="#+id/hc4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/west"
android:textStyle="bold" />
<TextView
android:id="#+id/arriving2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/arrive"
android:textStyle="bold" />
</TableRow>
<ListView
android:id="#+id/listView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
Thanks in advance.
Try using this way.
<LinearLayout android:orientation="vertical">
<LinearLayout android:orientation="vertical"
android:layout_weight="1">
<TableRow/>
<ListView/>
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_weight="1">
<TableRow/>
<ListView/>
</LinearLayout>
</LinearLayout>

Position of the elements in Android XML file

I have a question regarding how to position elements in a XML file for an android activity.
What i need to achieve is the following:
Basically i need:
a set of 9 squares (3x3 table) covering 50% of the screen height
on the second part of the screen, 3 equally distributed zones with a single textview / button for each.
i created the set of 9 squares using a tableview with this code:
<TableLayout
android:layout_width="match_parent"
android:layout_height="386dp"
android:stretchColumns="*" >
<TableRow
android:id="#+id/Row1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/square1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="3"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="3"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
</TableRow>
<TableRow
android:id="#+id/Row2"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/square4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
</TableRow>
<TableRow
android:id="#+id/Row3"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/square7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square8"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="2"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square9"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="3"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
</TableRow>
</TableLayout>
This part is included in a relative layout.
Now i can't get in any way to set this part to be 50% of the screen, and add a second 50% with the 3 buttons.
Hope you can help me. I searched here for answers but didn't find any relevant topic
Here you go:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="2"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="3"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="4"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="5"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="6"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="7"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="8"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="9"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="10"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="11"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="12"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
Use LinearLayout instead of RelativeLayout and use android:weight attribute to achieve 50% screen height as follows...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_wieght="1" >
..............
..............
</TableLayout>
<!-- Other other layout which will take android:layout_wieght="1" -->
</LinearLayout>
This will be a very simple answer to this question only using LinearLayout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="one part"/>
</LinearLayout>
</LinearLayout>

Android TableLayout make all buttons same size

I'm making a custom dialer and want to have all the buttons be the same size but because some of the text is longer than others (e.g. the "7" button has "PQRS" under it) it stretches out some columns. Here is what I'm doing currently, what am I doing wrong?
<TableLayout
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*" >
<TableRow
android:layout_weight="1"
android:gravity="center" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_one" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_two" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_three" />
</TableRow>
<TableRow
android:layout_weight="1"
android:gravity="center" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_four" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_five" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_six" />
</TableRow>
<TableRow
android:layout_weight="1"
android:gravity="center" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_seven" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_eight" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_nine" />
</TableRow>
<TableRow
android:layout_weight="1"
android:gravity="center" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_star" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_zero" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="#string/dialer_pound" />
</TableRow>
</TableLayout>
Try this :
And if you don't want to fill your whole screen then remove the weightSum of the main TableLayout and respective layout_weight in TableRows
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:weightSum="3" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:text="dialer_one"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:text="dialer_two"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:text="dialer_three"
android:textSize="20sp" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:weightSum="3" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:gravity="center"
android:text="dialer_four"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:gravity="center"
android:text="dialer_five"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:gravity="center"
android:text="dialer_six"
android:textSize="20sp" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:weightSum="3" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:gravity="center_vertical"
android:text="dialer_seven"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:gravity="center_vertical"
android:text="dialer_eight"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:gravity="center_vertical"
android:text="dialer_nine"
android:textSize="20sp" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:weightSum="3" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:layout_gravity="center_vertical"
android:text="dialer_star"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:layout_gravity="center_vertical"
android:text="dialer_zero"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:soundEffectsEnabled="false"
android:layout_gravity="center_vertical"
android:text="dialer_pound"
android:textSize="20sp" />
</TableRow>
</TableLayout>
This should work
use linear layout instead of table layout and set weight=1 for all buttons. it will give you positive result what you want..
<TableLayout
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_one" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_two" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_three" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_four" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_five" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_six" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_seven" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_eight" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_nine" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_star" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_zero" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:textSize="20sp"
android:text="dialer_pound" />
</TableRow>
I think this is what you want..
Use WeightSum and Weight in order to have all buttons of equal width like this,
<TableRow
android:layout_weight="1"
android:gravity="center"
android:weightSum="3" >
<Button
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:text="#string/dialer_one"
android:textSize="20sp" />
<Button
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:text="#string/dialer_two"
android:textSize="20sp" />
<Button
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:soundEffectsEnabled="false"
android:text="#string/dialer_three"
android:textSize="20sp" />
</TableRow>
It turns out that the buttons were all different sizes because the default padding around my button text was too high.

Android: making a simple layout

I would like to construct a simple table layout in Android BUT I got some problems with it.
At part 1: there are some text views so I would like to put that TableRow's height to wrap_content.
At part 2: same thing.
It works all still now BUT:
At part 3: there are 2 listview-s and at part 4 there are some buttons.
I would like to do something like this:
let the part 4's height to wrap content but make the part 3 to fill all the empty space on the screen.
Please give me a solution for this, beacause when i probed the part 3 filled out all the emty space till the bottom of the screen. Now I tryed with weight_sum BUT I do not like it because I would let the 4'd row to wrap_content.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:weightSum="1.0" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:weightSum="1.0" >
<TextView
android:id="#+id/phone_tab_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:background="#layout/style_right_border"
android:gravity="center"
android:singleLine="true"
android:text="Phone Tab"
android:textColor="#android:color/white"
android:textSize="14dp" />
<TextView
android:id="#+id/pc_tab_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:gravity="center"
android:singleLine="true"
android:text="PC Tab"
android:textColor="#android:color/white"
android:textSize="14dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#layout/style_bottom_border" >
<TextView
android:id="#+id/phone_path_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:background="#layout/style_bott_right_border"
android:gravity="center"
android:paddingBottom="5dp"
android:singleLine="true"
android:text="mnt/sdcard/Movies/dpad/sadas/asda/sda/as"
android:textColor="#android:color/white"
android:textSize="8dp" />
<TextView
android:id="#+id/pc_path_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:gravity="center"
android:paddingBottom="5dp"
android:singleLine="true"
android:text="mnt/sdcard/Movies/dpad/sadas/asda/sda/as"
android:textColor="#android:color/white"
android:textSize="8dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.9"
android:weightSum="1.0" >
<ListView
android:id="#+id/listview_phone_files"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:background="#layout/style_right_border" />
<ListView
android:id="#+id/listview_pc_files"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.1"
android:background="#layout/style_top_border"
android:gravity="center"
android:weightSum="1.0" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="Button" />
<ImageButton
android:id="#+id/button_active_tab_changer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:background="#android:color/transparent"
android:onClick="changeActiveTabButton"
android:src="#drawable/button_change_tab" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="Button" />
</TableRow>
Create a RelativeLayout as parent and place the TableLayouts inside that. That allows you to use alignParentBottom and alignParentTop layaout params.
check it this layout, but please keep your old layout file in backup.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:weightSum="1.0" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:weightSum="1.0" >
<TextView
android:id="#+id/phone_tab_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:singleLine="true"
android:text="Phone Tab"
android:textColor="#android:color/white"
android:textSize="14dp" />
<TextView
android:id="#+id/pc_tab_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:gravity="center"
android:singleLine="true"
android:text="PC Tab"
android:textColor="#android:color/white"
android:textSize="14dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/phone_path_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:paddingBottom="5dp"
android:singleLine="true"
android:text="mnt/sdcard/Movies/dpad/sadas/asda/sda/as"
android:textColor="#android:color/white"
android:textSize="8dp" />
<TextView
android:id="#+id/pc_path_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:gravity="center"
android:paddingBottom="5dp"
android:singleLine="true"
android:text="mnt/sdcard/Movies/dpad/sadas/asda/sda/as"
android:textColor="#android:color/white"
android:textSize="8dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1" >
<ListView
android:id="#+id/listview_phone_files"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ListView
android:id="#+id/listview_pc_files"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.1"
android:gravity="center"
android:weightSum="1.0" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="Button" />
<ImageButton
android:id="#+id/button_active_tab_changer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:background="#android:color/transparent"
android:onClick="changeActiveTabButton"
android:src="#android:drawable/ic_delete" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="Button" />
</TableRow>
</TableLayout>
set tableRow3's android:layout_height to 0, and android:layout_weight to 1. The other tableRows can use android:layout_height="wrap_content".

how to optimize this layout?

I have this xml layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:background="#FFFFFF">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/nektaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="10pt"
android:textAlignment="center"
android:text="example text will not be used" />
<ImageView
android:id="#+id/horilinee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:src="#drawable/horiline" />
<TableRow
android:id="#+id/table"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<Button
android:id="#+id/send"
android:text="أرسل"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<EditText
android:id="#+id/commenttext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="اكتب التعليق هنا"
android:minLines="1"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:scrollHorizontally="true"
android:scrollbars="vertical"
android:layout_weight="1"
android:singleLine="false" />
</TableRow>
<ImageView
android:id="#+id/horilineee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:src="#drawable/horiline" />
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
</TableLayout>
</ScrollView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:id="#+id/tableRow0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom"
android:paddingBottom="10dp"
android:paddingTop="10dp" >
<ImageView
android:id="#+id/horiline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/horiline" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/share" />
<ImageView
android:id="#+id/block"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/block" />
<ImageView
android:id="#+id/thumbdown"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/thumbdown" />
<ImageView
android:id="#+id/thumbup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/thumbup" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<TextView
android:id="#+id/sharetext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="شارك"
android:textSize="12dp" />
<TextView
android:id="#+id/blocktext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="إبلاغ إساءة"
android:textSize="12dp" />
<TextView
android:id="#+id/dislikenumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:textColor="#FF0000"
android:textSize="12dp" />
<TextView
android:id="#+id/likenumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:textColor="#00FF00"
android:textSize="12dp" />
</TableRow>
</TableLayout>
</LinearLayout>
</RelativeLayout>
but it doesn't seems to be working as I want it to be. I need it like the following figure:
The problem with my code is the list view I can't stretch it to the bottom before the tablelayout. The other problem comes if the textview at the top is too long, it appears under the tablelayout and it's visible.
Also the tablelayout at the bottom shifted up when the keyboard is visible, I don't want this to happen.
Any suggestion please?
Have a single ListView in your layout. You can add other views(as shown in your diagram) as headers to the list view using addHeaderView() method. This way you will get the Scrolling effect as you desired.
Thank you all for your support. I came up with a better solution:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_weight="1" >
<TextView
android:id="#+id/nektaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="example text will not be used"
android:textAlignment="center"
android:textSize="10pt" />
</ScrollView>
<ImageView
android:id="#+id/horilinee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="#drawable/horiline" />
<TableRow
android:id="#+id/table"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.5"
android:gravity="bottom" >
<Button
android:id="#+id/send"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:text="أرسل" />
<EditText
android:id="#+id/commenttext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="اكتب التعليق هنا"
android:minLines="1"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:scrollHorizontally="true"
android:scrollbars="vertical"
android:singleLine="false" />
</TableRow>
<ImageView
android:id="#+id/horilineee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="#drawable/horiline" />
<ListView
android:id="#id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:drawSelectorOnTop="false"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="end" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:id="#+id/tableRow0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom"
android:paddingBottom="10dp"
android:paddingTop="10dp" >
<ImageView
android:id="#+id/horiline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/horiline" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/share" />
<ImageView
android:id="#+id/block"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/block" />
<ImageView
android:id="#+id/thumbdown"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/thumbdown" />
<ImageView
android:id="#+id/thumbup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/thumbup" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<TextView
android:id="#+id/sharetext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="شارك"
android:textSize="12dp" />
<TextView
android:id="#+id/blocktext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="إبلاغ إساءة"
android:textSize="12dp" />
<TextView
android:id="#+id/dislikenumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:textColor="#FF0000"
android:textSize="12dp" />
<TextView
android:id="#+id/likenumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:textColor="#00FF00"
android:textSize="12dp" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
ScrollView needs to declare :
android:layout_above="#+id/Layout1"
Layout1 is the layout that host tableLayout1
But you will have some issues with ListView into scrollView
As there are only two Layout in your RelativeLayout, use LinearLayout. This will solve the overlap problem. Set the weight of ScrollView to keep the TableLayout at bottom.
The keyboard shift the Bottom table layout because it's mode is set to Resize. You will usually control this behavior through the android:windowSoftInputMode attribute on each definition in your AndroidManifest.xml. Set the value of this to adjustPan.

Categories

Resources