I have tried to make a Horizontal scrolling of list of 5 images in my app.I wrote the following XML in my app. The problem that i am facing is it leaves a blank
area to the left and right of the screen ,i.e is blamk area before the image list starts and some blank area after the image list .
XML
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingRight="20dp"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingRight="20dp"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingRight="20dp"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingRight="20dp"
android:src="#drawable/people" />
</LinearLayout>
</HorizontalScrollView>
Can anyone Help me how to remove this unwanted blank area ?
I tried NagarjunaReddy suggestion, but I got the result as shown in screenshot below.
I got the answer to my question .Actually this blank space is coming because of my mobile system operating system android versin 4.0. I checked my same app in android ver2.3 there i dint get any blank space anyways.
Remove android:paddingRight="20dp" for all the <ImageView>s
try this remove pading for all imageviews android:paddingRight="20dp"
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/people" />
</LinearLayout>
It should have nothing to do with the OS version.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/people" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/people" />
</LinearLayout>
You should get something like this:
Related
Image is set out of imageview on app startup as shown in screenshot and fixes automatically on imageview click.
[![enter image description here][1]][1]
I need to fit image on startup itself.
Sorry,if i wasnt able to ask question properly.if any doubts pls ask me.
item_list.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<CheckBox
android:id="#+id/checkboxItem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.2"
android:textSize="16sp"
tools:text="Tea" />
<LinearLayout
android:id="#+id/linearRate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.8"
android:gravity="center">
<com.mikepenz.iconics.view.IconicsImageView
android:id="#+id/textSubtractRate"
android:layout_width="30dp"
android:layout_height="30dp"
app:iiv_color="#color/md_grey_400"
/>
<EditText
android:id="#+id/textRate"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:digits="0123456789"
android:gravity="center"
android:inputType="number|textNoSuggestions"
android:singleLine="true"
android:textSize="18sp"
tools:text="3" />
<com.mikepenz.iconics.view.IconicsImageView
android:id="#+id/textAddRate"
android:layout_width="30dp"
android:layout_height="30dp"
app:iiv_color="#color/md_green_600"
app:iiv_icon="faw_plus_circle"
app:iiv_size="25sp" />
</LinearLayout>
</LinearLayout>
Try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<CheckBox
android:id="#+id/checkboxItem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.2"
android:textSize="16sp"
tools:text="Tea" />
<LinearLayout
android:id="#+id/linearRate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.8"
android:gravity="center">
<ImageView
android:id="#+id/textSubtractRate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"/>
<EditText
android:id="#+id/textRate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:digits="0123456789"
android:gravity="center"
android:inputType="number|textNoSuggestions"
android:singleLine="true"
android:textSize="18sp"
tools:text="3" />
<ImageView
android:id="#+id/textAddRate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
Because your linearRate layout's weight width (0.8) is not enough for the images and the text.
If your intention for using layout_weight is for giving the rest of the empty space for the Checkbox, remove the android:weightSum="2" from the root layout, remove the weight from linearRate, and make checkboxItem's weight 1.
Please check this and let us know your feedback..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="?attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:weightSum="100">
<CheckBox
android:id="#+id/checkboxItem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="60"
android:textSize="16sp"
tools:text="Tea" />
<LinearLayout
android:id="#+id/linearRate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="40"
android:gravity="center">
<ImageView
android:id="#+id/textSubtractRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_indeterminate_check_box" />
<EditText
android:id="#+id/textRate"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:digits="0123456789"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:gravity="center"
android:inputType="number|textNoSuggestions"
android:singleLine="true"
android:textSize="18sp"
tools:text="3" />
<ImageView
android:id="#+id/textAddRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_box" />
</LinearLayout>
</LinearLayout>
I have a requirement where there needs to be a horizontal row of buttons with different images for different tap states and text on the bottom. For the life of me, I can't figure out how to keep the aspect ratio, my button backgrounds look stretched wide.
I'm using a LinearLayout and each button has equal weight. That made the buttons equal size to each other but I wanted to keep the background image aspect ratio square. The ideal layout would be a row of square sized buttons...
I have tried this solution but it is for an ImageButton.
My main.xml looks like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:weightSum="5">
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/menu"
android:gravity="center|bottom"
android:text="Settings" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null" />
</LinearLayout>
And my layout looks like this, yes I realize some buttons don't have images yet. How should I fix the aspect ratio?
Your layout will be look like this :
Your Bottom Layout will be like this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:background="#color/gray_light1"
android:layout_alignParentBottom="true">
<include layout="#layout/home_bottom"/>
you can include this LinearLayout to your Bottom LinearLayout :
home_bottom.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/home_ll"
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="?android:attr/selectableItemBackground"
android:layout_height="55dp">
<ImageView
android:id="#+id/home_img"
android:background="#mipmap/ic_home"
android:layout_width="25dp"
android:layout_height="25dp" />
<TextView
android:layout_marginTop="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blacklike"
android:textSize="10dp"
android:text="Home"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/search_ll"
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="?android:attr/selectableItemBackground"
android:layout_height="55dp">
<ImageView
android:id="#+id/search_img"
android:background="#mipmap/ic_search"
android:layout_width="25dp"
android:layout_height="25dp" />
<TextView
android:layout_marginTop="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blacklike"
android:textSize="10dp"
android:text="Search"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/categories_ll"
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="?android:attr/selectableItemBackground"
android:layout_height="55dp">
<ImageView
android:id="#+id/categories_img"
android:background="#mipmap/ic_categories"
android:layout_width="25dp"
android:layout_height="25dp" />
<TextView
android:layout_marginTop="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blacklike"
android:textSize="10dp"
android:text="Categories"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/cart_ll"
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="?android:attr/selectableItemBackground"
android:layout_height="55dp">
<LinearLayout
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/cart_img"
android:background="#mipmap/ic_cart"
android:layout_width="25dp"
android:layout_height="25dp" />
<TextView
android:gravity="center"
android:layout_marginLeft="-10dp"
android:layout_width="18dp"
android:layout_height="18dp"
android:textColor="#color/white"
android:textSize="10dp"
android:background="#mipmap/ic_cart_back"
android:text="8"
/>
</LinearLayout>
<TextView
android:layout_marginTop="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blacklike"
android:textSize="10dp"
android:text="Cart"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/account_ll"
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="?android:attr/selectableItemBackground"
android:layout_height="55dp">
<ImageView
android:id="#+id/account_img"
android:background="#mipmap/ic_account"
android:layout_width="25dp"
android:layout_height="25dp" />
<TextView
android:layout_marginTop="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blacklike"
android:textSize="10dp"
android:text="Account"
/>
</LinearLayout>
</LinearLayout>
I want to change a design of me item in GridView.
Now is:
I want this item in square shape not like it is now in rectangle.
Also, the IMG (from the screenshot) i want to have above 'Name' and every textview at the center. Is it possible? Here is my XML:
<?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"
android:background="#color/md_brown_100"
android:orientation="vertical"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp" >
<TextView
android:id="#+id/credit_wallet"
android:text="#string/hi"
android:gravity="center"
android:textColor="#color/md_brown_700"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<com.justfashion.Logo
android:text="Fashion Wallet"
android:gravity="center"
android:textColor="#color/md_brown_700"
android:layout_marginTop="25dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<LinearLayout android:id="#+id/list_offer_item_container"
android:layout_marginTop="15dp"
android:layout_below="#id/text"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/shape"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/txtname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="1dp"
android:textColor="#48899f"
android:textSize="#dimen/textsizeearncredit_title"
android:text="Name"
android:textAllCaps="false"
android:textStyle="normal|bold" />
<TextView
android:id="#+id/txtdesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:maxLines="1"
android:textColor="#80869c"
android:textSize="#dimen/textsizeearncredit_desc"
android:text="This is a description of the offer and this is just a demo to show off 3 lines stacking correctly on top of each other"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center_vertical">
<TextView android:id="#+id/list_offer_badge_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/list_offer_item_container"
android:textColor="#color/md_amber_700"
android:textSize="12sp"
android:visibility="gone"
android:text=""/>
</LinearLayout>
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="42dp"
android:layout_above="#+id/txtname"
android:contentDescription="#string/app_name"
android:gravity="center"
android:layout_height="42dp" />
<ImageView
android:id="#+id/nextArrow"
android:layout_alignParentRight="true"
android:tint="#color/md_grey_300"
android:rotation="180"
android:layout_width="32dp"
android:visibility="gone"
android:layout_marginRight="16dp"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_height="32dp"
android:contentDescription="#string/app_name"
android:padding="#dimen/two" />
</LinearLayout>
</RelativeLayout>
I tried a lot of combination and don't works. Please help me guys! Thanks!
EDIT
The IMG from the screenshot is
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="42dp"
android:layout_above="#+id/txtname"
android:contentDescription="#string/app_name"
android:gravity="center"
android:layout_height="42dp" />
In the code above
I'm building my own application game for Android, it's a Tic Tac Toe game.
my activities contains mostly ImageViews , all the images placed in the dir res\drawable-mdpi ONLY.
the rest of the drawable folders are empty.
my problem is that when i run the app on a 5.4 inch MDPI screen it works fine and it looks like this:
but when i run the app on another screen of different size for example this 4.65 inch XHDPI screen, it looks like this:
in the above activity i used LinearLayout and RelativeLayout, what should i do to fit my layout to any screen ?
thanks
thanks for editting the pictures
this is the code of the xml file of activity_board.xml:
<?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="wrap_content"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/board"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:text="#string/playersName"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:text="#string/playersPoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:text="#string/machinePoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp" >
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="55dp" >
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="315dp"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="6dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="105dp"
android:text="#string/gameNumber"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="390dp"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>
Are you using RelativeLayout?
You should
1. use RelativeLayout as the base container
2. put the "Player" and "System" score inside the same horizontal LinearLayout so that they won't overlap
3. Put the "End game" button as an element which align parent bottom
The screenshots you attached shows that it's a problem caused by the soft status bar. RelativeLayout would help and you should try to prevent hard-coding the dimensions in numbers but making the auto-adjust in RelativeLayout using margins, "layout_toLeftOf", "layout_toRightOf" and etc.
Create a drawable folder, just the word "drawable", in res and put your game images in there. That will make the game images the same across every device density.
Without looking at your XML, I would agree that you're probably using hardcoded dp values instead of sizing the layout with math, ie, weights, match_parent, alignParentRight, etc.
I have adjusted your XML to be easier. I did not plug it into a previewer or anything.
<?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="wrap_content"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_marginLeft="ADJUST ME"
android:layout_marginRight="ADJUST ME"
android:background="#drawable/board"
android:orientation="vertical" >
<!-- Scoreboard -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:layout_alignParentLeft="true"
android:text="#string/playersName"
android:textSize="30sp" />
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:layout_toLeftOf="#id/players_name"
android:text="#string/playersPoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#id/machines_name"
android:text="#string/machinePoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:layout_alignParentRight="true"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="ADJUST ME" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/gameNumber"
android:textSize="25sp" />
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>
So i am creating this app which will display products in a grid, so for example on a nexus 7 portrait view, it will be 2 in each row, while in landscape mode, there will be 4 in a row.
Each product has a imagine, and then a few textviews below it displaying a few information.
However the last two textviews, which display free delivery and number of special offers, seems to be overlapped by the next image below. Could anyone please help me pin point where im going wrong. The layout is below:
<?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:gravity="center_horizontal"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/product_grid_lister_image_background"
android:padding="1dp" >
<ProgressBar
android:id="#+id/image_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progress_blue" />
<ImageView
android:id="#+id/product_grid_lister_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:scaleType="center"/>
</RelativeLayout>
<RatingBar
android:id="#+id/product_grid_lister_rating_bar"
style="#style/GoldRatingBar.Large"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_marginTop="5dp"
android:numStars="5" />
<TextView
android:id="#+id/product_grid_lister_product_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="2"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_14pt" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/product_grid_lister_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_20pt" />
<TextView
android:id="#+id/product_grid_lister_was_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_price_text"
android:includeFontPadding="false"
android:textColor="#color/grey"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_offer_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_was_price_text"
android:includeFontPadding="false"
android:textColor="#color/red"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_special_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_special_offer" />
<TextView
android:id="#+id/product_grid_lister_delivery_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_special_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_delivery_offer" />
<CheckBox
android:id="#+id/product_grid_lister_star_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:paddingLeft="6dp"
android:button="#drawable/product_grid_star_checkbox"
android:focusable="false" />
</RelativeLayout>
</LinearLayout>
You're missing a namespace declaration as well as a root layout. You need a root layout to anchor everything else in. Depending on your needs, perhaps a LinearLayout would do the trick. Below I've wrapped everything in a vertically oriented linear layout. Let me know if that solves anything for you.
<?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" >
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/product_grid_lister_image_background"
android:padding="1dp" >
<ProgressBar
android:id="#+id/image_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progress_blue" />
<ImageView
android:id="#+id/product_grid_lister_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:scaleType="center" />
</RelativeLayout>
<RatingBar
android:id="#+id/product_grid_lister_rating_bar"
style="#style/GoldRatingBar.Large"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_marginTop="5dp"
android:numStars="5" />
<TextView
android:id="#+id/product_grid_lister_product_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:includeFontPadding="false"
android:lines="2"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_14pt" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/product_grid_lister_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_20pt" />
<TextView
android:id="#+id/product_grid_lister_was_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_price_text"
android:includeFontPadding="false"
android:textColor="#color/grey"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_offer_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_was_price_text"
android:includeFontPadding="false"
android:textColor="#color/red"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_special_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_special_offer" />
<TextView
android:id="#+id/product_grid_lister_delivery_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_special_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_delivery_offer" />
<CheckBox
android:id="#+id/product_grid_lister_star_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:button="#drawable/product_grid_star_checkbox"
android:focusable="false"
android:paddingBottom="6dp"
android:paddingLeft="6dp"
android:paddingTop="6dp" />
</RelativeLayout>
</LinearLayout>