I want to place 9 buttons in my activity with two conditions:
1.If the screen is small the buttons get scroll.
2.If the screen enough big to fit all of them in one go then they get stretched to fill the screen.
I tried but its not working. thanks.
screenshot of layout
<include
android:id="#+id/toolbar"
layout="#layout/appbar"></include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff0fd"
android:orientation="vertical"
android:layout_margin="8dp">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/First_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Second_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:onClick="onButtonClick"
android:text="#string/Third_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Forth_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Fifth_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Sixth_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Seventh_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button8"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Eighth_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Gate"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
You have to make different layouts for them, by creating folders in your res folder named layout-small , layout-large, as described here: Supporting Multiple Screens
the folder named 'layout' will be used ofcourse. But, when you create a folder named layout-small, that one will be used instead if the screen size is lower than 470dp x 320dp , which is the minimum resolution for layout-normal.
As for the stretching, use the layout weights and weightsum in a linearlayout for the layouts that look like they can fit in the preview.
Remove the weight parameters, and set layout_height to wrap_content, like so:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff0fd"
android:orientation="vertical"
android:layout_margin="8dp">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/First_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Second_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onButtonClick"
android:singleLine="true"
android:text="#string/Third_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Forth_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Fifth_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Sixth_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Seventh_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Eighth_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Gate"
android:textStyle="bold"/>
</LinearLayout>
</ScrollView>
You can preview different screen resolutions in the editor to determine which to make with or without a scrollview right here:
Related
I want to align button on the right side of the view in linear layout.
This is causing both the button on left size and i tried relative layout in that i cause one button left and other on right.
I want both the button side by side with gap of 10 in between.
Please help.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<ImageButton
android:background="#null"
android:id="#+id/reply_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:src="#drawable/reply"
android:layout_gravity="left"/>
<Button
android:id="#+id/readmore_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#null"
android:text="Read more.."
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="14sp" />
</LinearLayout>
You can set android:layout_weight="2" to your container and for every child set android:layout_weight="1" and android:layout_width="0dp" like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2">
<ImageButton
android:background="#null"
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:layout_gravity="left"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#null"
android:text="Read more.."
android:textAllCaps="false"
android:layout_weight="1"
android:textColor="#android:color/white"
android:textSize="14sp" />
</LinearLayout>
But if you already developed some ios apps before as your name is implying, you may find it more easy to work with ConstarintLayout - one layout to fit all screen sizes (its very similar to the drag and drop editor in ios I just cant remember its name)
Here is an example using ConstraintLayout:
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button2"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
Edit according to what you asked:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="3">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="left"
android:layout_gravity="start"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:text="Read more.."
android:layout_weight="1"
android:textSize="14sp" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="right"
android:layout_weight="1"/>
</LinearLayout>
I'm inexperienced with Android and working on a layout that is supposed to have a bottom area with 3 buttons displayed this way:
I managed to almost get it like this, except that depending on the screen, the bottom buttons will be either overlapping each other or too far off. The buttons are supposed to be perfectly aligned below the "APPLY" button, but I can't seem to get it right.
Here's my current code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp">
<RelativeLayout
android:id="#+id/relapply"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/apply_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:width="320dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom"
android:layout_below="#id/relapply">
<Button
android:id="#+id/discard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/discard_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_marginStart="30dp"
android:width="154dp"
android:layout_alignParentStart="true"/>
<RelativeLayout
android:layout_width="12dp"
android:layout_height="30dp"
android:layout_toLeftOf="#id/save">
</RelativeLayout>
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/save_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_marginEnd="30dp"
android:width="154dp"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</RelativeLayout>
This is my code for the layout in which the buttons are in. And then everything's inside a linear layout xml test file I made. Any tips on how to improve this?
Thanks!
first of all you have way to much relative layouts, much more than you need.
you can try this layout here (I removed the background and hardcoded the text for demonstration purposes)
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<Button
android:id="#+id/apply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Top Button"
android:textColor="#android:color/white"
android:textSize="15sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/apply"
android:orientation="horizontal">
<Button
android:id="#+id/discard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Bottom Left Button"
android:textColor="#android:color/white"
android:textSize="15sp" />
<Button
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Bottom Right Button"
android:textColor="#android:color/white"
android:textSize="15sp" />
</LinearLayout>
</RelativeLayout>
you can set the layout margins on the outer relative layout (e.g. android:layout_margin="8dp"
the layout works like this:
in the top row there is just the top Button. Below it there is a horizontal linear layout containing two buttons with
android:layout_width="0dp"
android:layout_weight="1"
This ensures both buttons span equally horizontal (because they have the same width). If you want the whole layout have a specific width just set the android:layout_width="match_parent" from the relative layout to android:layout_width="320dp"
You can do as follow:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:background="#color/background_floating_material_dark">
<Button
android:id="#+id/apply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/apply_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_marginBottom="10dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="#+id/discard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/discard_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_weight="0.9" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"></LinearLayout>
<Button
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/save_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_weight="0.9" />
</LinearLayout>
</LinearLayout>
And the output is near about this:
You can also use following code.....
This is simple and easy.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Apply" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="Discard" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:text="Save" />
</LinearLayout>
</LinearLayout>
hi i am developing a small calculator app and i want to remove spacing between rows and columns of the button i want calculator buttons to be attached to each other.just like floor tiles i am using Grid Layout but still there is small amount of space left between any two buttons
This is layout xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/calc_board"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:inputType="text"/>
<GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="0dp"
android:layout_weight="2"
android:columnCount="4"
android:rowCount="5"
android:useDefaultMargins="false" >
<Button
android:id="#+id/clear_btn"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_column="0"
android:layout_row="0"
android:text="#string/clear_btn"
android:textSize="25sp" />
<Button
android:id="#+id/cross_btn"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_column="1"
android:layout_row="0"
android:drawableLeft="#drawable/ic_action_backspace"
android:drawableStart="#drawable/ic_action_backspace"
android:textSize="20sp" />
<Button
android:id="#+id/divide_btn"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_column="2"
android:layout_row="0"
android:text="#string/divide_btn"
android:textSize="30sp" />
<Button
android:id="#+id/multiply_btn"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_column="3"
android:layout_row="0"
android:text="#string/mult_btn"
android:textSize="30sp" />
<Button
android:id="#+id/seven_btn"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_column="0"
android:layout_row="1"
android:text="#string/seven_btn"
android:textSize="25sp" />
<Button
android:id="#+id/eight_btn"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_column="1"
android:layout_row="1"
android:text="#string/eight_btn"
android:textSize="25sp" />
</GridLayout>
</LinearLayout>
It looks like it might be because you are setting your buttons to be specific sizes. I'll explain in the horizontal direction for simplicity, but the same thing is essentially happening in the vertical direction. For horizontal direction, you are specifying 80dp as the button width, but you have your gridlayout width set to match_parent. If your buttons don't fill the width of the total actual size allocated to them by the grid layout based on it's total width (which in the layout you have defined is determined by the width of the screen), you could end up with extra space around the buttons.
It look like you seem to specify a fixed width and height for button sizes. If you use specific height and width it may look different on different screens.
You can use LinearLayout instead of GridLayout like below.
I think this might help you.. :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/calc_board"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:inputType="text" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/clear_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear"
android:textSize="25sp" />
<Button
android:id="#+id/clear_bt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear"
android:textSize="25sp" />
<Button
android:id="#+id/clear_bn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear"
android:textSize="25sp" />
<Button
android:id="#+id/clea"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/clea1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear"
android:textSize="25sp" />
<Button
android:id="#+id/clea2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear"
android:textSize="25sp" />
<Button
android:id="#+id/clea3r_bn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear"
android:textSize="25sp" />
<Button
android:id="#+id/clea4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear"
android:textSize="25sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I am trying to create a layout in XML something along of the lines of http://i.stack.imgur.com/aPoeU.png but I am little confused as to how to position the buttons in that format. I have created the buttons and tried different things like alignParentBottom, alignParentRight etc but I can't seem to get it the way I want it to be. Can someone please help me out?
<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"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button" />
We can manage it in all screen and in all resolution by weight_sum
Paste below code in your xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#000"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bebebe"
android:layout_weight="0.30"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button3" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.30"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>
Paste it in your XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2258A2"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.20"
android:orientation="horizontal"
android:weightSum="1" >
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button3" />
</LinearLayout>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>
Your code seems correct, but if you want to replicate the size of the buttons then you can't set the height as wrap_content. This will make it as tall as the text, change that to some given value:
android:layout_height="50dp"
Well, in RelativeLayout, as the name suggests, the elements are positioned relative to something else, like the parent view, or another widget in the layout. So you can align the widget in many many ways, like apending it to the right of a view, to the left, above, below, and so on.
Please refer to this link and this other link for more information.
So, if you want to make your buttons look exactly like your example image, try this:
<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"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button2"
android:text="Button 3" />
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button3"
android:text="Button 4" />
You can simply make the button width to fill_parent instead of align left and right. And the height, you can define the measures you'd like to use.
Btw, I used alignParentLeft and alignParentStart because I don't know which API level you're using, so I've used both parameters, old and new. But the effect is the same, your buttons will always start to the left of the parent view.
EDIT: As the user hasternet suggested, you could also use LinearLayout and get similar results.
EDIT 2: And if you like to change the look of your buttons, try to change the style (Take a look here to know what I mean).
Since you need to set the height of the buttons differently and also it depends on different screen size, you cannot achieve this with Relative Layout.
So go for LinearLayout and weightsum attribute. This way screen big or small, you can achieve your expected UI. Mentioned code below modified.
<LinearLayout 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"
tools:context=".MainActivity"
android:Orientation="vertical"
android:weightsum="8" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button"
android:layout_weight="1"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button"
android:layout_weight="3"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button"
android:layout_weight="3"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button"
android:layout_weight="1"/>
</LinearLayout>
I have 3 horizontal LinearLayouts, I've been making xml on 4.7 screen and it looked good, then i switched to bigger screen and it doesnt look good. So my xml looks good on screen size of 4.7 but on 10.01 and 7 it screws up
on 4.7 screen:
on 10,01 :
<LinearLayout 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/backgroun"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Load" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Play"
android:layout_weight="1" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Mute"
android:layout_weight="1"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Volume up"
android:layout_weight="1" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Volume up"
android:layout_weight="1" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Mute"
android:layout_weight="1"/>
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Play"
android:layout_weight="1"/>
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Load"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="7"/>
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<SeekBar
android:id="#+id/seekBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="7"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seekBar3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<SeekBar
android:id="#+id/seekBar4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
First of all when you use android:layout_weight you should set the android:layout_width="0dp"
Besides that now, I would suggest having a separate layout for xlarge screens. The way to do that is to create a separate folder that will contain a layout with the same name as your original layout (eg. main.xml). The folder name for 10" screens should be something like layout-xlarge. For more details you should check here.
For different size screens. you can also make another layout for bigger screen.
res/layout-small
res/layout-large
res/layout-xlarge
create a new folder as named "layout-xlarge" and copy your xml layout in there and you can adjust the sizes.
Android will automatically select the appropriate layout for the current device. Remember that, layout name should be the same in each folder.