I am designing a screen for mobile devices (android), i wanted to display multiple text boxes and buttons on a screen.
Would someone please guide me how can i a make my screen scroll able so that all the text boxes and buttons can be created and viewed on same page.
I tried searching different postings also tried to find any property but couldn't get success.
Regards,
Gul
Use a ScrollView. When he contents of a ScrollView cannot fit the allocated height it will become scrollable.
Note that a ScrollView can only contain a single direct child element so if you need multiple things to be scrollable, you need to wrap that content into a layout.
Here is an example
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_long"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/really_long_string" >
</TextView>
<Button
android:id="#+id/btn_act"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View" >
</Button>
</LinearLayout>
</ScrollView>
Use ScrollView as the main parent layout. If you don't give the scrollview, then you can't scroll the page.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 3" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 4" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 5" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton 1" />
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton 2" />
<ToggleButton
android:id="#+id/toggleButton1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ToggleButton" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 6" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 7" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 8" />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 9" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 10" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 11" />
</LinearLayout>
</ScrollView>
Related
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>
I struggle more with UI design in Android than actually making the application, so I was giving something a go:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/rowOne"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BOne"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTwo"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BThree"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BFour"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/rowTwo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BFive"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BSix"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BSeven"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BEight"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/rowThree"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BNine"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTen"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BEleven"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTwelve"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
I have been trying to remove the spaces in between the rows and the columns, I tried giving a negative margin to the rows and the buttons like so:
android:layout_marginRight="-20sp"
But that is really "fiddly" not very accurate and I don't think it will scale the same for all screens (correct me if I am wrong). I also through giving the rows layout_weight attributes of one would make them cover the entire width of the screen (I know the weight is simply the importance given to the element). Perhaps I need to use stretchColumns? or perhaps there is another tag that might be useful here?
The reson that I have put it in a LinearLayout is because I plan to add other elements and experiment with those as well.
Replace your buttons :
<Button
android:id="#+id/BFour"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
with
<Button
android:id="#+id/BFour"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Button" />
I'm trying to put in my layout seven buttons in a small screen to test it (Galaxy young), So I used the scrollview but I still have problems (the screen doesn't scroll in LandScape mode ).
this is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:fillViewport="true">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/lieu_depart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lieu de prise en charge"
style="" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="false"
android:layout_below="#+id/linearLayout1"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/activity_vertical_margin" >
<Button
android:id="#+id/button2_date_depart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Date1" />
<Button
android:id="#+id/time_depart5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:text="Time1" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/linearLayout2"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="#dimen/activity_vertical_margin"
android:text="Lieu de restitution" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout3"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:orientation="horizontal" >
<Button
android:id="#+id/button5_date_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Date2" />
<Button
android:id="#+id/button6_time_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:text="Time2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout4"
android:orientation="horizontal" >
<Button
android:id="#+id/Button03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
EDIT:
Portrait mode:
Landscape mode:
what should I use to limit this problem?
Thank you
As I understand from your question it works in portrait but not landscape, so try this. As you rotate your device it should still scroll. I have placed this is in one Layout instead of multiple layouts.
<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" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/lieu_depart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lieu de prise en charge"
style="" />
<Button
android:id="#+id/button2_date_depart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Date1" />
<Button
android:id="#+id/time_depart5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:text="Time1" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="#dimen/activity_vertical_margin"
android:text="Lieu de restitution" />
<Button
android:id="#+id/button5_date_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Date2" />
<Button
android:id="#+id/button6_time_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:text="Time2" />
<Button
android:id="#+id/Button03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Button" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
EDIT...
You need to add the "android:layout_below="#+id/your button id" at every button so that the buttons will be displayed underneath each other..
<Button
android:id="#+id/lieu_depart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lieu de prise en charge"
style="" />
<Button
android:id="#+id/button2_date_depart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lieu_depart"
android:layout_marginLeft="50dp"
android:text="Date1" />
<Button
android:id="#+id/time_depart5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2_date_depart"
android:layout_marginLeft="70dp"
android:text="Time1" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/time_depart5"
android:minWidth="#dimen/activity_vertical_margin"
android:text="Lieu de restitution" />
<Button
android:id="#+id/button5_date_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button4"
android:layout_marginLeft="50dp"
android:text="Date2" />
<Button
android:id="#+id/button6_time_arrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:layout_below="#+id/button5_date_arrive"
android:text="Time2" />
<Button
android:id="#+id/Button03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/button6_time_arrive"
android:gravity="center"
android:text="Button" />
You can then play with the layout of your buttons by setting the gravity and margins. This should now fix your problem you are having.
You must use LienarLayout inside of ScrollView. RelativeLayout ignores orientation and used when you want put your items with absolute position. Your xml layout has many things to change . Can you send image of your layout to understand what exacly you want.
Here you have :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Starting place" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time 1" />
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Arrival place" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="Time2" />
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Submit" />
</LinearLayout>
</ScrollView>
In last linearlayout 2nd button i have include layout_marginLeft but with linearlayout gravity center it will center buttons and divide this space between two button, so you can manipulate with space between them.
By default layout will fill parent but in your second image you have something like right margin if you need it you can use android configuration qualifiers but better way to not duplicate layout xml is using values-land qualifier and add dimens folder where you can add padding value and add to your layout into first layout child of scrollview android:paddingRight="#dimen/your_property_name". More about dimen resources.
I want to dive my layout in two parts that have common design.Layout orientation is horizontal and i want to have 2 layout of that layout how could i do that .Here is my XML please suggest me how could i do that.
Copy and paste below code in your xml file, and made changes as you like,
You can ask for any help if you want
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="461dp"
android:layout_weight="1.00"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Take the references of layout objects at runtime using their id and depending upon requirement write condition in your code to show hide layouts.
For instance I have just replicated the same views everywhere, don't mind it...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Make the root layout which is a <RelativeLayout> currently as <LinearLayout>.
Set the orientation of that linear layout to horizontal.
set android:weight of all the child layouts to '1'.
use yourChildLayout.setVisibility(View.VISIBLE) to show the two layouts which are needed and yourChildLayout.setVisibility(View.GONE) to hide the rest.
I have a problems with my layout_margin. I want to make my layout look like that:
(with "a" is margin)
My problems is, when i build my layout in other screen size, it look like that:
How can i make it beautiful with different screen size? This is my layout:
<LinearLayout
android:id="#+id/footer_result_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/btn_recommendtion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/coodinate" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginTop="20dip"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/btn_facebook"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dip"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/fb" />
<ImageView
android:id="#+id/btn_mixi"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dip"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/mixi" />
</LinearLayout>
</LinearLayout>
Try using a relative layout.
Here is an example using buttons. You can swap out the values of the buttons with your image views, and adjust your margins as needed. This should center the buttons, with the same margins on any screen.
<Button
android:id="#+id/btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:text="BUTTON 1"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/btn_1"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_margin="5dip"
android:text="BUTTON 2" />
<Button
android:id="#+id/btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_margin="5dip"
android:text="BUTTON 3" />
</LinearLayout>
It looks like this:
You'll need to use RelativeLayout for that.
Center button1 with android:layout_alignParentTop="true" and align it in the parent top with android:layout_centerHorizontal="true and work from there.
The code:-
<?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="fill_parent">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_margin="10dip"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_margin="10dip"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_margin="10dip"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"/>
</RelativeLayout>
Considering the a=10