Horizontal line between two equal width TextViews - android

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>

Related

Set textview below another textview in horizontal linear layout

How to set TextView object tvOperationDesc below tvOperationName
This is my layout xml:
<?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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<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="horizontal" >
<TextView
android:id="#+id/tvOperationName"
android:layout_width="0sp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="center_vertical"
/>
<TextView
android:id="#+id/tvOperationDesc"
android:layout_width="0sp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="center_vertical"
android:layout_below="#+id/tvOperationName"
/>
<EditText
android:id="#+id/txtMultiplier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberDecimal"
android:text="0"
android:textAppearance="?android:attr/textAppearanceSmall" />
<CheckBox
android:id="#+id/cbChkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Use 2 separate horizontal linear layouts in your relative layout and you can adjust the weights and the heights as you like:
<?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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<LinearLayout
android:id="#+id/upLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/tvOperationName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2" />
<EditText
android:id="#+id/txtMultiplier"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberDecimal"
android:text="0"
android:textAppearance="?android:attr/textAppearanceSmall" />
<CheckBox
android:id="#+id/cbChkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/upLayout">
<TextView
android:id="#+id/tvOperationDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"/>
</LinearLayout>
</RelativeLayout>
Textview below textview in horizontal linear layout
Not possible at all. Its clearly mentioned horizontal linear layout. So, you views are aligned horizontally only.
Then
If you set your linear layout orientation to horizontal your views are aligned horizontally & orientation to vertical your views are aligned vertically in linear manner that means one by one.
Solution
One relative layout is enough for your requirements. Have a look at my answer How relative layout views are aligned will help you.
Please try below code.
<TextView
android:id="#+id/tvOperationDesc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Description" />
<LinearLayout
android:id="#+id/secondLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tvOperationName"
android:layout_width="0sp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="center_vertical"
android:text="Name" />
<EditText
android:id="#+id/txtMultiplier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:inputType="numberDecimal"
android:text="0"
android:textAppearance="?android:attr/textAppearanceSmall" />
<CheckBox
android:id="#+id/cbChkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
if you want EditText and Checkbox in the same line as tvOperationName vertically just change orientation of secondLinearLayout to vertical and give gravity="center_horizontal" to secondLinearLayout.
Add another LinearLayout with orientation to vertical, and place both the TextView.
And remove layout_below property inside LinearLayout’s child view, as its useless.
<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="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tvOperationName"
android:layout_width="0sp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="center_vertical"
/>
<TextView
android:id="#+id/tvOperationDesc"
android:layout_width="0sp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="center_vertical"
android:layout_below="#+id/tvOperationName"
/>
</LinearLayout>

Why does my Listview show large spaces even it has little text?

In some ListView's holder I got empty spaces even it has a small text in it.
TextView is set to wrap_content. My listview layout xml item has several buttons. I just set these buttons VISIBILITY.GONE.
<?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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textView"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="photo"
android:id="#+id/photo"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:baselineAligned="false"
android:clickable="false"
android:focusable="false">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New Button"
android:id="#+id/left" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New Button"
android:id="#+id/right" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:baselineAligned="false"
android:clickable="false"
android:focusable="false" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_gravity="center_horizontal"
android:layout_weight="4"
android:gravity="center_horizontal"
android:hint="#string/answer"
android:maxLength="4" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/ok"
android:id="#+id/ok" />
</LinearLayout>
</LinearLayout>
Put the root as wrap_content instead of match_parent for the height.
What will happen in a vertically scrolling listview (read, infinite height available for children) if it's children say they want match_parent?
Can't see your image, but in a RecyclerView, each item's height would be the height of the RecyclerView.
Instead of using "match_parent" in the top use "wrap_content" for height

Aligning listview under textview

So I am trying to align my listviews under my textview headers. However, everything I have changed from changing the layouts or gravity or anything like that seems to now put the listviews directly under their respective header.
Here is what it looks like right now:
Here is the XML that has the headers
<?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">
<!--Header aligned to top -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/header"
android:gravity="center"
android:background="#FC9">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Drive_Number"
android:layout_margin="4dp"
android:textSize="18sp"
android:textColor="#000"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Drive_Distance"
android:layout_margin="4dp"
android:textSize="18sp"
android:textColor="#000"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Drive_Time"
android:layout_margin="4dp"
android:textSize="18sp"
android:textColor="#000"
android:layout_weight="1"
android:gravity="center_horizontal"/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical"
android:background="#005"
android:layout_below="#+id/header"
android:id="#+id/scrollableContents">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
Here is the XML that has the listviews:
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:textSize="20sp"
android:textColor="#CCCCCC"
android:text="Medium Text"
android:id="#+id/Drive_Number_List"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:textSize="20sp"
android:textColor="#CCCCCC"
android:text="Medium Text"
android:id="#+id/Drive_Distance_List"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:textSize="20sp"
android:textColor="#CCCCCC"
android:text="Medium Text"
android:id="#+id/Drive_Time_List"
android:layout_weight="1"
android:gravity="center_horizontal"/>
</LinearLayout>
It seems there are two ways you can achieve the "alignment" that you want.
Align the headers as per the listview items as shown in picture:
Use LinearLayout for headers. Divide the three textviews (in header) equally by using android:layout_weight = 1 and android:layout_width="0dp" for all, and set gravity="left" for the leftmost textview, gravity="right" for rightmost textview and gravity="center_horizontal" for middle one.
Keep everything center aligned in its own one-third of total screen width:
Use LinearLayout for headers as well as listview items. Divide using layout weights and 0dp width as above. Use gravity="center_horizontal" for all items
Note: use the "gravity" attribute, not "layout_gravity"
Try this, you can change the padding if you want
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Header aligned to top -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/header"
android:background="#FC9"
android:orientation="horizontal">
<TextView
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/Drive_Number"
android:layout_margin="4dp"
android:textSize="18sp"
android:textColor="#000"/>
<TextView
android:gravity="center"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/Drive_Distance"
android:layout_toRightOf="#+id/Drive_Number"
android:layout_margin="4dp"
android:textSize="18sp"
android:textColor="#000"/>
<TextView
android:paddingRight="10dp"
android:paddingEnd="10dp"
android:gravity="right"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/Drive_Time"
android:layout_toRightOf="#+id/Drive_Distance"
android:layout_margin="4dp"
android:textSize="18sp"
android:textColor="#000"/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical"
android:background="#005"
android:layout_below="#+id/header"
android:id="#+id/scrollableContents">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>

Android Layout with images and text

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>

Android: included layout not filling parent width

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

Categories

Resources