I just wrote all this and I'm being told by this little red bar that I can't post pictures, or more than two links. So if you could kindly reference this Imgur album, that'd be great. Thank you.
I'm relatively new here and even newer to android programming. I am trying to write an app that emphasizes visual appeal more than functional appeal. It's not an assignment or work related, it's just something I wanna try out.
So I've hit a roadblock. I am wrangling with the layout of some TextView boxes when in different emulators and devices. I have been reading this but it's kind of long and it doesn't seem to solve my problem and honestly, it's just over my head.
So here's my issue.
I have some TextView boxes and I used the layout attributes in XML, and in the Design window with a Nexus 4 mock device in Android studio, it looks like this (Image 1)
The code looks like this:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/anger"
android:id="#+id/angertv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="36dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/happiness"
android:id="#+id/happinesstv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_centerVertical="true"
android:layout_alignParentStart="true"
android:layout_marginStart="34dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fear"
android:id="#+id/feartv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="165dp"
android:layout_marginEnd="100dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sadness"
android:id="#+id/sadnesstv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="165dp"
android:layout_marginStart="66dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/surprise"
android:id="#+id/surprisetv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginTop="165dp"
android:layout_marginStart="60dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/disgust"
android:id="#+id/disgusttv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="165dp"
android:layout_marginEnd="74dp" />
I have been using the parent borders to position the 6 words on the devices screen. But when time comes to run it, it looks like this (Image 2) on a Nexus 5 emulator screen, and when on an actual HTC One m8, it looks like this (Image 3).
So I try something like this instead:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/anger"
android:id="#+id/angertv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/center"
android:layout_marginStart="70dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/happiness"
android:id="#+id/happinesstv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/center"
android:layout_marginEnd="67dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fear"
android:id="#+id/feartv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_above="#+id/center"
android:layout_toEndOf="#+id/center"
android:layout_marginBottom="67dp"
android:layout_marginStart="30dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sadness"
android:id="#+id/sadnesstv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_below="#+id/center"
android:layout_toStartOf="#+id/center"
android:layout_marginTop="68dp"
android:layout_marginEnd="12dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/surprise"
android:id="#+id/surprisetv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_above="#+id/center"
android:layout_toStartOf="#+id/center"
android:layout_marginBottom="67dp"
android:layout_marginEnd="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/disgust"
android:id="#+id/disgusttv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_below="#+id/center"
android:layout_toEndOf="#+id/center"
android:layout_marginTop="68dp"
android:layout_marginStart="16dp" />
I use an extra TextView (ID'd center) which is aligned to the center of the device, which is empty and use it to align it the other Views with text in them. These are the results.
Design window Nexus 4: (Image 4)
Nexus 5 emulator: (Image 5)
HTC One m8: (Image 6)
It's better but not quite. Ideally, the words should stay in one place inside the pie slices I have made. I have been looking around but nothing seems specific, and since I'm a beginner at all this, I can't seem to extrapolate from peoples answers to other questions that are maybe similar but not quite like this situation.
If anyone could explain to me how I can solve this issue, or point me in the right direction, I would be very grateful. Thank you.
You can use #dimen different dimen files so that different screen sizes will have different font sizes.
android:textSize="#dimen/text_28"
Have the dimen values in different directories:
res/values/dimen.xml
<dimen name="text_28">28sp</dimen>
res/values-600dp/dimen.xml
<dimen name="text_28">22sp</dimen>
etc.
You'll have to play around with different font sizes and screen sizes but you should be able to find something that works.
http://developer.android.com/training/multiscreen/screensizes.html#TaskUseSizeQuali
And this page shows some popular device metrics:
https://design.google.com/devices/
Related
my code is displaying the two different texts one over the other while i want them to be one above the other. I am providing my code in relative layout.
<TextView
android:id="#+id/intro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="hello im Shailly"
android:textColor="#B82525"
android:textSize="44sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/nexttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingTop="32dp"
android:layout_alignBottom="#id/intro"
android:layout_centerHorizontal="true"
android:minLines="5"
android:text="and i'll show you around this app"
tools:ignore="HardcodedText,MissingConstraints"
/>
This attribute:
android:layout_alignBottom="#id/intro"
aligns the bottom edge of nexttext with the bottom edge of intro.
You should use:
android:layout_below="#id/intro"
so that nexttext is placed below intro.
You need this line of code in your second TextView
android:layout_below="#+id/intro"
So your code looks like
<TextView
android:id="#+id/intro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="hello im Shailly"
android:textColor="#B82525"
android:textSize="44sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/nexttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingTop="32dp"
android:layout_below="#+id/intro"
android:layout_centerHorizontal="true"
android:minLines="5"
android:text="and i'll show you around this app"
tools:ignore="HardcodedText,MissingConstraints"
/>
you may remove:
android:layout_alignBottom="#id/intro"
I've created my android application. The app is complete but it's a problem: when I install this app in other smartphone, objects,that normally are in the screen, are overlapping or not in original position.
My IDE is Android Studio 2.2
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugePH"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_red_900"
app:gaugePointEndColor="#color/md_red_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="14"
app:gaugeSweepAngle="270"
android:layout_alignTop="#+id/gaugePressione"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp"/>
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugePressione"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_blue_900"
app:gaugePointEndColor="#color/md_blue_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="15"
app:gaugeSweepAngle="270"
android:layout_marginTop="39dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="10dp"/>
<TextView
android:id="#+id/textPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textStrPH"
android:layout_marginTop="100dp"/>
<TextView
android:id="#+id/textPressione"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textStrPressione"
android:layout_marginTop="100dp" />
<TextView
android:id="#+id/textStrPressione"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bar"
android:textSize="30dp"
android:textStyle="italic"
android:layout_below="#+id/textPressione"
android:layout_alignLeft="#+id/gaugePressione"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"/>
<TextView
android:id="#+id/textStrPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PH"
android:textSize="30dp"
android:textStyle="italic"
android:layout_alignRight="#+id/gaugePH"
android:layout_alignBottom="#+id/textStrPressione"
android:layout_marginRight= "70dp"
android:textColor="#color/md_black_1000"/>
<Button
android:id="#+id/goMaps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mappa"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="#+id/textTemperatura"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignTop="#+id/textUmidita"
android:layout_alignRight="#+id/textStrPressione"/>
<TextView
android:id="#+id/textStrTemperatura"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="°C"
android:textSize="30dp"
android:textStyle="italic"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"
android:layout_alignRight="#+id/textPressione"
android:layout_alignTop="#+id/textTemperatura"
android:layout_marginTop="40dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="#+id/textUmidita"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textPH"
android:layout_alignTop="#+id/gaugeUmidita"
android:layout_marginTop="60dp"/>
<TextView
android:id="#+id/textStrUmidita"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="%"
android:textSize="30dp"
android:textStyle="italic"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"
android:layout_marginRight="10dp"
android:layout_alignBaseline="#+id/textStrTemperatura"
android:layout_alignBottom="#+id/textStrTemperatura"
android:layout_alignEnd="#+id/textStrPH" />
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugeUmidita"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_red_900"
app:gaugePointEndColor="#color/md_red_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="100"
app:gaugeSweepAngle="270"
android:layout_alignTop="#+id/gaugeTemperatura"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp" />
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugeTemperatura"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_blue_900"
app:gaugePointEndColor="#color/md_blue_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="-20"
app:gaugeEndValue="50"
app:gaugeSweepAngle="270"
android:layout_marginTop="13dp"
android:layout_marginLeft="10dp"
android:layout_below="#+id/gaugePressione"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/textImpianto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Impianto:"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"/>
<TextView
android:id="#+id/textCodImpianto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="145dp"
android:layout_marginBottom="10dp"/>
</RelativeLayout>
There is not a simple answer but start reading Supporting Different Screen Sizes documentation at https://developer.android.com/training/multiscreen/screensizes.html
That is because you are using hard coded values for height and width. Those values have dp - which is density pixel. Since the screens are different, the pixels on those screens will also be different, so those values "will not work".
You should try to use match_parent (which will fill all the space they can within the parent) or wrap_content which will use only the needed space. Usually the width is match_parent and the height is wrap_content.
If have more than one element on that layout, you can also try to use weight, which basically will give a certain percentage to each one of the elements.
Imagine one element with android:weight="1" and another one with android:weight="2". Both those elements will have different "percentages" of the screen.
What are the views that are causing problems?
Are #id/goMaps, #id/textCodImpianto or #id/textImpianto among them?
Here is what Android Studio editor has to say about it (once I replaced hard-coded text with resources):
#id/goMaps can overlap #id/textCodImpianto if #string/_0, #string/mappa grow due to localized text expansion less... (Ctrl+F1)
If relative layout has text or button items aligned to left and right sides they can overlap each other due to localized text expansion unless they have mutual constraints like toEndOf/toStartOf
Substitute text size change with screen size change (the same effect in this case) and you have at least one explanation about why some of your views are overlapping or moved.
At the very least, you are lacking some constraints.
Hello all i need to develop layout like whats app in chatting screen like
in this i want to display time after chat textview complete.
For that i have done
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/blue" >
<TextView
android:id="#+id/tv_message_chat_item_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp"
android:gravity="left|center"
android:paddingBottom="#dimen/one_dp"
android:paddingLeft="#dimen/fifteen_dp"
android:paddingRight="#dimen/five_dp"
android:paddingTop="#dimen/one_dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="fgfdgdf rete tretretret rtrtrwtw fgdfr grtwerwerewr ewrwerew" />
<TextView
android:id="#+id/tv_message_time_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/tv_message_chat_item_f"
android:layout_marginBottom="2dp"
android:paddingRight="#dimen/five_dp"
android:gravity="right"
android:paddingBottom="#dimen/one_dp"
android:text="fgfdg"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
But not working with big message (the time texview not set properly)
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:gravity="bottom"
android:background="#drawable/blue"
android:layout_alignParentStart="true" android:weightSum="10">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Hi"
android:layout_weight="1"
android:id="#+id/textView"
android:gravity="bottom"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="bottom"
android:layout_marginStart="10dp"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
assuming your textView3 is the one with the "Big message" you should first take advantage of relative layout capabilities and use android:layout_below="#id/textview2" this will prevent overlapping with textView2 instead of just aligning everything from the bottom up.
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
then after you set your TextView that will hold your 'time' you can once agian use something like
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView2"
android:gravity="right"
android:layout_alignParentRight="true"
android:text="12:00 pm"
android:textAppearance="?android:attr/textAppearanceSmall" />
Gravity right will allow the text to be place from right to left, since displaying time usually does not take more than 6 or 7 characters it will help.
Hope it resolves your problem.
You will need to implement ImageViews using 9patches (here: link)
And a listview, which can handle CustomLayouts for ListItems (with the 9Patch ImageView).
I think you are able to implement a list view, therefore I don't go deeper here.
Greets.
I am developing an app. In that I am getting data from webservice and I am inserting it in TextView. But, the alignment of the textview is getting scrambled. Please check the image.
First 3 rows(black colored) is in proper order, from the 4th it is scrambled. I googled on it so many times but not getting the exact solution as I wanted.
XML 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="70dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/schedule_1_textView_day_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KKR"
android:layout_weight="1.5"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_matchno"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
android:layout_weight="1.5"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:text="6"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_team1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:text="4"
android:textSize="7sp"
android:textColor="#color/Black"
/>
<TextView
android:id="#+id/schedule_1_textView_team2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_venue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_blank"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_marginTop="20dp"
android:textColor="#color/Black"
android:textSize="6sp"
android:visibility="invisible"
/>
</LinearLayout>
Try this..
You forget to add android:layout_weight="1" for below two TextView Use android:singleLine="true" for all TextView
<TextView
android:id="#+id/schedule_1_textView_venue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:text="6"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_blank"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:text="B"
android:layout_marginTop="20dp"
android:textColor="#color/Black"
android:textSize="6sp"
android:visibility="invisible"
/>
you might wanna assigh android:layout_weight property to the TextViews like:
<TextView
android:id="#+id/schedule_1_textView_venue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp" />
you will need to assign weight according to your requirement. i.e for bigger views you want to assign higher values.
[EDIT] and for the last TextView you may want to set android:layout_gravity="center|right" and android:layout_gravity="center|left" for the first for the text alignment for the rest you should use android:layout_gravity="center"
Add gravity to your TextView like:
android:gravity="center_vertical|center_horizontal"
change gravity to left, right or center as you need...
have you tried adding weight to schedule_1_textView_venue?
It's a little more work, but did you try using TableLayout? This is very useful tutorial that can help you organizing the correct order of views.
EDIT: I think i know what causes the mismatch of the TextViews. It comes from the different length of the values in your last column named VENUE. Take for example the values HYDEBARAD and DELHI - the first one is much longer than the second which makes all the TextViews on the row to go left. I am sure that if you put identical padding to the TextViews you will align them. For example: take your TextViews in MATCH column and write the following: myTextView.setPadding(40, 0, 0, 0) (padding on the left side) this will put them exactly in a straight row. Do the same with the rest TextViews with the proper padding value, take into consideration the length of the values in the other columns... It is a little bit tricky though. :)
Hi I have created an app that i want to run across multiple screens i built the whole thing at HDPi. and when I run it on a newer android phone with a bigger screen the alignment of stuff is out. I know this is because i have set margins to position things using DP.
My question is whats the best practices for using margins across multiple screen sizes and/or is there some code that I can set that can divide/multiply the DP based on screen size?
I'm wanting to get the app across as many devices as possible. but this is my first app so not entirely sure how to do this. So any help would be greatly appreciated.
heres an example of my layout
<?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="20dip"
android:background="#drawable/bg_tablecell"
android:orientation="horizontal"
android:weightSum="1"
>
<TextView
android:id="#+id/position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:paddingLeft="4dip"
android:text="#string/POS"
android:textSize="15dip"
android:textColor="#color/blue"
/>
<TextView
android:id="#+id/TeamName"
android:layout_width="90dip"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:ellipsize="end"
android:gravity="left"
android:lines="1"
android:text="#string/Team"
android:textColor="#color/blue"
android:textSize="15dip"
android:textStyle="bold"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/played"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/TeamName"
android:layout_alignBottom="#+id/TeamName"
android:layout_marginLeft="35dip"
android:layout_toRightOf="#+id/TeamName"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/won"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/played"
android:layout_alignBottom="#+id/played"
android:layout_marginLeft="17dip"
android:layout_toRightOf="#+id/played"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/drawn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/won"
android:layout_alignBottom="#+id/won"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/won"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/lost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/drawn"
android:layout_alignBottom="#+id/drawn"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/drawn"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/goalsFor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/lost"
android:layout_alignBottom="#+id/lost"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/lost"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/goalsAgainst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/goalsFor"
android:layout_alignBottom="#+id/goalsFor"
android:layout_marginLeft="17dip"
android:layout_toRightOf="#+id/goalsFor"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/Difference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/goalsAgainst"
android:layout_alignBottom="#+id/goalsAgainst"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#+id/goalsAgainst"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/Difference"
android:layout_alignBottom="#+id/Difference"
android:layout_marginLeft="18dip"
android:layout_toRightOf="#+id/Difference"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
screens hdpi
screens xhdpi
Well the whole point of using DP is so that you don't have to worry about this. Margins will be roughly the same across devices, but if you're relying on lining things up on one particular device resolution/density combination, you'll definitely be in for a surprise when you test on other devices.
That said, if you do need to specify different margins for different screen sizes, simply add an XML file in res/values -- something like dimens.xml:
<resources
xmlns:android="http://schemas.android.com/apk/res/android"
>
<dimen name="my_view_margin">10dip</dimen>
</resources>
Then add one of these XMLs for every specific device qualifier that you need to (e.g. values-large, values-sw600dp, values-xlarge, etc.) and modify the value as you see fit. When you want to use these dimensions in a layout, just use:
android:layout_margin="#dimen/my_view_margin"
And Android will pick the correct value for whatever device it happens to be running on.