issue on Screen design with table layout under scroll layout. - android

I have seen an issue while designing dashboard screen,
I had one layout : say Linearlayout1 and having scroll layout: say scrollLayout1 as child of Linearlayout1, and havinf Table layout under this scroll layout,
i added table rows which contains buttons with drawables.
now the question is> I can see, table layout height is bit more than the scroll layout which is child of scroll layout. how child layout can have more height then parent layout. (I set table layout height as matchparent or fill parent).

If you are building a dashboard, then use the DashboardLayout from Google IO open source app.
That is the best way to do it. If you are planning to do something manually, it may not be possible to test on all the screen sizes, densities.
I used it in 3 of my projects, which just works.
Check this answer on stackoverflow.

Try This it may helps you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:id="#+id/toplayout"
android:layout_width="fill_parent"
android:layout_height="50dip">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TopBar"/>
</RelativeLayout>
<ScrollView
android:id="#+id/scrolllayout"
android:layout_width="fill_parent"
android:layout_height="150dip"
android:padding="5dip"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
android:padding="5dip"
android:background="#android:color/darker_gray">
<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:textColor="#FFFFFF"
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:textColor="#FFFFFF"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save..."
android:textColor="#FFFFFF"
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:textColor="#FFFFFF"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:textColor="#FFFFFF"
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:textColor="#FFFFFF"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:text="X"
android:textColor="#FFFFFF"
android:padding="3dip" />
<TextView
android:text="Import..."
android:textColor="#FFFFFF"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:text="X"
android:textColor="#FFFFFF"
android:padding="3dip" />
<TextView
android:text="Export..."
android:textColor="#FFFFFF"
android:padding="3dip" />
<TextView
android:text="Ctrl-E"
android:gravity="right"
android:textColor="#FFFFFF"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:textColor="#FFFFFF"
android:background="#FF909090" />
<TableRow>
<TextView
android:textColor="#FFFFFF"
android:layout_column="1"
android:text="Quit"
android:padding="3dip" />
</TableRow>
</TableLayout>
</RelativeLayout>
</ScrollView>
</LinearLayout>

Related

How to correctly set layout_width and layout_weight of textview horizontally?

I want to have a listview and there are header.xml and row.xml file in my app.
Both of them are linear layout and with 6 children textviews.
The first textview is ID and I would like to minimize it(still visible) because it is not important to the user.
Code(header.xml):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:paddingBottom="6dip"
android:paddingTop="4dip" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="ID"
android:textSize="12dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Date"
android:textSize="12dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="time"
android:textSize="12dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Food"
android:textSize="12dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Rating2"
android:textSize="12dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Rating"
android:textSize="12dp" />
</LinearLayout>
the problem is that now the ID textview became completely disappeared. I supposed the higher the layout_weight is , the smaller the view get(in the case of width= fill_parent).
Any help is appreciated.
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="ID"
android:textSize="12dp"
android:visibility="invisible"/>
So add android:visibility="invisible"

tableLayout strechcolumns doesn't work

I have a TablLayout, it has 1 row and 2 columns.
The first column is a text, and I want it as big as possible, the second one is another table with 2 rows and 1 column:
<?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">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow>
<TextView
android:id="#+id/parkingDataText"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
/>
<TableLayout>
<TableRow>
<ImageButton
android:id="#+id/buttonStar"
android:layout_marginLeft="10dip"
android:background="#null"
/>
</TableRow>
<TableRow>
<ImageButton
android:id="#+id/buttonRent"
android:layout_marginLeft="10dip"
android:background="#null"
/>
</TableRow>
</TableLayout>
</TableRow>
I thought I had to use strechColumns="1" and the first column occupied the space that the second one doesnt use, but it doesn't work.
Any idea?
Thank you in advance
Try below layout for your requirement :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="2">
<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip"
android:layout_width="200dp" />
<TableLayout
android:layout_column="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="2">
<TableRow>
<TextView
android:layout_column="1"
android:text="Textview column1"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Textview column2"
android:padding="3dip" />
</TableRow>
</TableLayout>
</TableRow>
</TableLayout>

Align textview columns vertically when using custom adaptor / layoutinflator

I have three columns that I want to align vertically. The data for the columns are retrieved using an object and then displayed using a LayoutInflater.
At present the columns are all over the place. I am hoping to have them perfectly aligned. I'm using TextView but I am starting to wonder if I shouldn't be using some kind of TableLayout.
Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TableRow android:id="#+id/row_multi_row">
<TextView
android:id="#+id/item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="3dip"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="3dip"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/item3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="3dip"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
Try this :
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row_multi_row"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<TextView
android:id="#+id/item1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.34"
android:padding="3dip"
android:text="asdasd"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/item2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.34"
android:padding="3dip"
android:gravity="center"
android:text="adasd"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/item3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.32"
android:padding="3dip"
android:gravity="center"
android:text="asdasdad"
android:textAppearance="?android:attr/textAppearanceLarge" />
set all textview width and tab row width to fill parent and use layout_weight="1". It will work

how to create three columns in TableLayout

I am developing a screen that uses TableLayout. Here I am easily able to create two columns. but how can I create three columns ?
Here an example:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="first"
android:padding="3dip" />
<TextView
android:text="second"
android:gravity="center"
android:padding="3dip" />
<TextView
android:text="third"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:text="first"
android:padding="3dip" />
<TextView
android:text="second"
android:gravity="center"
android:padding="3dip" />
<TextView
android:text="third"
android:gravity="right"
android:padding="3dip" />
</TableRow>
</TableLayout>
For each TableRow you have to add three children instead of two. This should be ok for you!
Hope this helps!

Icon menu with TableView (Google+ like)

I am working on icon based main menu for my Android application (see attached image - Google+). The obvious layout for this is a TableLayout.
However, I have no idea and could not find information on how to center the table itself and the icons inside. The code I came up with is as follows (and resulting image is below the code):
<TableLayout android:layout_width="fill_parent" android:id="#+id/tableLayout1" android:layout_height="fill_parent" android:stretchColumns="1" android:padding="20dp">
<TableRow android:id="#+id/tableRow1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dp" >
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
<Button android:text="Button" android:id="#+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
</TableRow>
<TableRow android:id="#+id/tableRow2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dp" >
<Button android:text="Button" android:id="#+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" ></Button>
<Button android:text="Button" android:id="#+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
</TableRow>
</TableLayout>
I will appreciate any tips and ideas.
i just made a program main menu like you need. It's density-independent, but i put it on a scrollview just to make sure it's usable everywhere.
You can change the buttons to imagebuttons if you like, so you get the menu you want.
A little explanation to the code:
every row has a textview on the left and on the right, as placeholders. The tablelayout'a android:stretchColumns="0,3" stretchs the textviews to fill the space next to the buttons.
you can change the margins so the buttons are nearer or further from each other.
And now here's the xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout android:layout_gravity="center"
android:layout_width="match_parent" android:layout_height="match_parent"
android:stretchColumns="0,3">
<TableRow android:layout_gravity="center">
<TextView />
<Button android:text="1" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<Button android:layout_gravity="center_vertical"
android:text="2" android:layout_margin="15dp"
android:width="100dip" android:height="100dip" />
<TextView />
</TableRow>
<TableRow android:layout_gravity="center">
<TextView />
<Button android:text="3" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<Button android:text="4" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<TextView />
</TableRow>
<TableRow android:layout_gravity="center">
<TextView />
<Button android:text="5" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<Button android:text="6" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<TextView />
</TableRow>
</TableLayout>
</ScrollView>
And this is how it looks like:
http://db.tt/yQ5NFhmk
try android:gravity="center" in the TableLayout spec. This will place the table rows in the center of the screen.
also try by adding android:gravity="center" in the TableRow for placing the buttons in the center of the table row.

Categories

Resources