I am developing a application i am trying to assign image buttons properly but depending on screen they are changing i have added images of low density,high density and midium density images in low high and midium drawable folders.
here is my code and screen shot.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"
android:gravity="center"
android:paddingLeft="20dip"
android:paddingRight="20dip" >
<TableRow>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/aboutus"
android:scaleType="fitCenter"
android:src="#drawable/aboutus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/transparent"
/>
<TextView
android:text="About Us"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageButton
android:id="#+id/services"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:padding="2dp"
android:src="#drawable/services123" />
<TextView
android:text="Services"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
</TableRow>
<TableRow>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/courses"
android:src="#drawable/services"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/transparent"
/>
<TextView
android:text="Courses"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/contactus"
android:src="#drawable/services"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/transparent"
/>
<TextView
android:text="contact us"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
</TableRow>
<TableRow>
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/syllabus"
android:src="#drawable/services"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/transparent"
/>
<TextView
android:text="Syllabus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/pingtoupdates"
android:src="#drawable/services"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/transparent"
/>
<TextView
android:text="Ping To Updates"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
</TableRow>
</TableLayout>
There are two much of variations in layout_width and height from one table row item to the other. In some LinearLayout you have used fill_parent,fill_parent and in some wrap_content, wrap_content. First you need to correct this as you'r requirement says that each row items should be of same dimensions.
For you case better approach would be to use a GridView. You just need to create one layout file(XML) for the row item and then you can use this for all the row items.
Here is a sample code for grid item:
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/aboutus"
android:src="#drawable/aboutus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/transparent"/>
<TextView
android:text="About Us"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip"
android:textColor="#ffffff" />
</LinearLayout>
If you are new to GridView follow this link
After you are done with this then you should try multiple device support.
You can follow this link for multiple device support.
You can also have a look at this stackoverflow post.
I believe using a GridView would be the best as you can fix your layout there and specify the size of each image in the grid irrespective of their sizes.
Check this sample tutorial.
If you need more sample codes, you can find another nice tutorial on GridView here and this one explains how to handle item selection from the grid, i.e. what happens when you click on any image on the grid.
Hope this helps!
Related
Hi Im having problem aligning data i show in a ListView to the Textview that Im using as a header.Im a newbie and i wanted originally use a LayoutTable but its complicated if you can give me an idea on that score will be great.
I want everything to be parallel to its header
See Xml below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:orientation="horizontal"
android:id="#+id/linearlayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/w_r"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:orientation="vertical"
android:text="what"
android:textSize="20dp"
android:layout_marginLeft="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:text="where"
android:id="#+id/f_l"
android:layout_marginLeft="50dp"
android:textSize="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:orientation="vertical"
android:text="???"
android:id="#+id/w_f"
android:textSize="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:gravity="center"
android:orientation="vertical"
android:text="Storing"
android:id="#+id/S_r"
android:layout_marginLeft="55dp"
android:textSize="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="look"
android:id="#+id/looks"
android:textSize="20dp"
android:layout_marginLeft="50dp" />
</LinearLayout>
<ListView
android:id="#+id/listarecdatos"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_alignParentBottom="false"
android:layout_below="#+id/linearlayout2"
android:layout_marginTop="10dp"
android:footerDividersEnabled="false"
android:layout_marginLeft="10dp" />
Use weights for both layout containers, each columns must have weight of 1 in your header layout and in your item layout
EDIT - Add sample code
Your Activity/Fragment that will contain the header, and the view holder of each item layout should look like this
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
If you want to distribute in a horizontal then you should set layout_height="0dp" instead of layout_width
I have a problem with my xml for android.
I have this layout to use it in each line of a Listview (that works fine).
I want to put two lines (head and body) of text, and align Right of the first line I have to put two ImageView. (Also have first of all a hidden textView)
Something like this:
My problem is when I try to put both imageViews (with only one it shows fine, but with two don't show nothing).
this is my xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TvIdGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="gone" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/TvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#drawable/new_messages" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#drawable/new_group" />
</LinearLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textStyle="normal" />
</LinearLayout>
sorry for my english and thank you in advance!
If I am understanding correctly then I believe this should be close to what you are looking for:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TvIdGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="gone" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/TvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Test"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="right"
android:src="#drawable/new_messages" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/ImgNewConvGroup"
android:gravity="right"
android:src="#drawable/new_group" />
</RelativeLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:textSize="22sp"
android:textStyle="normal" />
</LinearLayout>
Try it out and let me know if that works for you, I changed the inner layout from LinearLayout to RelativeLayout and created what I believe you are looking for in relational locations.
Note: Be cautious of your TextView extending far enough to go behind the ImageViews, if that happens then it might be better to (set for the ImageViews):
android:layout_below="#+id/TvName"
on both and remove:
android:layout_centerVertical="true"
<TextView
android:id="#+id/TvIdGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="TV"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="visible" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/TvName"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:text="TVName"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="right"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TVDescription"
android:textSize="22sp"
android:textStyle="normal" />
Take a look if is what are you looking for.
Is a lot of code just will write the structure
<LinearLayout android:orientation="vertical">
<LinearLayout android:orientation="horizontal">
<LinearLayout android:orientation="horizontal">
<TextView/>
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:gravity="right">
<ImageView/>
<ImageView/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="vertical">
<TextView/>
</LinearLayout>
</LinearLayout>
In my screen I am having 3 buttons and in next row below those buttons I am having 3 names (name corresponding to those buttons) but my problem is that when ever name changes then size of buttons also changes but I do want to fix the size of buttons here is my code please help me
<TableLayout android:background="#drawable/toptab"
android:layout_width="fill_parent" android:id="#+id/tableLayout"
android:layout_height="wrap_content"
android:stretchColumns="1" android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<TableRow>
<ImageButton android:id="#+id/btnPrev" android:background="#drawable/imgPrev"
android:layout_marginLeft="5dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<ImageButton android:id="#+id/btnRefresh"
android:layout_gravity="center" android:background="#drawable/refreshbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageButton android:id="#+id/btnNext"
android:background="#drawable/imgNext"
android:layout_width="5dp"
android:layout_height="20dp"
android:layout_marginRight="5dp" />
</TableRow>
<TableRow >
<TextView android:id="#+id/prev" android:text="Hk" android:layout_marginLeft="5dp" />
<TextView android:id="#+id/refresh" android:text="Refresh" android:layout_gravity="center" />
<TextView android:id="#+id/next" android:text="RS" android:layout_marginRight="5dp" />
</TableRow>
</TableLayout>
If you want to avoid fixing button size, then I would recommend using different layout than TableLayout, maybe RelativeLayout and TextViews with property alignBaseline or LinearLayout with weight properties could do the trick.
You should use linearlayout instead of table layout and use Weight property for aligning buttons and text view in equal dimensions, so here if you write more text in text view , button size will not increase. Also you can add more buttons in same manner. Below is the XML file and screen shot.
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewTextTextViewTextTextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
I am a newbie and I have been working on an android layout for a few hours with no luck. I am trying to create a layout similar to this: http://i43.tinypic.com/254wkt5.png
I have four problems I'm trying to work through with the layout:
First, how do I make the images flush left as in the link above? Mine are all centered in the page. Also, how can I scale images of different sizes so that they are the same size - i.e., about the size of the android icon? The image I have is pretty large: http://i39.tinypic.com/2eo8dg7.png .
My third issue has to do with the Leave a tip buttons. How can they be arranged so that they are side by side within the same table row?
Finally, I thought layouts were scrollable by default. Its not possible for me to scroll to see the rest of my layout (which should be ok). Its the images and buttons that are confusing to me.
Here's my xml:
<?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">
<LinearLayout style="#style/TitleBar">
<ImageButton style="#style/TitleBarAction"
android:contentDescription="#string/description_home"
android:src="#drawable/title_home"
android:onClick="onClickHome" />
<ImageView style="#style/TitleBarSeparator" />
<TextView style="#style/TitleBarText" />
<ImageButton style="#style/TitleBarAction"
android:contentDescription="#string/description_about"
android:scaleType="fitXY"
android:src="#drawable/about"
android:onClick="onClickAbout" />
</LinearLayout>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="Community Summary"
android:textSize="18sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<View android:layout_height="2dip" android:background="#FF909060" />
<TableRow>
<TextView
android:text="Leaderboard"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<TableRow>
<ImageView
android:id="#+id/firstPlaceIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/android"/>
<TextView
android:id="#+id/household1"
android:text="Household 1"/>
</TableRow>
<TableRow>
<ImageView
android:id="#+id/secondPlaceIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/android"/>
<TextView
android:id="#+id/household1"
android:text="Household 2" />
</TableRow>
<TableRow>
<ImageView
android:id="#+id/thirdPlaceIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sample_0"/>
<TextView
android:id="#+id/household3"
android:text="Household 3" />
</TableRow>
<View android:layout_height="1dip" android:background="#FF909060" />
<TableRow>
<TextView
android:text="How do I compare?"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<TableRow>
<Button
android:id="#+id/howdoICompareStatus"
android:text="Compare me to others"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<View android:layout_height="1dip" android:background="#FF909060" />
<TableRow>
<TextView
android:text="Tips"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<TableRow>
<TextView
android:id="#+id/statusTips"
android:text="Temporary Tips Text"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<View android:layout_height="1dip" android:background="#FF909060" />
<TableRow>
<TextView
android:text="Status"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<TableRow>
<TextView
android:id="#+id/communitysize"
android:text=""
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/tbd"
android:text="More features coming soon!"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</TableRow>
</TableLayout>
</LinearLayout>
Any tips or resources would help. A sample xml would be great!
I've tried this based on the first suggestion with no luck getting the line gradient to appear below the first piece of text:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout style="#style/TitleBar"
android:id="#+id/titleBar">
<ImageButton style="#style/TitleBarAction"
android:contentDescription="#string/description_home"
android:src="#drawable/title_home"
android:onClick="onClickHome" />
<ImageView style="#style/TitleBarSeparator" />
<TextView style="#style/TitleBarText" />
<ImageButton style="#style/TitleBarAction"
android:contentDescription="#string/description_about"
android:scaleType="fitXY"
android:src="#drawable/about"
android:onClick="onClickAbout" />
</LinearLayout>
<LinearLayout
android:id="#+id/top_linear"
android:layout_height="80dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_below="#+id/titleBar" >
<LinearLayout
android:id="#+id/linear2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_below="#id/top_linear"
android:stretchColumns="1">
<TextView
android:id="#+id/communitySummary"
android:text="Community Summary"
android:textSize="18sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<View
android:id="#+id/dividerSummary"
android:background="#drawable/black_white_gradient"
android:layout_alignBottom="#+id/communitySummary"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
My solution for now. I still need to figure out how to put the information next to the three images but I think I'll get it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myinfo_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:scrollbars="vertical"
>
<LinearLayout style="#style/TitleBar">
<ImageButton style="#style/TitleBarAction"
android:contentDescription="#string/description_home"
android:src="#drawable/title_home"
android:scaleType="fitXY"
android:onClick="onClickHome" />
<ImageView style="#style/TitleBarSeparator" />
<TextView style="#style/TitleBarText" />
<ImageButton style="#style/TitleBarAction"
android:contentDescription="#string/description_about"
android:src="#drawable/about"
android:scaleType="fitXY"
android:onClick="onClickAbout" />
</LinearLayout>
<ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative_layout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:padding="10dp" >
<TextView
android:id="#+id/communitySummary"
android:text="Community Summary"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="#+id/dividerSummary"
android:background="#drawable/black_white_gradient"
android:layout_below="#+id/communitySummary"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
<TextView
android:id="#+id/leaderboard"
android:paddingTop="10dp"
android:text="Leaderboard"
android:textSize="16sp"
android:layout_below="#+id/dividerSummary"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/firstPlaceIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/leaderboard"
android:src="#drawable/image20"
/>
<TextView
android:id="#+id/top_spot"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10px"
android:layout_toLeftOf="#id/firstPlaceIcon"
android:text="Top spot: "/>
<TextView
android:id="#+id/household1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/top_spot"
android:text=""/>
<ImageView
android:id="#+id/secondPlaceIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/firstPlaceIcon"
android:src="#drawable/image15"/>
<ImageView
android:id="#+id/thirdPlaceIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/secondPlaceIcon"
android:src="#drawable/image10"/>
<View
android:id="#+id/dividerLeaderboard"
android:background="#drawable/black_white_gradient"
android:layout_below="#+id/thirdPlaceIcon"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
<TextView
android:id="#+id/howdoICompareText"
android:text="How do I compare?"
android:paddingTop="10dp"
android:layout_below="#+id/dividerLeaderboard"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/howdoICompareStatus"
android:text="Compare me to others"
android:layout_width="wrap_content"
android:layout_below="#+id/howdoICompareText"
android:layout_height="wrap_content" />
<View
android:id="#+id/dividerCompareStatus"
android:paddingTop="10dp"
android:background="#drawable/black_white_gradient"
android:layout_below="#+id/howdoICompareStatus"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
<TextView
android:id="#+id/waystoSaveHeader"
android:text="Ways to Save"
android:layout_below="#+id/dividerCompareStatus"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/waystoSave"
android:text=""
android:layout_below="#+id/waystoSaveHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/leaveaMessageHeader"
android:text="Leave a message to your community"
android:paddingTop="10dp"
android:layout_below="#+id/waystoSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/leaveMsgBtn"
android:text="Leave a Message"
android:layout_width="wrap_content"
android:layout_below="#+id/leaveaMessageHeader"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/seeMessagesHeader"
android:text="See community messages"
android:layout_below="#+id/leaveMsgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/sendMsgBtn"
android:text="See messages"
android:layout_width="wrap_content"
android:layout_below="#+id/seeMessagesHeader"
android:layout_height="wrap_content" />
<View
android:id="#+id/dividerWaystoSave"
android:paddingTop="10dp"
android:background="#drawable/black_white_gradient"
android:layout_below="#+id/sendMsgBtn"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
<TextView
android:id="#+id/CommunityStatusHeader"
android:text="Community Status"
android:layout_below="#+id/dividerWaystoSave"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/communitysize"
android:text=""
android:layout_below="#+id/CommunityStatusHeader"
android:paddingTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
First think you should know is that in the mock-up image, that doesn't look like a table layout (Maybe the top blue bar, but it can be done with two linear layouts or images pretty easy), it can be done with tables but is a waste of time and energy :)
So here is an idea:
Use a Relative layout that fills all the screen:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
After that use a LinearLayout
<LinearLayout
android:id="#+id/top_linear"
android:layout_height="80dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_alignParentTop="true"
>
</LinearLayout>
that will hold either another two nested layouts or two images.
After that you set another LinearLayout below it android:layout_below="#id/top_linear that will hold the title.
After that you will fill some linear layouts with image and text (same horizontal orientation) one below other to obtain the images/text section.
Delimiters (those lines grey / black) can be obtain like this:
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000"
/>
Note that the color for the background can be any hexa, and if you want to be lighter on top, or any other styles, you should consider using a gradient.
And so on :)
Good luck,
Arkde
Here's my issue I have a login and want to line up the EditText fields. See the mockup picture attached .
I have tried a few ways and cannot figure out how to make the fields lineup.
I really hate layouts in Android I spend more time just messing with things to line up right. Wish they would just scrap it and use something more intuitive, as its more like using tables in HTML. So in advance thanks for your help and cheers!
You could probably play around with RelativeLayout and get just what you want.
Here's an approximation with TableLayout.
<?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">
<TableLayout
android:layout_marginTop="40dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="10dip"
android:text="UserID:" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
android:text="USER ID" />
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="10dip"
android:text="Password:" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
android:text="PASSWORD" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_marginTop="50dip"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:gravity="center">
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="LOGIN" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="REGISTER" />
</LinearLayout>
</LinearLayout>
See if this works for you. It doesnt center quite perfectly but it does align well across multiple screen sizes.
<?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:background="#FFFF0000">
<LinearLayout android:id="#+id/top_row"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_marginTop="25dip">
<LinearLayout android:layout_height="wrap_content" android:orientation="horizontal" android:layout_width="fill_parent">
<TextView android:layout_height="wrap_content" android:text="User Id" android:gravity="right" android:layout_marginRight="10dip" android:layout_width="fill_parent" android:layout_weight="2" android:textColor="#FF000000"></TextView>
<EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:ems="10" android:layout_weight="1"></EditText>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:orientation="horizontal" android:layout_width="fill_parent">
<TextView android:layout_height="wrap_content" android:text="Password" android:gravity="right" android:layout_marginRight="10dip" android:layout_width="fill_parent" android:layout_weight="2" android:textColor="#FF000000"></TextView>
<EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:ems="10" android:layout_weight="1"></EditText>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_width="wrap_content" android:layout_below="#+id/top_row" android:layout_centerHorizontal="true" android:layout_marginTop="20dip">
<Button android:layout_width="wrap_content" android:text="LOGIN" android:layout_height="wrap_content" android:layout_marginRight="10dip"></Button>
<Button android:text="REGISTER" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="10dip"></Button>
</LinearLayout>
</RelativeLayout>
Here's what it looks like in my IDE...
You can do this quick and dirty using TableLayout, just add a TableRow with a TextView and a EditText for the userid and repeat the same for the password.
See http://developer.android.com/resources/tutorials/views/hello-tablelayout.html