I am making a grid of buttons 4 wide, 9 tall, all of the buttons are invisible and no text on them, I then programatically add text to them and make them visible (basically I am using the invisible buttons because any of the 36 buttons can become visible due to the code for making them visible (it's based on an XML document I am parsing) I am using LinearLayout to do this, so I have a Vertical LinearLayout, wrapped in 9 Horizontal LinearLayouts with 4 buttons in each, all of them have wrap_content height and width and weight 1 (not sure if this could be causing the problem as I am not entirely sure how these parameters work yet).
My problem is that once I get to the adding text, the text can be different lengths, and so my buttons end up odd shapes with some being wider or something taller than others, is there any way to do this in a way that means that they will all end up similar sizes? or will my invisible buttons mess things up? Or is there a better way to do what I am doing?
I worry about using fixed size buttons as I figure if the text is too long it will cause issues that way instead.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:id="#+id/soulOneLL"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="soulOne"
android:text="#string/SoulOne"
android:id="#+id/btnSoul1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:visibility="invisible"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOnRow8Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow8Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow8Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow8Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow7Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow7Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow7Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow7Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow6Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow6Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow6Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow6Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow5Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow5Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow5Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow5Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow4Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow4Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow4Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow4Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow3Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow3Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow3Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow3Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow2Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow2Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow2Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow2Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow1Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow1Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow1Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow1Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow0Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow0Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow0Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow0Column3" />
</LinearLayout>
</LinearLayout>
</ScrollView>
On each button, you can give an android:maxLength attribute and android:maxLines attribute. These will constrain the text to a certain size and length, guaranteeing they will all be the same size.
Decided based on the answers provided that nothing could be done that would work the way I wanted, so I changed it so that instead of showing the text on the buttons, I made a dialog pop up with some information instead which works for what I wanted anyway.
Related
I am trying to make the image button fix completely on the screen and the spinner. It seems to have a problem with the weight sum and weight layout. I have tried to fix it, but haven't gotten anywhere. This is my code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".ElderActivity"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/first"
android:background="#ffab7c74"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Smart House"
android:id="#+id/textView"
android:gravity="center"
android:autoText="true"
android:textColor="#fffff7f4" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/environment"
android:layout_weight="1"
android:id="#+id/imageButton" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/law"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner"
android:layout_weight="1" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner1"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/consumer"
android:layout_weight="1"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/educations"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_weight="1" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner3"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
[screem shot of screen][1]: https://i.stack.imgur.com/tPFDi.jpg
It is very bad practice to use the weight option, especially if you have weight options in deep hierarchy of layout. For your example you need to use RelativeLayout or even TableLayout.
But if you want a mess up for your bottom part you can use tricky thing like:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<View android:id="#+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text1"
android:layout_alignEnd="#id/strut"
android:layout_alignParentStart="true"
/>
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/strut"
android:layout_alignParentEnd="true"
android:text="#string/text2"
/>
</RelativeLayout>
How do I get buttons to lay on the screen most optimally distributed and centered on the screen as follows:
The nearest I am able to get is this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal"
>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button3" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button4" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button5"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button8"
android:layout_weight="1"/>
</LinearLayout>
Use a relativeLayout for the 3 linearLayouts.
To place the 3 linears below eachother use:
android:layout_below="#+id/linearLayout1"
and
android:layout_below="#+id/linearLayout2"
To center the linears use:
android:layout_centerInParent="true"
android:layout_gravity="center_vertical"
That will give you something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_below="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center_vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button7" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_below="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center_vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button4" />
</LinearLayout>
Unfortunately it is not showing the last line which is </RelativeLayout>
[SOLVED]I have a very specific layout that I want to make. It feels like it should be very easy to create but I can't seem to wrap my fingers around it. So I want to create a layout that looks like the image below. How the hell do I get this? I just get the text and the 2 images and then get the buttons to be visible. Posted my layout below as well.
Thanks in advance // eXpliCo.
http://imgur.com/Qu5CRDC
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="20"
android:orientation="vertical" >
<TextView
android:id="#+id/question_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/question_text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:id="#+id/image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/picture_placeholder" />
<ImageView
android:id="#+id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/picture_placeholder" />
</LinearLayout>
<LinearLayout
android:id="#+id/navigation_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/vote_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center" >
<Button
android:id="#+id/vote_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button" />
<Button
android:id="#+id/vote_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button" />
</LinearLayout>
</LinearLayout>
EDIT: I got a solution now. I don't know if it's the best but it works for me. But I can't answer my own code yet so I'll just post my solution here.
<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:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Test123 312 123 312"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="100" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="test" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="test" />
</LinearLayout>
</LinearLayout>
In your second LinearLayout, set the orientation to horizontal.
Here you go
<?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" >
<TextView
android:text="Some Text here"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/SomeText"
android:gravity="center"
android:textSize="20sp" />
<LinearLayout
android:id="#+id/image_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/SomeText"
android:orientation="horizontal" >
<ImageView
android:id="#+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight="1" />
<ImageView
android:id="#+id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:id="#+id/button_layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/image_layout"
android:orientation="horizontal" >
<Button
android:id="#+id/vote_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_weight="1"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp" />
<Button
android:id="#+id/vote_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_weight="1"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/button_layout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/button_layout1"
android:orientation="horizontal" >
<Button
android:id="#+id/vote_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_weight="1"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp" />
<Button
android:id="#+id/vote_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4"
android:layout_weight="1"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp" />
</LinearLayout>
</RelativeLayout>
It sounds like this works with smaller images but not larger images. If this is the case then use layout_weight in each child LinearLayout so that each takes up a certain amount of space. This will help the layout to look similar on different screen sizes and resolutions.
So, for instance...
<TextView
android:text="Some Text here"
android:layout_weight="1"
...
LinearLayout
android:id="#+id/image_layout"
android:layout_weight="3"
...
<LinearLayout
android:id="#+id/button_layout1"
android:layout_weight="2"
...
<LinearLayout
android:id="#+id/button_layout2"
android:layout_weight="2"
...
You may have to adjust the weights to what you want/need but something like that should help. You will also want to set your height for each of those to 0dp since the parent LinearLayout is vertical.
Below is the layout I designed.
Here is my code:
<LinearLayout
android:id="#+id/digitRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_3" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_6" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_9" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_clear" />
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_0" />
<Button
android:id="#+id/buttonBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_back" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_disable" />
</LinearLayout>
The problem is that I want to stretch the bottom two buttons, "Change" and "Back", to match the width of the buttons above.
You can use weight on both of them, like this:
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_disable" />
You probably want something like the code below.
I used a hard coded button width, but you probably want to put this in dimen.xml and reference it. I centered everything with gravity.
I tried this with weights as well, but the re-sizing is funny. As your screen gets wider the buttons get two wide.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/digitRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="3" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/button5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/button6"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="6" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/button8"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/button9"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="9" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonClear"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Clear" />
<Button
android:id="#+id/button0"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/buttonBack"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Back" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp"
android:gravity="center_horizontal"
>
<Button
android:id="#+id/buttonChange"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Change" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Disable" />
</LinearLayout>
Try to use weight like below. Also use margins to tweak the positions of the buttons.
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_disable" />
I have been trying to find the best way to do this for a while. What I want is something like this:
With the code:
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Button" />
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/progressBar1"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="49dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/progressBar1"
android:layout_centerHorizontal="true"
android:layout_marginBottom="52dp"
android:text="TextView" />
I've got this layout:
The problem here is the margins are fixed amount of dpi. I'd like to get some sort of fluidity to this.
The way I would like this:
Space above progress bar is separated in 3 equal parts, above the
first text, between the 1st and the 2nd texts and between the second
text and progress bar
Indeterminate progress bar - centered in the middle both vertically and horizontally.
Space below progress bar is separated in 2 equal parts - between the progress bar and the button and between the button and the bottom
linear-layout.
Is there a way to do this relatively? I'd prefer doing it in a layout
file, but I could also go for programming and spacing programmaticaly.
Here is a rough layout with RelativeLayout:
<RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_above="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_above="#+id/progressBar1" />
<ProgressBar
android:id="#+id/progressBar1" />
<Button
android:id="#+id/button1"
android:layout_below="#+id/progressBar1" />
<TableRow
android:layout_below="#+id/button1"
android:weightSum="1.0">
<Button
android:layout_weight="0.5" />
<Button
android:layout_weight="0.5" />
</TableRow>
</RelativeLayout>
NOTE: With reference to ProgressBar in center you can arrange the upper and bottom layout.
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<LinearLayout
android:id="#+id/pb"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center" >
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/b1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/b2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center" >
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
You could try this:
<?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/btn_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Button" />
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<RelativeLayout
android:id="#+id/btn_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/btn_bar"
android:layout_below="#id/progressBar1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/progressBar1"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="vertical" >
<View
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<View
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="TextView" />
<View
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>