Develop Reference

How to align textView on layout center without conflict with other view?

I have an issue trying align textView to the center of layout: when I try to do this - it has a conflict with a button on the left - if text is too long - it become hidden under the button. Text length can be very different and I need it in the center of layout but not under/on the button.
Here is the xml file of activity layout:
<?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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/item_content_action_bar_layout"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#color/colorBlue"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_content_title"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Title"
android:textColor="#color/colorWhite"
android:textAlignment="center"
android:singleLine="true"
android:layout_gravity="center_vertical"
android:textStyle="bold"
android:autoText="false"
android:layout_centerInParent="true"
android:layout_alignWithParentIfMissing="false"
android:layout_alignParentRight="false" />
<ImageButton
android:layout_width="120dp"
android:layout_height="45dp"
android:id="#+id/item_content_back_button"
android:background="#drawable/back_button_selector"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginRight="5dp" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/item_content_scroll_view"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="125dp"
android:layout_height="125dp"
android:id="#+id/item_content_image"
android:src="#drawable/ic_no_thumbnail"
android:maxHeight="125dp"
android:maxWidth="125dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:layout_margin="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_content_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Subtitle"
android:layout_alignTop="#+id/item_content_image"
android:layout_toRightOf="#+id/item_content_image"
android:layout_toEndOf="#+id/item_content_image"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_content_pubdate"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Date"
android:layout_below="#+id/item_content_subtitle"
android:layout_alignLeft="#+id/item_content_subtitle"
android:layout_alignStart="#+id/item_content_subtitle"
android:textSize="10dp"
android:layout_marginTop="10dp" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_content_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="blabla"
android:layout_below="#+id/item_content_pubdate"
android:layout_alignStart="#+id/item_content_pubdate"
android:layout_alignParentStart="true"
android:layout_margin="10dp" />
</LinearLayout>
</ScrollView>
</LinearLayout>

Try using LinearLayout with layout-weight for this to avoid conflict. Change your first relativelayout to below one
<LinearLayout
android:id="#+id/item_content_action_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/_white"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="7">
<ImageButton
android:id="#+id/item_content_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="2"
android:background="#drawable/chemist" />
<TextView
android:id="#+id/item_content_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="5"
android:autoText="false"
android:gravity="center"
android:maxLines="2"
android:singleLine="true"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/Black"
android:textStyle="bold" />
</LinearLayout>

Change Your RelativeLayout to LinearLayout and use android:layout_weight attribute of layout to do this.
<LinearLayout
android:id="#+id/item_content_action_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/_white"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1"
>
<ImageButton
android:id="#+id/item_content_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:background="#drawable/chemist" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_content_title"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Title"
android:textColor="#color/colorWhite"
android:textAlignment="center"
android:singleLine="true"
android:layout_gravity="center_vertical"
android:textStyle="bold"
android:gravity="center"
android:layout_weight="1"
android:autoText="false"/>
</LinearLayout>

Make the layout_gravity of the textview item_content_title as "center_horizontal".
And add android:layout_toLeftOf="#+id/item_content_title" under the ImageButton item_content_back_button.
Hope it was what you wanted.

Your Action bar layout has to be like this-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/item_content_action_bar_layout"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#color/colorBlue"
android:padding="10dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="45dp"
android:id="#+id/item_content_back_button"
android:background="#drawable/back_button_selector"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dp" />
<TextView
android:toRightOf="#id/item_content_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_content_title"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Title"
android:textColor="#color/colorWhite"
android:textAlignment="center"
android:singleLine="true"
android:layout_gravity="center_vertical"
android:textStyle="bold"
android:autoText="false"
android:layout_centerInParent="true" />
</RelativeLayout>

Circle ImageView in the center of layout

Sorry for my english. I want to create a circle ImageView and i use this library all is well, but i can't locate this image in the center of my layout. I create to display in all screen Resolutions, and i use layout_weight if use layout_weight I can not put a static size image.
Bellow is my xml:
<RelativeLayout
android:layout_weight="0.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<com.pkmmte.view.CircularImageView
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/p_img"
android:id="#+id/imageProfile"
android:layout_alignParentTop="true"
android:layout_gravity="center" />
</RelativeLayout>
The result of this code:
UPD:
my xml
<RelativeLayout
android:layout_weight="0.4"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/p_edit_proofile"
android:id="#+id/editProfile"
android:layout_gravity="right"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<LinearLayout
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_weight="0.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
>
<com.pkmmte.view.CircularImageView
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/p_img"
android:id="#+id/imageProfile"
android:layout_centAerInParent="true" />
</RelativeLayout>
<TextView
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text=""
android:id="#+id/nameProfile"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text=""
android:id="#+id/status" />
<TextView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="test"
android:textColor="#4fcc54"
android:id="#+id/aided" />
<LinearLayout
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="PIN"
android:id="#+id/pin"
android:layout_gravity="center_vertical" />
<ImageView
android:layout_marginLeft="80dp"
android:src="#mipmap/p_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/key" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Use android:layout_centerInParent="true"
<com.pkmmte.view.CircularImageView
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/p_img"
android:id="#+id/imageProfile"
android:layout_centerInParent="true" />
This will center the image in your RelativeLayout

In your nested RelativeLayout remove android:layout_weight and add android:layout_gravity = "center".

Try to use android:gravity="center_horizontal"
<RelativeLayout
android:layout_weight="0.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>

try to use this:
android:layout_centerInParent="true"
in the CircularImageView
Regards

Center in Parent overrides the bottom elements

I do have a UI, and some elements in this user interface. I want the elements always in the center vertically. The problem is that, when i set layout_centerInParent it becomes centered but overrides the bottom elements. I don't want it. Here is how it looks like at this moment:
And the xml file is:
<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="#FFFFFF" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/top_mr_image"
android:src="#drawable/temp" />
<LinearLayout
android:id="#+id/r1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:background="#drawable/r1bg"
android:layout_marginRight="35dp"
android:layout_marginBottom="10dp"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Start"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="#dimen/txt_r4_size" />
</LinearLayout>
<LinearLayout
android:id="#+id/r2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:layout_below="#+id/r1"
android:background="#drawable/r2bg"
android:layout_marginRight="25dp"
android:layout_marginBottom="10dp"
>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="HOW TO"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="#dimen/txt_r4_size" />
</LinearLayout>
<LinearLayout
android:id="#+id/r3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:layout_below="#+id/r2"
android:background="#drawable/r3bg"
android:layout_marginRight="15dp"
android:layout_marginBottom="10dp"
>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Support"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="#dimen/txt_r4_size" />
</LinearLayout>
<RelativeLayout
android:layout_marginTop="20dp"
android:id="#+id/r4"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#drawable/r4bg"
android:clickable="true"
android:onClick="onClick" >
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:text="You have:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="#dimen/txt_r4_size" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView11"
android:layout_marginLeft="20dp"
android:text="0"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30dp" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView12"
android:layout_marginLeft="20dp"
android:text="CCCCCC"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="#dimen/txt_r4_size" />
</RelativeLayout>
I want it to be always in the center vertically and not to override some of top and bottom elements. How to achieve this? I don't want to hardcode it for different screen resolutions.

if you do not want the bottom items being overlapped, then you need to make them relative to the tallest view vertically centered. Set Align Below so they would not overlap.

Adding and image beside a spinner in an android layout

I just want to add an image beside the Spinner in my layout. I tried align:layout_gravity = "right" for the image, but this moved the image to the right side in the layout and below the Spinner present in the same layout. What I want is for the image to be displayed exactly besides the Spinner. Below is the xml layout file:
<LinearLayout
android:id="#+id/topLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:background="#color/headingBgColor"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/yourName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Group"
android:textColor="#color/black" />
</ImageView>
</LinearLayout>
<LinearLayout
android:id="#+id/bottomLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal"
android:padding="5sp" >
<Button
android:id="#+id/deleteBlockLog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tasks"
android:textSize="#dimen/font_size_10"
android:textStyle="bold" />
<Button
android:id="#+id/deleteBlockLog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Messages"
android:textSize="#dimen/font_size_10"
android:textStyle="bold" />
<Button
android:id="#+id/deleteBlockLog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Groups"
android:textSize="#dimen/font_size_10"
android:textStyle="bold" />
<Button
android:id="#+id/deleteBlockLog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Notes"
android:textSize="#dimen/font_size_10"
android:textStyle="bold" />
<Button
android:id="#+id/deleteBlockLog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MyProfile"
android:textSize="#dimen/font_size_10"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/centerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/topLayout"
android:orientation="vertical"
android:padding="10sp" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:paddingTop="20dip" />
<ImageView
android:id="#+id/imageButton"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_gravity="right"
android:src="#drawable/contacts" />
<LinearLayout
android:id="#+id/centerLqayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10sp" >
<CheckBox
android:id="#+id/sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SMS"
android:textColor="#color/black" />
<CheckBox
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email"
android:textColor="#color/black" />
</LinearLayout>
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="140dp"
android:gravity="top"
android:inputType="textPostalAddress" >
<requestFocus />
</EditText>
<Button
android:id="#+id/deleteBlockLog1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Send"
android:textSize="#dimen/font_size_15" />
</LinearLayout>

LinearLayout with orientation set to vertical will put the child views one below other. You have two options:
You either wrap the Spinner and the ImageView in another LinearLayout with orientation set to horizontal so the two views end up on the same line.
Example:
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="horizontal">
<Spinner
android:id="#+id/spinner1"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:paddingTop="20dip" />
<ImageView
android:id="#+id/imageButton"
android:layout_width="100dp"
android:layout_height="70dp"
android:src="#drawable/contacts" />
</LinearLayout>
You use a layout that allows the children to be placed relative to others(like a RelativeLayout) instead of the parent LinearLayout with the id centerLayout.

Center Button horizontally doesn't work

hy!
I want to center my button horizontally, but this never work.
My Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/minage"
android:layout_alignParentLeft="true"
android:padding="5dp" />
<TextView
android:id="#+id/ml_minage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="5dp"/>
</RelativeLayout>
<SeekBar
android:id="#+id/ml_minage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="100"
style="#style/NFFSeek"
android:progressDrawable="#drawable/myseekbar"
android:layout_margin="5dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/maxage"
android:padding="5dp"/>
<TextView
android:id="#+id/ml_maxage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="5dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/ml_maxage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#style/NFFSeek"
android:progressDrawable="#drawable/myseekbar"
android:layout_margin="5dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/distance"
android:padding="5dp" />
<TextView
android:id="#+id/ml_distance_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="5dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/ml_distance"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#style/NFFSeek"
android:progressDrawable="#drawable/myseekbar"
android:layout_margin="5dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/gender"
android:padding="5dp" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkedButton="#drawable/rbon" >
<RadioButton
android:id="#+id/ml_female"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:button="#drawable/rbselector"
android:checked="true"
android:drawablePadding="10dp"
android:text="#string/rb_female"
android:textColor="#000000"
android:paddingLeft="42dp" />
<RadioButton
android:id="#+id/ml_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rb_male"
android:button="#drawable/rbselector"
android:layout_margin="5dp"
android:textColor="#000000"
android:paddingLeft="42dp"
/>
</RadioGroup>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/ml_stbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:background="#drawable/custom_button"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:padding="10dp"
android:text="Flirt"
android:textColor="#ffffff"
android:textSize="12pt"
android:typeface="serif" />
</RelativeLayout>
</LinearLayout>
this xml doesn't fit the button in the middle please help.

The problem is that the RelativeLayout does not span the width of the page, it's width is wrap_content. The button is centered in the RelativeLayout, but that layout is only as wide as the button, and is mashed up against the left side of the screen.
Make the inner RelativeLayout's width as match_parent.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
...

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/ml_stbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:background="#drawable/custom_button"
android:layout_centerInParent="true"
android:gravity="center"
android:padding="10dp"
android:text="Flirt"
android:textColor="#ffffff"
android:textSize="12pt"
android:typeface="serif" />
</RelativeLayout>

This isn't speaking directly to your question, but your view hierarchy is too complicated. I suggest you replace all of the LinearLayout and RelativeLayout elements with a single RelativeLayout that spans the whole thing.