Is there a way to have some elements on the layout which would be called "primary" for example and then have another element to be centred relative to those?
Imagine you have two slide out menus at the left and right of the screen and then a content section in the middle that you want to be always at the center of whatever empty space you have.
So if they're both out, it's at the center but if you open the left one, the main section is pushed to the right to still be in the center of the remaining empty space on the screen.
Therefore the menu sections are "primary" because then they determine where the rest of the elements, i.e. the content section, should be .
So I think I've figured out a way to do this:
Wrap the whole thing in a RelativeLayout
Put the primary ones there
Create the secondary RelativeLayout and make it "toRightOf" or "toLeftOf" the primary one(s) and set it to fill_parent both on height and width with zero margin
Place whatever you want the content to be in another Relative or Linear layout within the last created RelativeLayout and make it to centerInParent
E Voila!
Example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="0dp" >
<!-- this would contain the "content section" -->
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/primaryObject"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="testButton"
/>
</LinearLayout>
</RelativeLayout>
<!-- this would be the primary thing -->
<FrameLayout
android:id="#+id/primaryObject"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true" >
<ImageButton
android:id="#+id/menuPulloutButton"
style="#android:style/Widget.Holo.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/menu_sidebar_button" />
</FrameLayout>
</RelativeLayout>
Related
I'm trying to make a layout with a main area and a bottom button bar. Unfortunately, the main area always overlaps the bottom bar. What am I doing wrong?
The simple code below just contains the main area and the bottom bar, but I can see in the designer that the main area goes to the bottom of the window, despite the constraint
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
This is presumably because I also have to put in the following line:
android:layout_height="match_parent"
Android complains if you don't have this, so I am wondering how the constraints are supposed to work in this case?
Note: I have tried using "wrap_content" instead but in my real view the content is in a ScrollView, and the ScrollView overlaps the buttons unless I hack around with margins. I have to think I am missing aomething?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
app:layout_constraintTop_toTopOf="#+id/layout__main"
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
app:layout_constrainedWidth="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
app:layout_constraintEnd_toEndOf="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:backgroundTint="#color/black"
>
</LinearLayout>
<LinearLayout
app:layout_constraintBottom_toBottomOf="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
android:id="#+id/layout__bottomButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:backgroundTint="#color/teal_200"
>
<Button
android:id="#+id/btn__reset_all_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="0dp"
android:minWidth="0dp"
android:text="Reset"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
app:layout_constraintTop_toTopOf="#+id/layout__main"
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
app:layout_constrainedWidth="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
app:layout_constraintEnd_toEndOf="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="0dp"//match constraints is appropriate here
android:orientation="vertical"
android:backgroundTint="#color/black"
>
you used match parent on the layout__main. Now since the parent is the constraint layout it is going to cover the whole screen. Match constraints( denoted by 0dp) will solve your problem. Match constraints translates as cover as much screen that is available to me defined by the constraints i have
I tried to align my linearlayout at the bottom of my entire layout which is relative, and found the solution here that does it: How to align views at the bottom of the screen?
But why wouldn't this work also?
<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"
tools:context="com.sandbox.activities.ListActivity">
<ListView
android:id="#+id/my_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/search_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/my_listview"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/my_edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Enter Search Term" />
<Button
android:id="#+id/find_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Find"
android:onClick="findThings"/>
</LinearLayout>
If the listview turns out to be short, like 1 row, "search_footer" is just underneath it, and there is a huge gap below it.
1) "search_footer" is told to align at the bottom of the parent, which is the relativelayout. Since the relativelayout's height is match_parent, and it's the root layout, this means the whole height of the screen, so why wouldn't "search_footer" be at the bottom of the screen no matter the size of the listview?
2) Also, if I change the search_footer's height to match_parent, I expected a really tall button, but it remained unchanged-why?
Add to ListView this attribute
android:layout_above="#id/search_footer"
and remove
android:layout_below="#id/my_listview"
attribute from LinearLayout.
You specified that search_footer align to bottom of parent but also to be below the listview, so in the case that the list is short the search footer just stretches in the space between the listview and the bottom of the screen. you want to specify the footer to be aligned to the bottom of the parent and the listview to be above it:
<ListView
android:id="#+id/my_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/search_footer"
/>
<LinearLayout
android:id="#+id/search_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
When you change the height of the search_footer the buttons doe't change because they are set to android:layout_height="wrap_content". Your layout would normally change when you do this however in this case it didn't change either, due to the same reason as above
My Current Implementation
I have a HorizontalScrollView which I create in XML that houses a few LinearLayout children. I have added this code below.
There are two LinearLayout containers with the id's group_one and group_two and these are populated programmatically at run time.
I also fix the width of the HorizontalScrollView at run time depending on the amount of View objects I will be inserting.
This solution works great for when the children fit in the HorizontalScrollView without the need to scroll.
The Issue
As soon as I need to scroll (there are more children than can be displayed within the fixed width HorizontalScrollView) then the scrollbar will not go all the way to the right, even though I can see that the child layout is of the correct width, and I can see the scrollbar just will not go any further.
My Question
Why would there be a limit on the scrollbar moving any further right?
My Code
HorizontalScrollView XML
<!-- THIS IS WHERE THE PLUGIN BUTTONS ARE HOUSED -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"/>
</LinearLayout>
</HorizontalScrollView>
What Is Happening
This is an image of the correct scroll to the left. The edge of the scroll view starts on the right of the red bar. Notice the distance between the two.
This is an image of the incorrect scroll right. Compare the distances between the edges of the scroll view and where the scroll bar is stopping.
This is how I want it to look when I scroll at either end.
I have been playing with this for a while now and finally found the solution.
I was trying to add the left and right margins to the LinearLayout with the ID group_container. However for some reason the HorizontalScrollView was not respecting this and this is why I was seeing this issue.
Instead I added the left and right margins to the group_one and group_two LinearLayouts. Now the HorizontalScrollView respected these and it functions as I expected. Here is my modified code.
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
</LinearLayout>
</HorizontalScrollView>
set padding right to your scrollview like this :
android:paddingRight="20dp"
I have a banner that I am displaying on an Android Layout. On this banner, I have two avatars that I would like to display next to each other, and most importantly, I would like to have them displayed where the midway point of these two avatars on the y-axis is aligned with the bottom of the banner that these avatars sit on top of.
How would you do this?
Edit:
In other words, I'm asking how you could use an parameter like android:layout_below, but instead of it aligning the top of the imageview with the botton of the specified layout, to align the center.
Unfortunately, there is no direct layout parameter to align a center point with another edge. If the height of your avatars is fixed, you could add some padding that is half the height so they all line up; i.e.
<?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="wrap_content">
<ImageView
android:id="#+id/banner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="25dp"
android:src="#drawable/banner" />
<ImageView
android:id="#+id/avatar1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:src="#drawable/horse" />
<ImageView
android:id="#+id/avatar2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:layout_toRightOf="#id/avatar1"
android:src="#drawable/horse" />
</RelativeLayout>
If the heights of those items, however, is dynamic, then you will need to create a custom ViewGroup container so you can measure the avatar heights (in onMeasure()) and apply the padding (or other offset value) at runtime.
Put them in a linear layout, and then give them a width to fill the parent. Then you can use the weight property to disperse the widths equally.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
</LinearLayout>
I'm using a Relative layout as the root or parent container and I have two buttons to place inside this Layout. The buttons need to be placed one on top of the other. The problem is that I want to position these buttons so that they appear below the center of the view but not directly below. That is within the bottom half of the view I want the buttons to appear halfway along that half portion. I tried adding a the buttons as children of a RelativeLayout (that was centered in the middle) inside the parent RelativeLayout and that sort of achieves what I'm trying to but then the Eclipse complains with a warning stating that one set of Relative Layout tags is useless and that I should consider getting rid of it.
Then I tried giving a one of the buttons a top margin with respect to its parent and then placing the other button under the this button with the top margin. This seems to work until I try it out in other virtual devices and I find out that depending on the screen sizes and dimensions it might or might not appear where I want it to (especially not the case with tablet devices).
Ok, so then I'm not sure how to achieve what I want the right way (without warnings or errors). Here's my current code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/default_real" >
<Button
android:id="#+id/sm_panel_email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="300sp"
android:background="#drawable/info_view_email_button" />
<Button
android:id="#+id/sm_panel_web_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sm_panel_email_button"
android:background="#drawable/info_view_web_button" />
</RelativeLayout>
How about using two layouts and the android:layout_weight attribute
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/default_real"
android:orientation="vertical" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/ >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/sm_panel_email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/info_view_email_button" />
<Button
android:id="#+id/sm_panel_web_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sm_panel_email_button"
android:layout_centerHorizontal="true"
android:background="#drawable/info_view_web_button" />
</RelativeLayout>
</LinearLayout>