I got a RelativeLayout:
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/auto_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:layout_marginBottom="5sp"
android:layout_marginTop="5sp"
android:layout_toLeftOf="#+id/ButtonBackspace"
android:completionHint="#string/a_string"
android:completionThreshold="1"
android:gravity="center"
android:hint="#string/a_string"
android:textAppearance="#android:style/TextAppearance.Large" />
<ImageButton
android:id="#+id/ButtonBackspace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/myButton"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#android:color/white"
android:soundEffectsEnabled="true"
android:src="#drawable/dialer_btn_bks" />
<Button
android:id="#+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="New"
android:visibility="gone" />
</RelativeLayout>
The visibility of myButton starts as Gone. I was hoping that when I change the visibility of the button in run time to Visible, it would push the ImageButton and AutoCompleteTextView to the left but both the button and imageButton appear on top of each other since they both got android:layout_alignParentRight="true". I tried adding the android:layout_toLeftOf="#+id/myButton" to the ImageButton but that did not work.
How can I make the button push the other elemets when it become visible and have its own space?
if these elements are just next to each other, you can use a linear layout and set the gravity to right. the linear layout automatically pushes the elements.
in relative layout all elements are "relative" to another element or the parent view, but just to one element for each direction. and if this object is "gone" the relation in this direction also is gone.
Related
in the below xml layout, i have two buttons at the same position and they will do their function based on the visibilty set. now i tried to place two textviews
below the buttons, i want the text views to be below both buttons so I used
android:layout_below="#id/actConnect2_btn_connect"
but at run time when the connect-button is visible the text view appears below it, and if pair-button is visible it overlap
how to display the textview below both buttons?
Note: i know that i can use android:layout:marginTop but i want to solve it without it
code:
<Button
android:id="#+id/actConnect2_btn_pair"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/actConnect2_tv_label_devClass"
android:layout_centerInParent="true"
android:text="#string/str_pair"/>
<Button
android:id="#+id/actConnect2_btn_connect"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/str_connect"
android:layout_below="#+id/actConnect2_tv_label_devClass"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/actConnect2_tv_label_uuids"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/actConnect2_btn_connect"
android:text="Service's UUID: ">
</TextView>
<TextView
android:id="#+id/actConnect2_tv_uuids"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/actConnect2_tv_label_uuids">
</TextView>
Put both buttons in a LinearLayout then put the textview below the LinearLayout
take both button in one layout
<RelativeLayout android:id="#+id/relativeButton"
android:layout_width="wrap_content"
android:layout_below="#id/actConnect2_tv_label_devClass"
android:layout_height="wrap_content">
<Button
android:id="#+id/actConnect2_btn_pair"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/str_pair"/>
<Button
android:id="#+id/actConnect2_btn_connect"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/str_connect"
android:layout_alignParentStart="true" />
</RelativeLayout>
and use this for your textview
android:layout_below="#id/relativeButton"
You have to place the buttons in a Layout (any type and arrange them accordingly)
Assign an ID to that layout.
Place the textView below that layout ID.
I have relative layout ("relative") with clickable layout ("clickable") on top, expandable list view ("lview") under "clickable", and "footer" text view with version of my app on bottom of "relative":
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/menu_background" >
<com.reconti.app.widgets.Logo
android:id="#+id/reconti_menu_tv_logo"
android:layout_width="fill_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:paddingLeft="#dimen/standart_side_margin"
android:textSize="30sp" />
<RelativeLayout
android:id="#+id/clickable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/menu_tv_logo"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:clickable="true"
android:paddingLeft="#dimen/standart_side_margin" >
<com.reconti.app.widgets.RoundedImageView
android:id="#+id/menu_profile_avatar"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:scaleType="fitCenter"
android:src="#drawable/com_facebook_profile_picture_blank_portrait" />
<TextView
android:id="#+id/menu_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/menu_profile_avatar"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</RelativeLayout>
<ExpandableListView
android:id="#+id/lview"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:childDivider="#color/menu_divider_color"
android:divider="#color/menu_divider_color"
android:dividerHeight="1dp"
android:footerDividersEnabled="false"
android:groupIndicator="#null"
android:headerDividersEnabled="false"
android:listSelector="#drawable/expandable_row_background" />
<TextView
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/white" />
</RelativeLayout>
Everything looks good as long as user hit some option in expandable list. Then "lview" overlaps "footer". I would like to achive effect, that "lview" remains on top of "footer" and "footer" remains on bottom of "relative" and only bottom of "lview" is visible to user (so top goes under "clickable"). I hope I explained it clearly:)
Usually I like to work with linearlayout when needs to keep views above views. I don't like how relative layout works sometimes. Well, you can try my idea, I know this works with list, but didnt try with expandable list (but guess will work).
LinearLayout vertical #relative
Logo #reconti_menu_tv_logo
RelativeLayout #clickable
ListView weight 1 #lview
TextView #footer
In this, only your ListView will scroll. I don't know if is this what you want. Your logo, clickable and footer will be fixed.
The weight 1 is to keep your listivew using all not used space, so your footer will be always on "footer". Don't forget about height 0dp when using weight.
Now, if you want all scrolling, you have to use addHeader(View) and addFooter(View) on your list before set the adapter. (this is the better way)
I'm attempting to create a a Heading + button similar to the Google Music App, e.g. where there is a "Songs" Header on the Left and then on the right there is a Button with the text "X more"..
I've using a RelativeLayout for the TextView and Button
My problem is that the button is taking up the size of the layout that contains the text the height is all wrong and the padding doesn't seem to do anything.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
[REMOVED for clarity]
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/list_foreground"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/photo_button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#color/actionbar_background"
android:padding="10dp"
android:text="test" />
</RelativeLayout>
What am I doing wrong here?
RelativeLayouts are designed to have children in the layout "relative" to each other. In other words, if you want the Button to the right of the Textview, you need to tell it.
Because you are aligning relative to the parent LEFT / RIGHT, it appears that things are "kind of" working.
You may be better off with a LinearLayout, depending on your needs. LinearLayouts use "orientation" not RelativeLayouts.
You should look over some tutorials (like this one: http://mobile.tutsplus.com/tutorials/android/android-layout/) but ultimately you will probably put your button in first and then your text view so that the textview content will wrap appropriately.
To get the same effect as the Music App I ended up using a RelativeLayout but instead of a Button I'm using another TextView, this is giving the impression it's a button but it gives me more scope to format the background etc. I think just setup a OnClickListener in the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/photo_title">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/more_photo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#color/actionbar_background"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="10 MORE"
android:textColor="#color/button_text"
android:textSize="12sp" />
</RelativeLayout>
I am trying to display 4 ImageButtons at the bottom of the layout. I am able to get only 3 ImageButtons. The fourth ImageButton is not visible. and here is my code for that.
I am using Relative Layout for to display the application.
<ImageButton
android:id="#+id/Button1"
android:layout_weight="1.0"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:longClickable="true"
android:layout_width="wrap_content"
android:layout_height="75sp"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton2"/>
<ImageButton
android:id="#+id/Button2"
android:layout_gravity="bottom"
android:layout_toRightOf="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="75sp"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_weight="1.0"
android:layout_marginLeft="2dp"
android:longClickable="true"/>
<ImageButton
android:id="#+id/Button3"
android:layout_gravity="bottom"
android:layout_toRightOf="#+id/Button2"
android:layout_height="75sp"
android:layout_width="wrap_content"
android:layout_weight="1.0"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_marginLeft="2dp"
android:longClickable="true"/>
<ImageButton
android:id="#+id/Button4"
android:layout_gravity="bottom"
android:layout_height="75sp"
android:layout_width="wrap_content"
android:layout_weight="1.0"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_marginLeft="2dp"
android:longClickable="true"
android:layout_alignParentRight="true"/>
Put it in a LinearLayout with weights and align this LinearLayout tot he bottom of the parent like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/ib1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
Note that this method will decrease the performance somewhat.
First you need to remove this from your ImageButton attributes if you want to keep using RelativeLayout as their parent layout:
android:layout_weight="1.0"
It is used in LinearLayout, Lint should be giving you a warning about it (invalid layout param in RelativeLayout).
If you want your 4 buttons to show in the bottom of the screen you need to include
android:layout_alignParentBottom="true"
in all 4 ImageButtons, I tried the xml you provide and only the 1st button is showing in the bottom.
And last but not least, if you want your button to have the same size to have some design consistency, I would suggest putting them in a horizontal LinearLayout with
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
and configure the ImageButtons with
android:layout_width="0dp"
android:layout_weight="1.0"
then include that LinearLayout in your RelativeLayout.
Another thing : since you're using
android:layout_width="wrap_content"
for your ImageButtons, you need to make sure the image is not too wide, otherwise some of your buttons might not be shown on screen because the first one(s) is taking too much space, leaving the last one(s) to the right of your screen.
On a side note, I hope you're not trying to make a iOS-style lower tab bar, this is frowned upon in Android, more info here ...
Have a good one !
Like some people say, in the last button, you don't have android:layout_toRightOf = "#id/Button3" so it's going to be in the top of the layout.
Other way to do this that I usually do is:
android:layout_toRightOf = "#id/Button1"
android:layout_alignbottom = #id/Button1"
It's going to align with the bottom of the button1. I do this because sometimes this button isn't align with the other one, depends of the layout.
At the last ImageButton you don't have:
android:layout_toRightOf="#+id/Button3"
You will need this if you want it to be at the bottom.
I would also suggest that you remove some of your code:
android:layout_gravity="bottom"
android:layout_weight="1.0"
This only works in FrameLayout or LinearLayout.
If you want to know for sure every ImageButton is at the bottom of the screen use what you used for the first button:
android:layout_alignParentBottom="true"
I have a RelativeLayout containing a pair of side-by-side buttons, which I want to be centered within the layout. I could just put the buttons in a LinearLayout and center that in the RelativeLayout, but I want to keep my xml as clean as possible.
Here's what I tried, this just puts the "apply" button in the center and the "undo" button to the left of it:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15sp">
<TextView
android:id="#+id/instructions"
android:text="#string/instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15sp"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/apply"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/undo"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:gravity will align the content inside the view or layout it is used on.
android:layout_gravity will align the view or layout inside of his parent.
So adding
android:gravity="center"
to your RelativeLayout should do the trick...
Like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="15sp">
</RelativeLayout>
Here is an extension of BrainCrash's answer. It is a non nested option that groups and centers all three horizontally and vertically. In addition, it takes the top TextView and centers it horizontally across both buttons. If desired, you can then center the text within the TextView with android:gravity="center". I also removed the margins, added color, and set the RelativeLayout height to fill_parent to highlight the layout. Tested on API 11.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#android:color/black"
>
<TextView
android:id="#+id/instructions"
android:text="TEST"
android:textSize="20sp"
android:background="#android:color/darker_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignLeft="#+id/undo"
android:layout_alignRight="#+id/apply"
android:gravity="center"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="APPLY"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="UNDO"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:layout_gravity="center"
will almost give what you're looking for.
Here is a combination of the above answer's that solved my specific situation:
Centering two separate labels within a layout that also includes a button in the left most position of the same layout (button, label, label, from left to right, where the labels are centered relative to the layout containing all three views - that is, the button doesn't push the labels off center).
I solved this by nesting two RelativeLayout's, where the outer most layout included the
Button and an Inner-RelativeLayout.
The Inner-RelativeLayout contained the two text labels (TextView's).
Here is a snippet that provides the details of how the centering and other layout stuff was done:
see: RelativeLayout Gravity not applied? and
Gravity and layout_gravity on Android
for the difference's between gravity and layout_gravity.
Tweak the paddingLeft on the btn_button1 Button to see that the TextView's do not move.
(My apologies to havexz for the downvotes. I was too hasty in thinking that just b/c your suggestions didn't solve the exact question being ask, that they do help to solve very similar situations (the answer here solves a very specific situation, and only the combination of all these answer's solved my problem. I tried upvoting, but it won't let me unless I edit the answer's, which I don't want to do.)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#FF0000FF">
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF00FF00"
android:text="<"
android:textSize="20sp"
android:paddingLeft="40dip"/>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFFF00FF"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:text="Complaint #"
android:gravity="center"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:layout_toRightOf="#id/tv_text1"
android:gravity="center"/>
</RelativeLayout>
</RelativeLayout>
LinearLayout is a good option. Other than that there are options like create an invisible view and center that and then align left button to the left it and right on the right of it. BUT those are just work arounds.