graphic layout implementation

Question

i'm new on android programming. what is the best way to implement this graphic layout on android?

http://8pic.ir/images/d9que1v93nxxp7za7hxv.jpg

this is my way: but

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal" >

   <LinearLayout
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_marginBottom="20dp"
       android:layout_marginLeft="20dp"
       android:layout_marginRight="20dp"
       android:layout_marginTop="20dp"
       android:layout_weight="2"
       android:orientation="vertical" >

       <TextView
           android:id="@+id/textView1"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="my text my text my text my text my text my text my  text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text my text "
           android:textAppearance="?android:attr/textAppearanceMedium"
           android:textSize="20sp" />

   </LinearLayout>

   <LinearLayout
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_marginLeft="20dp"
       android:layout_marginRight="20dp"
       android:layout_weight="1"
       android:orientation="vertical" >

       <Button
           android:id="@+id/button1"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_marginBottom="10dp"
           android:layout_marginTop="20dp"
           android:layout_weight="1"
           android:text="Button" />

       <Button
           android:id="@+id/button3"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_marginBottom="10dp"
           android:layout_marginTop="10dp"
           android:layout_weight="1"
           android:text="Button" />

       <Button
           android:id="@+id/button4"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_marginBottom="20dp"
           android:layout_marginTop="10dp"
           android:layout_weight="1"
           android:text="Button" />

   </LinearLayout>

but: 1) is this correct one? 2) i using 'sp' unit for text size but my text size does not scale good on different screen sizes?

1) Its not wrong. 2) I don't know what `does not scale good on different screen sizes` means. — Athena, Feb 14 '15 at 18:18
it means on 10" devices, the text is very small but on 3" is very large! — saeed mokhlesi, Feb 14 '15 at 18:20
Go to `Settings`.. `Display`.. is the `Font Size` set to the same value on both devices? — Athena, Feb 14 '15 at 18:21
Like I said.. Settings --- choose Display --- choose Font Size --- read the value.. one of `small`, `normal`, `large`, `huge`. Make sure that both test devices have the same Font size setting — Athena, Feb 14 '15 at 18:28

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1) That's up to you. If you think the layout looks as it should, then yes. It's correct.

However, if you are asking for my subjective opinion, I would use that layout for landscape mode only, and implement a more "portrait-friendly" layout for portrait mode.

Example:

Example

To achieve this, you add your landscape layout in your layout-land folder and put your portrait layout in your layout folder.

2) sp is the correct usage when defining font sizes. See this reference.

If you want to use a different fontSize for different screen sizes, consider adding different dimen resources depending on screen. E.g, add this in your values/dimen.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="text_size">18sp</dimen>
</resources>

And you add this file in these different folders, see below structure

res/values/dimens.xml

res/values-small/dimens.xml

res/values-large/dimens.xml

res/values-xlarge/dimens.xml

And change the <dimen name="text_size">18sp</dimen> according to what you would like for each screen size.

Finally, you set the fontSize to your TextView as following

   <TextView
       android:id="@+id/textView1"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:text="my text ... "
       android:textAppearance="?android:attr/textAppearanceMedium"
       android:textSize="@dimen/text_size" />

See this link for reference.

Using different layouts for different text sizes is massive overkill. Why not define different text sizes for different screen-size buckets? — Athena, Feb 14 '15 at 18:30
Upvoted. One thing.. you don't need `values-normal` when defining `values`. — Athena, Feb 14 '15 at 18:41
You are correct again @Athena, thanks a bunch for your input. :-) — Marcus, Feb 14 '15 at 18:43

score 0 · Answer 2 · answered Feb 14 '15 at 18:28

The xml layout seems to be ok.... but its a good programming practise use sp as font-size unit. However it depends on the device you use to display the actual size of the text. to ensure same size do this: Go to Settings.. Display.. and set the font size same on both devices..

graphic layout implementation

2 Answers2