Arranging layout using custom images as buttons - android

I have images created in my res/drawable directory with appropriate hdpi, mdpi, xhdpi, and xxhdpi sizings, and I would like to use them instead of regular buttons. I've done that part, but I need some help with the layout and formatting. I'll write my questions first, and then I'll post code and two screenshots below. Any advice is appreciated. Thanks!
Details on my device and the images:
Nexus 5 running Lollipop.
hdpi A, B, C, D are 96x96. E is 72x72
mdpi A, B, C, D are 64x64. E is 48x48.
xhdpi A, B, C, D are 128x128. E is 96x96.
xxhdpi A, B, C, D are 192x192. E is 144x144.
Questions:
1) Why has button E on the last row stretched horizontally? Button E is a square with rounded edges, just like all the others, but it is scaled down. Why did it stretch, and how can I fix it?
2) How can I arrange the drawables with space between them that will adjust dynamically based on screen size to keep the proportions the same? (See Picture 2 below)
fragment_main.xml: (See Picture 1 below to see how this looks)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/a_selector"/>
<Button
android:id="#+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/b_selector"/>
</TableRow>
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/c_selector"/>
<Button
android:id="#+id/buttonD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/d_selector"/>
</TableRow>
<TableRow
android:gravity="center|bottom"
android:layout_weight="0">
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/e_selector"/>
</TableRow>
</TableLayout>
</LinearLayout>
Picture 1, the current layout:
Picture 2, the desired layout (but with button E properly shaped):

For E to be shaped properly, try
<TableRow
android:gravity="center"
android:layout_weight="0">
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
</TableRow>
For spacing between images try using margin property.
Below is the complete code with spacing:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:gravity="bottom">
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonA"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
<Button
android:id="#+id/buttonB"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
</TableRow>
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonC"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
<Button
android:id="#+id/buttonD"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
</TableRow>
</TableLayout>
<TableLayout
android:id="#+id/fragmentMainTableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="center">
<TableRow
android:gravity="center"
android:layout_weight="0">
<Button
android:id="#+id/buttonE"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
</TableRow>
</TableLayout>
</LinearLayout>
Replace the image names

try this. hope it helps u...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<TableRow
android:layout_weight="1"
android:gravity="center|bottom"
android:weightSum="4" >
<Button
android:id="#+id/buttonA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<Button
android:id="#+id/buttonB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
</TableRow>
<TableRow
android:layout_weight="0"
android:gravity="center_horizontal"
android:weightSum="4" >
<Button
android:id="#+id/buttonC"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<Button
android:id="#+id/buttonD"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
</TableRow>
<TableRow
android:layout_weight="1"
android:gravity="center" >
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#drawable/ic_launcher" />
</TableRow>
</TableLayout>
</LinearLayout>
convert ur image like this.

Check with Below layout, i didnt changed much but when i tested it working as per your need.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/a_selector" />
<Button
android:id="#+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/b_selector" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:id="#+id/buttonC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/c_selector" />
<Button
android:id="#+id/buttonD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/d_selector" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/e_selector" />
</TableRow>
</TableLayout>
</LinearLayout>

Try this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/a_selector"/>
<Button
android:id="#+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/b_selector"/>
</TableRow>
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/c_selector"/>
<Button
android:id="#+id/buttonD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/d_selector"/>
</TableRow>
<TableRow
android:layout_marginTop="50dp"
android:gravity="center"
android:layout_weight="0">
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/e_selector"/>
</TableRow>
</TableLayout>
</LinearLayout>

Related

Layout android insert images and text field

How to achieve the following layout for a simple android application. I have images in drawable file with the size of 144 X 144 px.
To achieve the layout I tried using table layout but I am not particular about any layout but following is my code.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/table_view">
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal"
android:layout_span="3">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Heading"/>
</TableRow>
<TableRow>
<Button
android:id="#+id/compliment_button"
android:background="#drawable/imgOne"/>
<Button
android:id="#+id/feedback_button"
android:background="#drawable/imgTwo"/>
</TableRow>
<TableRow>
<Button
android:id="#+id/subscribe_button"
android:background="#drawable/imgThree"/>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal"
android:layout_span="3">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="New Layout"/>
</TableRow>
Using this code I got the following layout. I don't know what am I doing wrong. Also, image sizes are smaller than their normal sizes. I have ldpi, mdpi, xdpi and xhdp drawable folder, in all of them I have 144x144px images.
Thanks for your help in advance
Try this code. You have not mentioned any button in the third table row and forgot to apply the weight property. As in this code I am adding a button, weight property and some margin. You can give margin dp as per your requirements.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/table_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_span="3"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Heading" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/compliment_button"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/imgOne" />
<Button
android:id="#+id/feedback_button"
android:layout_weight="1"
android:background="#drawable/imgTwo" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/imgOne"
android:layout_marginTop="10dp" >
<Button
android:id="#+id/subscribe_button"
android:layout_weight="1"
android:layout_marginRight="20dp"
android:background="#drawable/imgThree" />
<Button
android:id="#+id/yourButton4"
android:layout_weight="1"
android:background="#drawable/imgThree" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_span="3"
android:gravity="center_horizontal" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="New Layout" />
</TableRow>
</TableLayout>

Placing elements in layout file

I want to design a screen as below, I am trying to display the TOTAL and other data next to it.I am not getting how to display it exactly in the screen.
the layout file is
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ListView android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#00000000"
android:dividerHeight="5dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="#000000"
android:text="Comment" />
<EditText
android:id="#+id/editText2"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:ems="10"
android:hint="Comment goes here"
android:inputType="textMultiLine" />
</LinearLayout>
I want to display GT, FSP, DIS % and Discount as shown in image
You can use a TableLayout to display your GT,FSP ,DIS % and Discount TextView, and place this TableLayout in a LinearLayout (with horizontal orientation) with your Total TextView, like :
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GT :"/>
<TextView
android:id="#+id/tv_gt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="54000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dis % :"/>
<TextView
android:id="#+id/tv_dis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="29.15"/>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FSP :"/>
<TextView
android:id="#+id/tv_fsp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1480000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Discount :"/>
<TextView
android:id="#+id/tv_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="999999"/>
</TableRow>
</TableLayout>
</LinearLayout>
You can add this code as a separate layout and include it in main layout file or use directly in main layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal">
<TextView
android:text="TOTAL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:gravity="center"
android:text="GT : 5400000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:gravity="center"
android:text="FSP : 1480000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:gravity="center"
android:text="DIS% : 29.15%"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:gravity="center"
android:text="Discount : 9999999"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Its looks like this:
You can update the inner TextViews to LinearLayout/RelativeLayout if you also need to show the pop-up cloud images.
To keep complexity at minimum just use the text like "GT : GT_VALUE" in strings.xml and then setText(getString(text_id).replace("GT_VALUE",value))

size of Button is too abnormal in xml file of android

I want to implement the following file in android .
My implementation so far is as follows :
Here the size of the button at the last of the screen is too large . I cant understand why the size of the button is too large ?
My code is as follows :
<?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"
android:background="#FFFFFF"
android:orientation="vertical"
android:padding="5dp"
android:weightSum="3" >
<RelativeLayout
android:id="#+id/relative_layout_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#BDD6E0"
android:orientation="vertical"
android:padding="5dp"
android:paddingBottom="10dp" >
<TextView
android:id="#+id/textView_Welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/imageView_ProPic"
android:text="Welcome Back"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000" />
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView_Welcome"
android:layout_toLeftOf="#+id/imageView_ProPic"
android:paddingLeft="10dp"
android:text="Sultan Ahmed Sagor"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000000" />
<ImageView
android:id="#+id/imageView_ProPic"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:contentDescription="ProPic"/>
</RelativeLayout>
<TableLayout
android:id="#+id/table_layout_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relative_layout_1"
android:weightSum="8" >
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/settings_user_name_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Instructional Use :"
android:gravity="center|left"
android:paddingLeft="10sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/settings_user_name_text3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Drug Name : Gopten"
android:paddingLeft="10sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="4" >
<TextView
android:id="#+id/text_instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/border_for_image"
android:maxLines="15"
android:paddingLeft="10sp"
android:text="#string/text_ins"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/border_for_edit_text"
android:layout_margin="10sp"
android:layout_weight="1" >
<Button
android:id="#+id/settings_user_name_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="BACK"
android:gravity="center|center"
android:paddingLeft="10sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</TableRow>
</TableLayout>
</RelativeLayout>
Can you help me by pointing out in where I have error / Why the size of the button at the last of the screen is too large ?
You have your button set to 'match_parent', which will make it grow to fit the size of it's parent (thus full width in this case).
Try (to make it just as big as the text):
<Button
android:id="#+id/settings_user_name_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
or (to make it a specific size):
<Button
android:id="#+id/settings_user_name_text"
android:layout_width="48dp"
android:layout_height="96dp"
try adding this to your xml for the buttton
android:layout_width="wrap_content"
android:layout_height="wrap_content"

Android fix the image size

In my screen I am having 3 buttons and in next row below those buttons I am having 3 names (name corresponding to those buttons) but my problem is that when ever name changes then size of buttons also changes but I do want to fix the size of buttons here is my code please help me
<TableLayout android:background="#drawable/toptab"
android:layout_width="fill_parent" android:id="#+id/tableLayout"
android:layout_height="wrap_content"
android:stretchColumns="1" android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<TableRow>
<ImageButton android:id="#+id/btnPrev" android:background="#drawable/imgPrev"
android:layout_marginLeft="5dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<ImageButton android:id="#+id/btnRefresh"
android:layout_gravity="center" android:background="#drawable/refreshbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageButton android:id="#+id/btnNext"
android:background="#drawable/imgNext"
android:layout_width="5dp"
android:layout_height="20dp"
android:layout_marginRight="5dp" />
</TableRow>
<TableRow >
<TextView android:id="#+id/prev" android:text="Hk" android:layout_marginLeft="5dp" />
<TextView android:id="#+id/refresh" android:text="Refresh" android:layout_gravity="center" />
<TextView android:id="#+id/next" android:text="RS" android:layout_marginRight="5dp" />
</TableRow>
</TableLayout>
If you want to avoid fixing button size, then I would recommend using different layout than TableLayout, maybe RelativeLayout and TextViews with property alignBaseline or LinearLayout with weight properties could do the trick.
You should use linearlayout instead of table layout and use Weight property for aligning buttons and text view in equal dimensions, so here if you write more text in text view , button size will not increase. Also you can add more buttons in same manner. Below is the XML file and screen shot.
<?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="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewTextTextViewTextTextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>

Buttonbar won't stick to bottom of screen

I'm trying to put the buttonbar I've created on the bottom of each screen. I've succeeded for the first screen fairly easy.
Now I've tried to put it other screens, but it seems that it can't stick to the bottom of the screen. When I look in the hiearchyviewer, it looks like the RelativeLayout that's wrapped araound my layout and buttonbar, isn't filling the whole screen, though, its height is set to fill parent.
Can anyone help me by pointing out where I'm going wrong?
This is the XML I use:
<?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">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<TableLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:padding="5pt" android:id="#+id/table"
android:stretchColumns="1">
<TableRow>
<TextView android:text="#string/Arbeiderbediende"
android:id="#+id/txtArbeiderBediende" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow android:gravity="center">
<RadioGroup android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:id="#+id/group1">
<RadioButton style="#style/RadioButton"
android:layout_width="wrap_content" android:id="#+id/rbArbeider"
android:text="#string/Arbeider" android:layout_height="wrap_content"
android:paddingLeft="18pt" />
<RadioButton style="#style/RadioButton"
android:layout_width="wrap_content" android:id="#+id/rbBediende"
android:text="#string/Bediende" android:layout_height="wrap_content"
android:layout_marginLeft="20pt" android:paddingLeft="18pt" />
</RadioGroup>
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/OverzichtFuncties"
android:id="#+id/txtFuncties" android:layout_width="0dip"
android:layout_weight="1" android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content" style="Spinner"
android:layout_width="0dip" android:layout_weight="2"
android:id="#+id/cmbFuncties" />
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/Regio" android:id="#+id/txtRegio"
android:layout_width="0dip" android:layout_weight="1"
android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content"
android:layout_width="0dip" android:layout_weight="2" android:id="#+id/cmbRegio" />
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/Opleiding" android:id="#+id/txtOpleidingsniveau"
android:layout_width="0dip" android:layout_weight="1"
android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content"
android:layout_width="0dip" android:layout_weight="2"
android:id="#+id/cmbOpleidingsniveau" />
</TableRow>
<Button android:text="#string/VindJobButton" android:id="#+id/btnFindJob"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="10dip" />
</TableLayout>
<stage.accent.Toolbar android:layout_width="fill_parent"
android:layout_height="70dip" android:layout_alignParentBottom="true"
android:layout_below="#+id/table" />
</RelativeLayout>
This is the result I achieved and the result I want to get
In case you want your buttonbar to be always visible at the bottom of the screen and not scroll with the content, you might want to switch your RelativeLayout and ScrollView tags, and move your buttonbar to be the first child of your RelativeLayout, the ScrollView to be the second:
<?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" android:orientation="vertical">
<stage.accent.Toolbar android:id="id/buttonBar" android:layout_width="fill_parent"
android:layout_height="70dip" android:layout_alignParentBottom="true" />
<ScrollView android:layout_above="#+id/buttonBar"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TableLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:padding="5pt" android:id="#+id/table"
android:stretchColumns="1">
<TableRow>
<TextView android:text="#string/Arbeiderbediende"
android:id="#+id/txtArbeiderBediende" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow android:gravity="center">
<RadioGroup android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:id="#+id/group1">
<RadioButton style="#style/RadioButton"
android:layout_width="wrap_content" android:id="#+id/rbArbeider"
android:text="#string/Arbeider" android:layout_height="wrap_content"
android:paddingLeft="18pt" />
<RadioButton style="#style/RadioButton"
android:layout_width="wrap_content" android:id="#+id/rbBediende"
android:text="#string/Bediende" android:layout_height="wrap_content"
android:layout_marginLeft="20pt" android:paddingLeft="18pt" />
</RadioGroup>
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/OverzichtFuncties"
android:id="#+id/txtFuncties" android:layout_width="0dip"
android:layout_weight="1" android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content" style="Spinner"
android:layout_width="0dip" android:layout_weight="2"
android:id="#+id/cmbFuncties" />
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/Regio" android:id="#+id/txtRegio"
android:layout_width="0dip" android:layout_weight="1"
android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content"
android:layout_width="0dip" android:layout_weight="2" android:id="#+id/cmbRegio" />
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/Opleiding" android:id="#+id/txtOpleidingsniveau"
android:layout_width="0dip" android:layout_weight="1"
android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content"
android:layout_width="0dip" android:layout_weight="2"
android:id="#+id/cmbOpleidingsniveau" />
</TableRow>
<Button android:text="#string/VindJobButton" android:id="#+id/btnFindJob"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="10dip" />
</TableLayout>
</ScrollView>
</RelativeLayout>
This way you'll be able to achieve what you want:
and
The button bar will be always at the bottom of your screen.
And by scrolling the content, you'll be able to see the last bit of it too, it won't be hidden behind the buttonbar:
I still suggests dont use ScrollView here is an example how you can show the ButtonBar at the bottom
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/headerlayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
>
<Button android:id="#+id/amap_back_btn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" android:text="Back">
</Button>
<TextView android:id="#+id/amap_txt"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="" android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
</TextView>
<ImageButton android:id="#+id/amap_action_btn"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/icon_menu_action"
android:layout_alignParentTop="true" android:layout_alignParentRight="true">
</ImageButton>
</RelativeLayout>
//What ever widgets you wants to add
<LinearLayout
android:id="#+id/bottomlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
>
<ImageButton android:id="#+id/map_refresh_btn"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/icon_refresh"
android:gravity="center"
>
</ImageButton>
<Button android:id="#+id/map_log_btn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Log"
android:gravity="center">
</Button>
<Button android:id="#+id/map_map_btn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Map"
android:gravity="center"
>
</Button>
</LinearLayout>
</RelativeLayout>
that is all this is the most robust solution.
If you find it useful dont forget to mark it as an answer.
Please take one main linear layout
above scroll view and after ending
scroll view please set your bottom
bar..
It would be also my suggetion.
LinearLayout is the main view.
Within it
Another LinearLayout (layout_height=0dp and layout_weight = 1) *ll_container*
and you tabbar
Within *ll_container* place
a scrollview (layout_height=0dp and layout_weight = 1) with tablelayout
and the button
Probably for explanation. With layout_height=0dp and layout_weight = 1 you give your layouts the whole free place remaining after placing your tabbar and then after placing your button
UPD
<?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">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<ScrollView android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TableLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:padding="5pt" android:id="#+id/table"
android:stretchColumns="1">
<TableRow>
<TextView android:text="#string/Arbeiderbediende"
android:id="#+id/txtArbeiderBediende" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow android:gravity="center">
<RadioGroup android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:id="#+id/group1">
<RadioButton style="#style/RadioButton"
android:layout_width="wrap_content" android:id="#+id/rbArbeider"
android:text="#string/Arbeider" android:layout_height="wrap_content"
android:paddingLeft="18pt" />
<RadioButton style="#style/RadioButton"
android:layout_width="wrap_content" android:id="#+id/rbBediende"
android:text="#string/Bediende" android:layout_height="wrap_content"
android:layout_marginLeft="20pt" android:paddingLeft="18pt" />
</RadioGroup>
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/OverzichtFuncties"
android:id="#+id/txtFuncties" android:layout_width="0dip"
android:layout_weight="1" android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content" style="Spinner"
android:layout_width="0dip" android:layout_weight="2"
android:id="#+id/cmbFuncties" />
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/Regio" android:id="#+id/txtRegio"
android:layout_width="0dip" android:layout_weight="1"
android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content"
android:layout_width="0dip" android:layout_weight="2" android:id="#+id/cmbRegio" />
</TableRow>
<TableRow android:gravity="center" android:paddingTop="5dip">
<TextView android:text="#string/Opleiding" android:id="#+id/txtOpleidingsniveau"
android:layout_width="0dip" android:layout_weight="1"
android:layout_height="wrap_content" />
<Spinner android:layout_height="wrap_content"
android:layout_width="0dip" android:layout_weight="2"
android:id="#+id/cmbOpleidingsniveau" />
</TableRow>
</TableLayout>
</ScrollView>
<Button android:text="#string/VindJobButton" android:id="#+id/btnFindJob"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="10dip" />
</LinearLayout>
<stage.accent.Toolbar android:layout_width="fill_parent"
android:layout_height="70dip" android:layout_alignParentBottom="true"
android:layout_below="#+id/table" />
</LinearLayout>

Categories

Resources