How can I create layout like this properly?
I want LinearLayout 2 under ViewPager (not inside).
I know there are few ways to archieve this, but what is the best way?
You must set layout_weight your viewpager. You can use this xml copy paste.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></LinearLayout>
<ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></LinearLayout>
</LinearLayout>
Put all your controls in RelativeLayout control
use this in ViewPager control with this attribute
android:layout_below="#+id/linearlayout1"
android:layout_above="#+id/linearlayout2"
android:layout_alignParentBottom="true" on LinearLayout 2.
Related
I mean how can i locate a ImageView in two layouts? i have 2 relative layouts one is up, one is down. The up one has a ImageView but i want half of this ImageView located in down layout. How can i do that?
EDIT::
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_container"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#d2aff4">
<Space
android:id="#+id/center"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<RelativeLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/center"
android:background="#87c96d" />
<RelativeLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
In this scenario the "top" layout needs to be created at last to be displayed on top of the rest of the views. If you need it to have a background colour, you need to apply the colour to the main container.
Here is the result:
I agree with #Booger answer's but If your parent layout is RelativeLayout then add this below property in you ImageView.
android:layout_centerInParent="true"
Or you can use below code to create that kind of layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/gray_font">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent">
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
Take a look at this library https://github.com/umano/AndroidSlidingUpPanel
if you want something easy you can put those layouts in to a parent relative layout and then you can add a image view in parent relative layout as last child and position it how you need
I think you should wrap both your RelativeLayout in another Parent layout, and in that layout, you will place your ImageView (which will span both the other layouts.
Something like this pseudo-code:
<LinearLayout>
<RelativeLayout1>
<RelativeLayout2>
<ImageView gravity=center> //Order counts, this needs to be after the RelativeLayouts to show on top of them
</LinearLayout>
I'm reading a book about Android and I'm stuck here
Here are the instructions:
Use the Real UI project we recently created but let's start with a completely
clean sheet for the layout. Right-click the layout folder in the project
explorer. From the pop-up context sensitive options menu, choose New |
Layout resource file.
Make sure LinearLayout is selected for the Root element.
Name the file list_detail_layout then left-click OK.
In the Properties window, find the orientation property of the
LinearLayout, which is provided by default, and change it to horizontal.
Drag a LinearLayout(vertical) onto the design.
Now drag a LinearLayout(horizontal) onto the design
Select the first (vertical) LinearLayout within the root LinearLayout, find
its layout:weight property, and set it to 40. Set its background to a color of
your choice by finding and left-clicking the background property ellipses ...,
then left-clicking the Color tab and choosing a color.
Select the second (horizontal) LinearLayout within the root LinearLayout,
find its layout:weight property, and set it to 60. We now have two
clearly discernible areas of the screen: one taking up 40%, the other 60%,
as shown next:
Screen Shot
I follow all the steps but I still do not get the result of the image. This is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
If I change both layout_width values to "wrap_content" it works but I don't know why is not mentioned in the book...
The android:layout_weight attribute tells the LinearLayout how to distribute its children. If you give both widgets the same value, but that does not necessarily make them the same width on screen. To determine the width of its child views, LinearLayout uses a mixture of the layout_width and layout_weight parameters.
LinearLayout makes two passes to set the width of a view. In the first pass, LinearLayout looks at layout_width(or layout_height, for vertical orientation). If the value for layout_width for both of the LinearLayout is wrap_content, then each view will get only enough space to draw itself.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
I guess you are a beginner. I want to mention you that writing your own code for UI design is a better practice than drag and drop.
You have to use weightSum in the parent.
It should look like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent
android:weightSum="100">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
When you are using android:layout_weight make sure either you have android:weightSum set in the parent LinearLayout or set the android:layout_width = 0
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="60">
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
I have a FrameLayout with many children. One of the children is a LinearLayout. I want the width of the LinearLayout to match_parent but about 90% so; which means I want to add some sort of paddingLeft/Right or margingLeft/Right. But when I add the padding or margin, it is not applied in the Graphical Layout. How do I do this correctly?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#color/red"
android:marginLeft="20dp"
android:marginRight="20dp"
android:orientation="vertical" >
....
you have
android:marginLeft="20dp"
android:marginRight="20dp"
instead change it to:
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
If it still doesnot work, put this layout inside another layout and set the margins to the other layout.
You worte following code, which is not correct
android:marginLeft="20dp"
android:marginRight="20dp"
Try This :-
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
**android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"**
android:background="#android:color/white"
android:orientation="vertical" >
</LinearLayout>
</FrameLayout>
Similarly you can give margin at Top and Bottom
Im not very good in creating android layouts so I am not able to align the button to the bottom in the MainView.
Picture:
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical">
<ListView android:id="#+id/lv_pizza" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"></ListView>
<Button android:layout_width="fill_parent" android:id="#+id/bt_add"
android:layout_height="wrap_content" android:text="hinzufügen"></Button>
<RelativeLayout android:layout_width="fill_parent" android:id="#+id/relativeLayout2" android:layout_height="fill_parent">
</RelativeLayout>
</LinearLayout>
Please help
This works for a linear layout, note the layout_weight 1 on the list -- that's what pushes the button to the bottom:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView android:id="#+id/lv_pizza"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button android:id="#+id/bt_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="hinzufügen" />
</LinearLayout>
This then looks like this in the UI editor:
Hi you can set like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical">
<ListView android:id="#+id/lv_pizza" android:layout_width="fill_parent"
android:layout_above="#+id/bt_add" android:layout_height="fill_parent" ></ListView>
<Button android:layout_width="fill_parent" android:id="#+id/bt_add"
android:layout_gravity="bottom" android:layout_height="wrap_content" android:text="hinzufügen"></Button>
</RelativeLayout>
Removing the RelativeLayout will push the button to bottom of the screen...
Use a layout_weight for the components inside the LinearLayout. If the ListView has a weight of 1.0, it should push the button to the bottom. I've done this with a ScrollLayout and it works well, allowing the component inside the scroll layout to actually scroll. You could put your ListView into a ScrollLayout to let it grow beyond the visible size.
Also, the second relativelayout also isn't necessary as it doesn't add anything.
You can set a marginTop in the Button until the bottom or change the layout to relative and set the position.
I'm having the following problem;
I have a LinearLayout with in it a ScrollView, in the ScrollView is some custom view. Now I want to put an image in the background of the LinearLayout and keep the image in its original size. But when I set the background property of the LinearLayout it stretches to fit the full screen. How can I make it so that the image keeps its original size?
My xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/some_drawable">
<ScrollView
android:id="#+id/scrollview"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:fillViewport="true">
<some.custom.layout
android:id="#+id/mainLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
</ScrollView>
</LinearLayout>
Code example for Egor's answer:
<FrameLayout
android:id="#+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/background"
/>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
</LinearLayout>
</FrameLayout>
Try using FrameLayout with an ImageView and LinearLayout inside. For example, try changing the alpha of the image and move it to foreground in your FrameLayout, thus the LinearLayout stays on background. Hope this helps!
<RelativeLayout
android:id="#+id/relLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/layoutLogin"
android:layout_alignLeft="#id/layoutLogin"
android:layout_alignRight="#id/layoutLogin"
android:layout_alignTop="#+id/layoutLogin"
android:adjustViewBounds="true"
android:background="#mipmap/ic_photo_bg"
android:scaleType="fitXY" />
<LinearLayout
android:id="#+id/layoutLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</RelativeLayout>
Alternatively to ColdForged's suggestion, you could move from LinearLayout to RelativeLayout and use ImageView to show the image instead of changing background to it. The views in RelativeLayout can interfere unlike in LinearLayout.
You might take a look at the InsetDrawable. Either that or it would likely require you to subclass your layout to draw the way you wish as the background element doesn't have the ability you need.