[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.
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>
My goal to achieve the following:
center buttons, as if they are in two 50% width columns. I do this with this xml:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="412-77"/>
</LinearLayout>
<LinearLayout android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="22222"/>
</LinearLayout>
</LinearLayout>
However I think it's too much nesting. My min sdk 2.2, so i can't use grid layout.
How to reduce nesting in xml?
Try This Code...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Button"
android:visibility="invisible" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button3"
android:layout_alignBottom="#+id/button3"
android:layout_toRightOf="#+id/button3"
android:text="22222" />
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button3"
android:layout_alignBottom="#+id/button3"
android:layout_toLeftOf="#+id/button3"
android:text="412-77" />
</RelativeLayout>
Another Way
This Might Be you Looking for
Check this out:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:alignparentLeft="true"
android:text="412-77" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:paddingLeft="40dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/button1"
android:paddingRight="20dp"
android:alignParentRight="true"
android:text="22222" />
</RelativeLayout>
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.
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>
`
I want to add a custom Dialog, but I have problems creating a xml like I want..
Here what I imagine:
[IMAGE][TEXT]
[SCROLLABLETEXT]
[BUTTON][BUTTON][BUTTON]
And my current xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imgMentor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/changelogicon" />
<TextView
android:id="#+id/tvSubject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="--"
android:textColor="#FFF"
android:textSize="20px" />
</LinearLayout>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:padding="10dp" >
<TextView
android:id="#+id/tvExplanation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dip"
android:text="--"
android:textColor="#FFF" />
</ScrollView>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:baselineAligned="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
Image, text and scrollable text looking great, but if the text in the middle gets too long and become scrollable, my buttons are gone..
What did I do wrong?
EDIT:
my Solution:
<?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="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/changelogicon" />
<TextView
android:id="#+id/tvSubject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgIcon"
android:layout_marginBottom="15dp"
android:layout_toRightOf="#+id/imgIcon"
android:text="--"
android:textColor="#FFF"
android:textSize="20px" />
<ScrollView
android:id="#+id/layout_root"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button1"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imgIcon"
android:layout_marginTop="20dp" >
<TextView
android:id="#+id/tvExplanation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dip"
android:text="--"
android:textColor="#FFF" />
</ScrollView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
Use a RelativeLayout rather than a LinearLayout as the top-level element in your view hierarchy. LinearLayouts don't do very well at handling this sort of "fill the middle" scenario.
With a RelativeLayout you can align your buttons with the bottom, your text/image with the top and then align your ScrollView to be below the text/image and above the buttons, stretching it accordingly.
Take a look at the "Hello RelativeLayout" tutorial for more info.
Quick SO tip: If you increase your accept rate, more people are likely to answer your question.