Currently my code places a button at the bottom of the screen:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|bottom">
<ImageButton
android:id="#+id/button1"
android:layout_width="95dp"
android:layout_height="95dp"
android:layout_centerInParent="true"
android:gravity="center"
android:src="#drawable/main_button"
/>
</LinearLayout>
</RelativeLayout>
However, I wish to align it slightly below the bottom of the screen, so a small part of the button is clipped off (Say, 20%). Ultimately, my end result is that when I tap and drag the button up, it will move up and reveal the entire button, but before that, the bottom part of it is clipped.
There are many questions on how to align a button to the bottom of a screen, but I can't seem to find any that aligns it to below the bottom of the screen.
Is there any way to do so, or am I not using the correct search terms?
EDIT: From the answers, I tried android:translationY="20dp" and it did not work, but I tried android:layout_marginBottom="-20dp" and it worked for me.
You can add android:translationY="Xdp" to your button to move it down by X dp.
Alternatively you can create two LinearLayouts. One to fill the screen and hold other components and another that contains the button. You can then add android:layout_below="#id/layout0" and android:margin_top="Xdp" to control how far below the screen the layout with the button should be.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
</LinearLayout android:id="#+id/layout0"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_below="#id/layout0"
android:margin_top="Xdp"
android:gravity="center|bottom">
<ImageButton
android:id="#+id/button1"
android:layout_width="95dp"
android:layout_height="95dp"
android:layout_centerInParent="true"
android:gravity="center"
android:src="#drawable/main_button"/>
</LinearLayout>
</RelativeLayout>
You can translate the button:
android:translationY="20dp"
in your xml, that's moves the view 20 dp's down.
Related
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.
I´ve tried a few thinks to achive the following thing:
For the discription: I want to have a header with a textview which wraps over the howl page and below this header I want to display three images beside each other. It should be like a image gallery. This layout i want to duplicate.
But my problem is, that I the height of the ImageView is to high and that there is a distance between the sized image and the title. See figure.
On the Left is what I want and on the right is what I got...
Here is my layout code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:textStyle="bold"
android:text="titel"
android:id="#+id/titel"
android:gravity="center"
android:padding="3dp"
android:textSize="18sp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titel">
<ImageView
android:layout_width="0dp"
android:layout_weight="0.208"
android:layout_height="match_parent"
android:id="#+id/image1"
android:src="#drawable/1"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="0.389"
android:layout_height="match_parent"
android:id="#+id/image2"
android:src="#drawable/2"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="0.403"
android:layout_height="match_parent"
android:id="#+id/image3"
android:src="#drawable/3"/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
my best guess is because your ImageView scales your image in a way that it fits into the center of the view and leaves empty space around the top and bottom of the view. try adding android:adjustViewBounds="true" to your ImageView in the xml.
on a side note, when debugging view hierarchy, it's almost always gonna be helpful to go to Android Device Monitor, select your devices to the right, and click Dump View Hierarchy for UI Automator. You can easily find out which view is taking the extra space by hovering your mouse over different view elements.
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>
In a layout file I have a Listview whose size can grow/shrink dynamically. I have a button btn_rec_add and it's click event I add an item in the ListView. I have tried many changes in the Layout file but haven't been able to make the button shift its location based on number of items in the ListView. If I keep the button in the same RelativeLayout which has the ListView, then the button moves dynamically which is exactly how I want but I can't see the button after adding 5 or more elements in 4.3 inch display phones. If I keep the button outside the RelativeLayout of the ListView, then it is fixed on the screen.
Currently, the btn_rec_add is fixed to the bottom of the layout. Can someone please help me solve this problem.
Here is the XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg" >
<ImageView
android:id="#id/top_bar_view"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/top_bar"
android:contentDescription="#string/content" />
<TextView
android:id="#+id/txt_recipients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:text="#string/text_recipients"
android:textColor="#FFFFFF"
android:textSize="16sp" />
<ImageButton
android:id="#id/btn_back"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="#string/content"
android:paddingTop="6dp"
android:src="#drawable/ic_back" />
<RelativeLayout
android:id="#+id/Rlayout_recipients"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/btn_rec_add"
android:layout_alignParentLeft="true"
android:layout_below="#id/top_bar_view" >
<ListView
android:id="#+id/rec_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:paddingTop="20dp" />
</RelativeLayout>
<ImageButton
android:id="#+id/btn_rec_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/content"
android:src="#drawable/icon_add" />
</RelativeLayout>
If I understand correctly, you want the behavior of the button to be as follows:
Appear below the last ListView item if the ListView does not extend to fill screen
If the ListView extends the full height of the screen, the button should be at the bottom of the screen, but the list should remain scrollable
If my understanding is correct, you should place your ListView and your button in a LinearLayout as follows:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="#dimen/button_height"
android:background="#drawable/button_image" />
</LinearLayout>
The effect of the above layout is as follows:
Layout in which items are vertically placed
Layout which will be as wide as parent, but as tall as ListView and Button
ListView will take up all of the space in the layout that the button does not occupy (this is layout_weight="1" whereas Button has no layout weight so it will simply fill as much space as it needs as defined in this case by #dimen/button_height)
Great Android layout question!
Your Problem is related to User Experience.
You have to decide whether user will like to scroll to end of the list to press add button
or user want to add without scrolling to end of list.
Since you only have two options with our scenario,
either keep add button fixed or add it as footer of listview.
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