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.
Related
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.
I'm trying to align text inside textview to the center (both vertical and horizontal).
Altought the vertical alignment working properlly in the Android Studio preview, it fails on the emulator.
The design:
The android studio preview:
The emulator:
The code:
<RelativeLayout
android:id="#+id/teamsBox"
android:layout_width="match_parent"
android:layout_height="185dp">
<LinearLayout
android:layout_width="154dp"
android:layout_height="wrap_content"
android:background="#drawable/team_bg"
android:padding="6dp"
android:layout_alignParentLeft="true"
android:orientation="vertical">
<EditText
android:id="#+id/teamOneName"
android:layout_width="143dp"
android:layout_height="42dp"
android:text="HOME"
android:textColor="#color/my_white"
android:background="#color/my_transparent"
android:textSize="23sp"
android:singleLine="true"
android:gravity="center"/>
<TextView
android:id="#+id/teamOneScore"
android:layout_width="143dp"
android:layout_height="132dp"
android:text="3"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="154dp"
android:layout_height="match_parent"
android:background="#drawable/team_bg"
android:padding="6dp"
android:layout_alignParentRight="true"
android:orientation="vertical">
<EditText
android:id="#+id/teamTwoName"
android:layout_width="match_parent"
android:layout_height="42dp"
android:text="AWAY"
android:textColor="#color/my_white"
android:background="#color/my_transparent"
android:textSize="23sp"
android:singleLine="true"
android:gravity="center"/>
<TextView
android:id="#+id/teamTwoScore"
android:layout_width="fill_parent"
android:layout_height="132dp"
android:text="1"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
Edit: I've changed to layout according to the answers, but the bug is still happening.
This is my new layout:
<RelativeLayout
android:id="#+id/teamsBox"
android:layout_width="match_parent"
android:layout_height="185dp">
<LinearLayout
android:layout_width="154dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#drawable/team_bg"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamOneName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="HOME"
android:textColor="#color/my_white"
android:background="#color/my_transparent"
android:textSize="23sp"
android:singleLine="true"
android:padding="8dp"
android:gravity="center"/>
<TextView
android:id="#+id/teamOneScore"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="3"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center_vertical|center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="154dp"
android:layout_height="match_parent"
android:background="#drawable/team_bg"
android:padding="6dp"
android:layout_alignParentRight="true"
android:orientation="vertical">
<EditText
android:id="#+id/teamTwoName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="AWAY"
android:textColor="#color/my_white"
android:background="#color/my_transparent"
android:textSize="23sp"
android:singleLine="true"
android:padding="8dp"
android:gravity="center"/>
<TextView
android:id="#+id/teamTwoScore"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="1"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
To problem is in the TextView itself, the large size of the text is not calculated by the gravity attribute.
Try adding this attribute to your text view android:includeFontPadding="false"
set your textView's android:gravity to center_vertical | center_horizontal
<TextView
android:id="#+id/teamOneScore"
android:layout_width="143dp"
android:layout_height="132dp"
android:text="3"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center_vertical | center_horizontal" />
Remove hard coded width and height and use weight.Try the following data
<RelativeLayout
android:id="#+id/teamsBox"
android:layout_width="match_parent"
android:layout_height="185dp" >
<LinearLayout
android:layout_width="154dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/button_background"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamOneName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#123456"
android:gravity="center"
android:singleLine="true"
android:text="HOME"
android:textSize="23sp" />
<TextView
android:id="#+id/teamOneScore"
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center_vertical|center_horizontal"
android:text="3"
android:layout_weight="1"
android:textSize="127sp" />
</LinearLayout>
<LinearLayout
android:layout_width="154dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#drawable/button_background"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamTwoName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#123456"
android:gravity="center"
android:singleLine="true"
android:text="AWAY"
android:textSize="23sp" />
<TextView
android:id="#+id/teamTwoScore"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:gravity="center_vertical|center_horizontal"
android:text="1"
android:layout_weight="1"
android:textSize="127sp" />
</LinearLayout>
</RelativeLayout>
Hope this works
try this it may help you,
<?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:background="#android:color/holo_green_light" >
<LinearLayout
android:layout_width="154dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamOneName"
android:layout_width="143dp"
android:layout_height="42dp"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:singleLine="true"
android:text="HOME"
android:textColor="#android:color/white"
android:textSize="23sp" />
<TextView
android:id="#+id/teamOneScore"
android:layout_width="143dp"
android:layout_height="132dp"
android:gravity="center"
android:text="3"
android:background="#android:color/white"
android:textSize="127sp" />
</LinearLayout>
<LinearLayout
android:layout_width="154dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamTwoName"
android:layout_width="match_parent"
android:layout_height="42dp"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:singleLine="true"
android:text="AWAY"
android:textColor="#android:color/white"
android:textSize="23sp" />
<TextView
android:id="#+id/teamTwoScore"
android:layout_width="fill_parent"
android:layout_height="132dp"
android:layout_gravity="center"
android:gravity="center"
android:text="1"
android:background="#android:color/white"
android:textSize="127sp" />
</LinearLayout>
</RelativeLayout>
Just use match_parent as the height of the textview.
Your linear layout which is having the edit text and one text view height is lesser than you have given height to its children. Please calculate height for the edit text and text view and accordingly adjust height of your linear layout.
Here You just need to give wrap_content to you text view and .
1. change in text view
android:layout_height="132dp"
To
android:layout_height="wrap_content"
2. Increase you linear layout height to
android:layout_width="184dp"
3. remove below pading tag from your linear layout
android:padding="6dp"
it will fix your issue.
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 have problem with my TextView, when something is written in it. It narrows the right layout.
like here:
1 Without something is written: http://i.stack.imgur.com/zItJw.jpg
2.Without something is written in: http://i.stack.imgur.com/b5Nb4.jpg
My Layout Code:
1st bar:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/dzialanie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25sp"
android:text="X razy Y" />
<TextView
android:id="#+id/equal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25sp"
android:text="=" />
<TextView
android:id="#+id/tylemabyc"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
2nd bar
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/czas"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
3rd bar:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/wynik"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
How to block 1st TextView to not narrows others ?
You can use layout_weight property to tell android how much space each textView takes on the screen. If you want all of them to have the same space you can add the layout_weight of 1 for all of them.
You will also need to readjust your layout_width too. You will have to trade off for the layout_heght. For example if i want 4 textviews in a horizontal line holding equal space "Horizontally" i would do something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="This is verrry long text" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="maybe not" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="let us see" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ok" />
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";