I'm relatively new to Android development and I'm having a hard time putting together a certain interface. I've looked through many similar questions but none of them give me the answer i'm looking for.
I want to put together an XML interface like the following:
I want a LinearLayout that acts like a sticky footer that will contain two Buttons. This part will always align to the bottom and and will always be 60dp high. The RelativeLayout would then be on top of the footer, but it's height should scale depending on the screen size.
I've tried the following:
<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=".DartboardActivity">
<RelativeLayout
android:id="#+id/game_layout"
android:layout_width="match_parent"
android:layout_height="506dp"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/Dartboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/desc_dartboard"
android:src="#drawable/dartboard" />
<hhs.week3.dartboard.VerticalSeekBar
android:id="#+id/seekBarVertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="bottom"
android:thumb="#drawable/thumbhorizontal"
android:layout_marginBottom="40dp" />
<SeekBar
android:id="#+id/seekBarHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:thumb="#drawable/thumbhorizontal" />
</RelativeLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#333">
<Button
android:id="#+id/fire"
style="#style/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="#string/fire" />
<Button
android:id="#+id/settings"
style="#style/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="#string/settings" />
</LinearLayout>
</LinearLayout>
I got it working half decently, but it requires me to give the RelativeLayout bit a fixed height, making it look right on my phone, but not on others.
How do I best approach this?
Use the LinearLayout layout_weight mechanism to assign all remaining space to your RelativeLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
... />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
... />
</LinearLayout>
Try following code
<RelativeLayout 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=".DartboardActivity" >
<RelativeLayout
android:id="#+id/game_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttons"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
</RelativeLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#333"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I removed LinearLayout and replaced with RelativeLayout. This will allow you to set your LinearLayout stick to bottom.
I was able to achieve the same result by using below code. Basically, the parent layout is one Linear layout and the first child element is a scrollview so it can squeeze its content when the keyboard is shown. Also note the use of the android:layout_height="0dp" and android:layout_weight="1" used with the scrollview
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wrap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/wrap2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
</ScrollView>
<FrameLayout
android:id="#+id/buttonsPanel"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#333" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="action buttons" />
</FrameLayout>
</LinearLayout>
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=".DartboardActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/Dartboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/desc_dartboard"
android:src="#drawable/dartboard"
android:adjustViewBounds="true"/>
<hhs.week3.dartboard.VerticalSeekBar
android:layout_marginTop="10dp"
android:id="#+id/seekBarVertical"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:thumb="#drawable/thumbhorizontal"/>
<SeekBar
android:id="#+id/seekBarHorizontal"
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:thumb="#drawable/thumbhorizontal" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#333333">
<Button
android:id="#+id/fire"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="#string/fire"/>
<Button
android:id="#+id/settings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="#string/settings"/>
</LinearLayout>
</LinearLayout>
Related
I have a Button in Linear Layout when I see in the Design view of Activity xml ,it looks like it is perfectly positioned but when I see in GenyMotoin avd it is farly placed from what I expected.
How to dynamically adjust the position of button on different screen sizes?
My xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.xxx.MainScreen"
android:background="#b6b6b6">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="match_parent"
android:layout_height="263dp"
android:id="#+id/textView"
android:textSize="50dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="264dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next Act"
android:id="#+id/button"
android:layout_marginTop="100dp"
android:layout_marginLeft="20dp" />
</LinearLayout>
</RelativeLayout>
Use Linear Layout for the outermost layout.
It's not clear what your trying to achieve but If you want to position your views at the center on all devices. Try to use RelativeLayout instead of LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#b6b6b6"
android:padding="#dimen/activity_vertical_margin"
android:weightSum="2"
android:orientation="vertical"
tools:context="com.offtogeek.motivatemyself.MainScreen">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="left"
android:textSize="50dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:text="Next Quote" />
</RelativeLayout>
</LinearLayout>
I have an activity which contains mainly 2 components: A Scroll view and a Button.
I want to place the button at the buttom of the screen, fixed.
I tried many things but i cannot keep the button location fixed at the button of the screen, bacause as the content of the scroll view increases, the button is pushed outside the activity screen.
I want to achieve something like this:
Can anyone tell me how to achieve this?
My XML file is clean (all custom views are programmatically written, can't be shared!):
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/scrollView"
android:layout_gravity="center_horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/editableViewGroup"></LinearLayout>
</ScrollView>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Save Changes"
android:id="#+id/customButton" />
Use a LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<!-- ... -->
</ScrollView>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Save Changes"/>
</LinearLayout>
Use a RelativeLayout to host your views and pin the Button to the bottom of the layout.
you can use LinearLayout or relativeLayout like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/scrollView"
android:layout_gravity="center_horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/editableViewGroup"></LinearLayout>
</ScrollView>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Save Changes"
android:id="#+id/customButton" />
</LinearLayout>
If you use a relative layout try this
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.testproject.MainActivity" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_above="#+id/button1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Button" />
</RelativeLayout>
I have an ImageView and a TextView that are the only items in my Android UI. Currently the TextView is in the same LinearLayout as the ImageView, so the text sometimes runs to 2 lines. I want to get the text on its own line, with the full width of the parent element so it will be the whole width of the screen. So far everything I've tried moves the ImageView outside the window or makes it very small.
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:weightSum="4"
android:gravity="center"
tools:context=".MainActivity"
android:baselineAligned="false">
<LinearLayout
android:layout_width="0dp"
android:orientation="vertical"
android:layout_weight="2"
android:gravity="center_vertical"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/activity_main_imageview_gototags"
android:src="#drawable/img_main_gototags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:onClick="imageViewGoToTagsOnClickOnClick"
android:adjustViewBounds="true"/>
<TextView
android:id="#+id/activity_main_textview_tagline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/activity_main_textview_tagline"
android:textColor="#color/dark_blue"
android:gravity="center"
android:textSize="30sp"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
May be this is what you want
<?xml version="1.0" encoding="utf-8"?>
<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"
android:gravity="center"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/activity_main_imageview_gototags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:onClick="imageViewGoToTagsOnClickOnClick"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5" />
</LinearLayout>
<TextView
android:id="#+id/activity_main_textview_tagline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:singleLine="true"
android:gravity="center"
android:text="lfhjdhkjfhkjdhkjfhkdhkjfhdkshfkhskahdfkjdhkhkjfhdk"
android:textColor="#android:color/holo_blue_bright"
android:textSize="30sp" />
</LinearLayout>
I hope it helps.let me know if it did not.
Don't give the parent(LinearLayout) of your ImageView a width of 0dp make it match_parent instead and the same for your TextView also there's a property on text views android:maxLines that corresponds to how many lines at max can it go to, set it to 1 and if you need truncation you can also use android:ellipsize on the text view.
Hello I am new in Android, and my English is bad. I try it.
I want to divide my layout in 3 diferent sizes.
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/txt"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="Esto es una mierda de Relative Layout" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2">
<Button
android:id="#+id/btn1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom"
android:text="Button" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<Button
android:id="#+id/btn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top"
android:text="Button" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
My code should display three columns, the center column being twice the size of the side columns. If I set all the layouts with the same layout weight, they all display correctly, but with the same size.
However, when I set the center column with a different size value (in the layout weight) it dissapears from the screen.
What can I do to display my layouts in three columns with different sizes?
If anybody can help me. Thanks for reading.
use this structure:
<!-- parent layout-->
<LinearLayout
android:weightSum="1">
<!-- children layouts -->
<RelativeLayout
android:weight="0.25"
></RelativeLayout>
<RelativeLayout
android:weight="0.5"
></RelativeLayout>
<RelativeLayout
android:weight="0.25"
></RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/stupid_android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="0dip"
android:layout_height="match_parent"
android:background="#FF0000"
android:layout_weight="1" />
<View
android:layout_width="0dip"
android:layout_height="match_parent"
android:background="#0000FF"
android:layout_weight="2" />
<View
android:layout_width="0dip"
android:layout_height="match_parent"
android:background="#00FF00"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
This is your modified code:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/txt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Esto es una mierda de Relative Layout" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" >
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:text="Button" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:text="Button" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Use match_parent instead fill_parent. Althought you write program for API 8-.
Do it like this :
It's important to set the corresponding width/height to 0dp.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4" >
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="column1" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="column2" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="column3" />
</LinearLayout>
i would like to force gauge to be centered vertically above llInner...
i just don't seem to be able
instead of llTop using all the available space it is llInner doing it.
thank you
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llTop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#ff0000">
<eu.sextante.speedlimit.Views.GaugeView
android:id="#+id/gauge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<LinearLayout
android:id="#+id/llInner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_gravity="bottom|right"
android:gravity="bottom|right"
android:background="#00ff00">
<eu.sextante.speedlimit.Views.LimitView
android:id="#+id/limit"
android:layout_width="wrap_content"
android:layout_height="60dip"
android:background="#0000ff"
android:maxHeight="60dip"
android:maxWidth="60dip"/>
</LinearLayout>
You should use Relative Layout as main layout like this:
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/llInner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="bottom|right"
android:background="#00ff00"
android:gravity="bottom|right"
android:orientation="horizontal" >
<eu.sextante.speedlimit.Views.LimitView
android:id="#+id/limit"
android:layout_width="wrap_content"
android:layout_height="60dip"
android:background="#0000ff"
android:maxHeight="60dip"
android:maxWidth="60dip" />
</LinearLayout>
<your.gaugeview
android:id="#+id/gauge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="dfdg" />
</RelativeLayout>
Hope it helps you.