How to add FrameLayout inside LinearLayout - android

Hi i am new for android in my app i am adding Frame-layout inside LinearLayout but Frame-Layout and it's inside fields are not adding
my code is below please help me some one
main.xml:-
<?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="vertical">
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent'"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_weight ="1"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
android:text="something" />
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#android:color/holo_red_light"/>
</FrameLayout>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/frame" />
</LinearLayout>

I think you misunderstand the purpose of FrameLayout.
http://developer.android.com/reference/android/widget/FrameLayout.html
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other.
You are trying to put two items inside of it. I would suggest removing the FrameLayout. You have no need of it.
<?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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button" />
</FrameLayout>
</LinearLayout>
This works for displaying a single button, but there's no point in having it there.

Related

How to customize the orientation of individual elements in a custom linear layout in a recyclerView Android Studio?

I'm trying to change the alignment of the row layout elements in a linear RecyclerView this is my 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="wrap_content">
<ImageView
android:layout_width="120dp"
android:layout_height="94dp"
app:srcCompat="#mipmap/ic_launcher_round"
android:id="#+id/taskThumbnailImg"
android:layout_weight="1"
/>
<TextView
android:layout_width="227dp"
android:layout_height="wrap_content"
android:id="#+id/taskCustomerName"
android:layout_weight="1"
android:textSize="30sp"/>
<TextView
android:id="#+id/taskLocation"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:layout_weight="1"/>
</LinearLayout>
Which currently displays Horizontally as:
But this is how I wish to create a layout:
This is neither vertical or horizontal. What do I need to alter to create this layout?
I appreciate the help!
LinearLayout will let you add views either horizontally or vertically. Though you can achive this usig LinearLayout, it's not recomended since more effeciant layouts are exists.
Try to learn different Layouts android uses. Then you'll understand better which will suits you.
I'll suggest simple RelativeLayout or ConstraintLayout for complex cases.
You can use a Linear Layout inside the Linear layout to align the items horizontally. Please add margins and widths for the TextViews as you need.
<?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="wrap_content">
<ImageView
android:layout_width="120dp"
android:layout_height="94dp"
app:srcCompat="#mipmap/ic_launcher_round"
android:id="#+id/taskThumbnailImg"
android:layout_margin="5dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="taskCustomerName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/taskCustomerName"
android:layout_weight="1"
android:textSize="30sp"/>
<TextView
android:text="taskLocation"
android:id="#+id/taskLocation"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

Is it possible to make two layouts share one ImageView?

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>

Stretch and fill middle Layout Android

I have a Main Relative Layout(height,width=fill parent) that has 3 layouts inside it:
1st: Frame Layout(width=fill_parent/height=wrap_content)
2nd: Linear Layout(width=fill_parent/height=wrap_content/layoutbelow 1st)
3rd: Relative Layout(height=wrap_content/width=fill parent/layout_alignParentBottom="true"/ layoutbelow 2nd)
I want the 3rd layout to be at the bottom of the screen and 1st at the top of the screen and 2nd to fill the space in between. How do I do this? I followed this link:Android LinearLayout fill-the-middle and tried setting layout_height="0px" and layout_weight="1" but it did not work. Can anyone please help me with this?
Thanks
IIRC RelativeLayout doesn't support layout_weight.
So you need something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_wight="1" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Try this :
1st: Frame Layout(width=fill_parent/height=wrap_content)
2nd: Linear Layout(width=fill_parent/height=wrap_content/layoutbelow 1st/layoutabove 3rd)
3rd: Relative Layout(height=wrap_content/width=fill parent/layout_alignParentBottom="true")
For Example :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnButton1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="1"/>
<Button
android:id="#+id/btnButton2"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="2"
android:layout_below="#+id/btnButton1"
android:layout_above="#+id/btnButton3"/>
<Button
android:id="#+id/btnButton3"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="3"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

Android ScrollView and buttons at bottom of the screen

I want to implement this: A ScrollView that contains many elements (ImageViews, TextViews, EditTexts etc) and then after the ScrollView some buttons (which are custom ImageViews) that appear always exactly at the bottom of the screen.
If I use the android:fillViewport="true" attribute, then if the elements of the ScrollView are too big to fit in the screen size the buttons get invisible . If I use the android:Weight=1 attribute then the ScrollView gets only 50% of the Screen when the screen is big and it can fit (I want the buttons to take a small percentage, about 10%). If I set the android:Weight to bigger values then the buttons appear very small.
Please help! Maybe it is something simple that I overlooked but I’ve been banging my head for hours!
Just created and tested it. Looks like you want.
<?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/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button2"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons">
<!--Scrollable content here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="test text"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
<?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="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hallo Welt"
/>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go next page"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
This worked for me. Give the scroll view a weight of 1. Put all the other widgets following the scroll view in a layout. The scroll view will grow enough to not block the rest.
Widgets in scroll view and rest at bottom
scrollview cannot fit the screen because you put it on a linear layout, so linear layout fit in the screen,
just try to make scrollview as root elemen on xml layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Here you can put some XML stuff and BOOM! your screen fit to scrollview -->
</LinearLayout>
</ScrollView>
If you do not want to use RelativeLayout, it is better to use LinearLayout. This method is better in my opinion.
Just set the layout_weight to one

Android: How can you align a button at the bottom and listview above?

I want to have a button at the bottom of the listview.
If I use relativeLayout/FrameLayout, it aligns but listView goes down to very botton.
(Behind the button at the bottom)
FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
</FrameLayout>
RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</RelativeLayout>
</RelativeLayout>
Above two codes only work like the first image. What I want is second image.
Can anybody help?
Thank you.
A FrameLayouts purpose is to overlay things on top of each other. This is not what you want.
In your RelativeLayout example you set the ListViews height and width to MATCH_PARENT this is going to make it take up the same amount of space as its parent, and thus take up all of the space on the page (and covers the button).
Try something like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
The layout_weight dictates how the extra space is to be used. The Button does not want to stretch beyond the space it requires, so it has a weight of 0. The ListView wants to take up all of the extra space, so it has a weight of 1.
You could accomplish something similar using a RelativeLayout, but if it is just these two items then I think a LinearLayout is simpler.
<?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="#ffffff"
>
<ListView android:id="#+id/ListView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
</ListView>
<FrameLayout android:id="#+id/FrameLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:layout_gravity="center_horizontal">
</Button>
</FrameLayout>
</LinearLayout>
Here is the design you are looking for.
Try it.
I needed two buttons side-by-side at the bottom. I used a horizontal linear layout, but assigning android:layout_height="0dp" and android:layout_weight="0" for the buttons' linear layout didn't work. Assigning android:layout_height="wrap_content" for just the buttons' linear layout did. Here's my working layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/new_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New" />
<Button
android:id="#+id/suggest_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Suggest" />
</LinearLayout>
</LinearLayout>
RelativeLayout will ignore its children android:layout_width or android:layout_height attributes, if the children have attributes that properly define their left and right or top and bottom values, respectively.
To achieve the result on the right image, showing the list above the button, your layout should look like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#android:id/button1"
android:layout_alignParentTop="true"/>
<Button
android:id="#android:id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#android:string/ok"/>
</RelativeLayout>
The key is to define android:layout_alignParentTop (defines top value) and android:layout_above (defines bottom value) in your RecyclerView. This way, RelativeLayout will ignore android:layout_height="match_parent", and the RecyclerView will be placed above the Button.
Also, make sure you look into android:layout_alignWithParentIfMissing, if you have a more complex layout and you still need to define these values.
I am using Xamarin Android, and my requirement is exactly the same as William T. Mallard, above, i.e. a ListView with 2 side-by-side buttons under it.
The solution is this answer didn't work in Xamarin Studio however - when I set the height of the ListView to "0dp", the ListView simply disappeared.
My working Xamarin Android code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/ListView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_above="#+id/ButtonsLinearLayout" />
<LinearLayout
android:id="#id/ButtonsLinearLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
I aligned ButtonsLinearLayout to the bottom of the screen, and set the ListView to be above ButtonsLinearLayout.
#jclova one more thing you can do is use layout-below=#+id/listviewid in relative layout
In your relative layout height of listview is match_parent which is fill_parent(for 2.1 and older) so best solution is if you want to use relative layout then first Declare your button then your list view, make list view position as above your button id, If you want button always at bottom then make it alignParentBottom..
Snippet is
<RelativeLayout
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:id="#+id/rl1"><Button
android:layout_width="MATCH_PARENT"
android:layout_height="WRAP_CONTENT"
/><ListView
android:layout_width="MATCH_PARENT"
android:layout_height="0"
android:layout_above="#id/listview"/></RelativeLayout>
This prevents your list view taking whole place and make your button appear..
This will be the best and the most simple solution to the problem. Just add android:layout_above="#id/nameOfId" in the layout that you want to move above with respect to that 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"
tools:context="com.sumeru.commons.activity.CommonDocumentUploadActivity">
<ListView
android:id="#+id/documentList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/verifyOtp" />
<com.sumeru.commons.helper.CustomButton
android:id="#+id/verifyOtp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/otp_verification" />
</RelativeLayout>

Categories

Resources