I have a problems with my layout_margin. I want to make my layout look like that:
(with "a" is margin)
My problems is, when i build my layout in other screen size, it look like that:
How can i make it beautiful with different screen size? This is my layout:
<LinearLayout
android:id="#+id/footer_result_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/btn_recommendtion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/coodinate" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginTop="20dip"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/btn_facebook"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dip"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/fb" />
<ImageView
android:id="#+id/btn_mixi"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dip"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/mixi" />
</LinearLayout>
</LinearLayout>
Try using a relative layout.
Here is an example using buttons. You can swap out the values of the buttons with your image views, and adjust your margins as needed. This should center the buttons, with the same margins on any screen.
<Button
android:id="#+id/btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:text="BUTTON 1"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/btn_1"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_margin="5dip"
android:text="BUTTON 2" />
<Button
android:id="#+id/btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_margin="5dip"
android:text="BUTTON 3" />
</LinearLayout>
It looks like this:
You'll need to use RelativeLayout for that.
Center button1 with android:layout_alignParentTop="true" and align it in the parent top with android:layout_centerHorizontal="true and work from there.
The code:-
<?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">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_margin="10dip"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_margin="10dip"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_margin="10dip"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"/>
</RelativeLayout>
Considering the a=10
Related
I'm trying to put in my layout seven buttons in a small screen to test it (Galaxy young), So I used the scrollview but I still have problems (the screen doesn't scroll in LandScape mode ).
this is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:fillViewport="true">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/lieu_depart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lieu de prise en charge"
style="" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="false"
android:layout_below="#+id/linearLayout1"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/activity_vertical_margin" >
<Button
android:id="#+id/button2_date_depart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Date1" />
<Button
android:id="#+id/time_depart5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:text="Time1" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/linearLayout2"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="#dimen/activity_vertical_margin"
android:text="Lieu de restitution" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout3"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:orientation="horizontal" >
<Button
android:id="#+id/button5_date_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Date2" />
<Button
android:id="#+id/button6_time_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:text="Time2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout4"
android:orientation="horizontal" >
<Button
android:id="#+id/Button03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
EDIT:
Portrait mode:
Landscape mode:
what should I use to limit this problem?
Thank you
As I understand from your question it works in portrait but not landscape, so try this. As you rotate your device it should still scroll. I have placed this is in one Layout instead of multiple layouts.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/lieu_depart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lieu de prise en charge"
style="" />
<Button
android:id="#+id/button2_date_depart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Date1" />
<Button
android:id="#+id/time_depart5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:text="Time1" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="#dimen/activity_vertical_margin"
android:text="Lieu de restitution" />
<Button
android:id="#+id/button5_date_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Date2" />
<Button
android:id="#+id/button6_time_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:text="Time2" />
<Button
android:id="#+id/Button03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Button" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
EDIT...
You need to add the "android:layout_below="#+id/your button id" at every button so that the buttons will be displayed underneath each other..
<Button
android:id="#+id/lieu_depart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lieu de prise en charge"
style="" />
<Button
android:id="#+id/button2_date_depart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lieu_depart"
android:layout_marginLeft="50dp"
android:text="Date1" />
<Button
android:id="#+id/time_depart5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2_date_depart"
android:layout_marginLeft="70dp"
android:text="Time1" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/time_depart5"
android:minWidth="#dimen/activity_vertical_margin"
android:text="Lieu de restitution" />
<Button
android:id="#+id/button5_date_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button4"
android:layout_marginLeft="50dp"
android:text="Date2" />
<Button
android:id="#+id/button6_time_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:layout_below="#+id/button5_date_arrive"
android:text="Time2" />
<Button
android:id="#+id/Button03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/button6_time_arrive"
android:gravity="center"
android:text="Button" />
You can then play with the layout of your buttons by setting the gravity and margins. This should now fix your problem you are having.
You must use LienarLayout inside of ScrollView. RelativeLayout ignores orientation and used when you want put your items with absolute position. Your xml layout has many things to change . Can you send image of your layout to understand what exacly you want.
Here you have :
<?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">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Starting place" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time 1" />
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Arrival place" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Time2" />
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Submit" />
</LinearLayout>
</ScrollView>
In last linearlayout 2nd button i have include layout_marginLeft but with linearlayout gravity center it will center buttons and divide this space between two button, so you can manipulate with space between them.
By default layout will fill parent but in your second image you have something like right margin if you need it you can use android configuration qualifiers but better way to not duplicate layout xml is using values-land qualifier and add dimens folder where you can add padding value and add to your layout into first layout child of scrollview android:paddingRight="#dimen/your_property_name". More about dimen resources.
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>
I am have a ImageView and a ImageButton. I have them next to each other in a horizontal layout. I am trying to make it so that the image is left aligned on the screen, and the button is right aligned. I have tried setting gravity but it doesnt seem to make a difference. Where am I going wrong?
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:gravity="left"
android:src="#drawable/short_logo" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:background="#null"
android:src="#drawable/unregister_icon" />
</LinearLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
Use...
<?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"
android:weightSum="1.0" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginRight="80dp"
android:layout_weight="0.5"
android:gravity="left"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="right"
android:layout_marginLeft="80dp"
android:background="#null"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Use This example if you want to use LinearLayout without giving Weight
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="right"
/>
</LinearLayout>
<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_alignParentLeft="true"
android:src="#drawable/short_logo" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#null"
android:src="#drawable/unregister_icon" />
</RelativeLayout >
Make imageview and imagebutton wrap_content and set layout_gravity to left and right accordingly.
a RelativeLayout would solve your problem with a snap, but if you still insist on using LinearLayout (just because we're badass and do things the hard way), you do it like this:
Your parent LinearLayout is fill-parent, left-aligned, and horizontally oriented,
and contains your ImageView, and another LinearLayout.
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left"
Second LinearLayout is fill-parent, right-aligned, and horizontally oriented, and contains your ImageButton.
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right"
Another approach for LinearLayout, using layout_weight and gravity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="BUTTON 1"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="BUTTON 2" />
</LinearLayout>
in my app i use relative layout for design.in an activity i have four buttons at bottom of the screen. my xml code(Land scape) does not suit for all device screen. it has more space between buttons as show in the figure. how to design the layout which is suit for all resolution screen (Landscape).
layout image is :
my xml:
<RelativeLayout android:id="#+id/relativeLayout1"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#0000FF"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:layout_width="fill_parent"
android:layout_gravity="bottom" android:layout_alignParentBottom="true"
android:background="#drawable/applicarion_bar" android:layout_height="wrap_content"
android:id="#+id/relativeLayout4">
<ImageButton android:id="#+id/homeimageButton2"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/festival_btn" />
<ImageButton android:layout_height="wrap_content"
android:layout_toRightOf="#+id/homeimageButton2"
android:layout_marginLeft="60dp"
android:layout_width="wrap_content" android:background="#drawable/search_btn"
android:id="#+id/homeimageButton3"></ImageButton>
<TextView android:id="#+id/homecalendar4" android:text="MAR 20"
android:layout_toRightOf="#+id/homeimageButton3"
android:gravity="center"
android:textSize="10dp"
android:layout_marginLeft="60dp"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/calendar_btn" />
<ImageButton android:id="#+id/homeimageButton5"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/favorite_btn" />
</RelativeLayout>
Replace your relativeLayout4 as
<LinearLayout android:id="#+id/put_id_of_ll"
android:orientation="horizontal" android:background="#012C58"
android:paddingLeft="4.0dip" android:paddingTop="5.0dip"
android:paddingRight="4.0dip" android:paddingBottom="1.0dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageButton android:id="#+id/homeimageButton2"
android:layout_width="0.0dip"
android:text="ImageButton"
android:background="#drawable/festival_btn"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_marginBottom="3dip"
android:layout_marginLeft="2dip" />
<ImageButton android:id="#+id/homeimageButton3"
android:background="#drawable/search_btn"
android:layout_width="0.0dip"
android:text="btn2"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_marginBottom="3dip"
android:layout_marginLeft="2dip" />
<TextView android:id="#+id/homecalendar4" android:text="MAR 20"
android:layout_width="0.0dip"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_marginBottom="3dip"
android:layout_marginLeft="2dip" />
<ImageButton android:id="#+id/homeimageButton5"
android:layout_width="0.0dip"
android:text="btn4"
android:background="#drawable/favorite_btn"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_marginBottom="3dip"
android:layout_marginLeft="2dip" />
</LinearLayout>
It will work.
Happy coding :)
use linear layout instead of relative layout, use below code
<RelativeLayout android:id="#+id/relativeLayout1"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#0000FF"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:layout_width="fill_parent"
android:layout_gravity="bottom" android:orientation="horizontal"
android:background="#drawable/applicarion_bar" android:layout_height="wrap_content"
android:id="#+id/relativeLayout4">
<ImageButton android:id="#+id/homeimageButton2"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/festival_btn" />
<ImageButton android:layout_height="wrap_content"
android:layout_toRightOf="#+id/homeimageButton2"
android:layout_weight="1"
android:layout_marginLeft="60dp"
android:layout_width="wrap_content" android:background="#drawable/search_btn"
android:id="#+id/homeimageButton3"></ImageButton>
<TextView android:id="#+id/homecalendar4" android:text="MAR 20"
android:layout_toRightOf="#+id/homeimageButton3"
android:gravity="center"
android:textSize="10dp"
android:layout_marginLeft="60dp"
android:layout_weight="1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/calendar_btn" />
<ImageButton android:id="#+id/homeimageButton5"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/favorite_btn" />
</LinearLayout>
</RelativeLayout>
try to use a linear layout and give equal weight to all the views.
I am currently designing a ButtonBar with 5 buttons (they will all be ImageButtons, but for now, only 3 of them are). This is my first android project so I'm learning as I go along. I'm trying to weight each button equally, without scaling them (have equal padding rather than equal width). This is my code so far:
<LinearLayout
android:id="#+id/back"
android:orientation="horizontal"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:background="#000000"
style="#android:style/ButtonBar"
android:weightSum="5"
>
<ImageButton
android:id="#+id/info_button"
android:padding="20dp"
android:background="#drawable/info"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
<Button
android:id="#+id/wishlist_button"
android:text="#string/wish_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:padding="20dp"
android:textSize="15dip"
android:textColor="#b7b7b7"></Button>
<Button
android:id="#+id/buy_button"
android:text="#string/buy_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:padding="20dp"
android:textSize="15dip"
android:textColor="#b7b7b7"/>
<ImageButton
android:id="#+id/dislike_button"
android:padding="20dp"
android:background="#drawable/dislike_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/like_button"
android:padding="20dp"
android:background="#drawable/like_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
This is what it looks like now:
stretched weighted: http://i.imgur.com/MAfjp.png
This is what I want it to look like (closely):
non-stretched equally padded: http://i.imgur.com/vXTEy.png
Thank you for helping. I've been searching for the answer for a while and have tried so much already.
Here it is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/back"
android:orientation="horizontal"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:background="#000000"
style="#android:style/ButtonBar"
android:gravity="center"
>
<ImageButton
android:id="#+id/info_button"
android:background="#null"
android:src="#drawable/info"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
/>
<Button
android:id="#+id/wishlist_button"
android:text="#string/wish_label"
android:background="#null"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textSize="15dip"
android:textColor="#b7b7b7"></Button>
<Button
android:id="#+id/buy_button"
android:text="#string/buy_label"
android:background="#null"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textSize="15dip"
android:textColor="#b7b7b7"/>
<ImageButton
android:id="#+id/dislike_button"
android:background="#null"
android:src="#drawable/dislike_button"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/like_button"
android:background="#null"
android:src="#drawable/like_button"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
/>
</LinearLayout>
I don't know how style="#android:style/ButtonBar" is set, so if it doesn't show properly try remove it.
You could add a spacer element in between each of the images/buttons and assign the layout_weight to the spacer elements instead of the images/buttons. So it would look something like this:
<LinearLayout
android:id="#+id/back"
android:orientation="horizontal"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:background="#000000"
style="#android:style/ButtonBar"
>
<ImageButton
android:id="#+id/info_button"
android:padding="20dp"
android:background="#drawable/info"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_weight="1" />
/>
<Button
android:id="#+id/wishlist_button"
android:text="#string/wish_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="20dp"
android:textSize="15dip"
android:textColor="#b7b7b7"></Button>
<LinearLayout
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/buy_button"
android:text="#string/buy_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="20dp"
android:textSize="15dip"
android:textColor="#b7b7b7"/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/dislike_button"
android:padding="20dp"
android:background="#drawable/dislike_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/like_button"
android:padding="20dp"
android:background="#drawable/like_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
</LinearLayout>
This may not be the most elegant solution since it adds several views to your layout, but it's worked for me in the past.
You should consider using only image button with equal size images with equal weight inside your LinearLayout.
Regards,
Stéphane