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.
Related
I want to create a layout of the list item as shown in the image.I divided it into three parts taking whole layout as Linear(orientation-horizontal).Three parts are
1) Image
2) Paragraph
3) three edit text in a linear layout.
I have problem in the second part as the length of paragraph (Text View) it disturbs the next part.I also try by putting weight in relative layout but it does not work.What is the solution for this problem?
How to do something like this.
Code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/item_icon"
android:src="#drawable/hammer"
android:layout_weight="1"
android:layout_width="100dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/item_name"
android:layout_toRightOf="#id/item_icon"
android:layout_weight="1"
android:text="skvnksjdjbkjbkjb"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/item_detail"
android:layout_toRightOf="#id/item_name"
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/detail1"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/detail2"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/detail3"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
if you use layout_weight, the layout_width (for horizontal LinearLayouts) should be set to 0dp
I have a LinearLayout with three RelativeLayout inside. The first two children layouts show. The third one does not show. When I change the children from RelativeLayout to LinearLayouts, the third one still does not show. Any ideas on how to fix this? The one not showing contains the ImageView.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:clickable="true"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/back1" >
<View
android:id="#+id/fract"
android:layout_width="60dp"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="#00a5e5"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
<TextView
android:id="#+id/nume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/fract"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="58 apple"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/denom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fract"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="46 orange"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/back2" >
<TextView
android:id="#+id/red_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="11 apple "
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/red_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/red_1"
android:layout_centerHorizontal="true"
android:layout_marginRight="5dp"
android:ellipsize="end"
android:singleLine="true"
android:text="13 oranges "
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#ffffff" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/guess" />
</RelativeLayout>
</LinearLayout>
Your second Relative Layout's height is
android:layout_height="match_parent"
try putting:
android:layout_height="wrap_content"
--edit - try adding a weight attribute.
</RelativeLayout>
<RelativeLayout
android:weight=1
>
</RelativeLayout>
<RelativeLayout
android:weight=1>
</RelativeLayout>
android:layout_centerInParent="true" remove this from the view, if you want to add a view you can add separately out of the RelativeLayout with this your Layout is already in the center of the parent, For debug purpose set the width of each view to certain level so that you can see. Your two RelativeLayout already took the width of the Linear Layout, so no space left for the third Layout.
I decide to do it programmatically. I get the width of the device using context.getResources().getDisplayMetrics().widthPixels. Then from there I layout my pieces pixels by pixels, so to speak.
I've created this fragment named searchfragment. Below there is the layout XML file of the searchfragment. Unfortunatelly the design isn't that smooth as I want it to be.
Here's what I wanted it to look like:
First row: Welcoming text (that works)
Second row: Search input field (that works, too)
Thirt row (and here it gets complicated): There should be a text named "Search for" and then a Spinner with the item you can search for (e.g. name, year, price). Then there's the Search button. Next thing is that you can sort the output. Therefore there's a text with "Sort for", a Spinner with the critirion and a Sort button. Best case the search section should be align to the left and the sort for to the right, but still centered.
Forth row: Output field.
Now as the elements are all present on my device, they are not in the graphical layout of Eclipse. I've tried for hours now to get it working but it's kind of hard if you're not sseing your objects.
Long text - short task: Please help me optimise my design.
searchfragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:layout_gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:text="#string/welcome" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/edit_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:hint="#string/edit_message" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="8dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/search_for" />
<Spinner
android:id="#+id/criterion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:entries="#array/searcharray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="136dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sendMessage"
android:text="#string/button_send" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sort_for"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<Spinner
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:entries="#array/sortarray"
android:prompt="#string/prompt" />
</LinearLayout>
<Button
android:id="#+id/sort_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sortAgain"
android:text="#string/button_send" />
</LinearLayout>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/showResults"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
</ScrollView>
</LinearLayout>
I've added a photo of the current design. The space with the red frame around it is the third "row" and should be changed. The second spinner is (I don't know why) much too wide. It should be that wide as the first one. Then all the elements should be about the same heigth and the elements should be centered.
You're on the right track with your layout, but the reason your second Spinner is taking up so much room is that you've set it's layout_weight to 1, and as it's the only one with a layout_weight, it's taking up the rest of the space that's free.
If you want the items to take up a relative amount of space on the screen, then you could stick with using layout_weight and give all of your items that property.
For example, just for your third row you would get rid of the LinearLayout around your Spinner, change some of the layout_width properties and give all of your items a layout_weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="8dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/search_for" />
<Spinner
android:id="#+id/criterion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:entries="#array/searcharray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sendMessage"
android:text="#string/button_send" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/sort_for"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/sortarray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/sort_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sortAgain"
android:text="#string/button_send" />
</LinearLayout>
This is going to give all of your items an equal weighting, so the TextViews will be the same size as the Spinners which will be the same size as the Buttons. Play around with the layout_weight attribute to make them more relative, for example if you want the Buttons to be twice the size as the Spinners, set their layout_weight to 2.
I have a layout like this in which I want to display a label above a view and then repeat it below.
Here is my code...
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/speedLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="#string/speed"
android:textAppearance="?android:attr/textAppearanceLarge" />
<View
android:id="#+id/speedGraph"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_below="#+id/speedLbl"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#color/blueColour" />
<TextView
android:id="#+id/distanceLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_below="#+id/speedGraph"
android:text="#string/distance"
android:textAppearance="?android:attr/textAppearanceLarge" />
<View
android:id="#+id/distanceGraph"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/distanceLbl"
android:layout_marginBottom="4dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#color/blueColour" />
</RelativeLayout>
The problem is I don't want to set a height for the two views as I want them to dynamically change depending on the screen size. I tried using layout_weight but it doesn't like the fact that its nested inside another.
Can anyone see another solution for this problem??
You could avoid the double weights issue with a small trick. You could set an empty View at the vertical center of the parent RelativeLayout and position the two groups above and below that View, something like this:
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<View android:id="#+id/anchor"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_centerVertical="true/>
<TextView
android:id="#+id/speedLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="#string/speed"
android:textAppearance="?android:attr/textAppearanceLarge" />
<View
android:id="#+id/speedGraph"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_below="#id/speedLbl"
android:layout_above="#id/anchor"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#color/blueColour" />
<TextView
android:id="#+id/distanceLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_below="#id/anchor"
android:text="#string/distance"
android:textAppearance="?android:attr/textAppearanceLarge" />
<View
android:id="#+id/distanceGraph"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#id/distanceLbl"
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#color/blueColour" />
</RelativeLayout>
Also you should use the #+id/... notation only when you first declare that id, on the next id occurrence you should use #id/....
You can achieve the dynamic screen size through layout_weight . But before that you just try layout_weight to the Linear Layout and provide the appropriate weights to the view and textview. It almost solve your problem. Dont use Relative Layout with Weight. weight is not working in Relative layout.
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