I have to place two edittext and a button on the same line.
The two edittext should have the same width, the largest possible so to fill the line. The button should be on the right.
It should be like this:
Edittext_______________________ EditText_________________________ Button
I post some relative code, which for the moment is not working.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:id="#+id/new_formulas"
>
<Button
android:textSize="30dp"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/add"
android:id="#+id/add"
/>
<EditText
android:textSize="30dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:hint="#string/add_hint"
android:id="#+id/add_hint2"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
/>
<EditText
android:textSize="30dp"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/add_hint"
android:id="#+id/add_hint"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/add"/></RelativeLayout>
Try following Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="User"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Pass"/>
</LinearLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Click"/>
</RelativeLayout>
Please try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/new_formulas"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="#+id/add_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:hint="Hint"
android:textSize="30dp" />
<EditText
android:id="#+id/add_hint2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/add_hint"
android:minWidth="100dp"
android:hint="hint2"
android:textSize="30dp" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/add_hint2"
android:text="Add"
android:textSize="30dp" />
</RelativeLayout>
Use Linear Layout :
<LinearLayout
android:id="#+id/new_formulas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/add"
android:textSize="30dp" />
<EditText
android:id="#+id/add_hint2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:hint="#string/add_hint"
android:textSize="30dp" />
<EditText
android:id="#+id/add_hint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/add_hint"
android:textSize="30dp" />
</LinearLayout>
Try this
<LinearLayout
android:id="#+id/new_formulas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="#+id/add_hint2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="40"
android:gravity="center_horizontal"
android:hint="#string/add_hint"
android:textSize="30dp" />
<EditText
android:id="#+id/add_hint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/add"
android:layout_weight="40"
android:hint="#string/add_hint"
android:textSize="30dp" />
<Button
android:id="#+id/add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:layout_alignParentRight="true"
android:text="#string/add"
android:textSize="30dp" />
</LinearLayout>
You can adjust weight acoording to your need but remember sum of all weight must be 100
You can achieve what you want using PercentRelativeLayout from the new Percent Support Library. It inherits all the alignment attributes of RelativeLayout and lets you specify dimensions and margins in percentages. Basically a counterpart of the layout_weight attribute of LinearLayout. Read Joanna Smith's #proTip for more info.
First add the dependency in app/build.gradle
dependencies {
...
compile 'com.android.support:percent:23.0.1'
}
Then change your code like this:
<android.support.percent.PercentRelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/new_formulas">
<Button
android:textSize="30dp"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/add" />
<EditText
android:textSize="30dp"
android:layout_toLeftOf="#id/add"
app:layout_widthPercent="40%"
android:layout_height="wrap_content"
android:id="#+id/add_hint" />
<EditText
android:textSize="30dp"
android:layout_toLeftOf="#id/add_hint"
app:layout_widthPercent="40%"
android:layout_height="wrap_content"
android:id="#+id/add_hint2" />
</android.support.percent.PercentRelativeLayout>
Some tips:
Use sp instead of dp for textSize
Always format the code (ctrl + alt + L) before posting. Makes it more readable.
Related
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.
I'm using a bootstrap library for android which can be found here. Ive imported the library into my application but the problem im having is that the buttons do not span the entire screen width.
I've tried placing the buttons side by side and using android:layout_weight="1" but the button just moves to the left and does not stretch. I've even tried using android:layout_width="match_parent" but that increases the buttons height as well.
this is what happens if i set android:layout_width="0dip" and android:layout_weight="1" (for ok/cancel) and android:layout_width="match_parent"(for check button)
XML CODE
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20sp" >
<TextView
android:id="#+id/textView1"
android:layout_width="318dp"
android:layout_height="wrap_content"
android:text="Send Pin To Email id."
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter Your Email Id Below"
android:textAppearance="?android:attr/textAppearanceMedium" />
<com.beardedhen.androidbootstrap.BootstrapEditText
android:id="#+id/et_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:ems="10"
android:hint="abc#example.com"
android:inputType="textEmailAddress"
bootstrapbutton:be_roundedCorners="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="15sp" >
<com.beardedhen.androidbootstrap.BootstrapButton
android:id="#+id/OK"
style="#style/AppBaseTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="OK"
bootstrapbutton:bb_icon_left="fa-envelope"
bootstrapbutton:bb_roundedCorners="true"
bootstrapbutton:bb_size="medium"
bootstrapbutton:bb_type="default" />
<com.beardedhen.androidbootstrap.BootstrapButton
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:text="CANCEL"
bootstrapbutton:bb_icon_left="fa-times"
bootstrapbutton:bb_roundedCorners="true"
bootstrapbutton:bb_size="medium"
bootstrapbutton:bb_type="default" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15sp"
android:text="Got your Pin?Enter it below."
android:textAppearance="?android:attr/textAppearanceMedium" />
<com.beardedhen.androidbootstrap.BootstrapEditText
android:id="#+id/et_pin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:ems="10"
android:hint="XXXX"
android:inputType="number"
bootstrapbutton:be_roundedCorners="true" />
<com.beardedhen.androidbootstrap.BootstrapButton
android:id="#+id/b_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:text="Check"
bootstrapbutton:bb_icon_left="fa-check"
bootstrapbutton:bb_roundedCorners="true"
bootstrapbutton:bb_size="medium"
bootstrapbutton:bb_type="default" />
</LinearLayout>
You need to use width as 0dip instead of wrap_content if you use weight property.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="15sp"
android:weightSum="2">
<com.beardedhen.androidbootstrap.BootstrapButton
android:id="#+id/OK"
style="#style/AppBaseTheme"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="OK"
bootstrapbutton:bb_icon_left="fa-envelope"
bootstrapbutton:bb_roundedCorners="true"
bootstrapbutton:bb_size="medium"
bootstrapbutton:bb_type="default"
android:layout_weight="1"/>
<com.beardedhen.androidbootstrap.BootstrapButton
android:id="#+id/cancel"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:text="CANCEL"
bootstrapbutton:bb_icon_left="fa-times"
bootstrapbutton:bb_roundedCorners="true"
bootstrapbutton:bb_size="medium"
bootstrapbutton:bb_type="default"
android:layout_weight="1"/>
And for single button, just use width as "match_parent"
<com.beardedhen.androidbootstrap.BootstrapButton
android:id="#+id/b_check"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:text="Check"
bootstrapbutton:bb_icon_left="fa-check"
bootstrapbutton:bb_roundedCorners="true"
bootstrapbutton:bb_size="medium"
bootstrapbutton:bb_type="default" />
Hope this helps.
I am trying to add a background color to the search form area of a RelativeLayout in my Android app in Xamarin. Basically I have an EditText and a button that should be contained within a colored background at the top of the screen. Using the code below, the background color is applied but my EditText and button disappear while the content below them move up and take their place. Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:pixlui="http://schemas.android.com/apk/com.neopixl.pixlui"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:screenOrientation="portrait"
android:background="#ffffff">
<RelativeLayout
android:id="#+id/TestLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EAF4F9">
<com.neopixl.pixlui.components.textview.TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Heading"
pixlui:typeface="Lato-Bold.ttf"
android:layout_marginBottom="15dp"/>
<EditText
android:inputType="numberDecimal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:id="#+id/SearchField"
android:layout_marginRight="10dp"/>
<Button
android:text="Search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:layout_toRightOf="#id/SearchField"
android:id="#+id/btnSearch"
android:layout_alignParentRight="true" />
<TextView
android:text="Use my current location"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_below="#id/SearchField"
android:id="#+id/txtCurrentLocation"
android:gravity="center"/>
</RelativeLayout>
<View
android:id="#+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<com.neopixl.pixlui.components.button.Button
android:id="#+id/btnOne"
android:text="Button One"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_alignRight="#id/strut"
android:layout_alignParentLeft="true"
android:layout_below="#id/txtCurrentLocation"
pixlui:typeface="Lato-Light.ttf"
android:gravity="center" />
<com.neopixl.pixlui.components.button.Button
android:text="Button Two"
android:id="#+id/btnTwo"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_alignLeft="#id/strut"
android:layout_alignParentRight="true"
android:layout_below="#id/txtCurrentLocation"
android:gravity="center"
pixlui:typeface="Lato-Light.ttf" />
</RelativeLayout>
Should I be utilizing a LinearLayout here instead or is there a better way to construct this?
Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:pixlui="http://schemas.android.com/apk/com.neopixl.pixlui"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<View
android:background="#EAF4F9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/header"
android:layout_alignBottom="#+id/btnOne" />
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="15dp"
android:layout_alignParentTop="true"
android:text="Hello" />
<EditText
android:inputType="numberDecimal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_alignParentLeft="true"
android:id="#+id/search"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:hint="Search for..." />
<Button
android:text="Search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnSearch"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#+id/search" />
<TextView
android:text="Use my current location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/search"
android:layout_marginTop="10dp"
android:id="#+id/txtCurrentLocation"
android:gravity="center" />
<Button
android:id="#+id/btnOne"
android:text="Button One"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_alignRight="#id/strut"
android:layout_alignParentLeft="true"
android:layout_below="#id/txtCurrentLocation"
android:gravity="center" />
</RelativeLayout>
Just replace the buttons and textviews with the pixlui versions where needed.
I have two buttons inside a linear layout which have same properties defined. But to my surprise, both have different height. Please see the xml code below
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
Can you please help me to have the same height. I am wondering as to how both behaves differently. Also added includeFontPadding for the button. But no hope :(.
Your background drawables have different padding or height. check #drawable/btn_large_gray and #drawable/login_button_selector
put both the button inside linear layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/btn_large_gray"
android:text="#string/skip" />
</LinearLayout>
</LinearLayout>
and adjust both linear layouts as you like it
Try defining property android:layout_weight for each element in your LinearLayout, so they can have the same height.
For example :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_weight="1"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
The idea is to give as much space to each element. Your LinearLayout contains different elements so by choosing wrap_content in the android:layout_height and android:layout_width, space available will be allocated for each element added. And as you TextViews and Buttons are not the same...
Hope it'll help
You are using different style for both the buttons,
i.e. "#style/Text.Quaternary.Small.Bold" and "#style/Text.Quaternary.ExtraSmall.Bold" you should use only one style for both buttons
I am trying to reduce the space between 2 columns, have tried using negative margins, but did not work. Is there a way to bring the 2 elements in the image closer ?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:layout_gravity="center"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:background="#color/orange"
android:textSize="12sp"
android:columnCount="8">
<ImageButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_gravity="left"
android:src="#drawable/settings" />
<TextView
android:id="#+id/currentCityName"
android:layout_column="2"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City name"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
/>
<ImageButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="7"
android:layout_columnSpan="1"
android:layout_gravity="right"
android:src="#drawable/reload" />
<ImageView
android:id="#+id/currentWeatherImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="8"
android:layout_rowSpan="3"
android:layout_gravity="center_horizontal"
android:src="#drawable/cloud" />
<ImageView
android:id="#+id/humidityIcon"
android:layout_width="20dp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_marginRight="0dp"
android:layout_gravity="left"
android:background="#000000"
android:src="#drawable/humidity" />
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:layout_marginLeft="0dp"
android:layout_gravity="left"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/temperature"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:textSize="49sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/windSpeedIcon"
android:layout_width="30dp"
android:layout_marginRight="1dp"
android:paddingRight="1dp"
android:layout_gravity="right"
android:src="#drawable/wind" />
<TextView
android:id="#+id/windSpeed"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
/>
<!-- android:layout_width="40dp" -->
<TextView
android:id="#+id/precipitationIcon"
android:textSize="28sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/precipitation"
android:layout_column="0"
android:textSize="13sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/windDirection16Point"
android:textSize="13sp"
android:layout_width="80dp"
android:layout_columnSpan="2"
/>
<TextView
android:id="#+id/weatherDescription"
android:layout_gravity="center_horizontal"
android:layout_row="7"
android:layout_columnSpan="8"/>
<TextView
android:id="#+id/section_label"
android:layout_margin="5dp"
android:layout_columnSpan="8" />
<EditText
android:minLines="4"
android:maxLines="4"
android:id="#+id/edit"
android:layout_columnSpan="8"/>
I suggest implementing the entire view using a RelativeLayout, should be the best solution for the entire view.
You are tackling the wrong problem – you are asking how to reduce the space between columns in a grid layout, but maybe you should’t have used such a layout in the first place!
What you should have been using for your specific layout, is a combination of relative positioning and compound drawables (here, with android:drawableStart).
<?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="80dp"
android:background="#d89018"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
>
<TextView
android:id="#+id/temperature"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="25 ℃"
android:textColor="#fff"
android:textSize="49sp"
/>
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/humidity"
android:gravity="center_vertical"
android:text="83 %"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windSpeed"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/wind"
android:gravity="center_vertical"
android:text="19 km/h"
android:textColor="#fff"
/>
<TextView
android:id="#+id/precipitation"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/precipitation"
android:gravity="center_vertical"
android:text="0.1 mm"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windDirection16Point"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#id/windSpeed"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/windDirection"
android:gravity="center_vertical"
android:text="NNW"
android:textColor="#fff"
/>
</RelativeLayout>
Not only this layout is simpler, you also let Android take care of all the spacing for you. To change the spacing between the compound drawable and the text, use android:drawablePadding in the layout’s code above; in Java code, that would be TextView.setCompoundDrawablePadding).
Icons used for the sample: water, windsock, rainy-weather and wind-rose.
I think what's happening is that your Views are being stretched because they are trying to match the width of another view in their columns.
Try decreasing the columnSpan of your Views or separate your layout into two separate GridLayouts.
Or, consider using a different layout altogether. I would recommend RelativeLayout here instead of GridLayout, but I don't know how this fits into a larger window.
try 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="100dp">
<LinearLayout
android:id="#+id/col1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col1_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="83%"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col1_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1.0mm"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/col2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.0"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25'"
android:textSize="50dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col3_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19Km"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NNW"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I think you should change usedefaultMargins to false and give your own margins to the elements.
android:useDefaultMargins="false";