I am new to Android development. I have been working in iOS since long. As in iOS when we want to put VIEW on xib on some exact position, we simply put it there, drag it up to that point.
For example say Two buttons at lower area in iOS, which look like below
As, I simply want them in middle, I will put them their. as below
Now same thing in Android environment, I go for following code,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/myAwesomeTextView"
android:layout_width="wrap_content"
android:layout_height="1dip"
android:layout_centerInParent="true"
android:text="Veer Suthar" />
<TextView
android:id="#+id/myAwesomeTextView1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:layout_below="#id/myAwesomeTextView"
android:layout_centerInParent="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/myAwesomeTextView1"
android:gravity="center_vertical"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:onClick="buttonPressed"
android:text="Button One" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:onClick="buttonPressed"
android:text="Button Two" />
</LinearLayout>
</RelativeLayout>
It shows Activity Screen, like below
Now If I want to drag buttons, using GRAPHICAL LAYOUT, I can't move them as I want, and for spacing to put them into lower area, I need to put extra TextView .
Is there any better way to organise Android Activity GUI properly, like iOS?
I'll give you a brief example, since Android graphical layout is not as smooth as XCode.
To accomplish what you need, centering the two buttons in the screen, you can use a XML code like 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" >
<LinearLayout
android:id="#+id/layout_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true">
<Button
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button One"/>
<Button
android:id="#+id/button_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Two"/>
</LinearLayout>
</RelativeLayout>
The trick is to use android:layout_centerInParent="true" for the only component that you want to be centered in the screen all other components can use that one for reference to be placed in the screen.
For example
<TextView
android:id="#+id/myAwesomeTextView1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:layout_above="#+id/layout_center"
android:text="Veer Suthar"/>
This is one way for doing this, you can always find a better and more comprehensible way to do things.
Hope this helped.
Add this to your LinearLayout:
android:layout_alignParentBottom = "true"
Childs in a RelativeLayout can be "glued" to a particular position relative to the parent layout or to other elements in the same layout using the xml tags listed here: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
Related
I'm trying to create an android application but I'm a beginner, especially with the XML. I don't know why, if I put Relative layout and move the widgets they remain anchored at the top left. does anyone know why?
ps I would like to work on the window design not on the code. Anyway I leave you the code in case there is something wrong
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Tentativo">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</RelativeLayout>
You are facing this problem because you are using the wrong attributes. The attributes you are using are meant for Constraint Layout and not Relative layout.
For Example: in case of TextView instead of using app:layout_constraintRight_toRightOf="parent" try using android:layout_alignParentRight="true"
Also, I would like to recommend you to use Constraint Layout instead of Relative as is much better and easier to use. example: To center a view in a RelativeLayout you would write centerInParent=true. Constraint Layout instead allows centering in-between views and the parent.
relative layout works great with nested sibling Containers, just add a container, and add the Widgets inside the container, my favorite one to use when Relative Layout is the parent is the Linear Layout, it makes the UI much cleaner and uses weights which is great for supporting different screen ratios. Here is a sample Example for your case (also you can remove all the constraints in the widget since their parent is no longer the relative layout) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:gravity="center"
android:weightSum="2"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:layout_weight="1"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</LinearLayout>
</RelativeLayout>
I have an application that uses Google Maps in a frame layout. I am using alternative 2 in this (accepted) answer. When I use alternative 2, I have a single button at top of the application (Free Draw). My question is, can I add more than one button (horizontally/vertically) on the sides of this button?
I have searched online for similar questions but mostly, the answer involves two separate layouts. I am a beginner to android and do not know how to use two separate layouts. I tried using two layouts but get an error "Multiple root tags." Is there any way I can tackle this problem?
Any help will be appreciated.
Something like this in your root_map.xml will give you two buttons next to each other at the top left corner of your map:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<fragment
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
class="com.google.android.gms.maps.SupportMapFragment" />
<LinearLayout
android:id="#+id/fram_map"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_draw_State"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Free Draw" />
<Button
android:id="#+id/btn_dosomethingelse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Do Something Else" />
</LinearLayout>
</FrameLayout>
Yes, of course. You can add as many buttons as you like. To control their position within the FrameLayout you have to assign gravity to each child, using the android:layout_gravity attribute.
Example :
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.maps.MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button A"/>
<Button
android:id="#+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button B"/>
</LinearLayout>
</FrameLayout>
Concerning your error "Multiple root tags" : Multiple root tags in Android Studio
I'm trying to make a imperial to metric conversion app, which is going fine, until I ran into problems with the Android Emulator. The layout is totally screwed up in the Emulator, and I have no idea why. http://imgur.com/a/IBOcs
EDIT:
The whole activity_main.xml code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.daniel.converter.MainActivity"
tools:layout_editor_absoluteY="73dp"
tools:layout_editor_absoluteX="0dp">
<TextView
android:id="#+id/textViewMPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MPH"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="90dp" />
<EditText
android:id="#+id/editTextMPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="77dp" />
<TextView
android:id="#+id/textViewTO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="To"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="132dp" />
<TextView
android:id="#+id/textViewKMH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KMH"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="168dp" />
<EditText
android:id="#+id/editTextKMH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="156dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert!"
tools:layout_editor_absoluteX="146dp"
tools:layout_editor_absoluteY="229dp" />
</android.support.constraint.ConstraintLayout>
Issue is happening because you are using constraint layout but you have not provided any constraints for your items. Thus, every item is shown at (0,0) position.
Contraint Layout description:
The layout editor allows you to place widgets anywhere on the canvas, and it records the current position with designtime attributes (such as layout_editor_absoluteX.) These attributes are not applied at runtime, so if you push your layout on a device, the widgets may appear in a different location than shown in the editor. To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections.
So either assign x and y values or use LinearLayout/RelativeLayout.
My problem is that i have my listview working perfect on a absoulteLayout but the buttons on the bottom aren't show up! I put a scrollview with a absoluteLayout with all items (textview, button, etc) and outside of the scrollview I put the listview, this didn't work, either, just scroll the buttons but the listview just move a little bit, how can I put a scrollview to can see the buttons on the button and make the listview works?
my XML:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- The main content view -->
<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/Ab">
<ListView
android:layout_width="317dp"
android:layout_height="429dp"
android:id="#+id/listView"
android:layout_gravity="center"
android:layout_x="45dp"
android:layout_y="41dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This Works Monica!!"
android:id="#+id/TV1"
android:layout_gravity="center_horizontal"
android:layout_x="120dp"
android:layout_y="22dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Play :D"
android:id="#+id/TESTME"
android:layout_gravity="center_horizontal|bottom"
android:layout_x="190dp"
android:layout_y="520dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Pause"
android:id="#+id/PAUSE"
android:layout_x="110dp"
android:layout_y="521dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="37dp"
android:text="Lista"
android:id="#+id/LISTA"
android:layout_x="274dp"
android:layout_y="520dp" />
<CheckBox
android:layout_width="84dp"
android:layout_height="wrap_content"
android:text="Lista?"
android:id="#+id/CHECARL"
android:layout_x="267dp"
android:layout_y="490dp"
android:checked="false" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="BorrarL"
android:id="#+id/BORRARL"
android:layout_x="20dp"
android:layout_y="520dp" />
</AbsoluteLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#E6E6E7" />
You are using absolute layout that means, from documentation:
A layout that lets you specify exact locations (x/y coordinates) of its children.
So if you don't see the buttons it is because they are positioned outside of your device screen bounds. And their position is absolute / fixed so they stay there no matter what.
I would recommend to change to different layout. I don't know what kind of app you are building but absolute layout is generally not the best choice.
Possibility number one:
<?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:clickable="true">
<ListView
android:id="#+id/allPaymentListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/addNewPayment"
android:layout_marginTop="10dp"></ListView>
<Button
android:id="#+id/addNewPayment"
android:layout_width="match_parent"
android:layout_height="#dimen/primary_button_height"
android:layout_alignParentBottom="true"
android:layout_margin="10dp"
android:background="#drawable/blackbutton"
android:text="#string/add_new_card"
android:textColor="#color/light_blue"/>
</RelativeLayout>
In this case the button will be always seen on the bottom of the page, below the listview.
The second possibilty is to add a footer to the listview:
http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)
In that case the view with the button will be the last element in the listview.
And don't use Absolute Layout it is deprecated, the reason is the app will not scale to different screen sizes as you wanted.
You should use a RelativeLayout with the buttons at the bottom and the ListView placed on top of the buttons.
AbsoluteLayout is, in general. to be avoided for layouts unless you are trying to accomplish a very specific purpose. It's considered an anti-pattern to position elements absolutely. To achieve what you have stated, a RelativeLayout would be the way to go.
UPDATE: Thanks everyone for your help, layout_weight is what I was after.
I am currently working on my first android project in java. I am trying to use a linearlayout which has a listview spanning most of the page but has a load more button at the bottom of the app.
This is what it SHOULD look like and is what is previewed to me in Eclipse
and this is what is happening when I actually run the application
The button for some reason is moved a lot higher then I would like, I would like it to stick to the bottom of the page and have the listview take up the rest of the screen...
Here is my layout xml...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000">
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="434dp"
android:maxHeight="434dp"
android:minHeight="434dp"
android:background="#000000" >
</ListView>
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="27dp"
android:maxHeight="27dp"
android:text="Load More..."
android:textSize="#dimen/dp12" />
</LinearLayout>
So my question is,
What have I done wrong or not done at all which is required to keep the button at the bottom of the page?
Thanks.
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1.00"
android:background="#000000" >
</ListView>
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="27dp"
android:maxHeight="27dp"
android:text="Load More..."
android:textSize="#dimen/dp12" />
It looks like you are setting up the layout using dp measurements. Try using the weight attribute instead. It should do what you want and scale nicely.
http://www.chess-ix.com/blog/the-use-of-layout_weight-with-android-layouts/
What does android:layout_weight mean?
Good Luck!