I want to create my Toolbar layout like below image.
I written below code for create this view. Please see my xml Code.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#color/black"
android:padding="#dimen/_5sdp">
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_menu" />
<TextView
android:id="#+id/toolbar_default_textview_title"
style="#style/textview_normal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/toolbar_default_img_menu"
android:layout_toStartOf="#+id/toolbar_default_img_search"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="#dimen/_15ssp" />
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/toolbar_default_img_filter_tag"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/toolbar_default_img_filter"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
</RelativeLayout>
After written this code i can see my view is correct in android studio preview but when i run my project it look like below image.
only left and right imageview on correct position but my textview and other two imageview is not set on correct position after run this code.
May be problem with android:layout_toEndOf and android:layout_toStartOf property of RelativeLayout.
I don't know why this problem create.Thank you for help.
Replace this code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#color/black"
android:padding="#dimen/_5sdp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp"
android:src="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/toolbar_default_textview_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxEms="50"
android:text="#string/app_name" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
</LinearLayout>
</RelativeLayout>
Do changes as per your requirement by padding and margin to make a proper design.
Try using layout_alignParentRight , layout_toLeftOf , layout_toRightOf ,layout_alignParentLeft instead of layout_alignParentEnd , layout_toStartOf , layout_toEndOf and layout_alignParentStart or use Both in the Layout
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/black"
android:padding="5dp">
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:padding="5dp"
android:src="#drawable/add_btn" />
<TextView
android:id="#+id/toolbar_default_textview_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/toolbar_default_img_menu"
android:layout_toLeftOf="#+id/toolbar_default_img_search"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="15sp" />
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/toolbar_default_img_filter_tag"
android:padding="5dp"
android:src="#drawable/add_btn" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/toolbar_default_img_filter"
android:padding="5dp"
android:src="#drawable/add_btn" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:padding="5dp"
android:src="#drawable/add_btn" />
</RelativeLayout>
</RelativeLayout>
you need to add them as action button on the appbar
https://developer.android.com/training/appbar/actions.html
You need to add
android:layout_toLeftOf
along with
android:layout_toStartOf
and
android:layout_toRightOf
with
android:layout_toEndOf
Add
android:layout_toLeftOf:
along with
android:layout_toStartOf:
and
android:layout_toRightOf:
with
android:layout_toEndOf:
because you need to support lower API versions.
Related
I want to make a header in my layout just like below image:-
enter image description here
here my code:-
<RelativeLayout
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:text="#string/filter"
android:drawableLeft="#drawable/filter1"
android:textSize="16dp"
android:id="#+id/textView"
android:background="#android:color/white"
android:textColor="#000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sort"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:id="#+id/textview_sort"
android:textSize="16sp"
android:drawableLeft="#drawable/sort1"
android:background="#android:color/white"
android:textColor="#000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/textView"
android:drawableLeft="#drawable/view1"
android:text="#string/view"
android:textSize="16sp"
android:background="#android:color/white"
android:id="#+id/change_view"
android:textColor="#000"/>
</LinearLayout>
</RelativeLayout>
Any one can help me how solve my problem. I am new in android developing please help me.Thanks in advance
It Could be achieved by two manner.
1) Custom Header
2) Actionbar/Toolbar.
Custom header means only height attribute you have to take as#dimen/abs__action_bar_default_height(if you are using appcompat).
For eg. sample demo
`
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="#FF6600"
>
<ImageView
android:id="#+id/menu"
android:layout_width="50dp"
android:layout_height="100dp"
android:src="#drawable/abc_ic_menu_moreoverflow_mtrl_alpha"
android:layout_centerVertical="true"
/>
<Spinner
android:id="#+id/spinner"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/menu"
android:entries="#array/array_name"
>
</Spinner>
<ImageView
android:id="#+id/search"
android:layout_width="50dp"
android:layout_height="100dp"
android:src="#drawable/abc_ic_search_api_mtrl_alpha"
android:layout_toRightOf="#+id/spinner"
android:layout_centerVertical="true"
/>
<ImageView
android:id="#+id/star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/star_yellow"
android:layout_toRightOf="#+id/search"
android:layout_marginLeft="5dp"
android:layout_centerVertical="true"
/>
<ImageView
android:id="#+id/shop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/abc_ic_menu_copy_mtrl_am_alpha"
android:layout_toRightOf="#+id/star"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
</LinearLayout>
`
Just give it a try.
I was trying to get two images side by side inside my LinearLayout. I tried setting my layout weight to 1 as suggested by many other posts I saw here for both views but to no avail. The imageViews in question are the ones with the ID rainfall and wind. What am I doing wrong here? I even tried wrapping them inside a relative layout and it did not work. This is what they look like with the code below: I just want the umbrellas to be side by side instead of one being slightly below the other one? Any ideas?
<Button
android:layout_width="wrap_content"
android:id="#+id/city"
android:layout_gravity="center"
android:gravity="center"
android:layout_height="wrap_content"
android:background="#null"
android:onClick="location"/>
<ImageButton
android:id="#+id/condition"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:onClick="sendMessage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtCondition"
android:gravity="center"
android:layout_gravity="center" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/temp"
android:layout_gravity="center"
android:gravity="center"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/maxMin"
android:gravity="center"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/highTemp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/wind"
android:src="#drawable/ic_umbrella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="start" />
<ImageView
android:id="#+id/rainfall"
android:src="#drawable/ic_umbrella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="end" />
<TextView
android:id="#+id/secDay"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/weekHigh"
android:layout_gravity="bottom|center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Try to put them inside a LinearLayout :
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/wind"
android:src="#drawable/ic_umbrella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start" />
<ImageView
android:id="#+id/rainfall"
android:src="#drawable/ic_umbrella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="end" />
</LinearLayout>
I am facing with problem button shows outside the screen in RelativeLayout. ImageView doesn't o scale picture to give a button visible place.
What I have:
What I want:
Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:textAppearance="#android:style/TextAppearance.Small"
android:textColor="?android:attr/textColorTertiary"
android:layout_centerHorizontal="true"
/>
<ru.mw.widget.DrawableImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
/>
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
/>
Problem when I change screen orientation:
If I use Arun C Thomas's method in landscape mode everything is ok, but in portrait mode I have this (image cropped by left/right edges):
What is expected:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:textColor="?android:attr/textColorTertiary"
android:textAppearance="#android:style/TextAppearance.Small"
android:layout_centerHorizontal="true"
/>
<ru.mw.widget.DrawableImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_above="#+id/processButton"
/>
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
This is the solution
Now to achieve the Updated requirement add the above layout to layout-land folder in res (if you don't have one create a folder named layout-land in res ) now in default layout folder add this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ru.mw.widget.DrawableImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
/>
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:text="#string/str" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView"
android:layout_centerHorizontal="true"
android:text="#string/str"
android:textColor="?android:attr/textColorTertiary" />
</RelativeLayout>
Thats it.
Try to add android:layout_alignParentBottom="true" to the button:
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
/>
Align the button to parent bottom using
layout_alignParentBottom="true".
Wrap the ImageView between the TextView and Button
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:textAppearance="#android:style/TextAppearance.Small"
android:textColor="?android:attr/textColorTertiary"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
/>
<ru.mw.widget.DrawableImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_above="#+id/processButton"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
Hi i am new to android and i have the following problem(see image).
As seen above the image over laps the text view. Can any one help me correct it.
I am using the following code.
<EditText
android:id="#+id/outlet_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="170dp"
android:hint="#string/outlet_id_text"
android:inputType="textAutoComplete" />
<ImageView
android:id="#+id/search_button"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:layout_marginTop="-48dp"
android:adjustViewBounds="true"
android:contentDescription="#string/cd_search_icon"
android:src="#drawable/search_icon" />
<?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="#color/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#color/background"
android:orientation="vertical" >
<org.fluturasymphony.recommendation.ScrollingTextView
android:text="Really Long Scrolling Text Goes Here.... ..... ............ .... ...."
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:id="#+id/TextView03"
android:padding="25dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="#+id/outlet_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="170dp"
android:hint="#string/outlet_id_text"
android:inputType="textAutoComplete" />
<ImageView
android:id="#+id/search_button"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:layout_marginTop="-48dp"
android:adjustViewBounds="true"
android:contentDescription="#string/cd_search_icon"
android:src="#drawable/search_icon" />
<Button
android:id="#+id/view_stores_on_map"
android:layout_width="221dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="76dp"
android:onClick="showStoreList"
android:text="#string/view_stores_on_map" />
<Button
android:id="#+id/view_stores"
android:layout_width="221dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="38dp"
android:onClick="showStoreList"
android:text="View List Of Stores" />
</LinearLayout>
</RelativeLayout>
you can use the following lines also . or if you want to use as a row items you can use orientation for those two items alone.
<EditText
android:layout_centerInParent="true"
android:id="#+id/outlet_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="170dp"
android:hint="outlet_id_text"
android:drawableRight="#drawable/ic_launcher"
android:inputType="textAutoComplete" />
Although you can manage your design using relative layout (BUT keep in mind your use is only show search image, so no need to add extra view for this requirement.), Here is simplest way is to do this
Use the android:drawableTop property on the EditText.
<EditText
...
android:drawableTop="#drawable/ic_action_search" />
and remove the <ImageView>
Other options are :
android:drawableRight, android:drawableLeft, android:drawableBottom and more..
Try this :
<?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="#color/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#color/background"
android:orientation="vertical" >
<org.fluturasymphony.recommendation.ScrollingTextView
android:id="#+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:padding="25dip"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="Really Long Scrolling Text Goes Here.... ..... ............ .... ...." />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="170dp"
android:background="#color/background"
android:orientation="horizontal" >
<EditText
android:id="#+id/outlet_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/outlet_id_text"
android:inputType="textAutoComplete" />
<ImageView
android:id="#+id/search_button"
android:layout_width="32dp"
android:layout_height="32dp"
android:adjustViewBounds="true"
android:contentDescription="#string/cd_search_icon"
android:src="#drawable/search_icon" />
</LinearLayout>
<Button
android:id="#+id/view_stores_on_map"
android:layout_width="221dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="76dp"
android:onClick="showStoreList"
android:text="#string/view_stores_on_map" />
<Button
android:id="#+id/view_stores"
android:layout_width="221dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="38dp"
android:onClick="showStoreList"
android:text="View List Of Stores" />
</LinearLayout>
</RelativeLayout>
It will solve your problem.
Thanks.
If you wanna make it move up, change android:layout_marginTop of image view to a more negative value. Do the opposite if you need it to go down.
<ImageView
android:id="#+id/search_button"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:layout_marginTop="-48dp" <!-- add more -ve value to move up, decrease to move down -->
android:adjustViewBounds="true"
android:contentDescription="#string/cd_search_icon"
android:src="#drawable/search_icon" />
Try this I hope it will work.
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginTop="40dp">
<EditText
android:id="#+id/outlet_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/outlet_id_text"
android:inputType="textAutoComplete" />
<ImageView
android:id="#+id/search_button"
android:layout_width="32dp"
android:layout_height="32dp"
android:adjustViewBounds="true"
android:contentDescription="#string/cd_search_icon"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Use android:layout_below="#+id/search_button" attribute to arrange your gadgets in View.
<EditText
android:id="#+id/outlet_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_below="#+id/search_button"
android:hint="#string/outlet_id_text"
android:inputType="textAutoComplete" />
<ImageView
android:id="#+id/search_button"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:layout_marginTop="170dp"
android:adjustViewBounds="true"
android:contentDescription="#string/cd_search_icon"
android:src="#drawable/search_icon" />
Hai all I am new in android programming.....
For my application I am using image button and it successfully
installed on the device. But when I rotate the screen all the button
position get changed... and I need all the button placed at centre
of the screen.... And here is my code....
<TextView
android:id="#+id/testText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFCC99"
android:textSize="24dp" />
<ImageButton
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="124dp"
android:layout_marginTop="80dp"
android:src="#drawable/up" />
<ImageButton
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/up"
android:layout_marginRight="200dp"
android:layout_marginTop="150dp"
android:src="#drawable/left" />
<ImageButton
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/up"
android:layout_marginRight="50dp"
android:layout_marginTop="150dp"
android:src="#drawable/right" />
<ImageButton
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/up"
android:layout_alignParentRight="true"
android:layout_marginRight="124dp"
android:layout_marginTop="80dp"
android:src="#drawable/down" />
Please help............
Set android:gravity to center.
The following layout will do for you:
<?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:gravity="center"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cool Button" />
</LinearLayout>
There are other ways to do it.
1. Using relative layout
2. Using 2 layouts : 1 one for portrait and and 1 for landscape.
You have to put all your widgets in a single container (LinearLayout) and center it. For that you can use the gravity attribute.
You can check this page:
http://developer.android.com/guide/topics/ui/layout/linear.html
I've made some modifications to your code. Please check whether this is the desired one.
<?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:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/testText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="Sample text"
android:textColor="#FFCC99"
android:textSize="24dp" />
<ImageButton
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:src="#drawable/left" />
<ImageButton
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:src="#drawable/right" />
</RelativeLayout>
<ImageButton
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down" />
</LinearLayout>