Android: How to center two full width buttons in the center? - android

<Button
android:id="#+id/btnSetDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_weight="1.0"
android:text="Set Date" />
<Button
android:id="#+id/btnSetTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_weight="1.0"
android:text="Set Time" />
How to center two buttons like the image?

Its Simple! here we go...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<Button
android:id="#+id/btnSetDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Set Date" />
<Button
android:id="#+id/btnSetTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Set Time" />
</LinearLayout>
</RelativeLayout>

Just wrap your buttons into a content such as LinearLyaout, use android:gravity="center_vertical" and it will work.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="btn1" >
</Button>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="btn2" >
</Button>
</LinearLayout>

Related

button not displaying right side of the layout in android

Hi in this Layout i have two button's named as back and home same names i mentioned as id's for both.Now left side i want to display back button and right side corner i want to display home.But home button not displaying at the right corner.Now if i mention margin left it's not showing properly.Can any one please help me
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#FF0000"
android:orientation="horizontal">
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back"
/>
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"
/>
<Button
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/home"
android:layout_marginLeft="60dp"
/>
</LinearLayout>
</LinearLayout>
Try this,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#FF0000"
android:orientation="horizontal"
android:weightSum="100" >
<Button
android:id="#+id/back"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="20"
android:background="#drawable/back" />
<TextView
android:id="#+id/tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="60"
android:gravity="center"
android:text="Hello"
android:textStyle="bold" />
<Button
android:id="#+id/home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="60dp"
android:layout_weight="20"
android:background="#drawable/home" />
</LinearLayout>
</LinearLayout>
Try below code xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#FF0000"
android:orientation="horizontal">
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/back"
/>
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:textStyle="bold"
/>
<Button
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/home"
android:layout_alignParentRight="true"
android:layout_marginLeft="60dp"
/>
</RelativeLayout>
</LinearLayout>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#FF0000"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/home"/>
</LinearLayout>
why don't you use relative layout for that, see that
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#FF0000"
android:orientation="horizontal" >
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/account_settings" />
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold" />
<Button
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/account_settings"
android:gravity="center_horizontal" />
</RelativeLayout>
</LinearLayout>
if you want to do this with linear layout use weight sum
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#FF0000"
android:weightSum="3"
android:orientation="horizontal" >
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/account_settings" />
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:textStyle="bold" />
<Button
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_weight="1"
android:background="#drawable/account_settings" />
</LinearLayout>
</LinearLayout>

Place button below editfield in relative layout

Hi all I have to add 2 Buttons below editfield. I had tried it using relativelayout. But it is not added exactly below mention position.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E8E8E8" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="User Name"
android:textStyle="bold" />
<EditText
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="Description"
android:textStyle="bold" />
<EditText
android:id="#+id/des"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/des"
android:padding="10dip">
<Button
android:id="#+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Submit" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/submit"
android:text="Cancel" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
Here I want to add these two buttons exactly below "des" editfield. Thanks in advance
Currently it displays like . But I want these two buttons exactly below last editfield with equal size.
You have just add on your relative layout:
layout_gravity on right and width make on wrap_content. like this
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#id/des" android:layout_gravity="right"
android:padding="10dip">
<Button
android:id="#+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Submit" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/submit"
android:text="Cancel" />
</RelativeLayout>
Output looks like:
Ist think you are doing wrong is that : ScrollView never contains Relative Layout as a direct child. it use LinearLayout as a direct child .
use this code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="User Name"
android:textStyle="bold" />
<EditText
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="Description"
android:textStyle="bold" />
<EditText
android:id="#+id/des"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/des"
android:orientation="horizontal"
android:padding="10dip" >
<Button
android:id="#+id/submit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Submit" />
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Try this
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E8E8E8" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="User Name"
android:textStyle="bold" />
<EditText
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="Description"
android:textStyle="bold" />
<EditText
android:id="#+id/des"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/des"
android:padding="10dip">
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Cancel" />
<Button
android:id="#+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/cancel"
android:text="Submit" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
Try this:
One more thing when you want to do stuff like this, try to see in graphical layout and move elements in that to position you want. Most of time it will work as expected and you can get idea of place too.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E8E8E8" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="User Name"
android:textStyle="bold" />
<EditText
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="Description"
android:textStyle="bold" />
<EditText
android:id="#+id/des"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/des"
android:padding="10dip" >
<Button
android:id="#+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Submit" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/submit"
android:layout_alignBottom="#+id/submit"
android:layout_alignParentRight="true"
android:text="Cancel" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
In your case its not possible because you are trying to place a button relative to EditText which is placed inside a LinearLayout, you can place the button relative to linearlayout but not its ChildViews.
Try to bring all the Views inside a single relative layout and place all the Views relative to each other.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E8E8E8" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="User Name"
android:textStyle="bold" />
<EditText
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:text="Description"
android:textStyle="bold" />
<EditText
android:id="#+id/des"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/des"
android:padding="10dip" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal" >
<Button
android:id="#+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="12dp"
android:text="Submit" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
Hope this will solve your problem
android:layout_below="#id/des" That des is present in LinearLayout, IF you want to give that way, Same RelativeLyout should be given within the layout that des is present and Their parent should be relative layout, to use parementers such as below or above(i.e., with relative to other widget)

Buttons under listview in android application

I need to have buttons appear below a listview. Any help will be greatly appreciated. I've tried different ways to get this specific layout to appear correctly on android, but so far I haven't been able to figure this out. I want to be able to display a listview in the middle of the app and have buttons under the listview. The problem is that I have other things that need to be displayed on the screen on top of the listview such as tabs and spinners. All of the items in the listview will have both an image and some text to the right of the image. The image that I'd like to achieve is like this image...
android layout image
Here's my code so far...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="100"
android:orientation="vertical"
android:scrollbars="vertical" >
<Button
android:id="#+id/readWebpage"
android:layout_width="match_parent"
android:layout_height="40dp"
android:onClick="onClick"
android:text="Load Webpage" >
</Button>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:maxLines="100"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:orientation="horizontal">
<Spinner
android:id="#+id/genre"
android:entries="#array/genre_list"
android:layout_weight="0.40"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp" />
<Spinner
android:id="#+id/sort"
android:entries="#array/sort_list"
android:layout_weight="0.40"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp" />
<Spinner
android:id="#+id/page"
android:entries="#array/page_list"
android:layout_weight="0.20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView" />
<Button
android:id="#+id/previousPage"
android:layout_weight="0.50"
android:layout_width="0dp"
android:layout_height="40dp"
android:onClick="onClick"
android:layout_alignParentBottom="true"
android:text="Previous Page" >
</Button>
<Button
android:id="#+id/nextPage"
android:layout_weight="0.50"
android:layout_width="0dp"
android:layout_height="40dp"
android:onClick="onClick"
android:layout_alignParentBottom="true"
android:text="Next Page" >
</Button>
</LinearLayout>
</LinearLayout>
Use RelativeLayout to control the position of ListView.
<?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" >
<Button
android:id="#+id/readWebpage"
android:layout_width="match_parent"
android:layout_height="40dp"
android:onClick="onClick"
android:text="Load Webpage" >
</Button>
<LinearLayout
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/readWebpage"
android:layout_marginTop="1dp"
android:orientation="horizontal" >
<Spinner
android:id="#+id/genre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.40"
android:entries="#array/genre_list" />
<Spinner
android:id="#+id/sort"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.40"
android:entries="#array/sort_list" />
<Spinner
android:id="#+id/page"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.20"
android:entries="#array/page_list" />
</LinearLayout>
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button"
android:layout_below="#+id/spinner" />
<LinearLayout
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/previousPage"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="0.50"
android:onClick="onClick"
android:text="Previous Page" >
</Button>
<Button
android:id="#+id/nextPage"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="0.50"
android:onClick="onClick"
android:text="Next Page" >
</Button>
</LinearLayout>
</RelativeLayout>
Set the layout_weight of the buttons to 0 and then set the layout_weight of the listview to 1. The layout_weight is use to allocate extra space, so the buttons will keep their 40dip height and the listview will expand to take up the remaining space
Use the following code;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="100"
android:orientation="vertical"
android:scrollbars="vertical" >
<Button
android:id="#+id/readWebpage"
android:layout_width="match_parent"
android:layout_height="40dp"
android:onClick="onClick"
android:text="Load Webpage" >
</Button>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:gravity="center"
android:maxLines="100"
android:orientation="horizontal" >
<Spinner
android:id="#+id/genre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp"
android:layout_weight="0.40"
android:entries="#array/genre_list" />
<Spinner
android:id="#+id/sort"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp"
android:layout_weight="0.40"
android:entries="#array/sort_list" />
<Spinner
android:id="#+id/page"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp"
android:layout_weight="0.20"
android:entries="#array/page_list" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listView"
android:layout_weight="3"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/previousPage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:onClick="onClick"
android:text="Previous Page" >
</Button>
<Button
android:id="#+id/nextPage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:onClick="onClick"
android:text="Next Page" >
</Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>

layout within layout android

I want to have several layouts inside a layout so that I can better organize the UI. What I want is the layout to be horizontal. I need the layout to be split in half horizontally down the middle and the 4 buttons and text box to be on one side and copied on the other side as well so it can keep track of two totals. I only have one set of buttons right now because I cant get the layouts right.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250.0dip"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#id/button_add"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
android:text="+1" />
<Button
android:id="#id/button_add_5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
android:text="+5" />
</LinearLayout>
<EditText
android:id="#id/currentlife"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:inputType="number"
android:minWidth="120.0dip"
android:text="20"
android:textSize="40.0dip" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#id/button_minus"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
android:text="-1" />
<Button
android:id="#id/button_minus_5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
android:text="-5" />
</LinearLayout>
</LinearLayout>
How about this (fix id's so they aren't duplicate):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1.0"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center"
>
<EditText
android:id="#+id/currentlife"
android:layout_width="wrap_content"
android:gravity="center"
android:minWidth="120dp"
android:layout_height="wrap_content"
android:inputType="number"
android:text="20"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:gravity="center"
>
<Button
android:id="#+id/button_add"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="+1" />
<Button
android:id="#+id/button_add_5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="+5" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="horizontal"
android:gravity="center"
>
<Button
android:id="#+id/button_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-1" />
<Button
android:id="+#id/button_minus_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-5" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/black"/>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1.0"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center"
>
<EditText
android:id="#+id/currentlife"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:inputType="number"
android:minWidth="120dp"
android:text="20"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_gravity="right"
>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:gravity="center"
>
<Button
android:id="#+id/button_add"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="+1" />
<Button
android:id="#+id/button_add_5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="+5" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="horizontal"
android:gravity="center"
>
<Button
android:id="#+id/button_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-1" />
<Button
android:id="+#id/button_minus_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-5" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Give weight for two horizontal layouts.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1.0">
// try this and let me know is it ok for ur requirement ?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:gravity="center" >
<Button
android:id="#+id/button_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+1" />
<Button
android:id="#+id/button_add_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+5" />
<EditText
android:id="#+id/currentlife"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:inputType="number"
android:gravity="center"
android:text="20"
android:textSize="40dp" />
<Button
android:id="#+id/button_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-1" />
<Button
android:id="#+id/button_minus_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-5" />
</LinearLayout>
You can create left and right layouts as separate layouts and inflate it in the main layout. This will simplify the layout design.
And try to start the design with android:layout_width="fill_parent" instead of android:layout_width="250.0dip"
Once you get the layout you want, then try to adjust the width as you need.

Need help designing an android UI

I am trying to design a screen like this one in Android:
I have all buttons, background and images in separate PNG files, but I can't get it done!
I don't know how to put the two buttons inside the background and I am having troubles with the distances from the borders as well.
Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fundo_tela">
<ImageView
android:id="#+id/imgtopo"
android:src="#drawable/topo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/telaInicio"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#fff"
android:textSize="20dp" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/fundoBotoes" >
<Button android:id="#+id/Camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/cameraBselector">
</Button>
<Button
android:id="#+id/Galeria"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/galleryBselector">
</Button>
</LinearLayout>
<Button
android:id="#+id/Pedidos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/pedidosBselector"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
>
</Button>
</LinearLayout>
When you say "the two buttons" I assume it is the Gallery and Camera buttons you are talking about.
If I understand correctly you can do something like this (I have not testet it properly, so you might want to make some additional changes)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical"
android:background="#000000"
android:gravity="center"
>
<Button
android:id="#+id/Camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:background="#color/cameraBselector"
>
</Button>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_margin="3sp"
android:background="#41383C"
/>
<Button
android:id="#+id/Galeria"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3sp"
android:background="#color/galleryBselector"
/>
</LinearLayout>
If I misunderstood something please let me know.
Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/fundo_tela"
android:layout_weight="100"
android:orientation="vertical" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="20"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgtopo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/topo" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/telaInicio"
android:textColor="#fff"
android:textSize="20dp" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="60"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="#drawable/fundoBotoes"
android:orientation="vertical" >
<Button
android:id="#+id/Camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/cameraBselector" >
</Button>
<Button
android:id="#+id/Galeria"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/galleryBselector" >
</Button>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="20"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:orientation="vertical" >
<Button
android:id="#+id/Pedidos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginTop="15dp"
android:background="#color/pedidosBselector" >
</Button>
</LinearLayout>
</LinearLayout>
Only group the first imageview and text in a Linearlayout and the last button in other LinearLayout. With the weight attribute work like a percent, this example is 20% top, 60% body and 20% footer.
Did to look exactly what you wanted.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgtopo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/darker_gray"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingTop="10dp"
android:text="Selecione a opção desejada:"
android:textColor="#fff"
android:textSize="18dp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="0.90"
android:background="#android:color/black"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/ButtonCamera"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:layout_margin="10dp"
android:drawablePadding="-5sp"
android:drawableTop="#android:drawable/ic_menu_camera"
android:text="Tirar Foto"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/ButtonSlideShow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:layout_margin="10dp"
android:drawablePadding="-5sp"
android:drawableTop="#android:drawable/ic_menu_slideshow"
android:text="Galeria de Foto"
android:textColor="#FFFFFF" />
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Meus Pedidos" />
</LinearLayout>

Categories

Resources