Been using android for about 3 months and always hardcode the width and height of elements in a layout, I know this is considered bad to do so I want to get a better understand of how to use relative layouts to position elements. I have looked at the documentation of relative layout but from my understanding, I cannot get it to work the way I would like. I come asking if anyone can provide help (not just suggesting documentation I have read it) with how I need to use relative layout. This is so I can have something basic to refer to in future work to help with my positioning.
The following is 3 elements contained on a relative layout, 2 expandable lists and 1 listview:
The listviews are all over the place in this example I would like to know how to position them something like this:
this is the current xml, what would I need to add and change to gain this type of layout?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_food_bible"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#606E7F"
tools:context="com.example.mr_br.project.food_bible">
<ExpandableListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/exlistVtype"
android:layout_alignParentTop="true" android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<ExpandableListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/exlistVpref"
android:layout_alignParentTop="true" android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" android:layout_marginLeft="114dp"
android:layout_marginStart="114dp"/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="244dp"
android:id="#+id/listVresult" android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" android:layout_alignParentStart="true"/>
</RelativeLayout>
Thank you for any help.
Just don't use drag and drop and type the code by yourself. Use Ctrl + space and the list with all the attributes will show. Now you just need to know what you what to do. In your example you need one view "android:layout_toRightOf" other so just type right and android studio will automatically show you the attribute that you want. In case of placing a view below another view you can use "android:layout_below".
You can read all the attributes here
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_food_bible"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#606E7F"
tools:context="com.example.mr_br.project.food_bible">
<ExpandableListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/exlistVtype"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<ExpandableListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/exlistVpref"
android:layout_toRightOf="#id/exlistVtype"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" android:layout_marginLeft="114dp"
android:layout_marginStart="114dp"/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="244dp"
android:layout_below="#id/exlistVtype"
android:id="#+id/listVresult" android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
With RelativeLayout, your main tools at hand are:
1)android:layout_above ="#+id/theIdOfWhatYouWantBelowCurrentView"
2)android:layout_alignBottom = "#+id/IDofWhatYouWantTouchingBottomOfThisView
3)android:layout_alignLeft = "#+id/IDofWhatYouWantTouchingLeftOfThisView"
4)android:layout_below = "#+id/theIdOfWhatYouWantAboveCurrentView"
ETC. ETC. Check this: https://www.tutorialspoint.com/android/android_relative_layout.htm
So when using RelativeLayout, you specify the position of all the views relative to each other using the syntax given above. That's basically all to it.
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 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 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
I'm writing an application which displays a list of domain models. The default behavior is displaying those models in a ListView. I'm planning to let the users swap between seeing this data as a list or as a grid using a GridView. What is the idiomatic way to do so?
My domain model is a simple pojo, I created a CustomArrayAdapter for it and a custom row layout which currently looks like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/label" >
</TextView>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#+id/label"
android:text="#+id/text" />
</RelativeLayout>
I wish to use the same ArrayAdapter for both layouts.
The layout of my activity is rather simple:
<RelativeLayout 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:gravity="center_vertical"
tools:context=".MainActivity" >
<!-- what do I put here? -->
</RelativeLayout>
Why not just always use a gridview, and set the columns to one for your "ListView" mode using
android:numColumns or setNumColumns(int) via code?
More info : http://developer.android.com/reference/android/widget/GridView.html
This awesome library is a game changer https://github.com/dexafree/MaterialList