I am really struggling with my xml layout, even though I have over a year of experience working on android :). Anyway I need to create an xml layout as following:
I tried with this:
<?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"
android:weightSum="100">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50" >
</RelativeLayout>
</LinearLayout>
And everything looks alright till moment i want to add child to some inner layout.
So when i add listView to RelativeLayout, marked with number 3, it doesn't match it's
parent but takes whole screen. How can i add listview to inner layouts 2 and 3 so they
match their boundaries?
Look at this demo code,may be you can do some changes in this and apply it for your use.
directly put this code in your 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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/com_facebook_button_grey_focused" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"
android:layout_margin="10dp"
>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="10dp"
>
<ListView
android:id="#+id/listView2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
</LinearLayout>
Related
I want to add a button at the end of a list view. I have the following xml file. The list view appears with its contents, but the button does not show up.
<?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:minWidth="25px"
android:minHeight="25px">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/myListView" />
<Button
android:text="Project Download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/download" />
</LinearLayout>
The problem is with the attribute android:layout_height="match_parent" in your ListView. match_parent means that the listview will fill all the space. The correct way is:
<?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"
android:minWidth="25px"
android:minHeight="25px">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:weight="1"
android:id="#+id/myListView" />
<Button
android:text="Project Download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/download" />
</LinearLayout>
Your button is not shown because your ListView took the whole space hiding your button as you set its layout_height to match_parent. match_parent will take the whole available space. So change it to wrap_content like this:
<?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"
android:minWidth="25px"
android:minHeight="25px">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_parent"
android:id="#+id/myListView" />
<Button
android:text="Project Download"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/download" />
</LinearLayout>
wrap_content will wrap your view to the least available height/width without hiding anything or making anything unclear.
i have the same problem, and solved.
you only need wrap that layout into ScrollView
<ScrollView 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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_transaction_history"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v7.widget.RecyclerView>
<Button
android:id="#+id/btn_history_load_more"
style="?borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:paddingBottom="#dimen/margin_big"
android:paddingTop="#dimen/margin_large"
android:text="#string/text_btn_load_more"
android:textColor="#009CDE"
android:textSize="#dimen/text_size_medium" />
</LinearLayout>
</ScrollView>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<Button
android:layout_alignParentBottom="true"
android:text="Project Download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/download" />
<ListView
android:layout_above="#id/download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/myListView" /></RelativeLayout>
I am doing an user interface in Android.
My idea is divide this interface in three equals parts (this is easy, three layouts with weight), but I want to put a images in interesctions of these layouts.
For example an image that overlapes some space in layout1 and layout2, and the same in 2 and 3.
How can do this? My code:
<LinearLayout 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="fill_parent"
android:orientation="vertical"
android:weightSum="1.0">
<LinearLayout
android:id="#+id/first"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33">
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33"></LinearLayout>
<LinearLayout
android:id="#+id/third"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33"></LinearLayout>
</LinearLayout>
And my idea: Android: Placing ImageView on overlap between layouts
Thanks
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="6.0" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="6.0" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:orientation="vertical" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/firstDividerLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0" >
<ImageView
android:id="#+id/firstDividerImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/secondDividerLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0" >
<ImageView
android:id="#+id/secondDividerImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0" >
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
Note that I wrapped your original LinearLayout in RelativeLayout and then I added another LinearLayout with 'dividers'. Dividers size is set by weights precisely so that it overlays your sections in the center.
This is the result (if you set red background for your 'second' layout):
Three options:
Make the view in between also percent. i. e. Each of your
LinearLayouts gets a weight of 0.30 and your views in between get a
weight of 0.05
Put the view on top of your LinearLayout 2 and 3 (not exactly same
height of each of them then)
Do it programmatically, in code set the height of each of them.
I'm trying to design something like that :
Currently i'm having issue putting the button at "the middle" of the two layouts reunion point. Is there a way i do this ?
Thanks.
Here is a way to do it
<?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"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#FF0000">
<!-- TO ADD CONTENT HERE -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#FFFF00"
android:weightSum="0.5">
<!-- TO ADD CONTENT HERE -->
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#000000"
android:text="TEST"
android:textColor="#FFFFFF"/>
</RelativeLayout>
OUTPUT:
You can change the layout height from android:layout_weight="0.5"
you can use RelativeLayout for your parent and try adding twoLinearLayouts , one below another and set their heights, now place a Button in your RelativeLayout and set android:layout_centerInParent="true" for your Button .
and if you want to use weight for layouts, instead of adding two LinearLayout to your RelativeLayout, add one LinearLayout with weightSum=100 and then add two LinearLayouts to it with custom weights.
for your case , you have to do sth like this :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:background="#f00" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#0f0" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="test" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I'm trying to position four RelativeLayouts on the screen equally as shown on the image below. I just can't seem to get anywhere. Each one will contain a text label and a button centred in their quadrant. I've tried placing the four inside RelativeLayout with the alignComponent values set appropriately and alignParent values set to Left/Right and Top/Bottom. I've also tried with just the alignComponent set and just alignParent set but to no avail.
It should look like this,
Since you want to use RelativeLayout, the easiest way is to use vertical and horizontal struts (which are invisible) and use those as anchors for your four RelativeLayouts children. This approach is definitely more efficient than nested LinearLayouts with weights. You should probably read this before nesting LinearLayouts with weights.
A snippet from the above link:
Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.
So for using RelativeLayouts with struts, your XML could be like this:
<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="${relativePackage}.${activityClass}" >
<View
android:id="#+id/horizontalStrut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerVertical="true" />
<View
android:id="#+id/verticalStrut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/horizontalStrut"
android:layout_toLeftOf="#id/verticalStrut"
android:background="#color/red" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/horizontalStrut"
android:layout_toRightOf="#id/verticalStrut"
android:background="#color/black" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalStrut"
android:layout_toLeftOf="#id/verticalStrut"
android:background="#color/blue" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalStrut"
android:layout_toRightOf="#id/verticalStrut"
android:background="#color/green" >
</RelativeLayout>
</RelativeLayout>
Try This Layout.. It Could Help You...
<?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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/black" >
<!-- put your stuff here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/red" >
<!-- put your stuff here -->
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/white" >
<!-- put your stuff here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/green" >
<!-- put your stuff here -->
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Sample Output..
You can easily done it using LinearLayout or tableLayout,
SAmple shows using LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#FF0000" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#331323" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#662200" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#FF8800" >
</LinearLayout>
</LinearLayout>
You can use LinearLayout then set android:weightSum for your parent layout then you can set now your layout_weight for your quadrants.Like this..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum = "2"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum="2"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/black" >
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/red" >
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum="2"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/white" >
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/green" >
</RelativeLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0B6121"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#DF013A">
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#0080FF">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#A901DB"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
I need to create a horizontal layout as follows :
I can set the total width of the layout of C using android:layout_width="match_parent" but I'm completely stumped at setting the rest of the layouts. Any help is highly appreciated.
The whole app is set to run on a horizontal layout only, if that helps in decide what method to set the layouts.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="90"
android:orientation="horizontal"
android:weightSum="100" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="50"
android:background="#FF0000" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="50"
android:background="#00FF00" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="#FFFF00" >
</LinearLayout>
</LinearLayout>
The trick is to use LinearLayout's with a certain weight like this:
<?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"
android:weightSum="10">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<View
android:id="#+id/view_A"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<View
android:id="#+id/view_B"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<View
android:id="#+id/view_C"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="9" />
</LinearLayout>