I have a main layout in which I include two inner layouts. I am specifying the width of the included layouts to match_parent but they don't occupy the entire width of the parent.
I may have more components in each inner LinearLayout for e.g., three left buttons and three right buttons. Below is a simplified example of my code
See example below:
main_layout.xml
<LinearLayout 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:paddingTop="5dp"
android:baselineAligned="false"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.95" >
<TableRow
android:id="#+id/tableRow1"
android:layout_weight="0.8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp" >
<include layout="#layout/child_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_weight="0.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp" >
<include layout="#layout/child_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="0.05"
android:gravity="center"
android:orientation="vertical">
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Bottom" />
</LinearLayout>
</LinearLayout>
child_layout
<?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"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/leftLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Left" />
</LinearLayout>
<LinearLayout
android:id="#+id/rightLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="vertical" >
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Right" />
</LinearLayout>
</RelativeLayout>
Notice that the left and right buttons are overlapped in the image.. How do I expand the included layout to fill the entire width of the parent so that the left and right buttons appear on left and right. Thank You.
You can also get rid of several LinearLayouts and RelativeLayout and do this instead:
<?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="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Left" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" />
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Right" />
</LinearLayout>
In your child layout, take out your LinearLayouts then assign them to left and right of parent
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Left"
android:layout_alignParntLeft="true" />
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Right"
android:layout_alignParntRight="true"/>
If I understand what you want then this should work. This will get them on the left and right but depending on if you want them on the same "line" or above or below each other then there are other attributes you can set
RelativeLayout
LinearLayout can be very easy and useful when needed but using a RelativeLayout can often times eliminate nested LinearLayouts and useless ViewGroups
Related
This is code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
I want to practice a layout in android studio and I'm getting an error while implementing the code.
This is the text which goes outside the mobile screen:
Why does the blue box go outside the mobile screen?
You're not properly setting the layout. The childViews of your parentView(LinearLayout) was aligned horizontally without setting the layout weight. You should read the documentation on LinearLayout. However, to fix your layout, you can add another container to hold the first row of your layout to make the second row visible on the screen. Your current code contains all the childViews in a single row which makes the other views not visible. Try the code below:
<?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:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
You are setting the layout_width of each view yourself. You should know that there is a maximum width of screen that is available. Moreover, you are setting the width of button as match_parent that is not proper way when the neighbouring views have some fixed width. If your are using LinearLayout try layout_weight attribute. Play around and try to experiment.
For example:
<?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">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingLeft="0dp"
android:paddingTop="10dp"
android:text="Email:"
android:textSize="30dp" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="2"
android:singleLine="true" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingTop="10dp"
android:text="Login" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
I want my reset button to be at bottom and horizontally centered, but layout_gravity is not working, only one of them is working.
I know it can be done by choosing RelativeLayout as my parent layout but I want to do it with LinearLayout as my parent layout.
I just want reset button as bottom and horizontally centered rest everything is fine.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="com.example.android.courtcounter.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="TEAM A" />
<TextView
android:id="#+id/team_a_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="0" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button3"
android:text="+3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button2"
android:text="+2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button1"
android:text="Free Throw" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="TEAM B" />
<TextView
android:id="#+id/team_b_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="0" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button3_b"
android:text="+3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button2_b"
android:text="+2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button1_b"
android:text="Free Throw" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:onClick="resetButton"
android:padding="8dp"
android:text="RESET" />
</LinearLayout>
Use this instead if you don't want to go completely relative (inside the parent Linear Layout):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:onClick="resetButton"
android:padding="8dp"
android:text="RESET"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
or if you don't want to keep the reset button inside a relative layout, there doesn't seem to be a solution.
You can check this out as well: How to align views at the bottom of the screen?
Since the rest of your ViewGroups in that layout fill the parent's width, you could simply set the parent LinearLayout's gravity to center_horizontal and it should line up properly, without affecting the other children:
<LinearLayout
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:orientation="vertical"
android:gravity="center_horizontal"
tools:context="com.example.android.courtcounter.MainActivity">
Edit: I didn't notice you also wanted it at the bottom... This can be achieved with an invisible weighted View between your content and the bottom:
...
<View
android:layout_width="1dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="resetButton"
android:padding="8dp"
android:text="RESET" />
</LinearLayout>
Edit 2: Removed layout_gravity on your button since it no longer applies.
I am trying to make a layout with an image on the left side, then a text, and two images on the right side. I show you how it likes now:
I want to put the two right icons on the right side, next to the limit of the screen. Then, if you see, when the text has more than one line, the two icons disappear and when the text is too long the icons are very small. I want a static space for every one of the icons.
<?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="wrap_content"
android:orientation="horizontal"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_marginRight="6dip"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:focusable="false"
android:focusableInTouchMode="false"
android:contentDescription="#string/cdLogo" />
<LinearLayout
android:id="#+id/lista2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:paddingRight="20dip"
android:layout_toRightOf="#id/icon"
android:layout_marginRight="30dip">
<TextView
android:id="#+id/tituloevento"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left"
android:textStyle="bold" />
<TextView
android:id="#+id/distritoevento"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left"
android:textSize="12sp"/>
<TextView
android:id="#+id/coorp0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/coorp1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/esgratis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:id="#+id/caracteristicas"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_toRightOf="#id/lista2"
android:layout_alignParentRight="true">
<ImageView
android:id="#+id/iconoMapa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cdTieneCoor"
android:layout_weight="0.5"/>
<ImageView
android:id="#+id/iconoGratis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cdGratisPago"
android:layout_weight="0.5"/>
</LinearLayout>
</RelativeLayout>
I suggest you to use a LinearLayout as the top container, and distribute the space of the child elements with weight attributes. When using weight, you must set layout_width to 0dp for horizontal layouts or layout_heigth to 0dp for vertical layouts.
For example:
<?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:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" >
</LinearLayout>
</LinearLayout>
I have this layout which is a row item of a ListView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:clickable="true"
android:gravity="center" >
<ToggleButton
android:id="#+id/taskActiveToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="ToggleButton" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/taskNameTextView"
android:layout_width="200dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/taskScheduleTextView"
android:layout_width="200dp"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="#+id/taskMenuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="..." /></LinearLayout>
I am having troubles adding another button to left of the (...) button.
I want to add the button so the row will keep its proportions (take all width of the line)
Any ideas?
As far as I can see, you are using horizontal LinearLayout as a root layout for your items. I would change it to RelativeLayout. Also if you need your layout occupy the whole width - you need to get rid of 200dip hardcoding and replace it with match_parent
Here is what I got using RelativeLayout:
<?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">
<ToggleButton
android:id="#+id/taskActiveToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_alignParentLeft="true"
android:text="ToggleButton" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/taskActiveToggleButton"
android:layout_toLeftOf="#+id/anotherButton"
android:layout_centerVertical="true"
android:orientation="vertical" >
<TextView
android:id="#+id/taskNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text" />
<TextView
android:id="#+id/taskScheduleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sub Text"/>
</LinearLayout>
<Button
android:id="#+id/anotherButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_toLeftOf="#+id/taskMenuButton"
android:text="But2" />
<Button
android:id="#+id/taskMenuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:text="..." />
</RelativeLayout>
I have a LinearLayout that fills the whole screen horizontally. It has two TextViews with layout_weight of 1. Now I want to add a one dp wide line seperating these two elements. How do I add, for example, a View element with width of one dp?
This one could be used as the View.
Vertical line using XML drawable
Here's my layout for the relevant part.
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/actionSave"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="Save" />
<TextView
android:id="#+id/actionCancel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="Cancel" />
</LinearLayout>
Just add a View with width 1dp between the two TextViews
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/actionSave"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="Save" />
<View
android:layout_width="2dp"
android:layout_height="wrap_content"
android:background="#123456" />
<TextView
android:id="#+id/actionCancel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="Cancel" />
</LinearLayout>