Properly adjusting space between two textviews in RelativeLayout

Question

I have been editing my relativelayout all day, but I cannot produce a screen that is desirable.

Currently it looks like this :

enter image description here

It is not centered and there is a very awkward space between the hour time and the minutes time.

I am trying to figure out how to fix it so it is centered similar to this app except I include the little h and m.

enter image description here

I have done a lot of research and used almost every positioning view in Relative Layout, but still cannot produce it.

Properly aligning TextViews in RelativeLayout

This is my xml file. Not sure what to do I feel like I have exhausted all my options.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:seekarc="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/seekArcContainer"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        >

    </FrameLayout>

    <include
        layout="@layout/controls"
        android:id="@+id/controls" />

    <com.triggertrap.seekarc.SeekArc
        android:id="@+id/seekArc"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center_horizontal|bottom"
        seekarc:thumb="@drawable/custom_seek_arc_control_selector"
        android:padding="30dp"
        seekarc:rotation="0"
        seekarc:startAngle="0"
        seekarc:sweepAngle="360"
        seekarc:touchInside="true"
        seekarc:arcColor="#30ff5b56"
        seekarc:progressColor="#ffff3a35"
        android:layout_below="@+id/seekArcContainer"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/hour_progress_number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/red_highlight"
        android:text="00"



        android:textSize="90sp"
        android:layout_toStartOf="@+id/little_hour_text2"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


    <TextView
        android:id="@+id/minute_progress_number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/red_highlight"


        android:text="00"
        android:textSize="90sp"
        android:layout_toStartOf="@+id/little_minute_text2"
        android:layout_alignTop="@+id/hour_progress_number"
        android:layout_toLeftOf="@+id/little_minute_text2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="H"
        android:textSize="24sp"



        android:id="@+id/little_hour_text2"

        android:textColor="@color/red_highlight"

        android:layout_toStartOf="@+id/minute_progress_number"
        android:layout_marginRight="45dp"
        android:layout_alignBottom="@+id/hour_progress_number"
        android:layout_toLeftOf="@+id/minute_progress_number" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="M"
        android:textSize="24sp"
        android:id="@+id/little_minute_text2"
        android:textColor="@color/red_highlight"

        android:layout_marginRight="36dp"
        android:layout_alignRight="@+id/seekArc"
        android:layout_alignEnd="@+id/seekArc"
        android:layout_alignBottom="@+id/minute_progress_number" />


</RelativeLayout>

Can the hour and minute text fields be just 1 text field? HH:MM. That way you only have to worry about centering 1 text field — TooManyEduardos, Sep 17 '14 at 03:14
place a dummy view in center and then hour toLeftOf and minute toRightOf that dummy view. — Ketan Ahir, Sep 17 '14 at 03:37
True. You could setup a grid view in the middle as Ketan suggested — TooManyEduardos, Sep 17 '14 at 04:38

Rumit Patel · Answer 1 · 2014-09-17T12:45:06.843

try this code, may this xml help you..you can take idea from this. if any problem, then ask...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="300dp" >

        <com.triggertrap.seekarc.SeekArc
            android:id="@+id/seekArc"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="00"
                    android:textSize="60sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="H"
                    android:textSize="30sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="00"
                    android:textSize="60sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="M"
                    android:textSize="30sp" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

score 0 · Answer 2 · edited May 23 '17 at 12:12

what you are looking for is here in the 2nd answer (not the accepted answer). You use a strut in the middle of the two views.

this is the example given in the answer:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp" 
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:text="Left"/> 
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:text="Right"/>
</RelativeLayout>

Properly adjusting space between two textviews in RelativeLayout

2 Answers2