RelativeLayout doesn't fit in all screen sizes android - android

I am developing my first application in android and i am stuck with my xml layout. I have 5 buttons placed vertically in my layout under relativelayout. I am using sony xperia M and according to my screen size the layout looks perfectly fine but for big screens the layout is messed up. When i run my app in a device which has a big screen size the buttons don't have proper gap in between. How can i make my layout to fit all screen sizes ?
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#drawable/blue3"
tools:context=".MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="My Tasks"
android:id="#+id/mytasks_btn"
android:onClick="mytask"
style="#style/btnStyleBeige"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Add Task"
android:id="#+id/addtask_btn"
android:layout_marginTop="65dp"
style="#style/btnStyleBeige"
android:onClick="addtask"
android:layout_below="#+id/mytasks_btn"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Show Current Location"
android:id="#+id/shw_loc_btn"
style="#style/btnStyleBeige"
android:onClick="shwlocn"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Search Nearby"
android:id="#+id/button4"
android:onClick="searchnear"
style="#style/btnStyleBeige"
android:layout_below="#+id/shw_loc_btn"
android:layout_alignParentStart="true"
android:layout_marginTop="67dp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/btnStyleBeige"
android:text="Location Distance"
android:id="#+id/button7"
android:onClick="locdis"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true" />

You should consider wrapping your buttons inside another layout, for example LinearLayout. If you want your buttons to be evenly distributed on the screen you should use code like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="New Button"
android:id="#+id/button" android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="New Button"
android:id="#+id/button2" android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="New Button"
android:id="#+id/button3" android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="New Button"
android:id="#+id/button4" android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="New Button"
android:id="#+id/button5" android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
Very important is to set children's heights to match_parent and set proper layout_weight values.

Related

Aligning buttons inside of horizontal linear layout

I'm trying to align a button inside of a horizontal linear layout to the right side of the screen in my Android application.
How can I do that? I couldn't find an align option in the properties pane. I've tried some Googling, but I couldn't find much since I don't know the correct terms with which to search.
Here's a render so you can get an idea:
Here's my current activity_main.xml
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_gravity="center_vertical" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3" />
</LinearLayout>
</RelativeLayout>
Thanks for your time!
It is easier to use FrameLayout in that case so that you can assign gravity.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_gravity="left|center_vertical" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_gravity="right|center_vertical" />
</FrameLayout>
If you have to use LinearLayout, you can put an empty view with weight to occupy that space in the middle
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_gravity="center_vertical" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3" />
</LinearLayout>

Android Diamond Button Layout

I am currently working on a sample application using android studio. I need to design diamond shaped buttons and view them as follows (Screenshots attached). But I don't have an idea how to make this kind of thing with android.
There are be four diamond shaped buttons, and they are be aligned as according to the following screenshot.
Screenshot:
Here is sample code adjust margins according to devices you can use imageView instead buttons
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/firstRow"
android:rotation="-30"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 2"
android:id="#+id/button2" />
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 1"
android:id="#+id/button1"/>
</LinearLayout>
<LinearLayout
android:id="#+id/secondRow"
android:layout_below="#+id/firstRow"
android:rotation="-30"
android:layout_marginTop="24dp"
android:layout_marginLeft="68dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 4"
android:id="#+id/button4" />
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 3"
android:id="#+id/button3"/>
</LinearLayout>
</RelativeLayout>
The easiest way is use .png archives on ImageButtons and display them on a RelativeLayout. You can change positions and adjust them as you wish. If you set the android:background="#android:color/transparent" you can set your form, by playing with the margins (android:layout_marginRight="", android:layout_marginTop="", etc.)
With that I got this:
This is the code I used; it's only necessary .xml, without programmatic changes:
<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:background="#android:color/holo_purple"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="39dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton1"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/ImageButton03"
android:layout_below="#+id/imageButton1"
android:layout_marginRight="55dp"
android:layout_marginTop="47dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/ImageButton03"
android:layout_alignRight="#+id/ImageButton04"
android:layout_marginBottom="66dp"
android:layout_marginRight="5dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" /></RelativeLayout>
Hope it helps.
<RelativeLayout 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"
android:orientation="vertical"
android:background="#drawable/splash2"
tools:context="com.example.sv.myfoodapplication.view.SplashActivity">
<LinearLayout
android:id="#+id/sp_breakfast"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_above="#+id/sp_desert"
android:layout_alignStart="#+id/sp_vegetable"
android:layout_marginBottom="43dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond">
</LinearLayout>
<LinearLayout
android:id="#+id/sp_meat"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/sp_vegetable"
android:layout_alignStart="#+id/sp_desert"
android:layout_marginBottom="80dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond" >
</LinearLayout>
<LinearLayout
android:id="#+id/sp_vegetable"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/sp_desert"
android:layout_alignParentStart="true"
android:layout_marginBottom="83dp"
android:layout_marginStart="19dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond" >
</LinearLayout>
<LinearLayout
android:id="#+id/sp_desert"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond">
</LinearLayout>
</RelativeLayout>

Working with relative layout in android XML

I am trying to create a layout in XML something along of the lines of http://i.stack.imgur.com/aPoeU.png but I am little confused as to how to position the buttons in that format. I have created the buttons and tried different things like alignParentBottom, alignParentRight etc but I can't seem to get it the way I want it to be. Can someone please help me out?
<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"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button" />
We can manage it in all screen and in all resolution by weight_sum
Paste below code in your xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#000"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bebebe"
android:layout_weight="0.30"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button3" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.30"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>
Paste it in your XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2258A2"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.20"
android:orientation="horizontal"
android:weightSum="1" >
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button3" />
</LinearLayout>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>
Your code seems correct, but if you want to replicate the size of the buttons then you can't set the height as wrap_content. This will make it as tall as the text, change that to some given value:
android:layout_height="50dp"
Well, in RelativeLayout, as the name suggests, the elements are positioned relative to something else, like the parent view, or another widget in the layout. So you can align the widget in many many ways, like apending it to the right of a view, to the left, above, below, and so on.
Please refer to this link and this other link for more information.
So, if you want to make your buttons look exactly like your example image, 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"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button2"
android:text="Button 3" />
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button3"
android:text="Button 4" />
You can simply make the button width to fill_parent instead of align left and right. And the height, you can define the measures you'd like to use.
Btw, I used alignParentLeft and alignParentStart because I don't know which API level you're using, so I've used both parameters, old and new. But the effect is the same, your buttons will always start to the left of the parent view.
EDIT: As the user hasternet suggested, you could also use LinearLayout and get similar results.
EDIT 2: And if you like to change the look of your buttons, try to change the style (Take a look here to know what I mean).
Since you need to set the height of the buttons differently and also it depends on different screen size, you cannot achieve this with Relative Layout.
So go for LinearLayout and weightsum attribute. This way screen big or small, you can achieve your expected UI. Mentioned code below modified.
<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"
tools:context=".MainActivity"
android:Orientation="vertical"
android:weightsum="8" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button"
android:layout_weight="1"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button"
android:layout_weight="3"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button"
android:layout_weight="3"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button"
android:layout_weight="1"/>
</LinearLayout>

Aligning Left/Center/Right LinearLayout - Android

This should be pretty easy, but since I am new in android development I am asking. I basicaly want to create a static menu bar at the bottom of my avtivity with simple buttons (previous / home / next). However I have problem in aligning those since android:layout_alignParentRight="true" does not seem to do the work. I have also tried out gravity, but neither that works.My current code:
<LinearLayout
android:id="#+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:gravity="center_vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/previousButton"
android:layout_alignBottom="#+id/bottomBar"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/nextButton"
android:layout_alignBottom="#+id/bottomBar"
/>
</LinearLayout>
EDIT: here is all my layout xml file:
<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:id="#+id/container"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="menelaos.example.com.geolearning.QuizActivity">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/quizTableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</TableLayout>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/answerTableLayout"
android:layout_below="#+id/quizTableLayout">
</TableLayout>
</LinearLayout> </ScrollView>
<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:id="#+id/bottomBar">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:orientation="horizontal" >
<Button
android:id="#+id/previousButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/nextButton"
android:layout_toRightOf="#id/previousButton"/>
</LinearLayout>
</RelativeLayout>
You have to use a RelativeLayout.
Try something 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" >
<Button
android:id="#+id/previousButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="New Button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:layout_alignParentBottom="true"
android:id="#+id/nextButton"
android:layout_toRightOf="#id/previousButton"
/>
</RelativeLayout>
EDIT:
try this then:
<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:id="#+id/bottomBar">
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:orientation="horizontal" >
<Button
android:id="#+id/previousButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/nextButton"
android:layout_toRightOf="#id/previousButton"/>
</LinearLayout>
</RelativeLayout>
EDIT 2
Ok, so if I understood correctly:
You want a Layout composed by a Scroll View and a View in the bottom of the screen with two buttons, one aligned to the left of the screen and the other aligned to the right.
I think the following layout suggestion can work out for you. Nevertheless, without seeing your current layout I cannot clearly understand how you want your layout to be.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
/>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="420dp"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/previousButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="New Button"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/nextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:layout_alignParentRight="true"/>
</RelativeLayout>
</LinearLayout>
EDIT 3
In order to have a 3rd button just add the XML below after the last Button view:
<Button
android:id="#+id/center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center"
android:layout_toRightOf="#id/previousButton"
android:layout_toLeftOf="#id/nextButton"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"/>
I've added the marginLeft and marginRightso that the buttons have a distance between them, as I think this is what you want.
you can't use the xml attribute alignParentBottom in a LinearLayout. It works for a RelativeLayout.
Secondly, the attribute gravity only position the content of the tag ( it will put the buttons in the center of the page verticalty)
Try this
<RelativeLayout
android:id="#+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/previousButton"
android:layout_alignBottom="#+id/bottomBar"
android:layout_alignParentLeft="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/nextButton"
android:layout_alignBottom="#+id/bottomBar"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
If you only need to make each button take the same width and occupy the total width of the parent layout:
In buttons, change to android:layout_width="0dp"
and add android:layout_weight="1"
This will distribute all the buttons with homogeneous width.

Screen layout doesn't look good on bigger screens

I have 3 horizontal LinearLayouts, I've been making xml on 4.7 screen and it looked good, then i switched to bigger screen and it doesnt look good. So my xml looks good on screen size of 4.7 but on 10.01 and 7 it screws up
on 4.7 screen:
on 10,01 :
<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="#drawable/backgroun"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Load" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Play"
android:layout_weight="1" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Mute"
android:layout_weight="1"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Volume up"
android:layout_weight="1" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Volume up"
android:layout_weight="1" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Mute"
android:layout_weight="1"/>
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Play"
android:layout_weight="1"/>
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Load"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="7"/>
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<SeekBar
android:id="#+id/seekBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="7"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seekBar3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<SeekBar
android:id="#+id/seekBar4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
First of all when you use android:layout_weight you should set the android:layout_width="0dp"
Besides that now, I would suggest having a separate layout for xlarge screens. The way to do that is to create a separate folder that will contain a layout with the same name as your original layout (eg. main.xml). The folder name for 10" screens should be something like layout-xlarge. For more details you should check here.
For different size screens. you can also make another layout for bigger screen.
res/layout-small
res/layout-large
res/layout-xlarge
create a new folder as named "layout-xlarge" and copy your xml layout in there and you can adjust the sizes.
Android will automatically select the appropriate layout for the current device. Remember that, layout name should be the same in each folder.

Categories

Resources