I want to layout 3 element Button , TextView , Button on the bar like this
[Button1] --- TextView --- [Button2]
2 button are always anchor fixed in left and right screen(padding 4dp) ,and TextView is center (change width depend on screen size),They should be apply for all screen size(not scaled in larger screen). How can I do it??
It would look something like this.-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
Notice that you still need to set other properties such as texts, ...
You can use LinearLayout with android:weightSum
Try Like this, By using android:weightSum, you can divide how much space for Button and textView.. And it will automatically adjust in all the density devices.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="LeftButton" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="4dp"
android:layout_weight="4"
android:gravity="center"
android:text="Center TextView text" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="Right Button" />
</LinearLayout>
android:weightSum work fine for me, I resolved all my troubles :)
Related
I was thinking it would be something like android:layout_startOf"centerHoriztonal" or something like that but I have searched and couldn't find anything. If it helps I am trying to make a soundboard app where all the buttons can be the same size across multiple device screens.
try this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:text="Here is button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button2"
android:text="Here is button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
You can wrap the button(s) inside a horizontal LinearLayout and use layout_weight to divide the screen in half and then layout_alignParentLeft/layout_alignParentRight to align the buttons inside a RelativeLayout that takes up exactly half the screen width.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button Text"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
Another way to do it is to create a dummy view object that is centered horizontally in the parent view, and align your buttons to the left or right of it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/dummyview"
android:layout_width="0px"
android:layout_height="0px"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dummyview"
android:text="Button Text"/>
</RelativeLayout>
Are you sure you want the same size of buttons in all devices? People try to avoid it and make make view elements flexible.
Anyways if you want to set same size just directly write in layout
android:layout_width = "#dimen/valueForButton"; //some absolute value
For starting at same point, just add all buttons inside LinearLayout and make some operations there, such as
android:layout_gravity = "center_horizontal";
Your layout must be something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
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
<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
I tried above code to display 3 buttons in Liner layout. It works but I need to put space between the two buttons.
android:layout_margin="10dp"
for each button
If the orientation of your LinearLayout is vertical, use
android:layout_marginTop="10dp"
otherwise, use
android:layout_marginLeft="10dp"
<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="25dp"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="25dp"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
Try this.
The easiest way to make space between 3 buttons in an horizontal LinearLayout to use this on the center button:
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
If you have vertical LinearLayout, you can use marginTop and marginBottom.
The best is to use android:layout_marginTop="10dp" in your XML activity as this gives accurate spacing between that button and the other button or widget.
Repeat this for rest of the buttons.
Happy Programming!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
I am assuming that you are using a Vertical orientation for your LinearLayout, otherwise this code won't make sense as your buttons are Fill_parent for layout_width. Notice the line that says android:layout_marginTop="10dip" which ensures that you leave a reasonable 10 dip space in between your buttons. Ofcourse, you can increase (or decrease) that space in between your buttons. That's your choice.
Hope this answered your question satisfactorily.
android:layout_marginBottom="50dp"
android:layout_marginTop="50dp"
I think you can try layout_weight. If you need 3 in a row with some space in between. you can do like this
<LinearLayout
android:id="#+id/buttons"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.google.android.material.button.MaterialButton
android:id="#+id/o_pharmacy"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:text="#string/o_pharmacy"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/lab"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:padding="5dp"
android:text="#string/lab"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/i_pharmacy"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="#string/i_pharmacy"
/>
</LinearLayout>
It's better to use
android:textSize="26dp"
instead of
android:textSize="26sp"
to have a better result in all devices of varied sizes!
I have the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/aussie_bg_big" >
<ImageView
android:id="#+id/titleImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#null"
android:src="#drawable/aussie_title_small" />
<ImageView
android:id="#+id/clearButtonOutput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/titleImage"
android:layout_alignParentRight="true"
android:contentDescription="#null"
android:src="#drawable/aussie_clear" />
<EditText
android:id="#+id/OutputText"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_above="#+id/clearButtonOutput"
android:layout_alignParentLeft="true"
android:background="#drawable/textbox"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/translateButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/OutputText"
android:layout_centerHorizontal="true"
android:clickable="true"
android:contentDescription="#null"
android:src="#drawable/translatebuttonselector" />
<ImageView
android:id="#+id/ClearButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/translateButton"
android:layout_alignParentRight="true"
android:contentDescription="#null"
android:src="#drawable/aussie_clear" />
<EditText
android:id="#+id/InputText"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_above="#+id/ClearButton"
android:layout_alignParentLeft="true"
android:background="#drawable/textbox"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:singleLine="false"
android:textColor="#ffffff" />
What I'd like to do is:
-> Keep the "imageBottom" imageview on the BOTTOM of the activity at all times, centered horizontally.
-> Keep the "imageCenter" imageview on the center of the activity at all times, centered horizontally.
-> Keep "imageBelowInputText" imageview below the InputText edittext which is located ABOVE imageCenter, aligned to the right.
-> Keep "imageBelowOutputText" imageview below the OutputText edittext which is located BETWEEN imageCenter and imageBottom, aligned to the right.
It works fine so far but I'd also like for the edittext views to occupy ALL of the remaining space EQUALLY. Providing different versions of the layout for small, normal, large, x-large screens worked fine, considering I hardcoded each edittext's size in dpi. However, on some layouts, it still looks a bit wrong and misplaced (misaligned). That's why I'm looking for a solution to place the ImageViews accordingly first, and then let the two EditTexts take all the remaining space EQUALLY (important).
So far, I couldn't think of a 100% correct solution. Can you help me out? Thanks!
Notice the two edittexts have their layout_height set to "0dp" and layout_weight set to "1"
XML
<?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:paddingTop="15dp"
android:orientation="vertical" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Clear" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="Bear" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Clear" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="Speaking Aussie" />
</LinearLayout>
Try giving each of the EditText views a height of 0dp, and a layout_weight value of 1. Give it a shot and let me know if that works.
I have a problem with centering text on buttons in a layout that I am working on. Please see the screenshot below (taken within eclipse's "Graphical Layout" tab):
I'm not sure what's causing this. I tried playing around with the individual layout properties of the buttons, but this has not had any effect. The following is my layout hierarchy:
LinearLayout (orientation is "vertical")
...
RelativeLayout
Button ("MM/DD/YYYY")
Button ("HH:MM")
TextView ("to")
Button ("MM/DD/YYYY")
Button ("HH:MM")
...
LinearLayout (orientation is "horizontal")
Button ("Close"; layout_weight is "1")
Button ("Reserve Room"; layout_weight is "1")
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="1024dp"
android:layout_height="640dp"
android:orientation="vertical"
android:padding="10dp" >
...
<RelativeLayout
android:id="#+id/dateTimePickersLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/startingDateButton"
android:layout_width="244dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/mm_dd_yyyy" />
<Button
android:id="#+id/endingTimeButton"
android:layout_width="244dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/hh_mm" />
<Button
android:id="#+id/endingDateButton"
android:layout_width="244dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/endingTimeButton"
android:text="#string/mm_dd_yyyy" />
<Button
android:id="#+id/startingTimeButton"
android:layout_width="244dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/startingDateButton"
android:text="#string/hh_mm" />
<TextView
android:id="#+id/toTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:text="#string/to"
android:textSize="18dp" />
</RelativeLayout>
...
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/closeButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/close" />
<Button
android:id="#+id/reserveRoomButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/reserve_room" />
</LinearLayout>
</LinearLayout>
Anyone have any ideas what may be causing this?
Thank you for your help!
I ended up updating eclipse and that fixed the problem. I was extremely disappointed that restarting the IDE did not change anything, especially since the XML had not posed any problems for others. Thanks for the help, everyone!
Make sure the width of your buttons at the bottom is set to 0dp. Also make sure that their parent LinearLayout has a width set to match_parent.