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
Related
I have two TextView in a LinearLayout, I want to align them one to the left (or center) and one to right in the same line. How to do this? I try to use gravity but they ignore it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="TextView" />
</LinearLayout>
The easiest way is to change your LinearLayout to a RelativeLayout.
You can use android:layout_alignParentRight="true" and android:layout_alignParentLeft="true". Or to center it use android:layout_centerInParent="true"
See here why gravity won't work
You are using gravity instead of layout_gravity which is what you would want. This post should help clarify the difference
The docs show you available properties.
android:gravity is used to set the gravity of content inside the view. However, in your case the width is wrap_content, hence the content has nowhere to go in the text views.
Use a RelativeLayout with layout_width as match_parent. Then use the android:layout_alignParentLeft="true" and android:layout_alignParentRight="true"with the textViews.
Use it with or without the android:gravity in the second textview and try .
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:layout_weight="1" />
</LinearLayout>
If LinearLayout is Vertical, you can put only an object per line.
You can use RelativeLayout, or else put in a line a LinearLayout Horizontal, that contains textviews
ex.
<LinearLayout vertical>
<LinearLayout horizontal>
<textview 1></>
<textview 2></>
</LinearLayout>
</LinearLayout>
I fixed all my issues with GridLayout...is the best thing bcos u don't need to align anithing to nothing...just put what u want into the matrix (row,column)...and this will allow you to visualize all the field in exactly wrap content of your datas also in landscape is perfect!
I have a LinearLayout that contains a lot of TextViews and ImageButtons, I want to align some of these elements to right, i had a look at this and this but i can't use their tips as i can't change the orientation and can't make android.gravity:right as i don't want to align all the elements to right, also i can't use nested layouts or but the desired elements into RelativeLayout because that shifts the rest of elements to the left and i want them at the center.
this is my code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.15"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:gravity="center"
android:background="#drawable/media_mediabar"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/move_backward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:scaleType="centerInside"
android:src="#drawable/media_button_rewind"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:tag="released"/>
<ImageButton
android:id="#+id/rmeote_mines"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:scaleType="centerInside"
android:src="#drawable/remote_minus" />
<TextView
android:id="#+id/remote_plus_minus"
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp" />
.
.
.<!.. some other elements ..!>
</LinearLayout>
The desired result:
The simplest solution would be using empty views with weights as separators.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- Left button -->
<Button ...
... />
<View android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!-- Middle button -->
<Button ...
... />
<View android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!-- Right button -->
<Button ...
... />
</LinearLayout>
The separator views can be made invisible as an optimization, because they don't draw anything and are used only for layout. You can tweak the actual 'layout_weight' values to get the desired layout. Starting from API level 14 you can use instances of Space as separators which will improve performance and readability (there is also a version of Space in the support library).
For such a complex layout you'd be way better of using RelativeLayout instead.
i can't use nested layouts
Then you can't solve your problem.
Nested layout are the heart of Android layout, to create such complex view that you desire, I think you must use nested layouts.
#Ridcully suggested you to use RelativeLayout, this is a good idea. You can combine it with few linear layouts and you be fine.
I think that RelativeLayout should be your base layout.
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.
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 :-)
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.