I am working on android application.I am newbie in android app development.
I get to test the app for few android devices. But the layout looks different for different devices. i have created screen shots for reference.
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:background="#drawable/bgcopy"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
style="#style/TitleBar" >
<Button
android:id="#+id/back"
android:layout_width="60dp"
android:layout_height="30dip"
android:layout_marginLeft="7dip"
android:background="#drawable/bround1"
android:text="#string/back"
android:textColor="#color/White"
android:textStyle="bold" />
<TextView
style="#style/TitleBarText"
android:gravity="center"
android:text="#string/testApp"
android:textSize="16dp" />
<Button
android:id="#+id/home"
android:layout_width="60dip"
android:layout_height="30dip"
android:layout_marginRight="7dip"
android:background="#drawable/bround1"
android:text="#string/home"
android:textColor="#color/White"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="1.5dp"
android:background="#color/Black" >
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignBottom="#+id/relativeLayout1"
android:orientation="horizontal"
android:background="#drawable/blackroundshape"
android:gravity="center">
<TextView
android:id="#+id/restrictions"
android:layout_width="115dip"
android:layout_height="54dip"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:background="#drawable/blackroundshape"
android:gravity="center"
android:layout_gravity="center"
android:selectAllOnFocus="true"
android:text="Details"
android:textColor="#color/White"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/locations"
android:layout_width="115dip"
android:layout_height="54dip"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:background="#drawable/blackroundshape"
android:gravity="center"
android:layout_gravity="center"
android:text="#string/locations"
android:textColor="#color/White"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/news"
android:layout_width="128dip"
android:layout_height="54dip"
android:layout_marginLeft="0.5dip"
android:layout_weight="1"
android:background="#drawable/blackroundshape"
android:gravity="center"
android:layout_gravity="center"
android:selectAllOnFocus="true"
android:text="#string/news"
android:textColor="#color/White"
android:textSize="15dip"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_below="#+id/linearLayout1"
android:orientation="horizontal"
android:background="#drawable/backbutton"
android:gravity="center"
>
<TextView
android:id="#+id/reserve"
android:layout_width="115dip"
android:layout_height="58dip"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:background="#drawable/backbutton"
android:gravity="center"
android:layout_gravity="center"
android:text="#string/reserve"
android:textColor="#color/White"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/favorite"
android:layout_width="115dip"
android:layout_height="58dip"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:background="#drawable/backbutton"
android:gravity="center"
android:layout_gravity="center"
android:text="#string/favorite"
android:textColor="#color/White"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/share"
android:layout_width="128dip"
android:layout_height="58dip"
android:layout_weight="1"
android:background="#drawable/backbutton"
android:gravity="center"
android:layout_gravity="center"
android:selectAllOnFocus="true"
android:text="#string/share"
android:textColor="#color/White"
android:textSize="15dip"
android:textStyle="bold" />
</LinearLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="504dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" >
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="fill_parent"
android:layout_height="170dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="7dp"
android:background="#drawable/round_transperent2" >
<ImageView
android:id="#+id/image"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="11dp"
android:src="#drawable/default_ptr_rotate" />
<TextView
android:id="#+id/couponText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/image"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="#+id/image"
android:text="TextView"
android:textColor="#color/Black"
android:typeface="serif" />
<TextView
android:id="#+id/save_textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/image"
android:layout_below="#+id/image"
android:layout_marginLeft="1dp"
android:paddingLeft="1dp"
android:text="#string/save"
android:textColor="#color/mightyBlue"
android:textSize="19sp"
android:textStyle="bold" />
<TextView
android:id="#+id/upto_textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/save_textView2"
android:layout_alignBottom="#+id/save_textView2"
android:layout_alignRight="#+id/image"
android:layout_marginLeft="3dp"
android:layout_toRightOf="#+id/save_textView2"
android:text="#string/upto"
android:textColor="#color/Gray" />
<TextView
android:id="#+id/amountDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/save_textView2"
android:layout_below="#+id/save_textView2"
android:layout_marginBottom="4dp"
android:paddingLeft="1dp"
android:text="#string/amount"
android:textColor="#color/mightyBlue"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/amountDetails"
android:layout_alignLeft="#+id/couponText"
android:text="Expires on:"
android:textColor="#color/Black"
android:typeface="serif"
android:visibility="invisible" />
<TextView
android:id="#+id/expitydate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/amountDetails"
android:layout_toRightOf="#+id/textView5"
android:maxLength="10"
android:textColor="#color/Black"
/>
</RelativeLayout>
<TextView
android:id="#+id/RemainingDays_textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView7"
android:layout_below="#+id/relativeLayout2"
android:text="Remaning Days"
android:textColor="#color/mightyBlue" />
<TextView
android:id="#+id/textView6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/RemainingDays_textView1"
android:layout_centerHorizontal="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:gravity="center"
android:text="#string/redeem"
android:textColor="#color/Black"
android:textSize="16dp"/>
<TextView
android:id="#+id/textView7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView6"
android:layout_below="#+id/textView6"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="#string/redeemnow"
android:textColor="#color/Red"
android:textSize="18dp" />
<TextView
android:id="#+id/YES"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignLeft="#+id/textView7"
android:layout_below="#+id/textView7"
android:layout_marginLeft="35dp"
android:layout_marginTop="20dp"
android:background="#drawable/yellow_ball"
android:gravity="center"
android:text="YES"
android:textColor="#color/Black"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:id="#+id/No"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignBaseline="#+id/YES"
android:layout_alignBottom="#+id/YES"
android:layout_alignRight="#+id/textView7"
android:layout_marginRight="44dp"
android:background="#drawable/yellow_ball"
android:gravity="center"
android:text="NO"
android:textColor="#color/Black"
android:textSize="16dp"
android:textStyle="bold" />
</RelativeLayout>
2nd screen shot shows the issue. I have completed the functional aspect of the app but unable to submit app due to this issue. Any help will be appriciated.
Thank You!!!
The containing LinearLayout should have gravity = center to center the TextView children and android:layout_alignParentBottom="true" (I see you have a RelativeLayout as a parent container):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/navBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/restrictions"
android:layout_width="115dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:selectAllOnFocus="true"
android:text="Details"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/locations"
android:layout_width="115dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:text="Locations"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/news"
android:layout_width="128dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginLeft="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:selectAllOnFocus="true"
android:text="news"
android:textSize="15dip"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/navBar"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/restrictions"
android:layout_width="115dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:selectAllOnFocus="true"
android:text="Details"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/locations"
android:layout_width="115dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:text="Locations"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/news"
android:layout_width="128dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginLeft="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:selectAllOnFocus="true"
android:text="news"
android:textSize="15dip"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/restrictions"
android:layout_width="115dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:selectAllOnFocus="true"
android:text="Details"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/locations"
android:layout_width="115dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginRight="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:text="Locations"
android:textSize="15dip"
android:textStyle="bold" />
<TextView
android:id="#+id/news"
android:layout_width="128dip"
android:layout_height="54dip"
android:layout_gravity="center"
android:layout_marginLeft="0.5dip"
android:layout_weight="1"
android:gravity="center"
android:selectAllOnFocus="true"
android:text="news"
android:textSize="15dip"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
Have added different layouts for different screen sizes?
Refer : http://developer.android.com/guide/practices/screens_support.html
For Different screen size, The following is a list of resource directories in an application that provides different layout designs for different screen sizes and different bitmap drawables for small, medium, high, and extra high density screens.
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
res/drawable-mdpi/my_icon.png // bitmap for medium density
res/drawable-hdpi/my_icon.png // bitmap for high density
res/drawable-xhdpi/my_icon.png // bitmap for extra high density
The following code in the Manifest supports all dpis.
<supports-screens android:smallScreens="true"
android:normalScreens="true"
android:largeScreens="true"
android:xlargeScreens="true"
android:anyDensity="true" />
Try this,
using layout_weight attribute you can bring this exactly.
Double check to make sure you have the correct hierarchy with the proper layouts wrapping other layouts. For the 2nd bar from the top with "Reserve, Favorite, Share" use a Linear Layout with weights of 1 on the text views and be sure that the TV's width = 0dp. Then create the bottom bar with "Details, Location, News" and align that to the bottom. Then have the middle white part as a layout with attributes layout_below="topbar" and layout_above="bottombar"
Here's some sudo code to give you an idea
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- Top Bar -->
<LinearLayout
andorid:name="#+id/nav_bar"
android:layout_alignParentTop="true"
android:layout_width=... />
<!-- Second to Top Bar -->
<LinearLayout
android:name="#+id/reserve_bar"
android:layout_width="fill_parent"
android:layout_height="54dp"
android:layout_below="#id/nav_bar"
android:orientation="vertical" >
<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"
... />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
... />
</LinearLayout>
<!-- Very Bottom Bar -->
<LinearLayout
android:name="#+id/details_bar"
android:layout_width="fill_parent"
android:layout_height="54dp"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<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"
... />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
... />
</LinearLayout>
<!-- Body of the layout below 2nd bar and above bottom bar-->
<RelativeLayout
android:name="#+id/body_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/reserve_bar"
android:layout_above="#id/detail_bar" >
<RelativeLayout>
android:stuff="..."
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I think the problem is that you are have align_bottom attributes on some things that shouldn't be there. Those are override the alignParentBottom
Related
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation=""
android:layout_marginTop="40dp" >
<LinearLayout
android:id="#+id/imagecontainlayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:background="#drawable/round_bg"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:singleLine="true"
android:text="Status:"
android:textColor="#0060a4"
android:textSize="15dp" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3.5"
android:textColor="#0060a4"
android:textSize="15dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="20dip"
android:layout_height="20dip"
android:layout_weight=".75" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="295dp"
android:layout_height="44dp"
android:background="#drawable/round_bg"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:singleLine="true"
android:text="Status:"
android:textColor="#0060a4"
android:textSize="15dp" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3.5"
android:textColor="#0060a4"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
Here is my Xml am trying to set imagecontainlayout linear layout to another linear layout containing another linear layout with some gap but i dont know where am doing mistake in my code my current screen is coming like this .
my current screen is coming like this while i want there first layout below another layout with some gap please help me where am doing mistake.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/round_bg"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:singleLine="true"
android:text="Step:"
android:textColor="#0060a4"
android:textSize="15dp" />
<TextView
android:id="#+id/step"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3.5"
android:textColor="#0060a4"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
use this code it will Help u .
I'am working on a metro-ish layout for android, but i can seem to make it work the same on all devices. On a Galaxy Note3 it doesn't align to the bottom (too much gap between buttons), and on a smaller screen Galaxy Ace2 it fits too crowded (some buttons next to each other)
This is my layout, any ideas on how to make it universal would be great! Thanks in advance
<?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"
android:background="#drawable/bg_login" >
<ImageView
android:id="#+id/icon_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/logo_white" />
<Button
android:id="#+id/btn_feed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/gradient_feed"
android:drawableTop="#drawable/feed"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Feed"
android:textColor="#color/white"
android:textSize="10dip" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/btn_profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="#drawable/gradient_profile"
android:drawableTop="#drawable/profile"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Profile"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
<Button
android:id="#+id/btn_new_challenge"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/gradient_new_challenge"
android:drawableTop="#drawable/new_challenge"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="New Challenge"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
<Button
android:id="#+id/btn_rankings"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="#drawable/gradient_rankings"
android:drawableTop="#drawable/rankings"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Rankings"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/btn_factory"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="#drawable/gradient_factory"
android:drawableTop="#drawable/task_factory"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Task Factory"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
<Button
android:id="#+id/btn_settings"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/gradient_settings"
android:drawableTop="#drawable/settings"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Settings"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
<Button
android:id="#+id/btn_gadgets"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="#drawable/gradient_gadgets"
android:drawableTop="#drawable/gadgets"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Gadgets"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
</LinearLayout>
<Button
android:id="#+id/btn_store"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/gradient_store"
android:drawableTop="#drawable/store"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Store"
android:textColor="#color/white"
android:textSize="10dip" />
<Button
android:id="#+id/btn_help"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/gradient_help"
android:drawableTop="#drawable/help"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Help"
android:textColor="#color/white"
android:textSize="10dip" />
</LinearLayout>
To have content that takes the whole space height you will have to play with the weight of your child Views and their respective height.
I don't get where is your first image icon_photo. Doesn't look to be in your screenshots.
<?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"
android:background="#drawable/bg_login" >
<ImageView
android:id="#+id/icon_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:src="#drawable/logo_white" />
<Button
android:id="#+id/btn_feed"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="10dp"
android:background="#drawable/gradient_feed"
android:drawableTop="#drawable/feed"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Feed"
android:textColor="#color/white"
android:textSize="10dip" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/btn_profile"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:background="#drawable/gradient_profile"
android:drawableTop="#drawable/profile"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Profile"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
<Button
android:id="#+id/btn_new_challenge"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/gradient_new_challenge"
android:drawableTop="#drawable/new_challenge"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="New Challenge"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
<Button
android:id="#+id/btn_rankings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:background="#drawable/gradient_rankings"
android:drawableTop="#drawable/rankings"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Rankings"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/btn_factory"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:background="#drawable/gradient_factory"
android:drawableTop="#drawable/task_factory"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Task Factory"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
<Button
android:id="#+id/btn_settings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/gradient_settings"
android:drawableTop="#drawable/settings"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Settings"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
<Button
android:id="#+id/btn_gadgets"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:background="#drawable/gradient_gadgets"
android:drawableTop="#drawable/gadgets"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Gadgets"
android:textColor="#color/white"
android:textSize="10dip"
android:layout_weight="1.00" />
</LinearLayout>
<Button
android:id="#+id/btn_store"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/gradient_store"
android:drawableTop="#drawable/store"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Store"
android:textColor="#color/white"
android:textSize="10dip" />
<Button
android:id="#+id/btn_help"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/gradient_help"
android:drawableTop="#drawable/help"
android:gravity="center|center_vertical"
android:padding="10dp"
android:text="Help"
android:textColor="#color/white"
android:textSize="10dip"
/>
</LinearLayout>
The difference between those screen is high. You will maybe have to play with different layouts or different box sizes using the values but if your drawables size are not the same you can probably deal without having multiple layouts.
http://developer.android.com/guide/practices/screens_support.html
I would create different layout folders for different resolution, density. I wouldn't just use one xml for all different phone sizes out there. You probably want to pick out the most popular ones and just aim for those.
I have an ImageView (android:id="#+id/unreadmail) which i want to show on extreme left of ListItem as shown in image. But it is not aligning properly. Any idea if i am missing anything ?
<LinearLayout
android:id="#+id/Text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/emailsubject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="abcd"
android:textColor="#444444"
android:textSize="18sp" />
<TextView
android:id="#+id/emailcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/emailsubject"
android:layout_below="#id/emailsubject"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:text="defg"
android:textColor="#444444"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/unreademail"
android:layout_width="2dip"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/emailsubject"
android:layout_centerVertical="true"
android:background="#8A6175"
android:visibility="invisible" />
<TextView
android:id="#+id/rcvdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="20dip"
android:textColor="#313132"
android:textSize="12sp" />
Use this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="ObsoleteLayoutParam,ContentDescription,UselessLeaf,UselessParent" >
<LinearLayout
android:id="#+id/Text"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/unreademail"
android:layout_width="15dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/ic_launcher"
android:visibility="visible" />
<LinearLayout
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginLeft="20dp"
android:orientation="vertical" >
<TextView
android:id="#+id/emailsubject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="abcd"
android:textColor="#444444"
android:textSize="18sp" />
<TextView
android:id="#+id/emailcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/emailsubject"
android:layout_below="#id/emailsubject"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:text="defg"
android:textColor="#444444"
android:textSize="14sp" />
</LinearLayout>
<RelativeLayout
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:gravity="right"
android:layout_gravity="right"
android:orientation="horizontal" >
<TextView
android:id="#+id/rcvdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="35dp"
android:text="Date"
android:textColor="#000"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I think you should be using a relative layout at the top level (possibly not included in your code).
You cannot use 'to the left of' when the elements are at different levels in the heirarchy.
Thus I would start with your little icon left aligned to the parent and put the edit box (in the same relative view) 'to the right of' the icon.
This is the code sample for you there is no need to write the weight property if add the screenshot or the supported image how exactly you want then i can give you proper answer
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/unreademail"
android:layout_marginLeft="10dip"
android:orientation="vertical">
<TextView
android:id="#+id/emailsubject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="abcd"
android:textColor="#444444"
android:textSize="18sp" />
<TextView
android:id="#+id/emailcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/emailsubject"
android:layout_below="#id/emailsubject"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:text="defg"
android:textColor="#444444"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/unreademail"
android:layout_width="2dip"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#8A6175"
android:visibility="invisible" />
<TextView
android:id="#+id/rcvdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="20dip"
android:textColor="#313132"
android:textSize="12sp" />
</RelativeLayout>
<?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="wrap_content"
android:orientation="vertical"
android:padding="5dip" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip"
android:padding="1dip" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="20dp"
android:text="Total Pregnancies"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="30dp"
android:text="10"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="160dp"
android:text="Full Term"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="75dp"
android:text="11"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="190dp"
android:text="Premature"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="30dp"
android:text="12"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/linearLayout1"
android:layout_below="#+id/linearLayout1"
android:layout_marginTop="35dp"
android:padding="1dip" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="20dp"
android:text="Multiples"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="85dp"
android:text="16"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="160dp"
android:text="Living"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="95dp"
android:text="17"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/linearLayout1"
android:layout_centerVertical="true"
android:padding="1dip" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="20dp"
android:text="Ab Included"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="70dp"
android:text="13"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="160dp"
android:text="Ab Spontaneous"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="30dp"
android:text="14"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="190dp"
android:text="Ectopics"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="35dp"
android:text="15"
android:textColor="#000000" />
</LinearLayout>
</RelativeLayout>
Can anyone tell me whats wrong with this layout as it seems not working in portrait mode, but perfectly fits the screen when it comes to landscape. I have attached the screen shot of what i am trying to do, the above is a lists which is added to a ListView.
Update:
The View gets gets cluttered when in portrait mode.
There are some problems with what you've written:
You assume that the width would suffice no matter what is the screen . You might want to add a horizontalScrollView or use a different layout.
You have the same id for each of the layouts.
Why do you have android:orientation="vertical" for your RelativeLayout?
All the LinearLayouts have the same id linearLayout1. I think you should give different ids to different views.
I try to create somekind of stroke on top of my screen which displays 4 things. An backbutton on the left, the level name in the center and scoreInfoOne and scoreInfoTwo on the right, but below each other. I use following code, but the strange thing is that the level name doesn't appear to be centered, the longer the value of scoreInfoTwo is, the more the level name is on the left. Any ideas?
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="35dp"
android:background="#25ab89"
android:orientation="horizontal"
android:weightSum="4" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/ivBackButton"
android:layout_width="18dp"
android:layout_height="18dp"
android:src="#drawable/arrow" />
</LinearLayout>
<TextView
android:id="#+id/tvScoreBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:gravity="center"
android:text="level"
android:textColor="#ffffff"
android:textSize="18dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical"
android:paddingRight="2dp" >
<TextView
android:id="#+id/tvScoreInfoOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="0/30"
android:textColor="#ffffff"
android:textSize="12dp" />
<TextView
android:id="#+id/tvScoreInfoTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="score:"
android:textColor="#ffffff"
android:textSize="12dp" >
</TextView>
</LinearLayout>
Your child views must set the layout_width to zero:
android:layout_width="0px"
So your layout would then look like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="35dp"
android:background="#25ab89"
android:orientation="horizontal"
android:weightSum="4" >
<LinearLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/ivBackButton"
android:layout_width="18dp"
android:layout_height="18dp"
android:src="#drawable/arrow" />
</LinearLayout>
<TextView
android:id="#+id/tvScoreBoard"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:gravity="center"
android:text="level"
android:textColor="#ffffff"
android:textSize="18dp" />
<LinearLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical"
android:paddingRight="2dp" >
<TextView
android:id="#+id/tvScoreInfoOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="0/30"
android:textColor="#ffffff"
android:textSize="12dp" />
<TextView
android:id="#+id/tvScoreInfoTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="score:"
android:textColor="#ffffff"
android:textSize="12dp" >
</TextView>
</LinearLayout>
First off, you cannot use android:layout_gravity="anything" in a LinearLayout. For LinearLayouts you use the weights to define how much space you want to use. For what you are trying to do, I suggest using a RelativeLayout then you can just define where you want your TextView or other items by using android:layout_below="#+id/other_textview and there are lots of android:layout_[direction] to choose from, and you can use layout_gravity="center_horizontal" with these.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="35dp"
android:background="#25ab89">
<ImageView
android:id="#+id/ivBackButton"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/arrow" />
<TextView
android:id="#+id/tvScoreBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_below="#id/ivBackButton"
android:gravity="center"
android:text="level"
android:textColor="#ffffff"
android:textSize="18dp" />
<TextView
android:id="#+id/tvScoreInfoOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_below="#id/tvScoreBoard"
android:alignParentRight="true"
android:text="0/30"
android:textColor="#ffffff"
android:textSize="12dp" />
<TextView
android:id="#+id/tvScoreInfoTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_below="#id/tvScoreInfoTwo"
android:alignParentRight="true"
android:text="score:"
android:textColor="#ffffff"
android:textSize="12dp" />
</RelativeLayout>