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
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 views as follows :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/global_legal_gap"
android:clipToPadding="true"
android:clipChildren="true"
android:baselineAligned="false"
android:background="#drawable/post_sound_bg"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="#dimen/post_sound_card_height"
android:layout_height="#dimen/post_sound_card_height">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/album_art"
android:layout_width="#dimen/post_sound_card_height"
android:layout_height="#dimen/post_sound_card_height"
fresco:backgroundImage="#drawable/music_placeholder" />
<RelativeLayout
android:id="#+id/play_icon_control"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:visibility="gone">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_margin="3dp" />
</RelativeLayout>
</RelativeLayout>
<LinearLayout>
As shown in the parent RelativeLayout, I'm using android:clipToPadding="true" and
android:clipChildren="true", yet the children of this parent view are still protruding outside it.
Or I'm I doing this right? How do I achieve something like CSS's overflow:hidden?
Consider changing layouts. What you want can be done with ConstraintLayout.
Just set the the dimensions of the layout and don't set the constraint on the part you want to overflow/hide.
The following code shows a View that adjusts it dimensions to its constraint and another that overflows.
Create a new android project and paste this as activity_main.xml
<?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=".MainActivity"
android:layout_margin="55dp">
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:drawable/sym_def_app_icon"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="84dp"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="300dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
app:srcCompat="#mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>
Your parent view has
android:layout_width="match_parent"
android:layout_height="wrap_content"
which means that the view takes all available width and up to all available height if child views are large enough. With this setup you can't seethe overflow:hidden behaviour because the parent will resize itself to contain children up to the whole screen size.
Actually, default view behaviour in android is similar to overflow:hidden.
What you need to do to see it is set fixed dimentions on the parent.
Just try to use something like:
<LinearLayout
android:layout_width="20dp"
android:layout_height="20dp"
and you'll get the idea.
On a different note, you don't need to have a LinearLayout just to host a RelayiveLayout - use the RelativeLayout directly. Also, using android:orientation="horizontal" makes it behave similarly to flexbox direction row, not sure if that's something you want here.
In native Android, overflow: hidden is android:clipToOutline="true".
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
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!
I'm using 4 listviews in my layout and if i use scrollview , i cannot scroll into my listview. If i remove scrollview in my xml, then the last list is been hiddden. How to overcome this problem?
My code goes below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:id="#id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="42.0dip">
<Button android:textSize="23.0dip" android:onClick="newtodo_Click" android:textStyle="bold" android:textColor="#ffffffff" android:gravity="center" android:id="#id/btnNewTodo" android:background="#drawable/new_todo" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>
<TextView android:textColor="#000000" android:layout_height="wrap_content" android:background="#FF0000" android:layout_width="match_parent" android:text="High Priority" android:id="#+id/textView1"></TextView>
<ListView android:id="#+id/lvhigh" android:cacheColorHint="#00000000" android:background="#000000" android:layout_width="match_parent" android:layout_height="175px"></ListView>
<TextView android:background="#ffff01" android:textColor="#000000" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Medium Priority" android:id="#+id/textView2"></TextView>
<ListView android:id="#+id/lvmed" android:layout_width="match_parent" android:layout_height="175px"></ListView>
<TextView android:background="#00ff01" android:textColor="#000000" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Low Priority" android:id="#+id/textView3"></TextView>
<ListView android:id="#+id/lvlow" android:layout_width="match_parent" android:layout_height="175px"></ListView>
<TextView android:background="#cccccc" android:textColor="#000000" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Incomplete Tasks" android:id="#+id/textView4"></TextView>
<ListView android:id="#+id/lvinc" android:layout_width="match_parent" android:layout_height="175px"></ListView>
</LinearLayout>
</ScrollView>
Any Help is really appreciated and thanks in advance...
In you layout there is textview and after that listview so why you not used expandable listVIew.It will help you in your problem.
Here is example of Expandable listview
Expandable Listview
Expandable Listview example
Click Here
Click Here
An simple workaround is to
Remove ScrollView
Set height of all ListView to 0
Set layout_weight property of all child to 1
To overcome, try re-factoring your UI to not include multiple scrollable objects inside of another scrollable object. This will not be reliable and will produce unexpected results (as you have found).
As the100rabh said, this is generally bad design. Normally an application will present a list of some sort to a user. Four lists for a screen that is 2-5 (~10 for tablets) inches is three too many.
please set your listview as a non scrolling container By using
ls_edu.setScrollContainer(false);
it may help to scroll the list view.