Table Layout Alignment? - android

I have designed an XML layout as in this image:
I need to equally place the four buttons in the screen but I am having trouble getting it to work. I tried all possible changes that I can think of. Below is the layout's XML:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:id="#+id/buttonlayout"
android:layout_alignBottom="#id/framelayout">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow>
<Button
android:id="#+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/previous_icon" />
<Button
android:id="#+id/button_startprint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/print_icon"
android:padding="10dp" />
<Button
android:id="#+id/button_cam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/cam_icon"
android:padding="10dp" />
<Button
android:id="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/next_icon"
android:hapticFeedbackEnabled="true"/>
</TableRow>
</TableLayout>
</RelativeLayout>
Can anyone help me out with this?


Hi jxgn use this code :
<?xml version="1.0" encoding="UTF-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button_startprint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button_cam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
</TableRow>
</TableLayout>


use android:layout_weight=1, and Use android:layout_width="0dp" to make buttons of equal weights..
EDIT
for example define your button as
<Button
android:id="#+id/button_cam"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=1
android:background="#drawable/cam_icon"
android:padding="10dp" />


If you set the attribute android:weight="1" for all four buttons they should be spaced out properly as TableRow is a subclass of LinearLayout. For better performance it is suggested to use android:layout_width="0dp" as well.


Try to replace all your buttons width with layout_width="0dp" and add layout_weight="1"
Try to use 9-patch image to avoid the fact that your image get stretched
<TableRow>
<Button
android:id="#+id/previous"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_menu_compass"
android:layout_weight="1" />
<Button
android:id="#+id/button_startprint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_menu_mylocation"
android:padding="10dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button_cam"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_menu_mapmode"
android:padding="10dp"
android:layout_weight="1" />
<Button
android:id="#+id/next"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_menu_about"
android:hapticFeedbackEnabled="true"
android:layout_weight="1"/>
</TableRow>


Try to set at each button:
android:layout_weight="0.25"
Hope this will already work for you


Try this it is usefull
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/buttonlayout" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow>
<Button
android:id="#+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:layout_weight="1"/>
<Button
android:id="#+id/button_startprint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:layout_weight="1"
/>
<Button
android:id="#+id/button_cam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:layout_weight="1" />
<Button
android:id="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:layout_weight="1" />
</TableRow>
</TableLayout>
</RelativeLayout>


Applying android:layout_weight="1" in your xml will stretch your button images.
If you dont want to stretch button images use ImageButton and set android:src to your drawables.
Refer below code:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow>
<ImageButton
android:id="#+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/previous_icon"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:id="#+id/button_startprint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/print_icon"
android:background="#android:color/transparent"
android:padding="10dp"
android:layout_weight="1" />
<ImageButton
android:id="#+id/button_cam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/cam_icon"
android:background="#android:color/transparent"
android:padding="10dp"
android:layout_weight="1" />
<ImageButton
android:id="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/next_icon"
android:background="#android:color/transparent"
android:hapticFeedbackEnabled="true"
android:layout_weight="1" />
</TableRow>
</TableLayout>
`

Related

how to stop components in android GUI not to overlap

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 can I make this layout for android?

[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.

how to fill complete screen with differnt views in android

I have simple question but this is making my development terrible.
in different activities i have different set of views. for example textview, buttonview, editview. what i want is, all views should be fit dynamically on screen (no matter i have one view or 5 views) but its not happening. some time views go out side the screen and some times white space left on screen.
bellow is what i tried, i do not want to provide android:layout_height="75dp".
Please F1
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_height="75dp"
android:background="#drawable/btnmusic"
android:scaleType="fitCenter" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:onClick="onClick"
android:scaleType="fitXY"
android:src="#drawable/btnselectedsong" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:src="#drawable/btnplay"
android:onClick="onClick"
android:scaleType="fitXY" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:background="#drawable/btnpause"
android:onClick="onClick"
android:scaleType="centerInside" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:background="#drawable/btnstop"
android:onClick="onClick"
android:scaleType="fitCenter" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

set layout_weight=1 to all the wiews, which you want to share available space equally.
for your code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="odp"
android:layout_weight="1" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_height="75dp"
android:background="#drawable/btnmusic"
android:scaleType="fitCenter" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="odp"
android:layout_weight="1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="odp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:onClick="onClick"
android:scaleType="fitXY"
android:src="#drawable/btnselectedsong" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:src="#drawable/btnplay"
android:onClick="onClick"
android:scaleType="fitXY" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:background="#drawable/btnpause"
android:onClick="onClick"
android:scaleType="centerInside" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:background="#drawable/btnstop"
android:onClick="onClick"
android:scaleType="fitCenter" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="odp"
android:layout_weight="1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

Have a LinearLayout as Parent
Set its layout_height="fill_parent" and orientation="horizontal"
Add the the views you have, to this parent
Finally to every view set layout_weight="1"
By the last line you mean, no matter how many view you have, they all must be of equal height and by 1st line you mean, all together, the views must occupy the whole screen.

If you use a relative layout you can define features in respect to the edges of the screen and the horizontal and vertical centers allowing for a dynamic placment of the buttons.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_centerHorizontal="true"
android:background="#drawable/btnmusic"
android:scaleType="fitCenter" />
</RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/spinner1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
....
....
....
</RelativeLayout>
Something like that should give you a dynamic layout.

As you are using LinearLayout so you can use layout_weight that will take care of adjusting whole space.
If you want to give specific space apart from equal spacing you can define a android:weightSum="100"
and can distribute it to child layout according to your requirement
I simply tried with some demo and changed your layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:android:weightSum="100" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/btnmusic"
android:scaleType="fitCenter" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="40" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClick"
android:scaleType="fitXY"
android:src="#drawable/btnselectedsong" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/btnplay"
android:onClick="onClick"
android:scaleType="fitXY" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="30" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btnpause"
android:onClick="onClick"
android:scaleType="centerInside" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btnstop"
android:onClick="onClick"
android:scaleType="fitCenter" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
Hope this will help you.

Android: TableLayout Row Not Centering via XML

I'm trying to center a table row using XML in Android, but I'm having a problem where it's over to the right just a smidge too much for two of my rows that only contain two buttons. Here's my code, and I have a screen shot of how it looks
<TableLayout
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">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageView
android:id="#+id/hiragana_multiple_choice_main_image"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="match_parent"/>
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:padding="30dp">
<Button
android:id="#+id/hiragana_multiple_choice_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" />
<Button
android:id="#+id/hiragana_multiple_choice_button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="30dp"
android:gravity="center">
<Button
android:id="#+id/hiragana_multiple_choice_button_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" />
<Button
android:id="#+id/hiragana_multiple_choice_button_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" />
</TableRow>
</TableLayout>
http://www.ptrprograms.com/multiple_choice_offset.png
Thanks!

try to use LinearLayout instead of tablelayout, it will fix it to center and also use fillparent and wrap content for best practice.

Try these Way....
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="65dp"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginTop="59dp"
android:layout_toLeftOf="#+id/imageView1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/imageView1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="68dp"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button3"
android:layout_alignBottom="#+id/button3"
android:layout_alignLeft="#+id/button2"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>

How to make button share half the width of a dialog in android?

i want to make the buttons take up half the width of the dialog each, thanks x3.
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:paddingBottom="10dp"
android:paddingLeft="10dp" android:paddingRight="10dp">
<TextView android:layout_width="fill_parent"
android:layout_height="1dip" android:background="#FFFFFF" android:id="#+id/seperator_line" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/text1"
android:text="Amount:" android:textColor="#FFFFFF"
android:layout_below="#id/seperator_line" android:padding="10dp" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/deleteButton_dialog"
android:layout_below="#id/text1" android:text="Delete" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/cancelButton_dialog"
android:text="Cancel" android:layout_toRightOf="#id/deleteButton_dialog"
android:layout_below="#id/text1" />
</RelativeLayout>

You can place them in a LinearLayout and then set the width to "fill_parent" and the layout_weight to "1". Like this:
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#id/text1">
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/deleteButton_dialog"
android:text="Delete" />
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/cancelButton_dialog"
android:text="Cancel"/>
</LinearLayout>

Categories

Resources