I am trying to have a RelativeLayout wrap it's content height and width. It seems to do fine on width, but the height does not wrap. It covers the entire screen. Anyone know why?
<?xml version="1.0" encoding="utf-8"?>
<com.company.things.CameraControls
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/camera_control_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#60FFFFFF" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="clearDrawing"
android:text="#string/clear" />
<SeekBar
android:id="#+id/sensitivity_seek"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
<Switch
android:id="#+id/live_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/sensitivity_seek"
android:layout_toRightOf="#+id/sensitivity_seek"
android:text="#string/live" />
</RelativeLayout>
</com.company.things.CameraControls>
It's because you put your UI elements on the bottom of the page.
Related
Expected layout :
Layout rendered :
Layout xml source:
<?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"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/banner_back"
/>
<ImageView
android:id="#+id/movie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/back"
android:background="#drawable/banner_background"
/>
<ImageView android:id="#+id/midban"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/back"
android:background="#drawable/banner_mid"
/>
<Button
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/banner_right"
/>
<Button
android:id="#+id/fb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/share"
android:layout_alignParentRight="true"
android:background="#drawable/banner_fb"
/>
<Button
android:id="#+id/dummyright"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/fb"
android:background="#drawable/layoutslices_new_10"
/>
<Button
android:id="#+id/buy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/fb"
android:layout_toLeftOf="#+id/dummyright"
android:background="#drawable/layoutslices_new_09"
/>
<Button
android:id="#+id/rt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/buy"
android:layout_toLeftOf="#+id/dummyright"
android:background="#drawable/layoutslices_new_11"
/>
<Button
android:id="#+id/imdb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rt"
android:layout_toLeftOf="#+id/dummyright"
android:background="#drawable/layoutslices_new_12"
/>
</RelativeLayout>
</LinearLayout>
The correct aspect ratio is being maintained for all of the layout but the the buttons marked trouble are messed up as shown in the picture.
Could anyone tell me where am I missing the layout element or I believe I am missing some basic stuff.
I figured out. You have to use ImageView instead of Buttons. Hope this helps someone. Biggest waste of time.
You cannot go below a certain height for a button even if you use wrap content and setbackground image. It scales the image up to the default height if the height of the image is below the default value. I am not sure if this is a bug or this is the expected behavior.
You can also refer here: wrap_content is not working in button height android
This is my custom dialog, there are some textboxs and two buttons.
I'm using a RelativeLayout on it.
I'd like the dialog size to match the content, not all that blank space under there.
I don't want to use explicit pixel heights (it's not good practice).
Another thing, there's a way to have some space between every view?
This is my XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_desc"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/txt_place"
android:layout_toRightOf="#+id/view"
android:text="#string/btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txt_place"
android:layout_toLeftOf="#+id/view"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="#string/btn_edit" />
</RelativeLayout>
First question
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
Second question
Plus use android:marginTop="5dp" if you want to separate a View from Top for 5 dp.
marginLeft|Right|Bottom are also available.
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp" <-----------------
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
By the way, if I were you, I'd nest some layouts to make order. You can have a general Relative Layout, then 2 linear layouts: one horizontal for TextViews and one vertical for Buttons. You can definely play with your editor and try to make the best appearance for your dialog.
EDIT
Try this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000"
android:orientation="vertical"
android:paddingBottom="50dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="prova"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="btn_edit" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I've hard-coded the texts. The main idea is to use a big container layout in background, which is trasparent (background=#0000) and in top of that a layout in wrap_content containing your Views.
If this solution doesn't resolve your problem, I think you could edit height directly in your code. Try to relate to this question
Set your relative layout's height to wrap_content.
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- More XML -->
</RelativeLayout>
Also be aware that fill_parent is deprecated for widths and heights.
You can add either margin (extra space outside a view) or padding (extra space inside a view) with android:layout_margin or android:padding respectively. There are also variants such as layout_marginTop that only apply to a specific side of the view.
i want to design a layout for my app as shown below in image
but im getting problem which is that the properties im applying for relative layout are not going right as in below my xml code there is horizontal ruler image having centerInParent property and a verticle ruler image also having property of centerInParent by doing this the both rulers come to accurate place but when i put a child above the horizontal ruler or a child toLeftOf verticle ruler they dont appear as the graphical view of xml file shows the reason that although by applying centerInParent the both rulers come to center but their reference remains at edges thats why by using layout_above or layout_toLeftOf the childs go outside of layout
My xml code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/title"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon_img"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dip"
android:layout_marginTop="2.5dip"
android:src="#drawable/smicon"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#id/icon_img"
android:layout_marginTop="3dip"
android:text="Welcome To JEM"
android:textStyle="bold"
android:id="#+id/wcm_id"
android:textSize="18dip"
android:textColor="#FFFFFF"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/wcm_id"
android:layout_alignParentRight="true"
android:layout_marginRight="5dip"
android:text="APPS BY SAM"
android:id="#+id/app_by"
android:textSize="16dip"
android:textColor="#FFFFFF"
/>
</RelativeLayout>
<!-- This relative layout which is showing the main cross and icon around it -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_hr"
android:layout_centerInParent="true"
android:src="#drawable/horizontal"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_vr"
android:layout_centerInParent="true"
android:src="#drawable/verticle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/getuser"
android:src="#drawable/adduser"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/set"
android:src="#drawable/set"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/get"
android:src="#drawable/get"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/ico"
android:src="#drawable/icon"
/>
</RelativeLayout>
</LinearLayout>
so guys please tell me how can i achive this main cross and icon to lef,right and above,below it as shown in image
Try this..
<?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"
android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/vertical_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imageView1"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
/>
<ImageView
android:id="#+id/horizontal_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/horizontal_ruler"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
android:layout_below="#id/horizontal_ruler"
/>
May be it helpful for you..
You could use a TableLayout embedded in a RelativeLayout. The RelativeLayout can be used to center the TableLayout on the screen and in the TableLayout you can add your pictures/buttons and state how many rows and colums you want the TableLayout to have.
Pictures: http://img838.imageshack.us/img838/1402/picse.png
How do I make the layout in Pic. 2 using RelativeLayout ONLY. Below is the xml layout of the first screenshot.
<?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">
<TextView
android:id="#+id/timer_textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="10dip"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:text="#string/timer_start" />
<ListView
android:id="#+id/questions_listview"
android:layout_below="#id/timer_textview"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<Button android:id="#+id/true_btn"
android:text="#string/true_option"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/false_btn"
android:text="#string/false_option"
android:layout_toRightOf="#id/true_btn"
android:layout_alignBaseline="#id/true_btn"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
You could use LinearLayout at bottom to achieve this. But you want to use RelativeLayout layout only so:
<RelativeLayout android:layout_width="fill_parent" ... >
...
<View android:id="#+id/helper"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<Button android:id="#+id/true_btn"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/helper"/>
<Button
android:id="#+id/false_btn"
android:layout_alignBaseline="#id/true_btn"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/helper" />
</RelativeLayout>
Can't you really use nested layouts?
If you change the buttons to
<Button android:id="#+id/true_btn"
android:text="#string/true_option"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/false_btn"
android:text="#string/false_option"
android:layout_toRightOf="#id/true_btn"
android:layout_alignBaseline="#id/true_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
you use at least the full width although the false_btn gets all remaining space.
To increase the width of the first true_btn you could set the minWidth attribute - either use a fixed value or get the screen width and make the minWidth the half of it
This is my layout for an image capture program in android
<?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">
<SurfaceView android:id="#+id/surface_camera"
android:layout_width="fill_parent" android:layout_height="420px">
</SurfaceView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_alignParentBottom="true" android:id="#+id/beforeClick"
android:layout_height="wrap_content" android:background="#color/clickPanelBK"
android:paddingTop="6dp" android:paddingBottom="6dp">
<Button android:gravity="center" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/capture_image_goback_btn"
android:background="#drawable/generalbutton" android:text="#string/back" />
<Button android:gravity="center"
android:layout_centerHorizontal="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/capture_image_btn"
android:background="#drawable/clickbutton" />
</RelativeLayout>
<RelativeLayout android:layout_width="fill_parent"
android:layout_alignParentBottom="true" android:id="#+id/afterClick"
android:layout_height="wrap_content" android:background="#color/clickPanelBK"
android:paddingTop="6dp" android:paddingBottom="6dp">
<Button android:gravity="center" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/img_retake"
android:background="#drawable/generalbutton" android:text="#string/retake" />
<Button android:gravity="center"
android:layout_alignParentRight="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/img_save"
android:text="#string/saveImg" android:background="#drawable/generalbutton" />
</RelativeLayout>
</RelativeLayout>
The last 2 relative layouts are swappable and are aligned fine. Only one of them appear at a time and is changed on a button click. Anyway, The problem here is, I have to mention the layout_height of surface view in px or dp. If I give layout_height as fill_parent, the view appears very small, 35% of width and height. Can anyone please give me a solution ?
RelativeLayout had many bugs in 1.5 :(