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)
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.
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
I am working on a layout with a cardview, a checkbox and a button with the initial structure as shown in the first image:
In this case the listview is not shown until the user clicks an image inside the cardview, so when this happens the dessired structure is like
the second image
However as the listview is actually inside a fragment I can't achieve the dessired layout because wrap_content and match_parent for the cardview gives me the next result
And as you can see the cardview overlaps the button and the checkbox goes beyond the screen
Right now this is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_alignParentTop="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/checkBox"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"/>
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_below="#+id/checkBox"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_alignParentBottom="true"
style="#android:style/Widget.DeviceDefault.Button.Borderless"
/>
I hope you can help me to set the max height of the card view to stop growing when the space is filled.
I have also tried to set the checkbox always at top of the bottom and the cardview to fill the remaining space and although it gives me the correct structure when the listview is expanded, it doesn't work for the list hidden since the cardview fills the space with nothing.
Update
As suggested I have tried changing the root layout to LinearLayout using weight, however, I got the same result as before and if I change the weight of the cardview to 1 and the checkbox to 0 I am able to get the desired layout for the expanded list but not for the hidden case.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/check"
android:id="#+id/check"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"
/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:textStyle="bold"
android:textColor="#android:color/white"
/>
You'll need to use a LinearLayout and use Weight for the childs.
You can change all views weight on click.
But I think you'll need to put your CheckBox inside a layout and set this layout weight. Otherwise you'll mess with the height.
Didn't look to close to your layout, but you may need to do that for CardView too.
Just keep that in mind.
Hope this helps
To do what you are trying to do, you would have better luck using a LinearLayout with vertical orientation as your root element. Doing this, you could set the CardView to have a weight of 1 (and a 'height' of 0dp, because of how weight works) without giving a weight to the other elements, causing it to fill all available space not taken by the other two elements. The method for doing this can be found here:
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight
This is my first post on Stackoverflow.
My question is related to ImageViews : I have a simple XML layout file composed of two LinearLayouts included in a general LinearLayout.
The first LinearLayout contains a simple ImageView, and the second one contains three buttons.
My problem is that the ImageView takes all the space on the screen and therefore the three buttons aren't displayed.
I've done quite a lot of research, I've tried to change everything I could to make it work and the only thing that did the trick was to turn the ImageView layout_width attribute into a dp value.
Why do I have to do that? Is it somehow related to the dimension of the original picture (1280 x 800)?
The XML file is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
For anyone having this issue, there is a quick solution for that.
In your imageView XML add the following property:
android:adjustViewBounds="true"
for. eg
<ImageView
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"/>
If you are using a Constraint Layout, don't forget to add the constraints.
You could use android:layout_weight in order to define how much space should be taken by the layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
In the example above both inner layouts have the same weight, so they bot fill 50% of the height.
If all views reserve the entire available height (match_parent) then the first one wins. So in your case the top level layout (linearMainCreateTape) fills the whole height and the layout which contains the ImageView does the same. So there's nothing left for the three buttons below it.
I'm currently trying to build a simple Contacs Card myself. I just want a Profile picture on the top left, about a quarter to a third of the width, and the Name + description on the right side.
No matter what i try, it always looks very similar to the screenshot below.
this is my Layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_standard_padding"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"
style="#style/AppBaseThemeCardBG">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/nowCardStyle">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="top"
android:paddingRight="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/schuckCard"
android:scaleType="fitCenter"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical">
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/schuckHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="JESCO SCHUCK"
android:textSize="#dimen/textSizeVeryLarge" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="Description" />
</LinearLayout>
</LinearLayout>
</ScrollView>
This is how it looks like:
I'd like the image to be approximately as wide as the description in the action bar. Obviously i brutally failed here
Use different values for the layout weights. Like 4 for the image and 6 for the content to give it 40‰ of the cards width
Consider using cardslib ( https://github.com/gabrielemariotti/cardslib) to do your card layout. It is very well put together.
Got my stupid Problem fixed:
In the ImageView I have declared android:scaleType="fitCenter" which apparently also centers the ImageView in my Layout.
When changing the scaleType to fitStart I get the result I wanted.