I have a LinearLayout, which only contains one button. I want this button to be centered vertically and aligned to the right. I tried many ways, but I couldn't make this button centered vertically. It is always aligned to the top. I also tried to put a button in RelativeLayout, the button can not be centered vertically either.
The XML is as below. Is there anything wrong with this layout? Thanks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#E8E3E4">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More"
android:layout_gravity="right" />
</LinearLayout>
Changing android:layout_gravity="right" to android:layout_gravity="right|center_vertical" didn't resolve the problem in my question.
You say in words that you want this to be centered vertically, but you have not said in XML that you want this to be centered vertically. You will need to adjust your android:layout_gravity attribute to specify both right and center_vertical.
However, I would recommend you go back to RelativeLayout. Use android:layout_centerVertical="true" and android:layout_alignParentRight="true" to make the button be centered vertically and right-aligned.
Also, bear in mind that your current LinearLayout has android:layout_height="wrap_content", which means there is nothing to be centered inside. You need the container to have more space than its contents (e.g., fill_parent) if you want centering to have any meaning.
This code will put the button in vertical center and on the right screen
<?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:orientation="vertical"
android:gravity="center_vertical">
<Button
android:id="#+id/btnClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Click Me" />
</LinearLayout>
Try adding android:gravity="center" to your LinearLayout. I remember having read somewhere that that might do the trick.
Related
So i`m coding this custom listView Adapter. The adapter AXML looks like this:
The problem is that when i compile and run in emulator, the ListView item turns into this :
Can anyone help me figure out what is happening? Maybe help me fix it?. If you need any code let me know.
UPDATE: AXML file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="ABC 232"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/shopName"
android:textColor="#3c3c3c"
android:textSize="22dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2"
android:weightSum="1">
<TextView
android:text="~800m away"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/distance"
android:layout_marginLeft="0.0dp"
android:textColor="#3c3c3c"
android:layout_weight="0.5"/>
<TextView
android:text="Total: 12.45 RON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/total"
android:layout_gravity="right"
android:layout_marginLeft="22.0dp"
android:textColor="#3c3c3c"
android:layout_weight="0.5"/>
</LinearLayout>
</LinearLayout>
Please change all the text views width and height attribute to wrap_content. Specially for text view for shopName.
You can also remove linearLayout1, linearLayout3 and linearLayout4. Since they added noting important to your view.
You do not need to encapsulate each TextView in a LinearLayout. If you desire padding around the font, the TextView has padding attributes that will achieve the same effect in a cleaner manner.
If you clean up the code in this way, the issue with views not appearing may appear clearer.
It could be much simpler, use relative layout and align all three text one another.
Steps to design:
1) Take Parent Relative layout and make it centre vertical and horizontal
2) Place text1 and make align top of parent and give margin or padding from left
3) Place text2 below of text1 and give padding or margin from top.
4) Place text3 toRight of text1 or text2 or make make it centre vertical and horizontal of parent or you give margin left. it is your choice which once you choose.
Let me if you want more help. :)GlbMP
I have no idea on how to achieve this layout:
So basically I want a title bar, bellow that I want a listview, while anchored to the bottom I want a button in the right side of the screen.
Right now I am trying with this code (unsuccessfully)
<?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:orientation="vertical" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="match_parent"
android:layout_height="436dp"
android:id="#+id/listView"
android:layout_gravity="right" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/button_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="ok"
android:layout_weight="0.45" />
</LinearLayout>
</LinearLayout>
By using this layout, my listview does not resize when changing from portrait to landscape so my bottom button goes out of screen. Also the bottom button is not aligned to the right side.
Any idea on how to achieve this?
So I need 2 "bars" one anchored to the top, and one anchored to the bottom. On the top "bar" I want a TextView, and on the bottom "bar" I want a button aligned to the right.
And I want the listView to fill the space between the 2 bars.
So there may be empty space in the middle, when listview has just 1-2-3 items (just like in the picture).
Can this be done?
Please advise...
Change your top layout to a relatuve layout, then place the button outside your linearlayout and inside your relative layout. Then set gravity layout_gravity to bottom||right
U can also drag t where u want it in the visual part of the xml layout
Change your top layout to a relatuve layout, then place the button outside your linearlayout and inside your relative layout. Then set gravity of the button tolayout_gravity to bottom||right
U can also drag t where u want it in the visual part of the xml layout
I'm having issues with a Fragment consisting of a ScrollView containing a LinearLayout. I'm trying to create an effect where the LinearLayout has a white background and looks like a piece of paper scrolling on a coloured background. The way that I'm trying to achieve this is by having the ScrollView occupy the full space of the fragment and then the LinearLayout inside has android:layout_margin="16dp" to create the space around the "paper".
This way, the scroll bar of the ScrollView appears in the coloured background area, the margin at the top scrolls away along with the content and the margin at the bottom only scrolls in when one reaches the end.
Unfortunately in this configuration the ScrollView won't scroll all the way to the end and in fact cuts off a very small amount of the text at the bottom. I suspect that the ScrollView isn't taking into account its child's margins in its vertical scrolling distance. To solve this I've wrapped the LinearLayout in a FrameLayout which solves the issue, but seems superfluous. Any pointers on how to eliminate this unneeded container would be appreciated.
Note: setting android:padding="16dp" on the ScrollView and scrapping the margins doesn't have the desired effect, as then the padding appears on all four edges continuously, regardless of scroll position.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
tools:context=".ArticleFragment" >
<!-- This FrameLayout exists purely to force the outer ScrollView to respect
the margins of the LinearLayout -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:layout_margin="16dp"
android:background="#color/page_background" >
<TextView
android:id="#+id/article_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textIsSelectable="true" />
<TextView
android:id="#+id/article_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textIsSelectable="true" />
</LinearLayout>
</FrameLayout>
</ScrollView>
I remember having trouble with the ScrollView somehow not making it to the end of it's contents when the content layout had a top margin. I solved the problem with a little hack, adding an empty view to the end of the LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
tools:context=".ArticleFragment" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:layout_margin="16dp" >
<TextView
android:id="#+id/article_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textIsSelectable="true"
android:background="#color/page_background" />
<TextView
android:id="#+id/article_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:background="#color/page_background" />
<!-- Add a little space to the end -->
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
</LinearLayout>
</ScrollView>
I used a similar empty view also in the beginning of the LinearLayout to avoid top/bottom margins completely.
EDIT: I just realised that you also wanted the end of the "paper" to show up when reaching the end of the view. In that case you might want to set the background color to the TextViews instead of the layout itself. Then make sure there's no margin between the title and the article (use padding as separation).
EDIT2: I should learn to check when the questions were asked... Well, maybe this still helps someone. :)
The question is old, but I've had issues with ScrollView being ill-behaved when wrapping FrameLayout. It also doesn't seem to consider the margins of contained layouts. You could replace the FrameLayout with another single-child LinearLayout, which should measure correctly. I would've removed the FrameLayout completely and simply added summed margin with padding on the inner layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="26dp"
android:background="#color/page_background" >
<!--...-->
I'd get rid of the FrameLayout and make the LinearLayout the child of the ScrollView with match_parent set as the layout height. If that still doesn't work, consider replacing the bottom margin with another arbitrary View with the desired height and background as the last item in the LinearLayout.
So it's possible to align the top, bottom, left, and right of one view with another so that their edges are flush with each other. However, I've been wondering if it's possible to align the centers of two views of different sizes. My situation occurs when I have an ImageView side by side with a TextView, like this: [ImageView] [TextView]. The ImageView is bit taller than the TextView and so what I do is add padding/margins to the bottom of TextView to get it align and look like the ImageView and TextView horizontal centers are aligned. Problem is, when this view is displayed on larger tablet screens, the padding and margins don't work out right and the TextView doesn't look aligned with the ImageView. I'm sure there is an easy fix to allow this to always work out, so could someone provide me with some insights? Thanks!
This is how I did for a listview row:
<?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:background="#FFFFFF"
android:padding="5dp"
android:gravity="center_vertical">
<TextView android:id="#+id/questionItemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textColor="#000000"
android:gravity="center_vertical"/>
<ImageView android:id="#+id/questionViewed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/eye"
android:layout_marginLeft="5dp" />
<ImageView android:id="#+id/questionAnswered"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
android:layout_marginLeft="5dp" />
</LinearLayout>
Use weightSum rather than padding in dips or pxs, that will make your layout look fine regardless of the size of the user's device.
or you could use gravity as well.
Or you can create a second xml file and insert that one into your res/xlarge file, the phone will pick which xml to read.
I have a simple XML Layout, in which I would like to place a Button in the bottom right corner.
I first tried android:layout_gravity="bottom|right"
However, the result was the button gravitating toward the right side, but not the bottom.
I then tried "center" and that worked, but it remained unchanged in combination with "bottom".
It appears that something is stopping the button from gravitating to the bottom.
Any help is appreciated.
The Layout in which the button is placed has a gravity attribute, which will give you this effect. Eg:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="bottom|right">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"></Button>
</LinearLayout>
Maybe the layout where you are placing this button does not go to the bottom of the screen.
Use hierarchyviewer to see what is happening. And the code posted by Cesar should give you something actually working...
Use RelativeLayout instead of LinearLayout. Not only does it really do what you want, but it actually uses less processing and displays more quickly than LinearLayout.
Instead of a LinearLayout, define your space with a RelativeLayout like:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
Then, to put your button at the bottom right, add this to your button:
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
Cheers,
-scott
PS: as always, I haven't tested this code, just typing in as I remember things.