The problem of vertical alignment of the Android UI widget

Question

I am trying to create a layout (using eclipse) in which I need to vertically align various controls such as TextView and Button. I try to ensure that all widgets are fully aligned. Even if I specify the same left margins / paddings for the controls, still a 1-2 pixel difference will be visible between the different types of controls.

The problem is that the distance between the borders of the widget (the blue rectangle in eclipse) and the content / graphics of the widgets varies depending on the widgets (e.g. TextView and Button).

I can apply workarounds by specifying the left padding for the TextView or decreasing the left margin of the button container. But I am looking for a cleaner solution. I cannot find any attribute that controls the difference between the widget border and the content. Any pointers on how I can control this space?

A snapshot showing the problem is shown below. Here is the XML layout 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 snapshots below show a snapshot of a dummy application. Notice the difference between the left edge of the text "Hello World" TextView and "Dummy Button".

The second image displays the button widget when it is selected in Eclipse. A blue rectangle indicates the border / border of the widget. Is the difference between the border of the buttons (blue rectangle) and the content (gray) controlled by some property?

Answer 1

This is not an easy task: text and other Android widgets can have their own personal style (it also depends on the version for Android).

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

When creating your own style, always refer to the Android source code on this topic:

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 several ways to create your own style.

One way is to indicate your activity in your manifest. First you need the styles.xml file in the / values ​​/ folder. Here you 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, inherited from the Android style, which hides the title bar, you can inherit from something else. In this thread, we override textViewStyle, this allows us to set custom values ​​for our TextView and override some of the internal 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 are the subject of your activities in 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 FirstActivity, the text will be black by default and white in the second.

For your specific question:

You will need to look in the source files I linked to above and see if there are any padding or minWidth or size attributes that affect your widgets and your layout.