The title explains what I need. I want to set columnWeight of Button (Because is inside GridLayout) but from code.
Something like that with code:
<Button android:layout_column="0"
android:layout_row="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1" />
You need to use LinearLayout subviews. Like the user Price says:
There are limitations when using the GridLayout, the following quote is taken from the documentation.
"GridLayout does not provide support for the principle of weight, as
defined in weight. In general, it is not therefore possible to
configure a GridLayout to distribute excess space in non-trivial
proportions between multiple rows or columns ... For complete control
over excess space distribution in a row or column; use a LinearLayout
subview to hold the components in the associated cell group."
Here is a small example that uses LinearLayout subviews. (I used Space Views that takes up unused area and pushes the buttons into desired position.)
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="1"
>
<TextView
android:text="2x2 button grid"
android:textSize="32dip"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 2" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 4" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</GridLayout>
Check Price's response for more information.
Try it: ((GridLayout.LayoutParams) button.getLayoutParams()).columnSpec =
GridLayout.spec(GridLayout.UNDEFINED, 1f);
You can use spec() method to define the columnWeight from java code.
GridLayout.LayoutParams param = new LayoutParams(GridLayout.spec(GridLayout.UNDEFINED, 1f), GridLayout.spec(GridLayout.UNDEFINED, 1f));
button.setLayoutParams(param);
Related
I have a layout file in my Android application:
<?xml version="1.0" encoding="utf-8"?>
<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="#color/player_background"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".Fragments.PlayerFragment">
<ProgressBar
android:id="#+id/progress_bar_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:theme="#style/ProgressBarStyle"
android:visibility="invisible" />
<TextView
android:id="#+id/title_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Title"
android:textColor="#color/white"
android:textSize="24dp" />
<ImageView
android:id="#+id/view_imageview"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_marginTop="10dp"
android:background="#color/white" />
<TextView
android:id="#+id/status_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="20dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/play_pause_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/play_btn" />
<ImageButton
android:id="#+id/sleep_timer_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/sleep_btn" />
<ImageButton
android:id="#+id/share_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/share_btn" />
<TextView
android:id="#+id/sleep_timer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sleep_timer_btn"
android:layout_alignLeft="#+id/sleep_timer_btn"
android:layout_alignRight="#+id/sleep_timer_btn"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="15dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="#style/Volume_Seekbar"
android:paddingStart="30dp"
android:paddingEnd="30dp"/>
</LinearLayout>
It's working perfectly in most of the devices but in a small screen device I can't see the SeekBar because it's out from the screen. Any idea how I can fix it?
You are using very large fixed sizes on your views, and because different phones got different screen sizes what seems to work on some device will actually not work on another
For example - in a smaller device with height of 300dp with views summing up to total of 400dp you will not have enough room for some views because of the small screen size and that's why you are not seeing your view.
You can use ConstraintLayout to make your screen responsive, or if you want to keep your current layout structure you can use the following libraries for scaling size of dp:
ssp and sdp to get a scalable size unit for your views and texts.
Another option is to wrap your layout with ScrollView, giving your screen the option to be scrollable and by that you will be able to "see" all of your views on your screen - note that this may not be intuitive to your user.
It is because the fixed sizes you are using to build your layout is getting summed up eventually being too big for small screen size. You can try the following to fix this:
Create a layout specially for small screen size by using smallest width qualifier
Make your layout scrollable
Use constraint layout
Using the ssp and sdp size units
NOTE that you will have to specify the smallest width qualifier to your current layout in such a way that the smallest width qualifer excludes the small screen devices and include the devices in which your layout fits properly.
I would suggest you to use constraint layout, but if you still want to go ahead with your current view then it will be good practice if you add scrollview to your parent layout, so that your layout won't get cropped on smaller devices:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/player_background"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".Fragments.PlayerFragment">
<ProgressBar
android:id="#+id/progress_bar_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:theme="#style/ProgressBarStyle"
android:visibility="invisible" />
<TextView
android:id="#+id/title_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Title"
android:textColor="#color/white"
android:textSize="24dp" />
<ImageView
android:id="#+id/view_imageview"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_marginTop="10dp"
android:background="#color/white" />
<TextView
android:id="#+id/status_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="20dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/play_pause_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/play_btn" />
<ImageButton
android:id="#+id/sleep_timer_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/sleep_btn" />
<ImageButton
android:id="#+id/share_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/share_btn" />
<TextView
android:id="#+id/sleep_timer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sleep_timer_btn"
android:layout_alignLeft="#+id/sleep_timer_btn"
android:layout_alignRight="#+id/sleep_timer_btn"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="15dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingStart="30dp"
android:paddingEnd="30dp"
android:theme="#style/Volume_Seekbar" />
</LinearLayout>
</ScrollView>
I am new to StackOverflow and I am not totaly shure if this is right but I want to make an android app for my fathers company, He is the owner of a Bed&Breakfirst and he wants an app to keep track of consumptions. I planed an interface of the product list where all consumptions can be chosen like this:
http://imgur.com/cwY4YtK
Now the problem is that we need to be able to add and remove products. otherwise i whold have done it like this:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:id="#+id/widget46"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/widget47"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="2dp" />
<Button
android:id="#+id/widget52"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="266dp"
android:layout_y="43dp" />
<TextView
android:id="#+id/widget53"
android:layout_width="253dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="9dp"
android:layout_y="10dp" />
<TextView
android:id="#+id/widget54"
android:layout_width="251dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="8dp"
android:layout_y="50dp" />
<Button
android:id="#+id/widget55"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="85dp" />
<Button
android:id="#+id/widget56"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="128dp" />
<TextView
android:id="#+id/widget57"
android:layout_width="259dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="2dp"
android:layout_y="92dp" />
<TextView
android:id="#+id/widget58"
android:layout_width="256dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="6dp"
android:layout_y="136dp" />
</AbsoluteLayout>
But that can only be done if you know the ammount of products that you have. But wee need to add and remove products (Editing isen't neccesary.).
Also if we add to many products to fit on the screen I want to make a scroll option that can scroll trough all products like that.
Is there any way to do those twoo things or is this immpossibile?
A1:
Use TableLayout (or GridLayout etc) and page change buttons.
(This is easier.)
In this pattern, table (in layout) has fixed count rows.
Set OnClickListener to next / prev button to update each cell (text views) text.
(ex: page1: product name of row 0 to 4 is shown, page2: row 5 to 9 is shown)
OnClickListeners of each buttons next to cell text views needs to be modified too.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_01"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 01" />
<Button
android:id="#+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_02"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 02" />
<Button
android:id="#+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_03"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 03" />
<Button
android:id="#+id/button_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_04"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 04" />
<Button
android:id="#+id/button_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_05"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 05" />
<Button
android:id="#+id/button_05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Prev" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next" />
</LinearLayout>
</LinearLayout>
A2:
Use ScrollView that contains TableLayout (or GridLayout etc.) inside.
In this pattern, table (in layout) row count must be changed to suit your data count.
(Create/remove TableRows in your code and add/remove them from table)
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_01"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 01" />
<Button
android:id="#+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_02"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 02" />
<Button
android:id="#+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</ScrollView>
for A1 and A2:
res/values/dimens.xml
<resources>
<dimen name="text_view_width">250dp</dimen>
</resources>
You might want to use android listview or gridview, whatever suits you. Here is a good tutorial on how to use a list view.
I'm trying to reposition my android app layout, I have 2 x EditText and one Button.
I want to place them below each other, its now side to side.
Here is my code :
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:background="#drawable/borderlayout" >
<EditText
android:id="#+id/titleText1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:hint="Title" />
<EditText
android:id="#+id/descriptionText1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/titleText1"
android:layout_weight="1"
android:hint="Description" />
<Button
android:id="#+id/inputbutton1"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_below="#+id/descriptionText1"
android:layout_weight="1"
android:background="#drawable/custom_button" />
</TableRow>
and this is how it looks when i RUN ( cant post image yet because of low Rep)
http://prntscr.com/3qyjpv
You must use a LinearLayout with orientation=vertical
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="#+id/titleText1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:hint="Title" />
<EditText
android:id="#+id/descriptionText1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/titleText1"
android:layout_weight="1"
android:hint="Description" />
<Button
android:id="#+id/inputbutton1"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_below="#+id/descriptionText1"
android:layout_weight="1"
android:background="#drawable/custom_button" />
Change this to a LinearLayout with android:orientation="vertical".
Just as you shouldn't use tables for formatting in HTML, so you shouldn't use TableLayout to format the GUI in Android. Reserve your use of TableLayout for formatting data tables.
You can use LinearLayout, if you want, but I prefer to use to "enforce" the position of widgets relative to each other.
Screenshot is posted below. In each row, the last 3 columns are not centered in their row vertically. The height of each row is unknown until after the screen is displayed. I am not sure but I am guessing I need to find the height of the row dynamically after everything is displayed and then center everything. Is that the correct route?
Below is a snipper of XML code for this class.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="65"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/q1Image"
android:layout_width="10dp"
android:layout_height="10dp" />
<TextView
android:id="#+id/q1Question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="48"
android:paddingLeft="5dp"
android:paddingBottom="6dp" />
<TextView
android:id="#+id/q1Answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="27"
android:paddingBottom="6dp" />
<TextView
android:id="#+id/q1Verse"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="25"
android:paddingBottom="6dp" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/q2Image"
android:layout_width="10dp"
android:layout_height="10dp" />
<TextView
android:id="#+id/q2Question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="48"
android:paddingLeft="5dp"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
<TextView
android:id="#+id/q2Answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="27"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
<TextView
android:id="#+id/q2Verse"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="25"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/q3Image"
android:layout_width="10dp"
android:layout_height="10dp" />
<TextView
android:id="#+id/q3Question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="48"
android:paddingLeft="5dp"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
<TextView
android:id="#+id/q3Answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="27"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
<TextView
android:id="#+id/q3Verse"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="25"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
</LinearLayout>
//Rows 4-10 code excluded because of repetition.
Set android:layout_gravity to center_vertical on your text views.
Basically, since your layout_height is set to wrap content, your text views look like this:
-------
content
-------
The text view aligns with its parent like so:
-------
-------
content
-------
-------
Your goal is to get the view to center itself within the parent vertically. The attribute "layout_gravity" tells the view how to adjust itself within its parent. Therefore, setting layout_gravity to center_vertical will tell the view to be centered within its parent, like so:
-------
-------
content
-------
-------
Another way this can be accomplished is with the "gravity" attribute. The "gravity" attribute tells a parent how to layout its content (as opposed to "layout_gravity", which defines tells the view how to sit within its parent). So another possible solution would be to tell the list view to align all of its content centered vertically. This is done by specifying android:gravity="center_vertical" on the ViewGroup (in your case the LinearLayout).
I've got an example layout that I'm trying to create in android using xml. I am able to create similar layouts but I feel as if my approach might be wrong.
What I have been doing in these cases is nesting relative layouts to act as a "row". The below image demonstrates what I would do.
How would you guys create a layout similar to this? I feel as if nesting relative layouts is overkill but I'm not sure how I can keep everything centred if I don't.
When I didn't nest the layouts I used
android:layout_toRightOf="..."
android:layout_below="#+id/t1"
on t5, t6 and t7 (from the image). The result looked incorrect. t1, t2, t3 and t4 wasn't centred horizontally any more.
Is there a way to like tell the relative layout that everything after this point should appear on a new row? Or is relative layouts the wrong way to go for things like this? I don't think a table layout would work correctly since each row doesn't necessarily need to have the same amount of views and they need to be centred.
Any suggestions appreciated!
You could nest two horizontal LinearLayouts within a vertical LinearLayout. Maybe not so efficient as a RelativeLayout, but easier to get the centering behavior you want.
<?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="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="D" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="F" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="G" />
</LinearLayout>
</LinearLayout>
Here's another version of the same layout using RelativeLayout. I started with the nested LinearLayouts above, selected "Refactor > Android > Change Layout...", selected RelativeLayout, and then tweaked the resulting layout until I got things centered.
I used a couple of tricks to get it right. I started by centering the middle button on the parent, then built out to the left and right. On the top row, where there is an even number of buttons and space in the center, I used a centered, 0-width TextView to anchor the buttons. That's a bit hacky, I guess, but it gets the job done. :-)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/TextView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/hello" />
<TextView
android:id="#+id/Dummy"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerInParent="true"
android:layout_below="#+id/TextView1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/Dummy"
android:layout_toLeftOf="#+id/Dummy"
android:text="B" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignTop="#+id/Dummy"
android:layout_toLeftOf="#+id/button2"
android:text="A" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignTop="#+id/Dummy"
android:layout_toRightOf="#+id/Dummy"
android:text="C" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignTop="#+id/Dummy"
android:layout_toRightOf="#+id/button3"
android:text="D" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="#+id/Dummy"
android:text="F" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/button6"
android:layout_alignBaseline="#+id/button6"
android:layout_toLeftOf="#+id/button6"
android:text="E" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button6"
android:layout_alignTop="#+id/button6"
android:layout_toRightOf="#+id/button6"
android:text="G" />
</RelativeLayout>
You could also try it using the weight.
<?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"
android:weightSum="10" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="2.5"
android:gravity="center"
android:text="hello" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="B" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="C" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="D" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="E" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="F" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="G" />
</LinearLayout>
</LinearLayout>
Check this out:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/l1"
android:layout_width="fill_parent"
android:layout_height="50dp"></LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#android:color/white"
android:layout_below="#+id/l1"
android:id="#+id/v1"/>
<LinearLayout
android:id="#+id/l2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/v1"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<Button
android:id="#+id/pos"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
/>
<Button
android:id="#+id/neu"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
<Button
android:id="#+id/neg"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
<Button
android:id="#+id/neg"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#android:color/white"
android:layout_below="#+id/l2"
android:id="#+id/v2"
/>
<LinearLayout
android:id="#+id/l3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/v2"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<Button
android:id="#+id/pos"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
/>
<Button
android:id="#+id/neu"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
<Button
android:id="#+id/neg"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#android:color/white"
android:layout_below="#+id/l3"
android:id="#+id/v3"
/>
</RelativeLayout>
You could also try using linear layout instead. in the first linear layout set the weightsum to 4 and the layout weight to 1 to make it equal divided and set each views gravity to center.
Do the same thing in send Linear Layout.