Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android and Layouts

I need to locate text on view:

text 'Some more text' should be located in bottom|center_horizontal

text 'Short text' should be located on with align right, but about 10% from the top of the screen

text 'x.x.x.x' should be aligned to the center of the screen (right/bottom align of the 1st quater)

text 'Some long text ..' should be aligned to the top/left of the 3-rd quater of the screen, but it should cross the center_horizontal of the screen.

like image 568
davs Avatar asked Jun 29 '26 16:06

davs


1 Answers

Here a couple quick guidelines:

  1. Android Layouts tend to be much more deeply nested than you would normally expect. You often end up with "empty" layouts that just take up space so that other elements lay out correctly.
  2. RelativeLayout is your friend whenever you are aligning text to a particular edge.
  3. Use the padding settings to put text "a little away from" an edge.
  4. Gravity aligns the text within that TextView or button.

Looking again I your diagram, I reproduced it this way:

  1. Start with a relative layout ('fill_content') that takes up the entire screen.
  2. Put in the "short text" and "some more text" by anchoring to the top and bottom.
  3. Put a zero-width item with the property "centerInParent" for a point in the middle of the screen.
  4. Put the remaining to items above and aligned with that centerpoint.

Unfortunately, nothing in step 4 worked correctly. Nothing like "layout_below" worked when the referenced item was a centerInParent item. with relative layouts to step 3. Turns out it had to do with failing to fill_content on the top level. Yes, the layouts are tricky, and I wish there was a debugger for them.

Here's the correct version:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/r1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
    android:id="@+id/short_text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Short Text"
    android:gravity="right"
    android:layout_marginTop="30dip"
    android:layout_alignParentTop="true" />
<TextView
    android:id="@+id/more_text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Some More Text"
    android:gravity="center"
    android:layout_alignParentBottom="true" />
  <TextView android:id="@+id/centerpoint"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:width="0dip"
    android:height="0dip"
    />
  <TextView android:id="@+id/run_fox"
    android:text="Run, fox, run!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/centerpoint"
    android:layout_toLeftOf="@id/centerpoint" 
    />
<TextView
    android:layout_below="@id/centerpoint"
    android:text="The quick brown fox jumped over the lazy dog, who had been a frog, and then got features and ran slowly."
    android:layout_alignRight="@id/centerpoint"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />
 </RelativeLayout>
like image 180
Charles Merriam Avatar answered Jul 02 '26 06:07

Charles Merriam