I just started a programing in course in android studio using Java and XML and cant really figure out how to do a simple task. I have 3 buttons at the top of the screen, they fill up the whole width of the screen. I want to add a text below these 3 buttons, but i dont really now how to specify this. Right now i have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_textcolor" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_textsize" />
<TextView
android:text="South Africa"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
</LinearLayout>
Now, the text in the text element is displayed at the right side of the screen, its barely visible. The text gets cramped up so tight that it gets misaligned verticaly. What would i do if i instead wanted the text inside the textview element to be displayed just below the 3 buttons, to the left horizontaly, like normal text?
Thank you!
Use something like this. Inside the TextView tag add:
android:layout_below="#+id/buttonid"
Obviously you have to use relative layout for using this
Here you go
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/button_send" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/button_textcolor" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/button_textsize" />
</LinearLayout>
<TextView
android:text="South Africa"
android:layout_height="match_parent"
android:layout_width="wrap_content"
/>
</LinearLayout>
Use RelativeLayout instead of LinearLayout. There are also many other layouts you can try. Check here for the other type of available layouts.
RelativeLayout lets child views specify their position relative to the
parent view or to each other (specified by ID). So you can align two
elements by right border, or make one below another, centered in the
screen, centered left, and so on. By default, all child views are
drawn at the top-left of the layout, so you must define the position
of each view using the various layout properties available from
RelativeLayout.LayoutParams.
Related
I am working in Android Studio, trying to layout an Activity the way I want. Unfortunately for me, my layouts are sitting on top of each other, instead of one being below the other.
This is what I want:
View groups aligned vertically, one after the other, all aligned to
the left
Within each view group I have various text views etc.
Right now, I have added two Linear Layouts within a Constraint Layout.
I would expect the second Linear Layout to be immediately BELOW the first Linear Layout, because the ID fo the first layout is "layout_general_settings" and I have instructed the second layout to start at the bottom of the first layout
app:layout_constraintTop_toBottomOf="layout_general_settings"
However, both linear layouts are at the top of the activity – i.e. they are on top of each other / they are in the same location.
Can anyone tell me what I am doing wrong?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SettingsActivity"
>
<LinearLayout
android:id="#+id/layout_general_settings"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp"
>
<TextView
:
/>
<TextView
:
/>
</LinearLayout>
<LinearLayout
android:id="#+id/layout_temperature_settings"
app:layout_constraintTop_toBottomOf="layout_general_settings"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp"
>
<TextView
:
/>
<TextView
:
/>
</LinearLayout>
Thanks
Garrett
You missing "#+id/"
In your line:
app:layout_constraintTop_toBottomOf="layout_general_settings
It's need to be;
app:layout_constraintTop_toBottomOf="#+id/layout_general_settings
Recently picking up android development, I have hit a snag in the road. I'm having trouble positioning my layouts. Screenshots are as follows:
I'm trying to input either another layout type/list view in the upper section of the screen, without disrupting the button/text box at the bottom, though.. When extending this layout. I hit the following snag:
The entire contents of the original frame shift when the box of the new layout is extended, I've tried modifying:
android:layout_gravity="top">
and other layout attributes such as weight, margin, height/width.. This always hits the same problem.
My XML for this view is:
<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="horizontal" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="483dp"
android:layout_weight="1.06"
android:layout_gravity="top">
</FrameLayout>
<EditText android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/edit_message"
android:layout_gravity="bottom" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:layout_gravity="bottom"
android:onClick="SendMessageButton"
/>
</LinearLayout>
Though, i'm some-what stuck on how to make the correct changes & any response to this question would be greatly appreciated!
At the moment, all your child views live inside a single horizontally-oriented LinearLayout. LinearLayouts always arrange views sequentially, as you are experiencing.
There are a couple different ways to achieve the layout you are looking for. I'm going to suggest one that uses nested LinearLayouts (an outer one to stack things vertically, and then a nested one to arrange the EditText and Button horizontally), but you could also consider using a RelativeLayout for this.
Updated layout:
<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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="SendMessageButton" />
</LinearLayout>
</LinearLayout>
Note that a LinearLayout is oriented horizontally by default; I have explicitly included the attribute here to make the structure more clear.
The reason, your button and editText is appearing far from the frame layout and not near the corner is the parent layout orientation is Horizontal.
Change it to Vertical.
Now, if you need your button and editText to be arranged in the same line, it should be mentioned as described in samgak answer.
However, i would like to suggest the following.
Using framelayout might create bad user experience across different screen sizes in android.
If the parent layout in Linear, if the screen size is x and all your components added if the height it takes is x-20, then the theme you set for parent layout would not cover the entire screen. Therefore, it is recommended to use RelativeLayout and for the button and editText, use the layout_alignParentBottom = true attribute.
If needed, i can share the code sample for this. Added Vertical Scroll to the layout.
<ScrollView 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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="483dp"
android:layout_gravity="top">
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText android:id="#+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Edit Message"
android:layout_gravity="bottom" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
android:layout_gravity="bottom"
android:onClick="SendMessageButton"
/>
</LinearLayout>
</LinearLayout>
</ScrollView>
So, I have this one activity that looks like this:
http://i.imgur.com/UzexgEA.jpg
As you can see, it has a button, a list and a button.
If certain conditions are met, I want to hide both buttons just show the list, but as you can see in the next image, the buttons are still taking up space:
http://i.imgur.com/OyLIfSk.jpg
So my question, what can I do to enlarge the list to take that space out?
Here is my layout for the buttons and the list:
<?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:orientation="vertical" >
<Button
android:id="#+id/findSelected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="registrarAsistencia"
android:text="Registrar Asistencia" />
<ListView
android:id="#+id/listaAlumnos"
android:layout_width="fill_parent"
android:layout_height="376dp"
android:layout_weight="2.29" />
<Button
android:id="#+id/btnChecarBoxes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="seleccionarTodosNinguno"
android:text="Seleccionar / Deseleccionar todo" />
</LinearLayout>
And here it is the layout for the list's contents:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/rowTextView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:id="#+id/rowTextView2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:textSize="16sp"
android:textStyle="italic"/>
</LinearLayout>
<CheckBox
android:id="#+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:focusable="false"
android:padding="10dp" />
</RelativeLayout>
Do not make the buttons View.INVISIBLE. Make the buttons View.GONE. There are three visibility states:
visible (normal)
invisible (pixels not drawn, but still takes up space)
gone (not included in rendering)
In the java code
yourView.setVisibility(View.GONE);
and in the XML code
android:visibility="gone"
Thier are 3 state
visible: normal
invisible : takes space and invisible
gone : no space and no visibility
Use
android:layout_height="0dp"
android:layout_weight="1"
In addition to #CommonsWare's answer
You should use a layout that fits well in all screen sizes. If you give you layout a fixed height like android:layout_height="376dp" it will look good only on the device (or emulator) you're testing on. What you have to do is to make sure that your listview takes up all (and only) the space left by your buttons.
Check out this article and this answer to better understand layout weights.
for hiding your widget
yourEditText.setVisibility(View.GONE)
for visbility of your widget
yourEditText.setVisibility(View.VISIBLE)
I have a layout xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#000000" >
<FrameLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_above="#+id/taoFooter">
<com.example.gamedice.DrawingPanel
android:id="#+id/taoCanvas"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#000000" />
</FrameLayout>
<LinearLayout
android:id="#+id/taoFooter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
style="#android:style/Holo.ButtonBar">
<Button
android:id="#+id/roll1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll1"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll2"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll3"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll4"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
</LinearLayout>
</RelativeLayout>
In addition to other items in the layout, this layout has a button bar consisting of four buttons at the bottom of the screen. Based on user input, I want to be able to replace this button bar with another predefined set of buttons, and then be able to change back later.
Since I know what the alternate set of buttons will be ahead of time, I thought it might be possible to use an alternate layout xml file, but I couldn't figure out how to do that. Can anyone give me some guidance?
You can add your second set of buttons in a layout like you did with the first, then in the layout xml file set the attribute android:visibility="gone" on the second layout. In your code you can call setVisibility(View.GONE) for one layout (e.g. taoFooter) and setVisibility(View.VISIBLE) on the other layout when you need to switch the buttons out.
Alternatively, if you easily want to add some animations you can add a ViewFlipper around your two alternate button layouts. Only the first one is visible by default. You can switch to the next layout with showNext(). Add calls to setInAnimation() and setOutAnimation() before that to enable the animations.
I have a vertical LinearLayout with 3 Buttons vertically aligned one below the other. In between each button, i have set a LinearLayout whose visibility is GONE initially. When the 1st button is clicked, the LinearLayout beneath it is changed to VISIBLE and the list view which i have defined in that layout comes in view while the remaining 2 Buttons remain attached to the LinearLayout.
The problem is that if the list view within the LinearLayoutt (which i have added using java code) is too big, then the 2 Buttons below the 1st one go out of view. What remains is the layout beneath the 1st button.
I want the 2 Buttons to be bound to the view. Any help will be appreciated. Thanks.
Here is my layout:
LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="350dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/buttonContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contacts"
android:background="#drawable/button_style"
android:textColor="#E6E6E6"/>
<LinearLayout
android:id="#+id/layoutContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
</LinearLayout>
<Button
android:id="#+id/buttonLog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Call Logs"
android:background="#drawable/button_style" />
<LinearLayout
android:id="#+id/layoutLog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone" >
</LinearLayout>
<Button
android:id="#+id/buttonVm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Voicemail"
android:background="#drawable/button_style"/>
<LinearLayout
android:id="#+id/layoutVm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
</LinearLayout>
</LinearLayout>
If i understand your problem correct, you want the last buttons to be in the view irrespective of the list height. Then i would suggest you to use weight for the hidden LinearLayout, use android:layout_weight=1 to achieve your requirement.
android:scrollbars="true"
Try putting scrollbars