What I wish to achieve is something like this:
The thing is: after I tap on the circle button on the bottom layout, it appears a HorizontalScrollView with the possible colors of the product (which I will have to download).
I tried something like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<LinearLayout
android:id="#+id/lay_productdetailed_bottombar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/transparent"
android:gravity="center_vertical"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_productdetailed_fullscreen"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Full" />
<Button
android:id="#+id/btn_productdetailed_colors"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Colors" />
<Button
android:id="#+id/btn_productdetailed_sizes"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Sizes" />
<Button
android:id="#+id/btn_productdetailed_buy"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Buy" />
</LinearLayout>
<HorizontalScrollView
android:id="#+id/hscroll_productdetailed_colors"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/btn_productdetailed_colors" >
<LinearLayout
android:id="#+id/lay_productdetailed_colors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp" >
<ImageButton
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_vertical" />
<ImageButton
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_vertical" />
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
those 2 ImageButtons are just for testing, to watch their position on the screen (Eclipse).
This code does not seem to align the horizontal scrollview above the button at all. Any ideas on how can I achieve that?
PS. Another question would be: Can I make those buttons rounded, like in the pic, without creating a a class that extends Shape?
You can't add rules placing children of a RelativeLayout in regards of views that are not direct siblings of those views. This means that your HorizontalScrollView can't be placed relative to that Button because the Button isn't placed as a direct child for the RelativeLayout that holds the HorizontalScrollView.
At best you could place the HorizontalScrollView above the lay_productdetailed_bottombar LinearLayout but, as I said, this would not give you positioning control relative to the Button. Another approach would be a PopupWindow holding the HorizontalScrollView.
Judging by the image you probably want the HorizontalScrollView to be centered around the center of the Button which can't be done in the xml layout, you can do it only by manually calculating the dimensions.
Can I make those buttons rounded, like in the pic, without creating a
a class that extends Shape?
No, you'll need to create it yourself.
Related
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 in my Android app a fairly simple Activity that displays three buttons, each launching a different Activity. Currently, I use a RelativeLayout to center the middle button both horizontally and vertically, then place the top and bottom buttons 30dp off the middle one (and also horizontally centered).
What I'd like to do, however, is make the buttons stretch to be a certain percentage of the screen width. I can't figure out how to do this and keep the buttons centered. Is there a good object I can use as a "filler" in a LinearLayout on either side of the buttons (so I could just set the weights)? Or is there a way to do this that doesn't involve a LinearLayout?
The XML for the layout as it stands 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" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:onClick="button1Callback"
android:text="#string/button1Label" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="button2Callback"
android:text="#string/button2Label" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="#string/button3Label" />
</RelativeLayout>
Sure. View or Frame both work.
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="60" />
<Button android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="20" />
<View android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="20" />
</LinearLayout>
works fine as a spacer and seems to be utterly harmless as far as I can tell. I use this quite a bit in my app (although honestly, most of my buttons are fixed-width).
At one point I actually wrote a custom view with proportional layout. But in the end I ended up not using it at all. In almost all cases you can get equivalent proportional layout with judiciously applied weights in a linear layout.
In a layout resource XML, I have 3 RelativeLayout(s) which are inside a main RelativeLayout. The view will be shown vertically. These 3 RelativeLayout() are set next to each other, and I want them to fill the whole screen, doesnt matter what will be the screen size. My, layout view:
<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="#drawable/backg"
>
<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" />
<RelativeLayout
android:id="#+id/r1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginLeft="10dp"
android:background="#drawable/r1bg"
android:layout_weight="1"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:layout_marginTop="39dp"
android:text="S"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView1"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:text="T"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/r2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r1"
android:layout_toRightOf="#+id/r1"
android:layout_weight="1" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/r3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r2"
android:layout_toRightOf="#+id/r2"
android:layout_weight="1" >
</RelativeLayout>
I set weight=1 and layout_width=0dp for each relativeLayout and this technique works with buttons, I thought the same will be with relativeLayout, seems my thoughts were wrong. Any idea?
UPD1: I have added an image of what I would like to have
RelativeLayout does not pay attention to android:layout_weight. (That's a property of LinearLayout.LayoutParams, but not of RelativeLayout.LayoutParams.)
You should be able to get the layout you want with a much simpler view hierarchy. It's not clear what you are trying to do, since the last two RelativeLayouts are empty. If you need a purely vertical organization, I'd suggest using LinearLayout instead of RelativeLayout.
EDIT Based on your edit, it looks like you want a horizontal layout of three compound views, each one clickable. I think something like the following will work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- First column -->
<LinearLayout
android:id="#+id/firstColumn"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="..." />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="text 1"
. . . />
</LinearLayout>
<!-- Second column -->
<LinearLayout . . . >
. . .
</LinearLayout>
</LinearLayout>
If the contents of the buttons aren't correct, you can replace the second-level LinearLayout views with RelativeLayout if that helps organize the layout better.
RelativeLayouts do not support weight. You need to use a LinearLayout as a parent container if you want to use weights.
Solution is very simple. I have been looking for weight distribution in relative layout.
It's a small trick for all these kind situations.
Use LinearLayout with android:orientation="horizontal"
You can use Horizontally oriented LinearLayout Manager in the Recycler View, and place each RelativeLayout in each item, of its Adapter.
The Link: How to build a Horizontal ListView with RecyclerView?
If your RelativeLayouts are set to a fixed width and height, that is to the size of the Screen, that you can get from DisplayMatrics, that will be OK.
The Link: Get Screen width and height
If the contents of your RelativeLayouts are different, then you can use getItemViewType() method.
Please see: How to create RecyclerView with multiple view type?
Happy Coding :-)
How do I design an android application with two buttons next to each other (horizontal) and below these buttons i have a textview (vertical) using LinearLayout? Can't get it to work.
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" />
Far better to use the RelativeLayout in this case. You just described your desired result in terms of the items of your view relative to one another. It is simpler to use than you might think.
http://developer.android.com/resources/tutorials/views/hello-relativelayout.html
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.