Question

I am trying to create a layout (using eclipse) in which I need to vertically align various controls like TextView and Button. I am trying to keep all the widgets perfectly left aligned. Even if I specify the same left margins/paddings for the controls, still a difference of 1-2 pixels can be seen between different types of controls.

The problem is that the distance between widget’s border (blue rectangle in eclipse) and widget’s content/graphics varies across widgets (say TextView and Button).

I can apply workarounds by either specifying left padding for TextView or by reducing the left margin of the button container. But I am looking for cleaner solution. I am unable to find any attribute which controls the difference between widget’s border and content.
Any pointers on how I can control this gap ?

Snapshot demonstrating the problem is below. Here is the layout XML that I am using for this problem:-

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dummy Button" />

</LinearLayout>

The images below show the snapshot of the dummy application. Please note the difference between left side margin of “Hello World” TextView and “Dummy Button”.

The second pic shows the button widget when selected in Eclipse. The blue rectangle indicates the widget boundary/border. Is the difference between button’s border (blue rectangle) and content (greyed rectangle) controllable by some property ?

Answer 1

This is a tough one the TextView and other Android widgets may have some intrinsic styles of their own (android version dependant as well).

Therefore to get around this you would have to create your own style.

In creating your own style always reference the android source code on this subject:

https://github.com/android/platform_frameworks_base/tree/master/core/res/res/values

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

There are multiple ways to create your own style.

One way is to theme your activity in your manifest.
First you need a styles.xml file, in your /values/ folder.
In here you would declare your new style:

<style name="Theme.MyTheme.Dark" parent="@android:style/Theme.NoTitleBar">
    <item name="android:textViewStyle">@style/Widget.TextView.Black</item>
</style>

<style name="Theme.MyTheme.Light" parent="@android:style/Theme.NoTitleBar">
    <item name="android:textViewStyle">@style/Widget.TextView.White</item>
</style>

The style above it inheriting from the Android style that hides the title bar, you can inherit from something else.
In this theme we then override the textViewStyle, this allows us to set custom values for our TextView‘s and override some of the intrinsic values.

<style name="Widget.TextView.White" parent="@android:style/Widget.TextView">
    <item name="android:textColor">#FFFFFF</item>
</style>

<style name="Widget.TextView.Black" parent="@android:style/Widget.TextView">
    <item name="android:textColor">#000000</item>
</style>

Finally you theme your activity in the AndroidManifest.xml:

     <activity
        android:name=".ui.phone.FirstActivity"
        android:theme="@style/Theme.MyTheme.Dark" />

     <activity
        android:name=".ui.phone.SecondActivity"
        android:theme="@style/Theme.MyTheme.Light" />

Now when you use a TextView in the FirstActivity it’s text will be Black by default and in the second activity it will be white.

For your specific question:

You would have to go look in the source code files I linked at the top and see if there is any padding or minWidth or size attributes that are affecting your widgets and your layout.