I has the following XML:
<RelativeLayout android:id="#+id/cover_box"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="#+id/cover"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#+id/download" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/mark_download"
android:layout_centerInParent="true" android:layout_marginTop="90px" />
</RelativeLayout>
But it's look's like the marginTop is being ignored.
If you want the 2nd image to be 90dp under the center of the screen, you could replace it with a FrameLayout where you can control the padding to move your image downwards.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:paddingTop="90dp">
<ImageView android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mark_download"/>
</FrameLayout>
When you use center in parent the view is put directly in the center. The margin top will only come into play if an object is within 90px of the top of your view. Thus pushing the centered view down to keep at least 90px of space on top of it. So it isn't being ignored but it is not having the effect that you think it should have.
I want the progressbar to shown under android:layout_centerInParent="true" so i have added a dummy TextView and set it to centerInParent .Then i put my progressbar under it. Now you can increase its distance from center in two ways . First by increasing marginTop in TextView and second increasing TextView height.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/widget"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/splash" >
<FrameLayout
android:id="#+id/splash_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<com.s3.tdd.interfaces.CircularProgressBar
android:id="#+id/circularprogressbar2"
style="#style/Widget.ProgressBar.Holo.CircularProgressBar"
android:layout_width="110dip"
android:layout_height="110dip"
android:layout_below="#+id/txt1"
android:layout_centerHorizontal="true" />
</RelativeLayout>
You can put your imageview inside of other ViewGroup (LinearLayout of RelativeLayout layout), leaving the margin of imageview, and doing android:centerInParent="true" for the ViewGroup:
<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">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:centerInParent="true">
<ImageView android:id="#+id/download" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/mark_download" android:layout_marginTop="90px" />
</LinearLayout>
</RelativeLayout>
You can make a dummy view and center it to parent. Now align your view relative to dummy view using layout:alignComponent and give the marginTop. Now in the code move it according to the width of your view to center it.
Related
I have a simple TextView inside of a RelativeLayout.
I want to position end edge of TextView to center of the RelativeLayout as in image below
I found something like android:layout_toStartOf=...
Example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf=...
/>
</RelativeLayout>
But this only aligns the end edge to start of something. (Can't be used for align end edge to CENTER of layout).
NOTE: There is already a similar question and answer here.
You need to have a widget in the RelativeLayout that you can use as a reference to position the TextView. An empty Space widget (0dp x 0dp) centered horizontally works well for this.
<RelativeLayout>
<!-- Empty space widget (0x0 dp) centered horizontally -->
<Space
android:id="#+id/spacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true"
android:visibility="invisible"/>
<!-- TextView to left of the spacer-->
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/spacer"
android:text="awesome text!"/>
</RelativeLayout>
You could create a dummy View centered within your RelativeLayout and then align the TextView left to it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/center_anchor"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/center_anchor"
android:text="hello world" />
</RelativeLayout>
You may also have a look at the PercentRelativeLayout which supports percentage based dimensions and margins. That means you can specify a right margin of 50% for example.
You can do that using PercentRelativeLayout
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#android:color/white"
android:text="TextView"
android:textColor="#android:color/black"
app:layout_marginRightPercent="50%" />
I'm new on Android.
How can I align a textView with the center of an ImageView using a relative layout?
I have try the following code:
<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"
tools:context="${relativePackage}.${activityClass}" >
<ImageView
android:id="#+id/item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxHeight="15dp"
android:maxWidth="15dp"
android:src="#drawable/icon" />
<TextView
android:id="#+id/item_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/item_icon"
android:text="Counter" />
</RelativeLayout>
but the text is not aligned with the center of the picture.
Thanks!
Use layout_alignTop and layout_alignBottom to align the top and bottom of the textview to the imageview. Then make sure the text has center gravity. This should align it to the middle. ( I believe it should be the right gravity by default, but forcing it never hurts).
You just need to align your textview between the borders of your imageviews top and bottom. And also be sure to center your textview's gravity, so that it will just centered inside your imageview.
<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"
tools:context="${relativePackage}.${activityClass}" >
<ImageView
android:id="#+id/item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxHeight="15dp"
android:maxWidth="15dp"
android:src="#drawable/icon" />
<TextView
android:id="#+id/item_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/item_icon"
android:layout_alignTop="#+id/item_icon"
android:gravity="center"
android:text="Counter" />
For a better approach, IMHO, add your imageview to your textview as a drawableLeft, so that it will represent much more to user.
Relative layout children can use:
android:layout_centerInParent="true"
I am trying to center a TextView in a LinearLayout and it is centering horizontaly but not vertically.
below is my code
<LinearLayout
android:orientation="vertical"
android:layout_width="320dp"
android:layout_height="50dp"
android:background="#drawable/rectblack"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="Explode a Vin"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tvExVin" />
</LinearLayout>
In the end I would like it to be centered vertically to the left of the Linearlayout, if someone could figure out how to do that, that would be great.
Thanks!
You have the gravity and layout_gravity reversed. You can have multiple values on the gravity attribute separated by "|". Try this:
<LinearLayout
android:orientation="vertical"
android:layout_width="320dp"
android:layout_height="50dp"
android:background="#drawable/rectblack"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:gravity="center_vertical|left"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="Explode a Vin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvExVin" />
</LinearLayout>
For clarification:
android:layout_gravity="center_horizontal" will center the LinearLayout horizontally in its parent.
android:gravity="center_vertical|left" will center the TextView (and any other children) vertically inside the LinearLayout and align it to the left.
Try to change your gravity to
android:layout_gravity="center_vertical"
gravity is used to position the content inside your View and layout_gravity is used to position the View within its parent.
But I'm confused by "In the end I would like it to be centered vertically to the left of the Linearlayout". But from the way it sounds, my answer should give you what you want.
Also, unless there is a very good reason, you shouldn't need to use a LinearLayout, or any parent, for a single child. If you can give a better explanation of what you want or even a screenshot then we may be able to help with a better solution.
This will give you your desired effect
<LinearLayout
android:layout_width="320dp" <!-- removed orientation (horizontal by default) -->
android:layout_height="50dp"
android:background="#drawable/rectblack"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="Explode a Vin"
android:layout_gravity="center_vertical" <!-- changed gravity here -->
android:layout_width="fill_parent"
android:layout_height="wrap_content" <!-- change to wrap_content -->
android:id="#+id/tvExVin" />
</LinearLayout>
<LinearLayout 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:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AppLock Demo"
android:textSize="30dp" />
</LinearLayout>
I've used a relative layout and I want to set the button at bottom of the screen, However this puts it all the down to the bottom and I would like to have some margin so it there's some space between the end of the screen/view and the button. However whatever I do the button margin just doesn't do anything on 2.1+ for some reason. The relative layout contains a background so I cant but the margin on that.
Anyone know a fix for this?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp"
android:background="#drawable/background" >
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerHorizontal="false"
android:layout_centerInParent="false"
android:layout_margin="15dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold" />
</RelativeLayout>
You can simply add a padding to the RelativeLayout instead of a margin to the Button, e.g. android:paddingBottom="15dp".
In general I'm always testing my layout in the Exclipse preview using API Level 8 setting. This gives quite accurate results for most devices, including ICS and JB.
The other thing you can do is put a View that's aligned to the bottom of the RelativeLayout, and set its height to the bottom margin you would want to use (or simply specify a value for layout_marginBottom) like so:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/some_image"
android:adjustViewBounds="true"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some Overlay"
android:padding="3dip"
android:gravity="center_vertical|center_horizontal"
android:layout_above="#+id/empty_view"
android:layout_marginBottom="35dip"
/>
<View
android:id = "#+id/empty_view"
android:layout_height = "30dip"
android:layout_width = "match_parent"
android:visibility="invisible"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
This example fills the RelativeLayout with the ImageView, and positions a TextView over the ImageView.
Yu can use translateY attribute
translateY="-16dp"
Final code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp"
android:background="#drawable/background">
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerHorizontal="false"
android:layout_centerInParent="false"
android:layout_margin="15dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold"
android:translateY="-16dp" />
</RelativeLayout>
only working solution suggested by #franny zhao is below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/fl_layout"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_layout"
android:text="hello world"
android:layout_marginBottom="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</RelativeLayout>
If you add padding to the bottom aligned view as suggested by others, the view background will also extend. If you have colored background then the view will look like it is glued to the bottom. Padding and margin are entirely different, padding is part of view, but margin leaves space between views.
I think the best way is to set android:layout_alignParentBottom in XML
then in java code behind:
Button confirm_mobile_button_next = (Button)findViewById(R.id.confirm_mobile_button_next)
and
confirm_mobile_button_next.setTransitionY(-THE_VALUE) or setTransitionX(-THE_VALUE)
I think the best way is to set:
<...
android:layout_alignParentBottom="true" />
then in java code behind:
Button confirm_mobile_button_next = (Button)findViewById(R.id.confirm_mobile_button_next)
confirm_mobile_button_next.setTransitionY(-THE_VALUE) or setTransitionX(-THE_VALUE)
You can use a ViewGroup(for example, FrameLayout or LinearLayout) to wrap the view. Set alignParentBottom in the outside ViewGroup, then marginBottom can work in the inside View.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/fl_layout"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_layout"
android:text="hello world"
android:layout_marginBottom="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</RelativeLayout>
Since I stumbled upon this issue, and saw no answers fit to my situation I started thinking for half a second and resolved it by setting a negative margin on the view inside the RelativeLayout sample:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="-8dp"
android:layout_marginStart="-8dp">
</RelativeLayout>
This should prove useful to some people.
Well this is 2022, but if you still are not using ConstraintLayout for some reason, like the one legacy project code I am fixing, use this property for a Bottom margin type visual.
android:translationY="-8dp"
and your code should look like this (in my case this a FAB in Relative Layout)
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/cart_check_out_btn"
style="#style/FABThemeDark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="16dp"
android:text="#string/cart_check_out_btn"
android:textAllCaps="false"
android:translationY="-8dp" />
And it will work like this
Try in this way :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="17dp"
android:text="Button" />
Here is another alternative. If you want to set the child's margin instead of parent's padding, you should set the value of android:layout_marginTop to double of the desired margin and then set the android:layout_centerVertical to true. Top margin is given double the desired value to compensate the bottom margin. That way you will have an equal top and bottom margin around the child view.
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerVertical="true"
android:layout_centerInParent="false"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="30dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold" />
It will give you the same result.
I have a relative layout, and inside it i place 3 items, 2 imageviews and one scrollview.
My layout is like this...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:baselineAligned="true"
android:background="#drawable/background">
<RelativeLayout
android:id="#+id/logosLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="16dp"
android:gravity="center">
<!-- An image will be placed here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#33ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/up" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_margin="8dp"
android:fadingEdgeLength="32dp"
android:scrollbars="none" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/hotelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/button_background"
android:contentDescription="#string/hotelBtnDesc"
android:gravity="center"
android:src="#drawable/icon1" />
<TextView
android:id="#+id/hotelBtnDescTxtVw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/hotelBtnDesc"
android:textColor="#ffffff"
android:textSize="14sp" />
<!-- more scrollview items -->
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
The above code produces the view shown here:
You may note that the arrows are not aligned in the center, but are slightly moved to the right. Why is that, and how can I fix it ? Note that i have already used android:layout_centerHorizontal="true" to my imageviews.
Thank you in advance
Its problem with your
android:layout_margin="8dp"
remove it from both scrollview and imageView
and pass it to RelativeLayout direct.
or add
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip"
in your RelativeLayout.
and pass
android:layout_centerHorizontal="true"
to your scrollview
they are aligned to the center if you put the marginRight into consideration, try adding android:layout_margin="8dp" to the arrows.
u need to set image view that is under the Relative layout set this image view width fill parent.
Try removing android:layout_weight="1" from your RelativeLayout and see if it works.
In your LinearLayout, the attribute android:orientation="horizontal" causing your display to be aligned horizontaly. Therefore your RelativeLayout is in center but since its shared with another layout thats why you cant note the difference. If you completely remove the first RelativeLayout (the one with id logosLayout) then i hope you'll see the second layout in center.
So, first you need to define the hierarchy of layout you require and then adjust your views accordingly.
It seems problem with your android:layout_margin="8dp" for your scrollview only and pass it to RelativeLayout direct but instead of using margin use padding = "8dp".