I am working on a project and I have run into some problems. I haven't worked with the layouts very much so I don't know if this is possible or not.
In the picture I have added the project mock-up. For the lower screen resolution it looks fine, but when I put the app on 5 inch device, this orange area is too high and I wanted to know if it is possible somehow to get that area centered.
The orange area is a LinearLayout and everything is wrapped inside LinearLayout. Hope you understand what I mean I what I am asking.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff0000"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="76dp"
android:background="#175797"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject" />
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#00FFFF"
android:orientation="vertical" >
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Send" />
</LinearLayout>
<LinearLayout
android:layout_gravity="bottom"
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFA500"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
This is code for the mock-up. For the project it's pretty much the same
Try this !
I tried putting Linear layout inside a relative layout and defining its gravity. I checked it on various resolution.Give it a try
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff0000"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="76dp"
android:background="#175797"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject" />
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#00FFFF"
android:orientation="vertical" >
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Send" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<LinearLayout
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFA500"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
you can try #g00dy answer or else
You have to create separate layout for phablet (i.e. 5 inch devices)
Here in this link they had explain how we can put our tablets layouts...
On android developer site they have had explain how android manage layouts for different screen sizes check this link
May be try android:layout_gravity="center" that should do the trick :)
Also in addition, you can add android:layout_centerInParent="true" and take a look at this thread as well.
for giving the compatibility of xml for all android devices and tablets, please use the Relative Layout as a parent view and set the component according to your requirement.
please follow this link for more reference: http://developer.android.com/reference/android/widget/RelativeLayout.html
Related
I am novice in Android trying to make this layout:
Simply what I want to achieve:
The red container should take as much space as it needs but not as much that green container have to be shrinked. If there are too many items, red container will be scrollable. Green container is also always centered in orange one if there is space for it (if not it is actually still centered).
I don't know how to do it at all :( . Here is my try:
The problem is that I want to always maintain height of green container (minHeight does not work I can't understand why) and make the green container centered in orange one. I have problem with Scenario 2 (as you can see in the picture), this code works good in first scenario.
<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">
<ScrollView
android:id="#+id/red_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Items are here -->
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/orange_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_orange_dark"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:id="#+id/green_container"
android:layout_width="100dp"
android:background="#android:color/holo_green_dark"
android:layout_height="50dp"
android:orientation="horizontal">
<!-- My content -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
Edit: minHeight does not help:
Edit: image for user Illegal Argument:
Try setting property android:minHeight = "(whatever)dp" to orangeContainer. This worked for me in others "similiar" cases.
:)
Is this what you are looking for:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/list_items"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/background_dark" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/list_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/darker_gray"
android:gravity="center"
android:minHeight="200dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
Snapshot in ecllipse:
I am trying to create an interface for my application. In layout preview from eclipse everything is ok but when I test the application on the real device the two ImageViews doesn't show the images. I make Android application for 2 years but it is the first time I encounter this problem.
Screenshot from the eclipse layout preview:
And here is a screenshot from my tablet with no changes made to the code:
The xml code I use is simple:
<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" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:background="#ffffff" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/right_background"
android:orientation="vertical"
android:padding="2dp"
android:weightSum="11" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_weight="6"
android:background="#drawable/upper_container" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="12312"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:src="#drawable/video_button" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:background="#drawable/bottom_container" >
<ImageView
android:id="#+id/imageView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:src="#drawable/photo_button" />
</RelativeLayout>
</LinearLayout>
Does anyone have an idea what the problem might be? Thank you.
After all I created a separate RelativeLayout with the background image and I put the ImageView with the button over it. It worked this way.
add:
android:scaleType="fitXY"
also change height and width of imageview to fill parent.like:
android:layout_height="Fill_parent"
android:layout_widtht="Fill_parent"
I haven't been able to find a similar problem to the one I'm having on StackOverflow - basically, I have a simple XML layout with a vertical LinerLayout which uses layout_weight to make a 10/50/40 split, which is what I want (as seen below):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".1"
android:text="#string/title"
android:textColor="#color/black"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:orientation="vertical"
android:background="#color/green">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</HorizontalScrollView>
<ImageView
android:id="#+id/preview_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/level_preview_back"
android:focusable="false" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".4"
android:text="#string/title"
android:textColor="#color/black"
android:textStyle="bold" />
</LinearLayout>
BUT - I want the HorizontalScrollView and the ImageView to be overlayed (i.e. take up the exact same space on on top of the other), so I insert a RelativeLayout as such:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".1"
android:text="#string/title"
android:textColor="#color/black"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:orientation="vertical"
android:background="#color/green">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</HorizontalScrollView>
<ImageView
android:id="#+id/preview_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/level_preview_back"
android:focusable="false" />
</RelativeLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".4"
android:text="#string/title"
android:textColor="#color/black"
android:textStyle="bold" />
</LinearLayout>
But when I do this, the layout_weight (10/50/40 split) breaks and suddently the LinearLayout that now contains the RelativeLayout takes up virtually all the screen in the previews.
Anyone experienced this problem or know a good workaround? I've also tried replacing the LinearLayout with the RelativeLayout directly and I have the same problem.
EDIT: Looking further into this issue, there seems to be more to it. As I commented below, I was able to get around the problem by wrapping LinearLayouts around the TextViews, though I'm not sure why that worked. Updating my SDK and plugin didn't help (though I did need to do it....)
Moving further along with my task, I hit a second problem - I was implementing a second version of the overlapped ScrollView & ImageView (which were done with a FrameLayout as suggested by Karsten) but the layout_weight problems began anew.
Testing various arrangements, it seems that the issue is very much related to the image I'm using, which is quite large in resolution. Replacing them with a smaller image corrects the issues - it looks like using large images in either ImageViews or as backgrounds to LinearLayouts tends to ruin the layouts for the entire screen.
EDIT #2: I've actually loaded the XML on to two different devices and it renders exactly as it should.... This seems to be a bug with the Eclipse XML layout viewer?
(Please excuse the poor XML formatting - the Eclipse Android xml editor is frustrating in that regard...)
The XML you've posted works fine for me in the Eclipse preview. Are you running the latest version of the Android plugin?
Note that you can replace the middle LinearLayout and RelativeLayout with a single FrameLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".1"
android:text="string/title"
android:textStyle="bold" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:background="#00ff00" >
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:fillViewport="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</HorizontalScrollView>
<ImageView
android:id="#+id/preview_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:focusable="false" />
</FrameLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".4"
android:text="string/title2"
android:textStyle="bold" />
</LinearLayout>
I am developing a new Android application. I need to design the below screenshot in my application . I am using eclipse IDE.
Using the below code I formed the above shown screen-shot. But whenever I choose the different screen previews ( 4.7’’ WXGA , 4.0” WXGA etc., ) am getting the inner images which are marked with arrows in the below scree shot are misaligned. The below is the screen shot which is an example. All the images in the layout are icons ( Ex., home, share ).
<?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:background="#drawable/bar"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="240dp"
android:layout_weight="1.00"
android:src="#drawable/rec_button_stop"
android:visibility="gone" />
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" >
<ImageView android:id="#+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="40dip" android:layout_marginTop="90dip"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dip"
android:layout_marginTop="90dip"
android:src="#drawable/home" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1.00"
android:src="#drawable/rec_button_stop" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="30dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dip"
android:src="#drawable/share" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
So I need the samller images ( icons which are marked with arrows) to be fixed at the same position ( in straight line ) whenever I change the screen priviews with different sizes.
Can some one guide me with some code snippets or with some links.
#2Vision2 : This problem is caused because you have used fixed margin in layout components.
For supporting various size devices you have to create different layouts. You are facing this problem because you are using only single layout. Create 4 directories in res/ directory in your app for layouts of all sizes
layout (for devices below 4")
layout-800X480 (for devices above 4" & below 5")
layout-sw620dp (for 7" tablets)
layout-sw800dp (for 10" tablets)
Also if want to create different layouts for landscape mode then create layout-land, layout-land-800X480,.. directories for supporting app in landscape mode also.
try this xml file,this will work universally in all sizes(land & port)!actually you may be using wrong way to use weight.
hope this will help you getting idea how to set layout and gravity,with the use of WEIGHT.
<?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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".75" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".25"
android:background="#android:color/darker_gray" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".20"
android:gravity="center" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".60"
android:gravity="center|top" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".20"
android:gravity="center" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
weight can be also used in Relative Layout.but preffered way to use it with linear Layout.
still any query, plz ask...
I have difficulties with my layout.
As my first dev project, I'm trying to make a simple chronometer.
I want to have a picture of a chronometer in the background and the start and stop button
at the bottom of the application, side by side and filling the width of the screen.
Here is my best shot, but I'm not satisfied.
All widgets are placed properly but ...
My background is streched and my buttons seem vertically compressed, even the text at the bottom is a bit cropped.
I found that if I change these lines
android:layout_width="fill_parent"
android:layout_height="fill_parent"
by
android:layout_width="wrap_content"
android:layout_height="wrap_content"
The background is ok, the buttons too .. but all widgets are placed in the center of the Activity.
How can I fix this ?
By the way if I want to have my buttons side by side, did I choose the better solution ?
Thanks for your help !
Charles.
... and now my xml ....
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="START" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="STOP" />
</LinearLayout>
I tried relativeLayout.
I don't know how to have two buttons of the same size without using a padding, I don't think it's a good idea if you want your app to run on different screens.
Anyway I come up with this, but I still have my streched image and my buttons don't have the same size.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Stop" />
Try RelativeLayout ;) I think this is much easier to handle than a LinearLayout. Maybe you can upload a picture how it looks like and I will give you a relativelayout solution ;)
Can you try this out? Should work IMO.
It is a better/fool-proof way to obtain your layout.
<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="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Stop" />
</LinearLayout>
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout1" />
</RelativeLayout>
I finally found the solution.
First problem: my 9 patch image hid my other component.
Solution: add android:padding="0dip" in your linearlayout ... here the subject that gave me my answer (Android layout broken with 9-patch background)
Second problem: why my picture was streched whereas I designed it at the exact size of the screen. This one was a silly question ... it was because of the action bar and the other bar above (with battery level and other stuff).
To get rid of theses bars (included in the theme) use a different version of the Theme in the manifest.
I choose: Theme.Light.NoTitleBar.Fullscreen.
Problems solved.