I am trying to make a very simple Layout like this:
An image occupying the width of the screen, and a button occupying the width of the screen coming right next to it without any space.
Here is the code I have, it is next to trivial
<?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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</LinearLayout>
The problem is, the button does not show up, it shows the image with some space
The emulator is running with screen size 1080 x 1920, and the image has size 720 x 990, if we scale that up, it should be 1080 x 1485, leaving a lot of space for the button, but the image occupied in the middle of the screen somehow that I do not understand.
This is how a screen capture on the emulator look like:
Next, I tried to swap the order of the button and the image (just for the sake of experimenting), I see something like this:
I get this:
<?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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
</LinearLayout>
Now I figured what happened, it appears that we have lot of spaces between the button and the image and therefore the button have no space. But where does those spaces come from? I wanted them to stick together.
The full source code of this experiment can be found in
https://github.com/cshung/MiscLab/tree/master/Question
The problem occurs here because the LinearLayout container has a height with wrap_content and the system extends the ImageView at its max and then display the TextView below it (thus below the screen height).
To get the right layout, you have to use layout_weight in the child views as follows:
<!-- fill the entire height -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
...>
<!-- take 90% of container -->
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
... />
<!-- take 10% of container -->
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
... />
</LinearLayout>
Then, in order to have "no space" for the image, you have to play with the attribute scaleType (see this example) as the following:
Either force the image to fit the widht/height:
<ImageView
...
android:scaleType="fitXY"/>
Or show the center and fill the w/h:
<ImageView
...
android:scaleType="centerCrop"/>
Your drawable/bg is being scaled to fit in id/imageView. The space you're getting is just the window's background not being covered by the image. Change ScaleType of your ImageView to FIT_XY, CENTER_CROP or other and watch a result. See: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Your easiest option will probably be to use a RelativeLayout instead of a LinearLayout. I think this is the direction Android has been going lately. Everything seems to be RelativeLayout based. For instance, when you make a new layout in Android Studio, I believe it defaults to RelativeLayout. It used to be LinearLayout in the eclipse extension a while back.
Relative Layout
Using a relative layout instead you should have the following:
<?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="wrap_content"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_below="#id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</RelativeLayout >
Note that I simply changed LinearLayout to RelativeLayout, removed the setOrientation and then added the following line to your button.
android:layout_below="#id/imageView"
First of all your image is too big so it basically takes up all of the screen space in the first place and pushes the button down the viewable region.There is no need to modify the padding or margin as it is in the LinearLayout and it places all child views one after the other.
Set a desired height to the image view and also a scale type to get what you are expecting.
<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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:layout_height="300dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
Screen shot
Related
I want to place image approx full height and a fixed footer.
I tried this code.
Image is dynamically update using from gallery
<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"
tools:context="com.aaaa.com.EditView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp"
android:layout_alignParentBottom="true"
android:id="#+id/footerEdit"
android:weightSum="2">
<Button
android:id="#+id/addBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/takePhoto"
android:background="#drawable/icon_camera"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imgview"/>
</RelativeLayout>
I want to scale image entire screen but leave footer area
Please guide
When you are working with relative layouts, you still can manage Header and Footer (this last for you) indicating and order between the layouts.
For your main content area add:
android:layout_above="#id/lytFooter"
to be set stacked over your footer
and
android:layout_below="#id/lytHeader"
to be set stacked below your header.
For your main content area set height to match_parent.
Hope it helps.
Hello I have to create the UI like bellow,(picture attached) using regular Android layouts. I got header, footer and middle areas along with a image view.
According to the picture : Area A and Area C is similar height (20% of screen) and image view should be placed always in the middle of Area B and Area C.
My current xml code is like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/show_contact_bottomArea"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_middleArea"
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical"
android:background="#color/grayContact"
android:layout_below="#+id/show_contact_headerArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="#+id/show_contact_bottomArea">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_headerArea"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"></LinearLayout>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark_focused"
android:id="#+id/imageView2"
android:layout_marginBottom="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
I gave
marginBottom="40dp"
for image view to push it upwards, which is not a good practice. what is the best way to place the image view in the center of Area B's and Area C's border.
Also currently I gave
android:layout_height="120dp"
for Area A & Area B's height but ideally both should be 20%(each) of the screen, how to achieve that also?
You can give weights 20 % to each A and C. This way they will occupy 20% of top and bottom respectively. Assign rest 60% of height to B.
For imageView, you can place entire layout in Coordinate layout and assign anchor to footer.
Her is code snippet
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<LinearLayout
android:id="#+id/show_contact_bottomArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_weight="2"
android:background="#color/primary_light"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_middleArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#+id/show_contact_bottomArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/show_contact_headerArea"
android:layout_weight="6"
android:background="#color/holo_blue_light"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_headerArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="2"
android:background="#color/primary"
android:orientation="vertical"></LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
app:layout_anchor="#+id/show_contact_headerArea"
app:layout_anchorGravity="center_horizontal|top"
app:srcCompat="#drawable/header_record" />
</android.support.design.widget.CoordinatorLayout>
Result :- I have colored different section with different color code.
use weight for giving exact portion of Area and Frame Layout
for eg:
weight sum =4 have to give in parent Linear layout
Area A give 1
Area b give 2
Area c give 1
After Area B add image View with top -(height you want to appear in B's portion)
Creating an application in portrait mode where I have to align Button on image based on top margin. I'm using dimens file in values-sw360dp which is looking proper in nexus 5 but the same values is not aligning the Buttons in nexus 4 as both of the devices using values-sw360dp folder for dimens file.
Can you please suggest the solution for this. Also can any one provide list of all possible values folder that should be integrated to support multiple screens
Following is the code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/windowBackground">
<ImageView
android:id="#+id/bc_logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/bc_imgbc_logo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/bc_logo"
android:orientation="horizontal"
android:weightSum="1"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/bc_img_margin_top">
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/signing_tab_btn"
android:text="SIGN IN"
android:textColor="#color/colorAccent" />
<Button
android:id="#+id/registration_btn"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="REGISTER"
android:textColor="#FFFFFF" />
</LinearLayout>
</RelativeLayout
In above code I need to align the LinearLayout on the ImageView so using android:layout_marginTop="#dimen/bc_img_margin_top"for setting margin.
I have the Image in <ImageView/> which i have to give height and width as match parent in order to maintain aspect ratio and occupy width of screen so this results in the image showing in the area i wanted top of screen but the <ImageView/> is occupying area of whole screen and I want to align the <LinearLayout/> having buttons on the bottom part of Image.
Following is the image in which the sign in button with yellow underline and register button in white text needs to be aligned on bottom most part of the image where image ends. and the blue area depicts the area occupied by which covers the whole device height.
you need to add some values by yourself like backgrounds and dimensions...
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FF00">
<ImageView
android:id="#+id/bc_logo"
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="fitXY"
android:src="#drawable/background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:orientation="horizontal"
android:layout_gravity="top"
android:weightSum="1"
>
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="SIGN IN"
android:textColor="#00FFFF" />
<Button
android:id="#+id/registration_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="REGISTER"
android:textColor="#00FFFF" />
</LinearLayout>
</FrameLayout>
Create this kind of value structre for different sizes
I am using a list view and I have an image in it, the image just for example say is 1920 by 1080, and i only want to display the same amount of the image as height of the layout that it is in.
So i have a verticl linearLayout and it's height is 100dp for example, so i want the image that im using in that image view to display whatever 100 dp would translate onto the image? if that makes sense. I want to keep the same resolution and i dont want to shrink it or anything, just show part of the image .
this is the xml as of now:
<?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="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/example"
/>
</LinearLayout>
</LinearLayout>
Try this:
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="center"
Documentation to "center"
Documentation to "layout_weight"
I have an issue with my app where the button layout is not evenly spaced when used on different devices.
As shown, the first screenshot shows the layout evenally spaced out on an older, smaller screened android smartphone.
The second screenshot from a Nexus 4, shows the large white space under the bottom button that is uneven.
I thought I had set my layout to be even but it seems it isnt.
UPDATE:
How to set a scroll view with the two linear layouts in it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="84dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgLink"
android:layout_width="78dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/appointmentmanimenuicon" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="75dp"
android:gravity="center"
android:text="Appointments"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30sp" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnaddAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointmentmenu"
android:src="#drawable/appointmentmenu"
android:text="Add Appointment"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnviewAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointviewicon"
android:src="#drawable/appointviewicon"
android:text="View Appointments"
android:layout_weight="1" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Your nested linear layout with the buttons has a fixed height of 400dp. On the small device this leaves a smaller amount of space at the bottom then it does on the larger nexus4.
If you change your linear layout with the buttons to use a height value of fill_parent it should place the buttons evenly in the space remaining in the parent layout underneath the header ( contacts).
Your second LinearLayout has a fixed height of 400dp. The bottom edge of that layout will always be at 484dp (taking into account the first LinearLayout), and will leave extra space after it on any screen larger than 484dp tall.
I'm not entirely clear on what your desired layout is, but believe what you want is to center the second LinearLayout within the parent LinearLayout.
To do so, add android:layout_gravity="center_vertical" like so:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:layout_gravity="center_vertical" >
You should also consider removing the ScrollView, as that content should never need to scroll.