I'm currently learning android development, and before I get too stuck in to a large project, I decided I would need to learn about making an application accessible from as many devices as possible.
So I have a test application using RelativeLayout. The top-level activity has 6 large menu buttons on it. These buttons are square graphical images (not 9-patch buttons as they are - to my knowledge - too graphically primitive). On the device I'm using for testing, these buttons appear in a perfect 2x3 arrangement like such:
However, when I try and run this application on a larger device, the buttons will appear like so:
Is there a way to scale non-9-patch buttons based on the size of the screen, so that they will always appear like the first image? Is this recommended? If not, is there an alternative way of doing such a layout for different screen sizes?
My ideal layout would be scalable across different devices, like so:
I am using similar menu. And here is first row of it. The buttons in this menu has labels too.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:gravity="center" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip" >
<Button
android:id="#+id/screen_home_btn_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_ic_my_profile" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="5dip" >
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_my" />
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_profile"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip" >
<Button
android:id="#+id/screen_home_btn_application"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_ic_my_application" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="5dip" >
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_my" />
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_application"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
It seems you are giving outer margins to the buttons. Align them in center and give spaces between 2 buttons and not the screen border & buttons.
Related
I've got an activity layout specified in an XML file - activity_intro.xml - and I'm trying to create another one that is similar but slightly different - that's going to be activity_instructions.xml.
The Intro activity has a 9patch image at the bottom of the screen that is supposed to stay there and only adjust to different widths of the screens.
The Instructions activity is supposed to contain the same image but above 2 more buttons - all three of these views need to be always located at the bottom of the screen.
activity_intro.xml:
<?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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/introAnimationImageView"
android:layout_width="152dip"
android:layout_height="176dip"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/intro_animation_content_description"
android:src="#drawable/animation_intro01" />
<TextView
android:id="#+id/introTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/introTextViewSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/introButtonLoginSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/intro_button_label_login_signup" />
<Button
android:id="#+id/introButtonInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/introButtonLoginSignup"
android:text="#string/intro_button_label_instructions" />
<Button
android:id="#+id/introButtonReportAnonymously"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introButtonLoginSignup"
android:layout_centerHorizontal="true"
android:text="#string/intro_button_label_report_anonymously" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/footer_cityscape" />
</LinearLayout>
Result:
Since I've got working code for Intro, I wanted to make Instructions follow its example but the layout_weight property isn't behaving as expected. First of all, I was only trying to put in the 2 buttons and leave out the image:
<?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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/instructionsTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/instructions_title_1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<ImageView
android:id="#+id/instructionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/instructions_image_content_description"
android:src="#drawable/forms" />
<TextView
android:id="#+id/instructionsTextViewDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/instructions_description_1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/instructionsButtonPrevious"
style="#style/ButtonPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/instructions_button_label_previous" />
<Button
android:id="#+id/instructionsButtonNext"
style="#style/ButtonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/instructions_button_label_next" />
</RelativeLayout>
</LinearLayout>
This only worked when I set the layout_weight of the bottom RelativeLayout to 1 (instead of 0) and for the ScrollView 0.1 (instead of 1). If I used the original values the RelativeLayout would take up all the screen. Could anyone explain to me why that is?
I also tried googling the issue and noticed people would suggest to set layout_height to 0dip which I tried but it also didn't work as expected.
Secondly, I tried adding the already mentioned ImageView to the bottom RelativeLayout. This, however, basically displays only the ImageView and not the buttons - or one of the buttons is on top of the image (hiding it). Why is that? Don't I specifically set the buttons to be placed below it?
What should the code look like in order for it to be doing what I expect it?
Further explanation:
Below are images that should help indicate what exactly I want to achieve. The green bits are the ScrollViews - I added them because Android devices tend to have diverse screen sizes. Their purpose is to present the content properly independently of the screen size, i.e. if the screen is small, the user will be able to scroll that part to read the entire text and view the image.
The red bit on the left (Intro) shows the ImageView that is supposed to always be at the bottom of the screen; it'll always be there, visible, and it's the green bit above it that will be movable.
If you take a look at the red bit on the right (Instructions), there's a Next button that's covering the image with the lorry/truck that was visible in the Intro screenshot. Now that's wrong - there should be 2 buttons BELOW the image, as seen on the last screenshot (the 2 blue rectangles).
I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.
I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.
I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.
I'm playing around with making a random recipe collection app.
Now I came across a problem: at the moment I have designed it with my mobile's resolution in mind. But what if the app is used on a device with larger resolution eg. a tablet.
What I want to achieve is that I want the buttons to grow shrink depending on the resolution. For example: when holding my phone vertically, there are 2 columns of buttons. When holding it horizontally, there still are 2 columns, but the view gets wider. Then there should be 4 columns to fill as much of the white space as possible.
Two pictures to illustrate my thoughts:
vertical
horizontal with 2 more columns
My code:
<?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:background="#ffcc33"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1000" >
<EditText
android:id="#+id/search_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1000"
android:ems="5"
android:hint="#string/search_hint" />
<Button
android:id="#+id/search_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/search_button" />
</LinearLayout>
<ScrollView android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<RelativeLayout
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_below="#+id/search_box"
android:layout_gravity="center"
android:layout_marginTop="15dp" >
<Button
android:id="#+id/btn_lihatoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:drawableTop="#drawable/lihatoidud"
android:layout_alignParentTop="true"
android:text="Lihatoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_kypsetised"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_lihatoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/kypsetised"
android:text="Küpsetised"
android:textSize="18sp" />
<Button
android:id="#+id/btn_seenetoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_kypsetised"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/seenetoidud"
android:text="Seenetoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_juustutoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_seenetoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/juustutoidud"
android:text="Juustutoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_lisandid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_juustutoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/lisandid"
android:text="Lisandid"
android:textSize="18sp" />
<Button
android:id="#+id/btn_supid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:drawableTop="#drawable/supid"
android:text="Supid"
android:textSize="18sp" />
<Button
android:id="#+id/btn_voileivad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_supid"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/voileivad"
android:text="Võileivad"
android:textSize="18sp" />
<Button
android:id="#+id/btn_pudrud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_voileivad"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/pudrud"
android:text="Pudrud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_joogid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_pudrud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/joogid"
android:text="Joogid"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Android has a few mechanisms for dealing with this kind of thing. For most people simply having a different layout for different classes of device will be sufficient. i.e:
res/
layout/
my_layout.xml
layout-land/ # landscape
my_layout.xml
layout-sw600dp # bigger devices
my_layout.xml
layout-sw600dp-land # Big and landscape
Android will automatically pick the right layout on the device your app gets loaded on. See the Developer Guide for details there. Alternatively, you might need to define your own custom view that resizes your grid based on the available size. An example of this is a CellLayout, a class written for the grid of apps in Launcher
I would actually reccomend you use the GridView pattern.
https://developer.android.com/guide/topics/ui/layout/gridview.html
Benfits include
Easily customize able if you need multiple rows/columns
Faster performance because you re-use a lot the same views. Scales much better than scrollview approach
Here example with two column for Phones
Here example with four column for tablets
All changing only the number of columns the grid should show. The best way to do this by what "JRaymond" recommended, by having multiple values resposnes depending on if its a tablet/phone. Example
->values ->attrs_arin_view.xml
->values-land->attrs_arin_view.xml
->values-sw600dp -> attrs_arin_view.xml
inside values ->attrs_arin_view.xml
<resources>
<integer name="number_of_column">2</integer>
</resources>
and then change in the values-land to have number_of_column to 4.
Then in your in your xml you mention the integer once
<?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="match_parent"
android:orientation="vertical"
>
<GridView
android:id="#+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:horizontalSpacing="8dp"
android:numColumns="#integer/number_of_column"
android:padding="8dp"
tools:listitem="#layout/grid_cell_note"
>
</GridView>
</LinearLayout>
You need to create xml files for different screen sizes
http://developer.android.com/guide/practices/screens_support.html
design your XML files to use references instead of hardcoded strings. You can then assign a reference to layouts, buttons and so on which has a different value depending on screen sizes.
(use android:padding="#dimen/pagepadding" instead of android:padding="16dp" and define the dp in values/dimens.xml like this: <dimen name="pagepadding">16dp</dimen>)
To do that you have to create new folders in your Project like values-sw600dp for devices with 600dp smallest width (like Nexus 7 I believe) or values-sw720dp-land for devices with the smallest width of 720dp (10 inch tablets I believe) in landscape.
Do some reading on the developer page and on the internet for that. It's not too difficult
I'm having a little trouble laying out my android app. I didn't plan it out very well, and i'm not new to java, but im new to these android xml layouts. What i have is a horizontal linear layout parent, which contains two relative layouts. The right relative layout consists of a custom view (GridView) and under it i want 3 buttons. I've added one button (button1) to my xml file and it won't show up on screen as you can see. I'm thinking i need to set the size of my gridview some how? Its height is 2x its width. Or can i set it by pixels programatically at runtime?
I'm also thinking i sort of over complicated things at this point. Like i said i'm new to these weird layouts, im used to just using x and y offsets in .net. Maybe this could all be done in one relative layout instead of using two and nesting them inside a linear layout?
Here's what i got so far:
<?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="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/next" />
<com.mydomain.tetrisv2.PreviewGridView
android:id="#+id/previewGridView1"
android:layout_width="100dp"
android:layout_height="150dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/previewGridView1"
android:text="Score: " />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<com.mydomain.tetrisv2.GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/gridView1"
android:text="Button" />
</RelativeLayout>
</LinearLayout>
I can't post images but heres the visual result: http://i50.tinypic.com/orscgi.png
Also side note (unrelated), this is a project for experimentation and learning purposes but are there any legal copyright repercussions to making a tetris game and putting it on the play store?
Just change our right sides gridview's below button to this code
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" // change is here
android:text="Button" />
Hope this will help you..
I want to make a match game layout in android.
I'm having problem with making my layout compitable to all screen resolutions.
What I want, is an image icon of the home team on the left, a strechable home team image name, home team score text, seperator, away team score text, a strechable away team image name, an image icon of the away team on the right.
The score should be in the middle. I just can't get it right. before this try, I've tried to divide the main layout to 3 layouts: home team layout, score layout and away layout - with no success of getting the expected result.
Can someone please help ?
Here is my piece of code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/GamesBGColor" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/homeTeamIcon"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/holonlogo" />
<ImageView
android:id="#+id/homeTeamText"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/holontext"
android:layout_width="115dip"
android:layout_marginLeft="3dip" />
<TextView
android:id="#+id/homeTeamScore"
android:layout_width="25dip"
android:layout_height="wrap_content"
android:text="123"
android:textColor = "#color/purple"
android:layout_gravity="center"
android:textStyle="bold"
android:layout_marginLeft="5dip" />
<TextView
android:id="#+id/seperator"
android:layout_width="10dip"
android:layout_height="wrap_content"
android:text="-"
android:layout_gravity="center"
android:layout_marginLeft="7dip" />
<TextView
android:id="#+id/awayTeamScore"
android:layout_width="25dip"
android:layout_height="wrap_content"
android:text="122"
android:textColor = "#color/red"
android:layout_gravity="center"
android:textStyle="bold"
android:layout_marginLeft="7dip" />
<ImageView
android:id="#+id/awayTeamText"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/jerusalemtext"
android:layout_width="115dip"
android:layout_marginLeft="3dip"/>
<ImageView
android:id="#+id/awayTeamIcon"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/jerusalemlogo" />
</LinearLayout>
</LinearLayout>
If you want your layouts to work on different resolution screens your should be sizing them using dip as the unit. For example:
android:layout_marginRight="10dip"
dip stands for Device Independent Pixel and using these in your layout means that Android will automatically scale your layout depending on which display the device running your application has.
You can read about these in the Supporting Multiple Screens page in the Android Developer Documentation. This document also has some other options for handling different displays but I think using dip is probably the easiest.