what I want to achieve is, divide the rows layout described in picture below. what should I do to achieve dividing the row into 3 exactly same size and 1 unknown size? X are same size and i dont know and dont want to specify if its not necessary...
EDIT: buttons are on the left , center, and right.
Use a LinearLayout inside a RelativeLayout. Put 3 items inside the LinearLayout and give them the same weight. Put the unknown item to the right of the LinearLayout with the help of RelativeLayout.
Left elements will align themselves according to the right-one's width.
Here's the code: https://gist.github.com/3772838
And here 2 screenshots with different sized right most elements:
http://goo.gl/Nezmn
http://goo.gl/XbQwL
Kolay gelsin =)
You can use android:layout_weight to distribute extra space proportionally. You want the three left buttons to absorb all the extra width, so the right (fourth) button should have the default weight of 0. Since you also want them to have the same width, the easiest is to assign them a width of 0dp and give them all the same weight:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Does your extreme left size has a minimum width ?
If so, you should use a LinearLayout with horizontal orientation.
It could contains 2 LinearLayout, one which contains 3 Views (your Buttons) with 0 width and with 1 weight each and the other LinearLayout has a minimumWidth set.
Instead of the marginRight, you could specify a width for the first layout.
Ted Hopp get it right ;)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/rlayoutParent">
<RelativeLayout
android:layout_width="wrap_content"
android:id="#+id/rlayoutButtons" android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:layout_toRightOf="#+id/button1"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:layout_toRightOf="#+id/button2"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rlayoutOther"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/rlayoutButtons" android:gravity="right">
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</RelativeLayout>
</RelativeLayout>
you cab use the layout_weight attribute. give all the x layout the same weight and the question mark a diffrent weight until the screen will devide as u like
Related
I have a layout in which buttons placed on a screen, i want that if the screen has more space then buttons should be three per row, whatever the space they get, also their sizes should be adjusted with screen and i want maximum three buttons per row in the centre of the screen. Right now i have used linear layout for each row of two buttons, please guide me how to make adjustable buttons so if the screen size is big, it should display three buttons max, if size is very small it should display only two buttons per row with small button sizes and as explained on default screen it should display three buttons per row.
See my code example here
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="25dip"
android:paddingRight="25dip"
android:paddingTop="25dip"
android:layout_width="fill_parent">
<Button
android:id="#+id/Car"
android:layout_width="110dip"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:text="#string/car" />
<Button
android:id="#+id/Taxi"
android:layout_width="110dip"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:text="#string/taxi" />
</LinearLayout>
You can use layout_weight to set the width of the button automatically according to the width of LinearLayout.
<LinearLayout
android:id="#+id/wrapper"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="25dip"
android:paddingRight="25dip"
android:paddingTop="25dip"
android:layout_width="match_parent">
<Button
android:id="#+id/Car"
android:layout_width="0dp"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:layout_weight="1"
android:text="#string/car" />
<Button
android:id="#+id/Taxi"
android:layout_width="0dp"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:layout_weight="1"
android:text="#string/taxi" />
</LinearLayout>
However, I don't think you can set the LinearLayout to have three buttons depends on the width by XML. You can only achieve it programmatically.
if(getCurrentScreenWidth() > SPECIFIED_WIDTH_FOR_3_BUTTONS){
LinearLayout layout = (LinearLayout)findViewById("wrapper");
Button button = createNewButton();
layout.addView(button)
}
BUT the best practices will be to load different layout according to screen as described in android document
This is how I would do this.
For each of your buttons set width like:
<Button
android:id="#+id/Car"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:text="#string/car" />
If you set the width to 0dp and the weight to 1 for each of your buttons then the buttons will expand to fill the space.
Using fix value for height and width may causes the problem with different screen. use below xml code to align button as per your requirement.
<?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="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/Car"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/car" />
<Button
android:id="#+id/Taxi"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/taxi" />
<Button
android:id="#+id/bus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/bus" />
</LinearLayout>
I have a RelativeLayout styled as a ButtonBar and contained in a HorizontalScrollView, this layout is a ssigned to a fixed height in order to be controlled but that make it looks giant in small screen devices,
for ex, in a 10' device:
And in a 3.7' device:
And here's my XML code:
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tool"
android:id="#+id/horizontalScrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<RelativeLayout
android:id= "#+id/buttobbar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="top"
style="#android:style/ButtonBar"
android:background="#drawable/released" >
<Button
android:id="#+id/Main"
android:layout_width="120dp"
android:layout_height="60dp"
android:background="#android:color/transparent"
android:textColor="#android:color/white"
android:textStyle="bold"
android:text="#string/main"/>
<View
android:id="#+id/separator"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/Main"
android:layout_width="1px"
android:background="#drawable/separators"/>
<Button
android:id="#+id/HomeView"
android:layout_width="120dp"
android:layout_height="60dp"
android:background="#android:color/transparent"
android:textColor="#android:color/white"
android:textStyle="bold"
android:layout_toRightOf="#+id/Main"
android:text="#string/homeview" />
<View
android:id="#+id/separator"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/HomeView"
android:layout_width="1px"
android:background="#drawable/separators"/>
.
.
. <!-- after 7 other buttons separated with views --!>
</RelativeLayout>
</HorizontalScrollView>
take linear layout at the place of relative layout and u dont have to give absolute value of layout_width just use android:layout_weight and give weight to all button
from this it will automatically adjust on all screen whatever it will be
i think it will help u
Adding weight would be a best option:
Try this:
android:weightSum="1"
and divide this weight sum to the butons as follows:
android:layout_weight=0.5
Assign weight to the layout(Linear layout) by just writing the following code:
android:weightSum="1"(can vary,according to your requirement)
and divide this weight sum to the butons as follows:
android:layout_weight=0.5
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 :-)
In Android lay out how to create a TextView in leftside and two button on right side with same line.
Which layout is better to use for this layout Table Or Relative ?
You can use a LinearLayout to achieve this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_weight="1"
android:text="a text"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1">
</Button>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2">
</Button>
</LinearLayout>
Its is better to use Relative Layout for this kind of view. use android:layout_alignParentRight="true" to Align Right and android:layout_alignParentLeft="true" to Align Left. e.g
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp" >
<TextView
android:id="#+id/type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Large Text"
android:textColor="#76D4F7"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
The easiest would be to use a LinearLayout (orientation horizontal) as pointed out in the previous answer. You can also set the property under Layout Weight to 1 for each button and textview. Then set the layout width for all those object to 0. This will enable you to proportionally scale how much of the area is taken up horizontally by each object. So for example if you set the Layout Weight on the Textview to 2 and each button to 1, then the textview will take up 50% of the space horizontally (2/(2+1+1)). This makes it easier to scale the objects on different device and hopefully starts to address the question of which is the best layout to use in this case.
I am trying to arrange 4 buttons of equal sizes of the phone width in XML. I tried to use with relative layout with their relationship and width of buttons as "wrap_content". But the problem i faced with RelativeLayout is circular relationship is not allowed.
You can use android:layout_weight to make your button equal and fit them according to the width of the device screen. You can apply android:layout_weight="1" to all 4 buttons.
Use LinearLayout with android:weightSum="1.0" and assign android:layout_weight = "0.25" to each of your 4 button(weight_sum/no of buttons).
Under the Relative Layout you mention a Linear Layout whose
android:layout_width="fill_parent" android:layout_weight_sum="4"
android:layout_width="fill_parent" android:layout_weight="1" for all buttons and their parent layout
it works for me.
I think my answere also will be helpful though this is not directly related to above question.
I wanted to arrange 2 icons in the footer area of the application. here is what I did.
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<ImageButton
android:id="#+id/back_arrow"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_weight=".5"
android:background="#android:color/transparent"
android:contentDescription="#string/Description"
android:onClick="onClickBtn"
android:layout_margin="35dp"
android:src="#drawable/backbut" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_margin="35dp"
android:background="#drawable/copy"
android:contentDescription="#string/Description"
android:onClick="onClickBtn" />
</LinearLayout>
since i wanted to give same width I have set android:layout_weight=".5" and I wanted to have a margin amoung two icons. therfore I set android:layout_margin="35dp".