Android: align labels and buttons in multiple lines - android

I go nuts on that layout. So here's what I'm trying to achieve. A simple layout having a label (TextView) or edit field (EditText) on the left side and a button on the right side. I want all labels and all buttons vertically adjusted - meaning all buttons of the same width and all labels too.
But how to do this? I tried a LinearLayout with vertical orientation and each line as another LinearLayout with horizontal orientation and inside that the label has a layout_weight of 8 and the button is 1. But still this does not guarantee what I want!
This is the current result. You can see that the buttons are not nicely aligned.
This is my layout:
Here's the XML:
<?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"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="test_test_blabla"
android:layout_weight="8"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_scan"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_weight="1"
android:layout_gravity="right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="17:35"
android:layout_weight="8"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_pick_time"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_weight="1"
android:layout_gravity="right"
/>
</LinearLayout>
</LinearLayout>

Using a RelativeLayout you can achieve the desired layout as:
<?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:orientation="vertical">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/textView"
android:layout_toLeftOf="#+id/button"
android:fontFamily="sans-serif-thin"
android:hint="test_test_blabla"
android:textSize="24sp"/>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/textView"
android:fontFamily="sans-serif-thin"
android:hint="Scan"
android:textSize="24sp"/>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignParentLeft="true"
android:layout_below="#+id/editText"
android:layout_toLeftOf="#+id/button2"
android:fontFamily="sans-serif-thin"
android:text="17:35"
android:textSize="24sp"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/button"
android:fontFamily="sans-serif-thin"
android:hint="Pick Time"
android:textSize="24sp"/>
</RelativeLayout>
The key layout attribute used to match the size is android:layout_alignRight="#+id/textView" on the first EditText referencing the TextView just below.
Result:

According to people's advise, I used the TableLayout. But still the label (EditText) is not using the whole space til the button.
That's the XML:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="test_test_blabla"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_scan"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="17:35"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_pick_time"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
<TableRow>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="#string/hint_car_location_address"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_gps"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
</TableLayout>

Edit:
try RelativeLayout
something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:columnCount="2">
<EditText
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#android:id/button1"
android:text="test"/>
<Button
android:id="#android:id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingLeft="28dp"
android:paddingRight="28dp"
android:text="set"
/>
<TextView
android:id="#android:id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#android:id/button1"
android:layout_alignBottom="#android:id/button2"
android:layout_below="#android:id/button1"
android:gravity="center_vertical"
android:text="some test"/>
<Button
android:id="#android:id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/button1"
android:layout_alignLeft="#android:id/button1"
android:layout_alignRight="#android:id/button1"
android:text="Scan"
/>
</RelativeLayout>

5+ years later...OP is probably an expert in android xml by now. Nevertheless, to help with the question, linear layout is doable. I've added another linear layout to contain all the rows so that the margins can be adjust in this additional layout.
When weight sum is used, the corresponding variable (width / height) has to be 0dp so that it can be adjust accordingly.
<?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="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="9">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:fontFamily="sans-serif-thin"
android:hint="test_test_blabla"
android:textSize="24sp" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:fontFamily="sans-serif-thin"
android:hint="#string/action_scan"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal"
android:weightSum="9">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:fontFamily="sans-serif-thin"
android:text="17:35"
android:textSize="24sp" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:fontFamily="sans-serif-thin"
android:hint="#string/action_pick_time"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Related

ListView with TextView and Buttons

My ListView consists of three TextViews, say T1, T2 and T3. I also have two buttons, B1 and B2
I want them to Appear like this:
B1 [Space Between Buttons] B2
T1
T2
T3
The T1 etc are on screen under the buttons and not just under B1.
Below is my xml which I tried to change as per many answers to questions on SO.
<?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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Left Button"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Right Button"
/>
</LinearLayout>
<TextView
android:id="#+id/engText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:typeface="serif"/>
<TextView
android:id="#+id/arabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:typeface="sans"
/>
<TextView
android:id="#+id/refText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp" />
<ListView
android:id="#+id/hadithView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
Can anyone please help.
Thank you
EDIT
I am using CursorAdapter to populate the views. The B1 and B2 are repeated with TextViews. I would like to keep B1 and B2 on top(fixed) and be able to scroll the text views(without their own buttons)
EDIT 2
I fixed the Buttons issue. Though I need two buttons fixed at the top too. I removed them and now have two buttons attached with text views which is what I do need later on anyway.
Now The Text is being imposed on each other.
Here is my new 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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="0sp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:text="Left Button" />
<Button
android:id="#+id/button2"
android:layout_width="0sp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:text="Right Button" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/engText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:typeface="serif"/>
<TextView
android:id="#+id/arabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:typeface="sans"
/>
<TextView
android:id="#+id/refText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp" />
</RelativeLayout>
</LinearLayout>
this is a very quick fix - but it gives what you want. Basically: Your list view is taking over the whole screen - and you dont' t seem to need it according to your question. You can use a ListView at the top with an empty TextView as your "space" but then you have to give the TextViews below attributes as to where they should be placed in the RelativeLayout (your main layout). I have quickly added attributes with respect to the LinearLayout (for the first TextView) and then with respect to the above TextView for all below. You can do it differently - and in general, I think, you should look up the documentation for xml files in android and/or just play around a bit. It is all pretty logical, but I also struggled when I started. Here is my code:
<?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:orientation="vertical" >
<LinearLayout
android:id="#+id/linLay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:text="Left Button"
/>
<TextView
android:layout_width="10dp"
android:layout_height="wrap_content"
android:layout_weight="0.1"/>
<Button
android:id="#+id/button2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:text="Right Button"
/>
</LinearLayout>
<TextView
android:id="#+id/engText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:layout_below="#+id/linLay"
android:layout_marginTop="10dp"
android:textSize="15sp"
android:text="My dummy text"
android:typeface="serif"/>
<TextView
android:id="#+id/arabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:layout_below="#+id/engText"
android:layout_marginTop="10dp"
android:textSize="15sp"
android:text="My dummy text"
android:typeface="sans"
/>
<TextView
android:id="#+id/refText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:layout_below="#+id/arabText"
android:layout_marginTop="10dp"
android:textSize="15sp"
android:text="My dummy text"/>
</RelativeLayout>
you can use RelativeLayout and keep different sections in different RelativeLayout relative to each other and use its attribute layout_below
<RelativeLayout 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="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
//give some id
android:id="#+id/one">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Left Button"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Right Button"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/one">
<TextView
android:id="#+id/engText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:typeface="serif"/>
<TextView
android:id="#+id/arabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:typeface="sans"
/>
<TextView
android:id="#+id/refText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp" />
<ListView
android:id="#+id/hadithView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
It looks like you should use LinearLayout and not RelativLayout.
Because the order of your items are just linear vertical ordered.
Here is the code:
<?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="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Left Button"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Right Button"
/>
</LinearLayout>
<TextView
android:id="#+id/engText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:text="T1"
android:typeface="serif"/>
<TextView
android:id="#+id/arabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:text="T2"
android:typeface="sans"
/>
<TextView
android:id="#+id/refText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:text="T3"
android:textSize="15sp" />
<ListView
android:id="#+id/hadithView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Left Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Right Button" />
</LinearLayout>
Doing this will set the two buttons next to each other, and then you can place all under elements under this linearlayout.
Changes made:
LinearLayout orientation changed to horizontal
Linearlayout holds weigthSum of 1
layout_width of both buttons set to wrap_content (They will still hold their place because of 0.5 weight - so they both split the view.
If you want more space between buttons put som margin on the left button like this.
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp"
Fixed the issue.
This is my xml that I used with the CursorAdapter
<?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="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="0sp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:text="Left Button" />
<Button
android:id="#+id/button2"
android:layout_width="0sp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:text="Right Button" />
</LinearLayout>
<TextView
android:id="#+id/engText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:typeface="serif"/>
<TextView
android:id="#+id/arabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp"
android:typeface="sans"
/>
<TextView
android:id="#+id/refText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10sp"
android:textSize="15sp" />
</LinearLayout>
And this is my Activity 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" >
<ListView
android:id="#+id/hadView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>
Thank you everyone who responded.

RelativeLayout limits after adding ScrollView

I am adding a ScrollView as parent of a RelativeLayout, but when I do so my RelativeLayout limits to a little area and I can't change it.
When I change the padding I can fix the things in their place, but it is not a good way.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relatOne"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp">
<!--textArea Title-->
<EditText
android:id="#+id/textArea"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/textView"
android:hint="Write your message here!"
android:linksClickable="true"
android:maxLines="6"
android:paddingLeft="20dp"
android:scrollbars="vertical"
android:textColorHint="#8e8e8e" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/textArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="Text:"
android:textColor="#color/textAreaTitle"
android:textSize="20sp" />
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/btnColor"
android:onClick="btnSetter"
android:text="Set on Channel"
android:textAllCaps="false"
android:textColor="#ffffffff"
android:textSize="20sp"
android:textStyle="bold"
/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
You should make ScrollView as parent Root element not as Child in your case Change your Layout like this
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:gravity="center">
<!--textArea Title-->
<EditText
android:id="#+id/textArea"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:hint="Write your message here!"
android:linksClickable="true"
android:maxLines="6"
android:paddingLeft="20dp"
android:scrollbars="vertical"
android:textColorHint="#8e8e8e" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_alignBaseline="#id/textArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="Text:"
android:textSize="20sp" />
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:background="#000"
android:onClick="btnSetter"
android:text="Set on Channel"
android:textAllCaps="false"
android:textColor="#ffffffff"
android:textSize="20sp"
android:textStyle="bold"
/>
</LinearLayout>
</ScrollView>
Change Your Linear Layout gravity and margin according to your need
Screenshot of problem
I have this problem now after making ScrollView to root parent.

Combine two LinearLayouts into one LinearLayout

I have an twoLinearLayout inside the RelativeLayout. I just want to do this LinearLayout inside the one LinearLayout so that my child control will display inside 1 LinearLayout. so that I can make group of this LinearLayout and display
with differnt background color android:background="#drawable/my_custom_background so that all child control coupled into it.
see the below screen shot
code
<?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:orientation="vertical"
android:background="#0B95BA"
android:minWidth="25px"
android:minHeight="25px">
<LinearLayout
android:id="#+id/linearLayoutCont"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="5dp">
<TextView
android:id="#+id/txtViewCont"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Contact Billing"
android:gravity="center"
android:textSize="25sp"
android:textColor="#FFFFFF" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutContBillingCall"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#id/linearLayoutCont"
android:layout_marginTop="5dp">
<Button
android:text="Call"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#FFFFFF"
android:layout_gravity="right"
android:background="#drawable/ButtonStyle"
android:id="#+id/btnContCall"
android:drawableLeft="#drawable/PhoneCall" />
<Button
android:text="Email"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#FFFFFF"
android:layout_gravity="right"
android:background="#drawable/ButtonStyle"
android:id="#+id/btnEmail"
android:drawableLeft="#drawable/Email" />
</LinearLayout>
</RelativeLayout>
and o/p should be above pic like Contact at center and two button (Call and Email) are below the contact same corner. also one thing I want to ask how I can create a space between these two buttons.
You need to only take one Linear Layout instead of two. Your Text View is child of your Relative Layout. I have applied some Modification to your Layout.
Refer this.
<?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:background="#0B95BA">
<TextView
android:id="#+id/txtViewCont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="Contact Billing"
android:textColor="#FFFFFF"
android:textSize="25sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtViewCont"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="#+id/btnContCall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:drawableLeft="#mipmap/ic_launcher"
android:drawablePadding="5dp"
android:text="Call"
android:textColor="#FFFFFF"
android:textSize="15sp" />
<Button
android:id="#+id/btnEmail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:drawableLeft="#mipmap/ic_launcher"
android:drawablePadding="5dp"
android:text="Email"
android:textColor="#FFFFFF"
android:textSize="15sp" />
</LinearLayout>
</RelativeLayout>
Note : Apply your own Drawables and Background as you have in your OP.
Replace relative with linear you will get your desired output.
<?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:background="#0B95BA"
android:minWidth="25px"
android:minHeight="25px">
<LinearLayout
android:id="#+id/linearLayoutCont"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="5dp">
<TextView
android:id="#+id/txtViewCont"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Contact Billing"
android:gravity="center"
android:textSize="25sp"
android:textColor="#FFFFFF" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutContBillingCall"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#id/linearLayoutCont"
android:layout_marginTop="5dp">
<Button
android:text="Call"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#FFFFFF"
android:layout_gravity="right"
android:background="#drawable/ButtonStyle"
android:id="#+id/btnContCall"
android:drawableLeft="#drawable/PhoneCall" />
<Button
android:text="Email"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#FFFFFF"
android:layout_gravity="right"
android:background="#drawable/ButtonStyle"
android:id="#+id/btnEmail"
android:drawableLeft="#drawable/Email" />
</LinearLayout>
</LinearLayout>

relative layout gravity center not aligning correctly

I'm trying to center the chilldren of my relative layout in the center of my screen but it's acting like it's aligned to the top of the parent and I can't figure out why.
my .XML:
<?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"
android:layout_gravity="center"
android:gravity="center"
android:background="#f70909">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:src="#drawable/dice"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage"
android:layout_centerHorizontal="true"
android:layout_below="#+id/imageView2" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_below="#+id/editUserSplash" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editPasswordSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:layout_below="#+id/btnSplash" />
</RelativeLayout>
I've tried making the parent a relativelayout without success and it won't align to the bottom either. Initially I thought the layout wasn't filling the whole screen but since its height and width are match_parent I don't think that's the problem. in android studio it is displaying correctly though so I must be missing something small.
I also tried using the gravity and layoutgravity parameters and a combination of the two but without success
Edit: I need the views to stay in the same formation relative to each other but centered in the screen vertically.
Edit 2:I set the background of the RelativeLayout to red and got this: So the relativelayout isn't filling my screen.
Edit 3:
Edit 4:
try this:
<?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:background="#f70909">
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:src="#drawable/dice"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage"
android:layout_centerHorizontal="true"
android:layout_below="#+id/imageView2" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_below="#+id/editUserSplash" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editPasswordSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:layout_below="#+id/btnSplash" />
</RelativeLayout>
</RelativeLayout>
Try something like this.
<?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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:layout_centerInParent="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_centerInParent="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:indeterminate="true" />
</LinearLayout>
</RelativeLayout>
UPDATE:
If setting the xml in an AlertDialog, it's possible that there is a space allotted at the bottom. I google and found this alert_dialog.xml for reference. It seems that there is a buttonPanel at the bottom with a minimum height of 54dip.
<LinearLayout android:id="#+id/buttonPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="54dip"
android:orientation="vertical" >
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="4dip"
android:paddingStart="2dip"
android:paddingEnd="2dip"
android:measureWithLargestChild="true">
<LinearLayout android:id="#+id/leftSpacer"
android:layout_weight="0.25"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone" />
<Button android:id="#+id/button1"
android:layout_width="0dip"
android:layout_gravity="start"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<Button android:id="#+id/button3"
android:layout_width="0dip"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<Button android:id="#+id/button2"
android:layout_width="0dip"
android:layout_gravity="end"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<LinearLayout android:id="#+id/rightSpacer"
android:layout_width="0dip"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
I think this may help you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center">
<RelativeLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textMessage"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<EditText
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:layout_below="#+id/textMessage"
android:gravity="center" />
<EditText
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_below="#+id/editUserSplash"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_below="#+id/editPasswordSplash"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Thanks to ank I was able to figure out that the reason why the RelativeLayout didn't fill my screen is that I used it in an alertDialog. So RelativeLayouts parent isn't the screen but the alertDialog. Since an alertDialog wraps its content it doesn't fill the entire screen.

Align checkbox right most side in a listview

I want to allign the checkboxes in a list view to right most part of the screen.
my Layout is shown below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="9"
android:orientation="vertical">
<TextView
android:id="#+id/nameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="30sp" />
<TextView
android:id="#+id/numberTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="25sp" />
</LinearLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right|center"
android:layout_weight="2"
android:gravity="right|center" />
But When i run this i get the output as checkboxes right next to the textview
Found mistake.. its in mainactivity.. i have put the the width of listview as wrap content instead of fill parent
Use RelativeLayout for ChechBox Section and Add android:layout_alignParentRight="true" .Try this way ,Let me inform .
Okay,You can set 2 Textview and ChechBox on same row using layout weight (Linear Layout). And set gravity,layout gravity right for ChechBox.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/nameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="30sp" />
<TextView
android:id="#+id/numberTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="25sp" />
</LinearLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
Check this one
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/nameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="30sp" />
<TextView
android:id="#+id/numberTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="25sp" />
</LinearLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_gravity="right|center"
android:layout_marginRight="2dp"
android:gravity="right|center" />
</LinearLayout>

Categories

Resources