LinearLayout doesn't fill the parent - android

LinearLayout doesn't fill the parent. I need to fill all elements by width.
Here is a photo that is showing on the smartphone. But in Android Studio xml preview all is looking right.
<?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="fill_parent"
android:background="#color/bg_color"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:ems="10"
android:id="#+id/editText3"
android:hint="Сообщение" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/editText2"
android:hint="Тема" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="дата"
android:id="#+id/textView"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="время"
android:id="#+id/textView2"
android:layout_weight="1" />
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Важность"
android:id="#+id/textView3" />
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar"
android:layout_gravity="center_horizontal" />
</LinearLayout>

Replace fill_parent with match_parent everywhere. Beside that, you have to set match_parent for the fragment's container layout inside your activity's XML.

Related

Linear Layout is not properly showing the component when using android studio

This is code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
I want to practice a layout in android studio and I'm getting an error while implementing the code.
This is the text which goes outside the mobile screen:
Why does the blue box go outside the mobile screen?
You're not properly setting the layout. The childViews of your parentView(LinearLayout) was aligned horizontally without setting the layout weight. You should read the documentation on LinearLayout. However, to fix your layout, you can add another container to hold the first row of your layout to make the second row visible on the screen. Your current code contains all the childViews in a single row which makes the other views not visible. Try the code below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
You are setting the layout_width of each view yourself. You should know that there is a maximum width of screen that is available. Moreover, you are setting the width of button as match_parent that is not proper way when the neighbouring views have some fixed width. If your are using LinearLayout try layout_weight attribute. Play around and try to experiment.
For example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingLeft="0dp"
android:paddingTop="10dp"
android:text="Email:"
android:textSize="30dp" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="2"
android:singleLine="true" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingTop="10dp"
android:text="Login" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>

Align checkbox to the right side in LinearLayout android

I am trying to make some text views with checkboxes in LinearLayout. I want for result like this:
TextView Ckeckbox
TextViewwwwww Ckeckbox
TextV Ckeckbox
But currently I have this:
TextView Checkbox
TextViewwwww Checkbox
TextView Checkbox
Here is my xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</LinearLayout>
And this xml gives me same result:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"/>
</LinearLayout>
You can use the layout_weight attribute on your TextView only to automatically designate the TextView to fill any space which the CheckBox does not occupy. For example, the following will set your checkboxes to the end (provided they have no text associated with them) and then lets the TextView fill the rest of the layout.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Additionally, you should use match_parent instead of fill_parent as fill_parent is deprecated.
Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.ipdemo.MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
Use layout weights and try this:
<?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="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="wdjhwdjwo"/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4"/>
</LinearLayout>
You should be using layout_weight attribute to achieve the effect
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
So horizontally both the views will be occupying half of the screen size. You could adjust layout_weight to achieve the desired outcome.
There maybe other ways to do this, but I think this method is the best way.
Use layout_gravity="right" instead of gravity="end" if you're working with vertical layouts.
Your CheckBox tag should look like:
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
EDIT: On horizontal layouts, try layout_weight="1", that will make both of your elements fill half of the layout space.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
check the following use android:layout_weight="1" in both view
<?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="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>

Keyboard overlaps Edit Text

Hello i have an activity which contains the following elements
this is my xml layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#dddddd">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#dddddd">
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="title"
android:textSize="#dimen/checkout_title"
android:textColor="#858585"
android:textStyle="bold"
android:layout_margin="10dp" />
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="474dp"
android:layout_below="#+id/title"
android:layout_marginBottom="10dp"></android.support.v4.view.ViewPager>
<com.pockee.views.CirclePageIndicator android:id="#+id/indicator"
android:padding="0dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_below="#+id/pager"
app:pageColor="#858585"
app:fillColor="#f19201" />
<LinearLayout android:layout_below="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip"
android:background="#80000000"
android:layout_margin="10dp">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Value:"
android:textColor="#color/white" />
<EditText
android:id="#+id/value1"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#color/white"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:inputType="number" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dip"
android:text="Value2:"
android:textColor="#color/white" />
<EditText
android:id="#+id/value2"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:password="true"
android:background="#color/white"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:inputType="number" />
<Button
android:id="#+id/btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:text="OK"
android:background="#f19100"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
in my manifest i'm using
android:windowSoftInputMode="adjustResize|stateVisible"
the problem is that the number keyboard overlaps edit text by 10 pixels
any ideas on this issue?
I see you have a relative layout wrapping your linear layout, yet both your linearLayout and relative layout have a margin of 10dp. Try editing the inner value 'LinearLayout' margin to 0 or changing margin altogether i.e use bottom-margin:0 instead of margin and reloading.

Put a button to the right and middle of a layout

If I have a layout in xml as follow
<RelativeLayout
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/bFb"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<Button //This is the button on question
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/linearLayout1"
android:text="Button" />
//there are more stuffs here below the linear layout
</RelativeLayout>
How can I have the button to the right of the linearlayout AND aligned at the middle of linear layout? I don't want the button borders to stretch the whole linear layout, just the middle of the linear layout
Thank you
You can achieve what you want by changing RelativeLayout to LinearLayout and supply a weight for its first child like that
<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:id="#+id/linearLayout1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<Button
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button" />
</LinearLayout>
Which will produce this
EDIT
You can achieve it with relative layout that way
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_toRightOf="#id/linearLayout1" >
<Button
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
But it needs some tweeks to produce the exact same thing, in my opinion LinearLayout's weight serve better in your case, so if I were in your shoe I choose the LinearLayout solution and wrap it in a RelativeLayout

Android layout padding is ignored by dropdown

As xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="20dp">
<Button
android:id="#+id/locationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:minWidth="46dip"
android:onClick="getLocation"
android:text="#string/icon_map_marker" />
<AutoCompleteTextView
android:id="#+id/autocomplete_city"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:hint="#string/city_hint"
android:inputType="text"
android:layout_alignBottom="#+id/locationButton"
android:layout_alignTop="#id/locationButton"
android:layout_toLeftOf="#id/locationButton"
android:dropDownWidth="match_parent"
/>
<requestFocus />
</RelativeLayout>
As you can see the
android:dropDownWidth="match_parent"
ignores the padding of the relative layout. Any ideas how to fix this?
Solved it. I had to define another relative layout wrapping only the autocomplete textview and the button. This layout is the anchor of the popup, taking the width of the relative layout as its own width.The key:
android:dropDownWidth="wrap_content"
android:dropDownAnchor="#+id/anchor"
Short version:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="20dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/anchor" >
<Button
android:id="#+id/locationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<AutoCompleteTextView
android:id="#+id/autocomplete_city"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/locationButton"
android:layout_alignTop="#id/locationButton"
android:layout_centerHorizontal="true"
android:layout_toLeftOf="#id/locationButton"
android:dropDownWidth="wrap_content"
android:hint="#string/city_hint"
android:dropDownAnchor="#+id/anchor" />
<requestFocus />
</RelativeLayout>
</RelativeLayout>
//try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<AutoCompleteTextView
android:id="#+id/autocomplete_city"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:hint="city_hint"
android:inputType="text"
android:dropDownWidth="match_parent"/>
<Button
android:id="#+id/locationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="46dip"
android:onClick="getLocation"
android:text="icon_map_marker" />
</LinearLayout>

Categories

Resources