Develop Reference

How to make Text to look like same with respect to length (width) and height in all devices

I have a text screen in the bottom and aligned left to the screen and the button which is also in the bottom aligned right to the screen. I have given the size as a 36 sp , but on Samsung tab 4 7'(tvdpi) it looks fine , but on the device S4 (xxhdpi) the text goes behind the button. Where as I want the text to get flexible and to adjust itself.
The Text view in my xml goes like this :
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New tools Available"
android:textSize="30sp"
android:textColor="#ffffff"
android:id="#+id/tv_new_tools_available"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:padding="5dp"
android:layout_marginLeft="10dp"/>
What I want :
I want that my text should look good in all devices and should not be overlap with the button and it should look good not screw on large devices and should not look bigger in small device
I am wondering How can I achieve this , please help me as I am a newbie in the android. I did research in regards but found that I should use sp instead of dp, but this also created problem for me . Please help me.

Use text font sizes from dimension folders wrt device sizes.

Try this
<LinearLayout
android:id="#+id/ly"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:text="TextView"
/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="Button"
/>
</LinearLayout>

Scaleable size of application with non 9-patch buttons

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.

Why button is big?

I have the below layout which contains a button, I'm trying to reduce the size, mainly height, of button, but button height allows stays the same
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:orientation="horizontal"
android:background="#FFDBE2ED"
android:paddingBottom="0dp"
android:paddingTop="0dp" >
<!--Button
android:id="#+id/btnSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2px"
android:layout_marginLeft="10px"
android:layout_marginRight="10px"
android:layout_marginTop="2px"
android:height="15dp"
android:text="Save"
android:textSize="15sp"
android:width="70dp" >
</Button -->
<Button
android:id="#+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0px"
android:layout_marginLeft="10px"
android:layout_marginRight="3px"
android:layout_marginTop="2px"
android:height="0dp"
android:text="Clear"
android:textSize="15sp"
android:width="70dp"
>
</Button>
</LinearLayout>
any idea?

You're using android:layout_height="wrap_content" which means it will always be as tall as the content inside it. Try playing around with that value to change the height.

Just tried your code and button looks fine. What do you want to look it like? Button as small(short) as it defined by current android theme. You have to change button style to custom one, to make spacing inside of the button different to make it shorter.
When you place standard android button android will use its theme style, including 9-patch image for button background. That image has internal paddings for the text. If you need a different look of the button then you need to create a custom Button control inherited from the Button and overwrite styles.

android:layout_width="wrap_content"
android:layout_height="wrap_content"
Instead of using wrap_content you can specify a view's width or height using DP (Density Independant Pixels) Try changing wrap_content to 50dp or whatever value that suits your needs.

Margin dp unit not scale layout correctly in differents screens

I have simple tableLayout which show the problem with independent unit dp.
I suppose that with dp unit in my layout_margin attribute - layout will be resized without problem on any device.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:layout_margin="40dp"
>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView
android:text="#string/start_login_username"
android:id="#+id/start_login_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/start_login_EditTxt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
/>
</TableRow>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView
android:text="#string/start_login_password"
android:id="#+id/start_login_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<EditText
android:id="#+id/start_login_EditTxt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
</TableRow>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<Button android:text="#string/start_login_cancel"
android:id="#+id/start_login_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</Button>
<Button
android:text="#string/start_login_login"
android:id="#+id/start_login_ButtonLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</Button>
</TableRow>
</TableLayout>
But, testing this layout, we can see that dp is not so independent in layout margin .
Here the screenshot in Samsung Nexus(Good scale):
Here the screenshot in LG Optimus GT 540(Bad scale):
Im looking the similar threads in StackOverflow, and possible solution, to have correct scale on any screen is:
Not use margin and padding at all, but use always tableLayout and add
moc Views with some weight, to add space between Views(not good because of
pollution of xml layouts. Anyway, its looks promising ).
Make my own calculation of independent unit, and rescale all programmatically (not good for me because I have all in xml's)
Use different layouts for differents screens (not good because Im too lazy to recreate the layout for each my view and supporting them)
Questions:
How can I solve the problem with scaling of my layout for all screens using the same layout ?
How I can make margin works correct on my screens ?
What you think about my two solutions. This is good practice ? (specially first one) ?
Thanks

Simply use linearlayout with weight attributes, remember to set width="0dp" if it is the width you want to be automatically adjusted.
Your xml should be something like this:
<?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:layout_gravity="center"
android:orientation="horizontal" >
<TextView
android:text="Your name"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<EditText
android:layout_weight="1"
android:layout_width="0dp"
android:minWidth="80dp"
android:layout_height="wrap_content" />
</LinearLayout>

button placement in a linear layout

I have a linear layout with several buttons in it. The button images are all the same size and have the same attributes... except for one button. This one button has a smaller font size. All the buttons except for this one are in a perfect line exactly the way I want. For some reason, the button with the smaller font appears a little lower on the screen than the other buttons. I'm having a hard time wrapping my head around the idea of a button that requires less space taking up additional space.
Might someone give me a hint on what to read up on?
EDIT
Here's main.xml (seems like SO filters some of it, all the important stuff is here...)
<ScrollView android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="300px">
<TextView
android:id="#+id/the_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:typeface="monospace"
android:textSize="9pt"
android:background="#color/paper"
android:paddingLeft="20dp"
android:paddingBottom="20dp"
android:textColor="#color/type"
/>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button style="#style/ASR33_button"
android:tag="Y"
android:text="Y"
/>
<Button style="#style/ASR33_button"
android:tag="N"
android:text="N"
/>
<Button style="#style/ASR33_button"
android:tag="E"
android:text="E"
/>
<Button style="#style/ASR33_button"
android:tag="W"
android:text="W"
/>
<Button style="#style/ASR33_button"
android:tag="S"
android:text="S"
/>
<Button style="#style/ASR33_button"
android:tag="F"
android:text="F"
/>
<Button style="#style/ASR33_button"
android:tag="R"
android:text="R"
/>
<Button style="#style/ASR33_button"
android:tag="M"
android:text="M"
/>
<Button style="#style/ASR33_button"
android:tag="T"
android:text="T"
/>
<Button style="#style/ASR33_button"
android:onClick="onEnterButtonClicked"
android:textSize="6pt"
android:text="RE-\nTURN"
/>
<Button style="#style/ASR33_button"
android:tag="U"
android:text="U"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="9pt"
android:paddingLeft="10dp"
android:typeface="normal"
android:text="Commands: (Y)es, (N)o, (N)orth, (E)ast, (W)est, (S)outh, (M)ap, (ST)atus, (Fight), (R)un, (SU)icide. All commands must be followed by RETURN."
/>
</LinearLayout>
The one that's wonky is the 2nd from the bottom, with the different onclick event. The style has 11pt for the character size. If I use it (and a 1 letter button name, like the others) it behaves. But that's not what the ASR33 'enter' key has on it. So if I reduce the font size to say 6 pt, the weirdness happens.
The style can be seen here.
Again, just reading references or ideas please, I can figure it out if I have a word or two to search on. It's hard to know what you don't know...
RESOLUTION
Anurag has it right, see his answer below. Here's an excerpt of the updated LinearLayout:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false">

maybe the re sizing has happened due to the wrap_content property of your button. so what you should do is have a fixed height to the linear layout holding all the buttons while its with is set to fill parents.
and inside the linear layout let individual buttons have height set to wrap content which will give all the buttons the same height as that of the linear layout and also set the attribute android:adjustViewBounds="true" for the small button. this attribute will resize your image button to maintain the aspect ratio. i hope this helps.
EDIT:
So here is the solution to your problem, something that was caused due to the base alignment property of the linear layout. A horizontal LinearLayout aligns the baselines of all its child controls by default. So the first line of text in your multi-line button is vertically aligned with the single line of text in the other buttons. set android:baselineAligned="false" on the LinearLayout. This worked perfectly on my HTC.