Develop Reference

How to place 2 items at right using android:layout_toRightOf

I want to place one textView at the left and 2 TextView at the Right.
Right now the 2 textview at the right are placed ontop of one another.
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/mytextview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/mytextview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="FOLLOWING"
android:layout_toRightOf="#id/mytextview1"
android:gravity="right"/>
<TextView
android:id="#+id/mytextview3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EXPLORE"
android:layout_toRightOf="#id/mytextview1"
android:gravity="right"/>
</RelativeLayout>
How do I place "mytextview2" and "mytextview3" at the right with space.

Try to set mytextview3 at the right using android:layout_alignParentRight and then mytextview2 left of mytextview3 using android:layout_toLeftOf
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/mytextview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/mytextview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FOLLOWING"
android:layout_toLeftOf="#id/mytextview3"/>
<TextView
android:id="#+id/mytextview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EXPLORE"
android:layout_marginLeft="5dp"
android:layout_alignParentRight="true"/>
</RelativeLayout>

Try it like this :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/mytextview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="TextView1" />
<TextView
android:id="#+id/mytextview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/mytextview3"
android:layout_marginRight="5dp"
android:text="FOLLOWING" />
<TextView
android:id="#+id/mytextview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="EXPLORE" />
</RelativeLayout>

Use below to set view position using android:layout_toRightOf. Set mytextview3 to right of mytextview2 instead of mytextview1 and also set the width both of the view as wrap_content
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/mytextview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/mytextview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FOLLOWING"
android:layout_toRightOf="#id/mytextview1"
android:gravity="right"/>
<TextView
android:id="#+id/mytextview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EXPLORE"
android:layout_toRightOf="#id/mytextview2"
android:gravity="right"/>
</RelativeLayout>

Set one element above another and have width of both the element equal

I want to set the text field above the black image and i want the width of text field should be equal to image.
I dont want to put hardcoded dimensions. Also both the blocks should qually cover the screen horizontally.
Here is my code `
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/RL_childLeft1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<com.ism.eshita.incentivemanagmentsystem.Speedometer.Speedometer
android:id="#+id/Speedometer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#000000"
custom:currentSpeed="100"
custom:maxSpeed="300" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:id="#+id/tv_bg1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/PrimaryDark2"
android:gravity="center"
android:text="BG"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_performance1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/PrimaryDark2"
android:gravity="center"
android:paddingBottom="5dp"
android:text="Performance"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
>
<com.ism.eshita.incentivemanagmentsystem.Speedometer.Speedometer
android:id="#+id/Speedometer2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#000000"
custom:currentSpeed="100"
custom:maxSpeed="300" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:id="#+id/tv_bg2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/PrimaryDark2"
android:gravity="center"
android:text="BG"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_performance2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/PrimaryDark2"
android:gravity="center"
android:paddingBottom="5dp"
android:text="Performance"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>

Properly adjusting space between two textviews in RelativeLayout

I have been editing my relativelayout all day, but I cannot produce a screen that is desirable.
Currently it looks like this :
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.
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>

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>

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>

XML Android align TextView

This is my first try to create an android application.
I am trying to create a layout right now and am stuck allready.
Here is what I am trying to accomplish:
Jaarverbruik
2013 - 2014
Afrekendatum Peildatum
So, the word Afrekendatum should be aligned to the left, the word Peildatum should be aligned to the right of the screen.
This is my current code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<TextView
android:id="#+id/periode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:text="#string/periode" />
<TextView
android:id="#+id/afrekendatum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/periode"
android:layout_alignParentLeft="true"
android:text="#string/afrekendatum" />
<TextView
android:id="#+id/peildatum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/periode"
android:layout_toRightOf="#id/afrekendatum"
android:layout_alignParentRight="true"
android:text="#string/peildatum" />
</RelativeLayout>
Sadly, the words are displayed directly behind each other.
What is the best way to fix this?

You don't need android:layout_toRightOf="#id/afrekendatum" because you have declared android:layout_alignParentRight="true". Remove it and it will work fine.

You should use something like this.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_centerHorizontal="true" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>

Try this...
You have to set TextView's gravity.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2b579a"
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=".MainActivity1" >
<TextView
android:id="#+id/periode"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/periode"
android:textSize="20sp"
android:textColor="#FFFFFF"
android:layout_margin="10dp"/>
<TextView
android:id="#+id/afrekendatum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="start"
android:textSize="20sp"
android:textColor="#FFFFFF"
android:layout_below="#+id/periode"
android:text="#string/afrekendatum" />
<TextView
android:id="#+id/peildatum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/periode"
android:gravity="end"
android:textSize="20sp"
android:textColor="#FFFFFF"
android:layout_toRightOf="#id/afrekendatum"
android:text="#string/peildatum" />
I also attached screenshot here Genius!

Alignment of an Android layout

I have this layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
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" >
<RelativeLayout
android:id="#+id/visual_compass_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="0dp"
android:padding="0dp" >
<ImageView
android:id="#+id/visual_compass"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:contentDescription="#string/visual_compass"
android:scaleType="fitCenter"
android:src="#drawable/compass_1000x1000_white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/visual_compass_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/visual_compass_value_default"
android:textColor="#ddd"
android:textSize="#dimen/visual_compass_value_text_size" />
<TextView
android:id="#+id/visual_compass_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/measured_bearing"
android:textColor="#aaa"
android:textSize="#dimen/visual_compass_info_text_size" />
</LinearLayout>
</RelativeLayout>
<View
android:id="#+id/placeholder"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/visual_compass_container"
android:visibility="visible"
android:background="#android:color/darker_gray" />
<LinearLayout
android:id="#+id/advanced_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/placeholder"
android:background="#dfff"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="30dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:visibility="visible" >
<TextView
android:id="#+id/advanced_measured"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/measured_bearing_default"
android:textSize="#dimen/advanced_measured_text_size_land" />
<TextView
android:id="#+id/advanced_latitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/latitude_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_longitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/longitude_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_altitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/longitude_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_accuracy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/accuracy_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_declination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/declination_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_inclination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/inclination_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
</LinearLayout>
</RelativeLayout>
And the result (API level 17, Galaxy S3) is this:
The Result http://xml.pfweb.eu/a.png
As you can see above, I didn't set any margins or paddings... So why is there an empty space between the placeholder view (dark grey) and the compass rose image?
That's a big problem because it causes the '46°' not the center correctly.

I am unuable to see why the relative layout doesn't wrap it's content, however to have the text in the center you could do following:
<ImageView
android:id="#+id/visual_compass"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:contentDescription="#string/visual_compass"
android:scaleType="fitCenter"
android:src="#drawable/compass_1000x1000_white" />
So instead of having the compass image in top left corner using:
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
you would simply center it. I know it's not ideal, but it's the only solution I see at the moment.
EDIT: I didn't figure out what exactly causes the problem, but it has something to do with the enclosing Relative layout. As soon as I change the layout to Linear the problem disappear. In fact horizontal LinearLayout is probably the best option here as you stack your items from left to right.
Here's final look: