Hi guys, I hope that this is in the right place.
So I have been making an app for a few weeks (First one) and I had no idea that android apps was not responsive to screen size. OK not so bad. I have come from HTML CSS and PhP so that type of thing is a constant battle!
I did some digging and found out a few things, I found this sizing.
xhdpi: 720px by 1280px
large-hdpi: 640px by 960px
hdpi: 480px by 640px
mdpi: 320px by 480px
ldpi: 240px by 320px
When I first started creating the app I stuck all of the images in the mdpi folder! and well that did not work. So following the guide I rezied all of the images put them in those folders to the right size ect I also created all of the same layout folders.
layout-small
layout-large
laout-normal
layout-xlarge
not forgetting to add what was needed to the manifest
Code:
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true" />
Before I did this things would move around not the images but the text would jump around on smaller or larger phone sizes looking nothing like what it does in Eclipse. So after adding all the new folder ect I loaded up the emulator and got up a small phone, and it looked great, I emailed the app to myself to test on my phone again, and things are all out of place (The text) The images are in odd shapes too.
on what I would call normal phone sizes the text is still moving around and is not going into the positions that I set them to.
I do hope this makes sense! I a little tied!
Thanks guys, hope to get this issue sorted very soon
I can't really tell what the problem is without looking at the layout XML, but off the top of the head, did you use "dp" and "sp" units to keep the sizing relative?
What kind of layout did you use? Are the positioning absolute or relative?
You could also create different layout folders, but I think that the problems are in the layout files. If you post them (or one of them), we will be able to help you better.
When I was rezing the images I was using an online image editor, I set them all into px.
Here is the layout for one of the xml files,
Code:
<?xml version="1.0" encoding="utf-8"?>
THERE WAS A LINK OR SOMETHING HERE BUT THE SITE WOULD NOT ALLOW IT, NOT SURE WHAT IT WAS!
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/p7" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Name"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<TextView
android:id="@+id/TextView05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Size To Earth"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<TextView
android:id="@+id/TextView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="64"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<TextView
android:id="@+id/TextView04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView10"
android:layout_centerHorizontal="true"
android:text="Orbital Period"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView09"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView04"
android:layout_centerHorizontal="true"
android:layout_marginBottom="156dp"
android:text="8,083,079,690 km²"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView08"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView03"
android:layout_alignLeft="@+id/TextView09"
android:layout_marginBottom="86dp"
android:text="2,877,000,000 km"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView08"
android:layout_centerHorizontal="true"
android:text="Distance From The Sun"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView09"
android:layout_alignRight="@+id/TextView04"
android:text="Surface Area"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView05"
android:layout_centerHorizontal="true"
android:layout_marginBottom="93dp"
android:text="83.7 Years"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Uranus"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<TextView
android:id="@+id/TextView07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="0d 17h 14m"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView07"
android:layout_alignRight="@+id/TextView03"
android:text="Length Of Day"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</RelativeLayout>
This is in the layout-normal folder.
If you need anymore of the code I will get it, there is a lot of pages though.
Thanks
Koki180 said:
When I was rezing the images I was using an online image editor, I set them all into px.
Here is the layout for one of the xml files,
Code:
<?xml version="1.0" encoding="utf-8"?>
THERE WAS A LINK OR SOMETHING HERE BUT THE SITE WOULD NOT ALLOW IT, NOT SURE WHAT IT WAS!
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/p7" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Name"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<TextView
android:id="@+id/TextView05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Size To Earth"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<TextView
android:id="@+id/TextView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="64"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<TextView
android:id="@+id/TextView04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView10"
android:layout_centerHorizontal="true"
android:text="Orbital Period"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView09"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView04"
android:layout_centerHorizontal="true"
android:layout_marginBottom="156dp"
android:text="8,083,079,690 km²"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView08"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView03"
android:layout_alignLeft="@+id/TextView09"
android:layout_marginBottom="86dp"
android:text="2,877,000,000 km"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView08"
android:layout_centerHorizontal="true"
android:text="Distance From The Sun"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView09"
android:layout_alignRight="@+id/TextView04"
android:text="Surface Area"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView05"
android:layout_centerHorizontal="true"
android:layout_marginBottom="93dp"
android:text="83.7 Years"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Uranus"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<TextView
android:id="@+id/TextView07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="0d 17h 14m"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/TextView07"
android:layout_alignRight="@+id/TextView03"
android:text="Length Of Day"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</RelativeLayout>
This is in the layout-normal folder.
If you need anymore of the code I will get it, there is a lot of pages though.
Thanks
Click to expand...
Click to collapse
Thank you for this.
I think that the problem are lines like these:
Code:
android:layout_above="@+id/TextView04"
android:layout_marginBottom="156dp"
You use a margin. Now, on a bigger phone, this margin is smaller. That's causing the issues.
With screenshots (one showing the layout how you want it and one how it is shown on big screens) we could help you better.
One thing for the meantime: Have a look at dimension resources. You can put these files into directories like values-large and values-small, too. (More on that: Link)
Btw, the link is the android namespace which is the same in every xml file. (For Android development you don't have to know what it is. Just don't remove it in your file. )
Wihtout the Margins ect how would the text be place into the right places? (Taking knowlage from html and css =D )
Koki180 said:
Wihtout the Margins ect how would the text be place into the right places? (Taking knowlage from html and css =D )
Click to expand...
Click to collapse
No. It wouldn't be placed right. There need to be some changes for the margings. You could define them as a dimension resource. And those can be put into /res/values-small, /res/values-large and other folders like these.
As I said above, with some screenshots we could help you better. (You can replace all texts and images if you want. )
Maybe some other layout would be better. But we can't tell you without any screenshots.
Related
Hey guys,
I'm in the process of writing my first android app and something really strange is happening. I'm using a TabletLayout with the first two rows have spinners. On the third row, however I have an EditText box. Now, whenever I type in the text box, the spinners start to move in unison to the right. I have no idea what could be causing this and I don't even know where to look so I'd really appreciate your help.
Sorry for the horrible video quality. I didn't want to install video capture software on my work computer(yes, this is for work though this app is totally just to get me familiar with the tools) and I'm running MM's Gingerbread rom on my N1 which doesn't have hd video recording yet.
Here's the xml file
Code:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Convert from:"
android:gravity="left" />
<Spinner android:id="@+id/from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"/>
</TableRow>
<TableRow>
<TextView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="to:"
android:gravity="left" />
<Spinner android:id="@+id/to"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</TableRow>
<TableRow>
<EditText android:id="@+id/value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Enter value"
android:gravity="right"/>
</TableRow>
<TableRow android:gravity="right">
<Button android:text="submit" android:layout_height="wrap_content" android:layout_width="wrap_content" android:textSize="24dip" android:id="@+id/submit" android:gravity="center|right" android:layout_gravity="right"></Button>
</TableRow>
</TableLayout>
Thanks so much,
Samuel Maskell
apparently embedding the video didn't work
here's the link
http://www.youtube.com/watch?v=D7IfVcGu3Ig
Here you go, under EditText, replace
Code:
android:layout_width="wrap_content"
with
Code:
android:layout_width="fill_parent"
well that was simple..
worked like a charm
Thanks,
Samuel maskell
smaskell said:
well that was simple..
worked like a charm
Thanks,
Samuel maskell
Click to expand...
Click to collapse
No problem, glad i could help
Hello Devs,
I need a little help with Android ListView:
I have a TabActivity with 3 Tabs, which has 3 ListViews defined in its layout.xml.
I dont want to spend every TabView its own Activity because they are basically doing the same: Showing a ListView with the same Data, just another set of it. For this I override an AdapterView, to show my Custom list row. Im calling the setAdapter() and setOnItemClickListener() on each of my ListViews. Its compiling well, showing Lists in emulator or on my nexus. But the onItemClick Event won't get fired on touches. If I take the trackball or the d-pad, focussing a row and press it gets fired! My guess is, that it has something to do with my laout.xml file, because if i focus a row and touch anywhere it looses its focus.
I tried many things to get it working, but I have no idea anymore.
Can someone of you look over this xml, and tell me, what I am doing wrong?
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_linlay_parent"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="@+id/main_tablinear"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="@+id/main_list_current"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"/>
<ListView
android:id="@+id/main_list_expired"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<ListView
android:id="@+id/main_list_future"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</FrameLayout>
</LinearLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
I'm having problems sizing an image to a button. I want it to be sized (to fill the button) dependent on whatever phone it might be run on, but the image seems to be huge on the screen an dnot even fit on the left and right sides. Below are 2 different code snipets from my main.xml, but neither work:
1st attempt...
<LinearLayout
androidrientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:id="@+id/ImageView01"
android:src="@drawable/grim"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="center">
</ImageView>
</LinearLayout>
2nd attempt...
<LinearLayout
androidrientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageButton
android:id="@+id/widget30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/grim"
>
</ImageButton>
</LinearLayout>
just do a "Button" instead of an "ImageButton", you can also adjust the size of the button/image by changing the font size associated with it.
I'm starting to learn some xml-theme-coding and looked into the "keyguard_screen_sim_pin_portrait.xml" from Sony. I've a question regarding the following code part:
Code:
<TableLayout android:layout_gravity="center_horizontal" android:id="@id/keyPad" android:background="#10000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:layout_below="@id/topDisplayGroup">
<TableRow android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="66.0dip" android:directionality="none">
<Button android:textAppearance="@style/SEMCTextAppearance.ExtraLarge" android:textColor="#ffffffff" android:id="@id/one" android:background="@drawable/semc_dial_num_1_large" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1.0" />
<Button android:textAppearance="@style/SEMCTextAppearance.ExtraLarge" android:textColor="#ffffffff" android:id="@id/two" android:background="@drawable/semc_dial_num_2_large" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1.0" />
<Button android:textAppearance="@style/SEMCTextAppearance.ExtraLarge" android:textColor="#ffffffff" android:id="@id/three" android:background="@drawable/semc_dial_num_3_large" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1.0" />
</LinearLayout>
</TableRow>
Why did they insert a TableLayout plus a horizontal LinearLayout? Isn't it redundant? It's just a small question and I hope the right forum.
It might make sense. Let's assume that the second line has got two views and that they are put into a LinearLayout, too.
It will look like this: (|--V--| is a place holder for a view.)
Code:
|--V--|--V--|--V--|
|----V---|---V----|
If there were no Linear Layouts, it would look like this:
Code:
|--V--|--V--|--V--|
|--V--|--V--|
However, you could do this better using a RelativeLayout.
Could you please post the other TableRows?
They're the same as the first one (it's the keypad for the sim card pin), but your answer makes sense. Thank you!
i worked it in relativelayout..then i did in linearlayout
all same result
textvie above spinner.. the textview is a bit more onto the left then the spinner..so design not looking that nice.
<TextView
android:layout_marginLeft="8dip"
android:id="@+id/selectStatement"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="@string/select_choice" />
<Spinner
android:id="@+id/dropDownList"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
I solved it adding marginleft="8dip"
but dont think its best solution... why does spinner take a left padding while drawn?
Use RelativeLayout and align it to a certain position and then add required padding. Add this to the Spinner:
Code:
android:layout_alignParentLeft="true"
android:layout_below="@id/selectStatement"
<!-- If required -->
android:layout_marginLeft="xxdp