I have the below code, it is a checkbox and button on opposite ends. I want to keep it on opposite ends, but i want the checkbox (along with its text) to come at the middle of the button height.
As is , the checkbox comes on top of button height
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp">
<CheckBox
android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/remember_choice"
android:textSize="#dimen/dux_textSizeSmaller" />
<Button
android:id="#+id/submitBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:text="#string/submit" />
</RelativeLayout>
Use this updated XML. I think you will get your result...
<CheckBox
android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/submitBtn"
android:layout_alignBottom="#+id/submitBtn"
android:layout_alignParentLeft="true"
android:text="#string/remember_choice"
android:textSize="#dimen/dux_textSizeSmaller" />
<Button
android:id="#+id/submitBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:text="#string/submit" />
You should use this:
android:layout_alignBaseline="#+id/submitBtn"
In your code:
<CheckBox
android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/submitBtn"
android:layout_alignParentLeft="true"
android:text="#string/remember_choice"
android:textSize="#dimen/dux_textSizeSmaller" />
Add android:gravity = "center" to the layout which holds your CheckBox and The Button. That simple. Happy coding :)
Related
I'm implementing an EULA with a checkbox, where part of the text is clickable. Through googling and from other answered questions here, I've used a checkbox with no text and a separate textview for the text, which in the C# code uses a SpannableString and ClickableSpan.
However, I'm having some problems with the layout of the checkbox and textview. Here is what the layout looks like now:
I want to get the one on top to look like the one below
As can be seen, there's a large unknown padding on the left and right of the textview even though the padding is explicitly set to 0. Here is the xml code:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/registerMobileField"
android:layout_marginTop="27dp"
android:layout_centerHorizontal="true">
<CheckBox
android:id="#+id/pdpaChkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="0"
android:text=""
android:scaleX="0.80"
android:scaleY="0.80" />
<TextView
android:id="#+id/pdpaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/pdpaChkbox"
android:layout_centerVertical="true"
android:padding="0"
android:textColor="#color/dark_blue"
android:text="#string/pdpa"
android:scaleX="0.80"
android:scaleY="0.80" />
</RelativeLayout>
<CheckBox
android:id="#+id/pdpaChkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/registerMobileField"
android:layout_centerHorizontal="true"
android:layout_marginTop="47dp"
android:textColor="#color/dark_blue"
android:text="#string/pdpa"
android:scaleX="0.80"
android:scaleY="0.80" />
Any help would be greatly appreciated!
This is not unknown padding this is scaleX and scaleY property you have given to you that you have given CheckBox and TextView. just remove these properties from your CheckBox and TextView and give it to the RelativeLayout then your both case will same as follows.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/registerMobileField"
android:layout_marginTop="27dp"
android:scaleX="0.80"
android:scaleY="0.80"
android:layout_centerHorizontal="true">
<CheckBox
android:id="#+id/pdpaChkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/pdpaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/dark_blue"
android:layout_toRightOf="#id/pdpaChkbox"
android:layout_centerVertical="true"
android:text="#string/app_name"
/>
</RelativeLayout>
<CheckBox
android:id="#+id/pdpaChkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="47dp"
android:textColor="#color/dark_blue"
android:layout_below="#id/registerMobileField"
android:text="#string/app_name"
android:scaleX="0.80"
android:scaleY="0.80" />
I hope its work for you
I've created a custom listview. All works fine though I struggle with the layout of the listitem.
The idea is to have a textview which can have a variable length (multilines is possible) and two buttons next to the textview all on one line.
This is what I have:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_weight=".80" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_weight=".10"
android:layout_toRightOf="#id/textView1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_weight=".10"
android:layout_toRightOf="#id/button1" />
This works fine though my problem is that the textview fills out the parent and pushes the buttons of the screen. (when I have a short text the buttons are vissible)
So basically, what I need is a 80% wide textview aligned to the left and two 10% wide buttons aligned to the right. Can anyone guide me in the right direction?
Thanks
You can't use layout_weight with RelativeLayout. Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
</LinearLayout>
Change to LinearLayout. You cannot use layout_weight with RelativeLayout.
Good Luck
I'm trying to develop an android application, but I'm having some problems with the GUI design. The following part of screenshot is my problem (red and blue lines were generated by Android debug options).
This is the code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
As you can see, the TextView myText overlaps the ImageButton button_edit.
A simple solution would be to use a LinearLayout instead of a RelativeLayout. The problem is that:
I need the edit button on the right
I need the text to fill the rest of the layout (at the left of edit button obviously)
I also tried to set myText's layout_width to 'fill_parent', but it fill the entire rest of the screen at the left of the edit button.
The expected behavior would be myText to increase its height (becoming a two-lines TextView) instead of overlapping 'button_edit'
Can anyone help me? Thanks
use layout_toLeftOf in TextView layout
like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#+id/button_edit" />
Another way of doing is to use android:layout_toEndOf attribute
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle"
android:layout_toEndOf="#+id/myText" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />
I have a question. I am working on a layout wherein I want one layout to be above the other layout.
Situation: There is one RelativeLayout which has a Touchlistener. At the bottom of this layout, there is anothet relative layout having three buttons which are clickable. Now the problem is when I click on one these buttons, the listener of the first layout gets activated and none of the buttons work.
I did make use of frame layout but its not working. Did make use of .bringToFront method. But this did not work also.
Please I need suggestions for the same.
I am uploading my code.
<RelativeLayout
android:id="#+id/rlayout"
android:layout_width="458dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:gravity="center"
android:layout_height="278dp"
android:background="#drawable/anim_layout" >
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:scaleType="centerInside"
android:visibility="visible" />
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:gravity="center"
android:scaleType="centerInside"
android:visibility="invisible" />
</RelativeLayout>
<ImageView
android:id="#+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_gravity="bottom"
android:background="#drawable/image_unfocus" />
<RelativeLayout
android:id="#+id/rlayout_anim_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="4dp"
android:background="#drawable/anim_bg" >
<ImageButton
android:id="#+id/sequence_image"
android:layout_width="22dip"
android:layout_height="17dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="22dp"
android:layout_marginTop="3dip"
android:background="#drawable/unfocus_image" />
<ImageView
android:id="#+id/edit_image"
android:layout_width="22dip"
android:layout_height="17dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="80dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#id/sequence_image"
android:background="#drawable/edit_icon" />
<ImageView
android:id="#+id/close_image"
android:layout_width="22dip"
android:layout_height="17dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="130dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#id/edit_image"
android:background="#drawable/close_img" />
</RelativeLayout>
use Layout Inflator ... make an xml . with the use of inflator , you can inflate another layout over the previous one.
enjoy
Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.
One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.
You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>