I've got a very simple app widget layout: a line of text above an image.
The image should scale to fit the widget's bounding box (maintaining aspect ratio) and the text should be left-aligned with the image below it. Together they should appear in the middle of the widget's bounding box.
I can't get that to work. The best I managed was aligning to top-left of the bounding box, as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="top"
android:scaleType="fitStart"
/>
</LinearLayout>
I can't specify a scaleType which would align top-center and I also can't make the image view take just as much space as it needs for the image.
Try this, Here is an image, If you want your layout should visible as you want in landscape mode, you have to make another layout for the landscape mode or keep your view in portrait mode.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/img"
android:text="Text Line"
android:textColor="#color/black" />
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/signuptop" />
</RelativeLayout>
Related
I'm trying to vertically stack a dynamic height ImageView (image will get downloaded and displayed, therefore don't know the height) with a RelativeLayout, and I need an outcome like in the right side figure of the following Image where blue rectangle represents the ImageView and red represent other RelativeLayout.
So far I've tried below, and it gives me the output of left side figure (layouts overlaps).
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="2dp"
card_view:cardUseCompatPadding="true"
card_view:overlay="#drawable/default_selector">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- ImageView represented by Blue rectangle -->
<ImageView
android:id="#+id/thumb_image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
<!-- RelativeLayout represented by Red rectangle -->
<RelativeLayout
android:id="#+id/thumb_bottom_view"
android:layout_width="match_parent"
android:layout_height="#dimen/default_height"
android:layout_alignParentBottom="true"
android:animateLayoutChanges="true"
android:gravity="center_vertical">
<TextView
android:id="#+id/thumb_text_resolution"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:paddingLeft="#dimen/default_gap"
android:paddingRight="#dimen/default_gap"
android:textColor="#color/Thumb.Text"
android:textSize="14sp" />
<ImageButton
android:id="#+id/thumb_button_heart"
android:layout_width="#dimen/default_press_size"
android:layout_height="#dimen/default_press_size"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="?heartBackground"
android:scaleType="centerInside"
android:src="#drawable/ic_action_heart_empty" />
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
What should I change in order to make it look like right side figure?
Got it fixed by removing android:layout_alignParentEnd="true"
and adding android:layout_below="#+id/thumb_image_view" instead.
<RelativeLayout
android:id="#+id/thumb_bottom_view"
android:layout_width="match_parent"
android:layout_height="#dimen/default_height"
android:layout_below="#+id/thumb_image_view"
android:animateLayoutChanges="true"
android:gravity="center_vertical">
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
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 have ImageView which needs to be shown in full height available. However at top i have created LinearLayout which contains Text and Image. I want it to display at top but also want to image to fit screen. I have linear layout at bottom and its working fine.
This is my code for LinearLayout which i want to show at top. I have hidden actionbar
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/black"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="#+id/backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:src="#drawable/back_button" />
<TextView
android:id="#+id/titleofscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Testing"
android:textColor="#22c064"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageShown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
</FrameLayout>
If i dont set imageView scale type to android:scaleType="fitXY" then it works but image doesnt fit screen.
I want to display image to fit between above bar which contains Text and below it has some icons. But if i make image scaletype ='fitXY' it doesnt display above text. Following is screenshot but i want image to occupy space
If you want the image to be below the actionbar you should not use the FrameLayout as a parent. You either should use vertical LinearLayout with weight or `RelativeLayout". Try following code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/black"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="#+id/backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:src="#drawable/back_button" />
<TextView
android:id="#+id/titleofscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Testing"
android:textColor="#22c064"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageShown"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/actionbar"
android:layout_alignParentBottom="true"
android:scaleType="fitCenter"
/>
</RelativeLayout>
Also I doubt that you use fitXY as android:scaleType, because it doesn't maintain the aspect ratio of the image - so your image will be deformed (stretched). In your case you should rather use fitCenter, but it depends on how exactly you want to scale your image - you can also play with centerInside or centerCrop.
I'm trying to build a gui for my app. It is comprised of two images, one on top of the other. The bottom image needs to be scrollable, the top image needs to be fixed.
This is the current layout xml for the view:
<?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:gravity="right"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<Button
android:id="#+id/button_load"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load" />
<Button
android:id="#+id/button_save"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save" />
</LinearLayout>
<uk.co.test.EditorView
android:id="#+id/EditorView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" />
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/imagemdpi" />
</HorizontalScrollView>
</LinearLayout>
Using this layout, the bottom image does not scroll, it is compressed to the width of the screen. If I remove the EditorView, it does scroll. How can I make the gui act as I want?
Any help gratefully received. Thanks
I'm actually not sure why removing the EditorView makes it work. Also, I only see one image view in your layout. But to make that ImageView scroll horizontally, I would change the layout_width of the scroll view to "match_parent" and add a scale type to your image view.
(see: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html )
I would try either "center" or "matrix," although usually I have to play around with these a bit to get it to work just how I want it.
so:
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_gravity="bottom"
android:src="#drawable/imagemdpi" />
</HorizontalScrollView>
In generally, with scroll views, you want to match_parent for the size of the scroll view, but wrap_content for the view being scrolled. The scroll view will allow the wrapped view to grow bigger than its own bounds, but if the scroll view grows bigger than the screen bounds, it won't scroll because it thinks it's showing everything already.