I have an activity with three buttons in the layout. All the buttons are at the bottom. I wanted the button to be extreme left,centre and extreme right. The extreme right and the extreme left buttons are fine. However, the centre button is taking up all the space in between the left and right button. However, I want the middle button to take necessary space and not all the space. Also, I am unable to move the imageButton to the middle of the screen. Any help with these things? Here's my XML layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/rel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/backgroundnr"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ImageButton
android:id="#+id/imageButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tempText2"
android:layout_above="#+id/tempText"
android:gravity="center"
android:src="#drawable/start"
android:background="#null"
android:layout_gravity="center_horizontal"
>
</ImageButton>
<TextView
android:id="#+id/tempText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Touch to Start"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
>
</TextView>
<ImageView
android:id="#+id/bottomlayout"
android:layout_width="fill_parent"
android:layout_height="100px"
android:src="#drawable/bottombar"
android:layout_alignParentBottom="true"
>
</ImageView>
<Button
android:id="#+id/profileButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:drawableTop="#drawable/profiledefault"
android:gravity = "bottom"
android:background="#0000"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#+id/bottomlayout"
android:textColor="#FFFFFF"
android:paddingLeft="10dip"
android:paddingBottom="5dip"
>
</Button>
<Button
android:id="#+id/savedButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Saved"
android:drawableTop="#drawable/favoritesdefault"
android:gravity = "bottom"
android:background="#0000"
android:layout_alignParentBottom="true"
android:textColor="#FFFFFF"
android:paddingBottom="5dip"
android:layout_toRightOf="#+id/profileButtons"
android:layout_toLeftOf="#+id/recentButtons"
android:layout_gravity="center_horizontal"
>
</Button>
<Button
android:id="#+id/recentButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recent"
android:drawableTop="#drawable/recentdefault"
android:gravity = "bottom"
android:background="#0000"
android:layout_alignParentBottom="true"
android:textColor="#FFFFFF"
android:layout_alignParentRight="true"
android:paddingRight="10dip"
android:paddingBottom="5dip"
>
</Button>
</RelativeLayout>
use
android:layout_centerHorizontal="true"
for your ImageButton instead of layout_gravity.
and to rearrange your bottom buttons.
don't use leftOf or rightOf for middle button which is "savedButtons" . just use
android:layout_centerHorizontal="true"
for it. And for the left button "profileButtons" use
android:layout_toLeftOf = "#+id/savedButtons"
for the right button "recentButtons" use
android:layout_toRightOf = "#+id/savedButtons"
In this layout middle button will occupy the center space necessary , and the remaining left and right areas are used for the remaining buttons. you will need alignParentBottom for each of 3 buttons.
HTH.
Related
I would like to position the text in my button like this:
At the moment the text is positioned in the bottom left corner of the button:
I have four rows of this type of buttons and in every row there is two buttons. Here is my code for one row of buttons:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/main_fashion_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/thumbnail_channel_fashion"
android:text="Fashion"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:layout_weight="1"/>
<Button
android:id="#+id/main_science_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/thumbnail_channel_science"
android:text="Science"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:layout_weight="1"/>
</LinearLayout>
how can I add some padding to the left and below of the text without moving the background image? Margin seems to add white space around button and padding creates space between background image and button's edges.
Thanks for help!
You can use this
<TextView
android:id="#+id/main_fashion_button"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#mipmap/ic_launcher"
android:text="Fashion"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:padding="10dp">
Check this out
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/image" />
<TextView
android:id="#+id/imageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|left"
android:layout_alignBottom="#+id/imageButton"
android:text="FASHION"
android:padding="16dp"
android:textColor="#fff" />
</RelativeLayout>
I have a number of textviews in a linear layout, which itself is sitting within a linear layout within a relative layout (see structure below). I am positioning the top level linear layout to the right of a button in the view by using android:layout_toRightOf to stop the textview overlapping the button when the text is too long.
What I want to do is centre the text in the textviews relative to the entire view, not the linear layout within which it sits (i.e centre it relative to the screen width). I have tried using layout_gravity set to centre in the textview and the relative layout) but with no effect.
Can anyone suggest how to centre the text in this way ?
<RelativeLayout
android:id="#+id/headerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#drawable/purple"
android:minHeight="64dip"
android:visibility="visible" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="2dip"
android:layout_toRightOf="#+id/backButton"
android:gravity="center|center_vertical|fill_vertical"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/headerTextLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="48dip"
android:layout_marginRight="48dip"
android:gravity="center|center_vertical|fill_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textColor="#color/white_color"
android:textSize="18sp"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:typeface="sans"
android:singleLine="true"/>
Try this
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text=""
**android:textAlignment="gravity"**
android:textColor="#color/white_color"
android:textSize="18sp"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:typeface="sans"
android:singleLine="true"/>
So I have an ExpandableListView and basically I have some text (person's name), and then I want a button on the same row (towards the right side if possible). Currently, this code in my XML file it has the text on one line, and then the button on the next line, I've played around with it but can't figure out how to get it both on one line.
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:id="#+id/lblListItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="17dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="0.8"
android:textSize="11dp"
android:text="Checkout"
android:id="#+id/checkout" />
</LinearLayout>
This will do the trick.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="horizontal" // Edited here
android:weightSum="1" > // here
<TextView
android:id="#+id/lblListItem"
android:layout_width="match_parent" //and here
android:layout_height="35dp"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center_vertical"
android:layout_weight="0.2" // here
android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent" // and here
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="0.8" // and here
android:textSize="12dp"
android:text="Checkout"
android:id="#+id/checkout" />
</LinearLayout>
Make sure of 2 things when using weightsum:
if orientation is horizontal, width of all child views to be displayed in a row will need to have "match_parent" and some value for layout_weight.
0.2 will give 80% of horizontal width of parent and 0.8 will give 20%.
You have
android:orientation="vertical"
in your parent LinearLayout which stacks elements from top to bottom (naturally). Remove that line (since horizontal is the default orientation for LinearLayout). Then you would need to use weight or margin to get it positioned where you want.
Another option would be to replace your LinearLayout with a RelativeLayout. This will allow you to use android:alignParentRight="true" on your Button to put it on the right side of the screen (RelativeLayout puts Views at the top-left by default).
I have a linearlayout with two linearlayouts inside. Both linearlayouts have 2 buttons. I want to align the first two buttons to the left, and the other two buttons to the right. Unfortunately I have the four buttons (or the 2 layouts) side by side.
This is my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:background="#drawable/vat_header_selector"
android:orientation="horizontal" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_numbers"
android:layout_width="90dp"
android:layout_height="30dp"
android:textColor="#drawable/vat_btn_header_textcolor_selector"
android:background="#drawable/vat_btn_header_selector"
android:text="Numbers">
</Button>
<Button
android:id="#+id/btn_text"
android:layout_width="90dp"
android:layout_height="30dp"
android:textColor="#drawable/vat_btn_header_textcolor_selector"
android:background="#drawable/vat_btn_header_selector2"
android:text="Words">
</Button>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_black"
android:layout_width="50dp"
android:layout_height="30dp"
android:textColor="#drawable/vat_btn_header_textcolor_selector"
android:background="#drawable/vat_btn_header_selector"
android:text="B">
</Button>
<Button
android:id="#+id/btn_white"
android:layout_width="50dp"
android:layout_height="30dp"
android:textColor="#drawable/vat_btn_header_textcolor_selector"
android:background="#drawable/vat_btn_header_selector2"
android:text="W">
</Button>
</LinearLayout>
</LinearLayout>
This is how it looks like:
And this is what I want:
Gravity left, right doesn't work when the orientation of the LinearLayout is set to horizontal(as the views are placed along the X axis). One way to do what you want is to insert an empty View between the two LinearLayouts to create a space between them:
<View android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
Apply below properties to Second Linear Layout which contain Button B and Button W.
android:gravity="right"
android:layout_weight="1"
I have two LinearLayouts in my Android application. One (the top) holds a TextView and a Button and the one below it holds two buttons. I was wondering if there was a way to make the right button of the upper LinearLayout the same size as the right button of the bottom LinearLayout.
<LinearLayout android:layout_width="fill_parent"
android:id="#+id/linearLayout1" android:layout_height="wrap_content"
android:orientation="horizontal" android:paddingTop="15.0dip">
<TextView
android:paddingLeft="5.0dip"
android:textSize="33px"
android:textStyle="bold"
android:layout_height="wrap_content"
android:id="#+id/textViewPoints"
android:text="Points: 0"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical"
android:paddingRight="25.0dip"
android:layout_weight="0" />
<Button
android:enabled="false"
android:onClick="myClickHandler"
android:layout_height="wrap_content"
android:id="#+id/buttonAddTracker"
android:layout_width="fill_parent"
android:layout_gravity="center_vertical"
android:text="#string/buttonAddTracker"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:id="#+id/linearLayout2" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:paddingTop="15.0dip">
<Button
android:text="Calculate"
android:id="#+id/button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="myClickHandler" />
<Button
android:text="Reset"
android:id="#+id/button02"
android:layout_toRightOf="#+id/button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="myClickHandler"></Button>
</LinearLayout>
Well there are two ways how you can do that ...
1) If you are using Linear Layout as you are, then you'll have to fix the WIDTH of the Left TextView and Left Button then can't be wrap content , just give them say 40 dip . After that put Right Buttons Width to fill_parent or fix a WIDTH for them too .
2) Use TableLayout and put each of them in their respective columns and rows and the TableLayout should handle it for you.