I'm having the following problem;
I have a LinearLayout with in it a ScrollView, in the ScrollView is some custom view. Now I want to put an image in the background of the LinearLayout and keep the image in its original size. But when I set the background property of the LinearLayout it stretches to fit the full screen. How can I make it so that the image keeps its original size?
My xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/some_drawable">
<ScrollView
android:id="#+id/scrollview"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:fillViewport="true">
<some.custom.layout
android:id="#+id/mainLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
</ScrollView>
</LinearLayout>
Code example for Egor's answer:
<FrameLayout
android:id="#+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/background"
/>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
</LinearLayout>
</FrameLayout>
Try using FrameLayout with an ImageView and LinearLayout inside. For example, try changing the alpha of the image and move it to foreground in your FrameLayout, thus the LinearLayout stays on background. Hope this helps!
<RelativeLayout
android:id="#+id/relLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/layoutLogin"
android:layout_alignLeft="#id/layoutLogin"
android:layout_alignRight="#id/layoutLogin"
android:layout_alignTop="#+id/layoutLogin"
android:adjustViewBounds="true"
android:background="#mipmap/ic_photo_bg"
android:scaleType="fitXY" />
<LinearLayout
android:id="#+id/layoutLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</RelativeLayout>
Alternatively to ColdForged's suggestion, you could move from LinearLayout to RelativeLayout and use ImageView to show the image instead of changing background to it. The views in RelativeLayout can interfere unlike in LinearLayout.
You might take a look at the InsetDrawable. Either that or it would likely require you to subclass your layout to draw the way you wish as the background element doesn't have the ability you need.
Related
I mean how can i locate a ImageView in two layouts? i have 2 relative layouts one is up, one is down. The up one has a ImageView but i want half of this ImageView located in down layout. How can i do that?
EDIT::
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_container"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#d2aff4">
<Space
android:id="#+id/center"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<RelativeLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/center"
android:background="#87c96d" />
<RelativeLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
In this scenario the "top" layout needs to be created at last to be displayed on top of the rest of the views. If you need it to have a background colour, you need to apply the colour to the main container.
Here is the result:
I agree with #Booger answer's but If your parent layout is RelativeLayout then add this below property in you ImageView.
android:layout_centerInParent="true"
Or you can use below code to create that kind of layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/gray_font">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent">
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
Take a look at this library https://github.com/umano/AndroidSlidingUpPanel
if you want something easy you can put those layouts in to a parent relative layout and then you can add a image view in parent relative layout as last child and position it how you need
I think you should wrap both your RelativeLayout in another Parent layout, and in that layout, you will place your ImageView (which will span both the other layouts.
Something like this pseudo-code:
<LinearLayout>
<RelativeLayout1>
<RelativeLayout2>
<ImageView gravity=center> //Order counts, this needs to be after the RelativeLayouts to show on top of them
</LinearLayout>
I need to display an image and text on a single row. The image should resize based on the text height. I know that it's possible programmatically but is it possible to do this also only in XML ?
<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">
<ImageView android:id="#+id/Image" ... />
<TextView
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/Image"
tools:layout_editor_absoluteX="47dp"
tools:layout_editor_absoluteY="37dp" />
</RelativeLayout>
Just wrap the views inside a parent view that adjust to the textview and make the imageview resize according to the parent.
<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">
<!-- LOOK HERE-->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/Image"
tools:layout_editor_absoluteX="47dp"
tools:layout_editor_absoluteY="37dp" />
<ImageView android:id="#+id/Image"
android:layout_heigth="match_parent"
android:layout_width="wrap_content" />
</LinearLayout>
</RelativeLayout>
I haven't test it, but it should be something really close to this.
EDIT: Using an horizontal LinearLayout should give you a quick view of how is working and the in the linear layout you arrange with the toRightOf, toLeftOf, etc.
my name is Josh. I am trying to achieve the below layout in Android but I can't seem to split the inner layout to get the layout I want. Can someone help please.
This is what I have so far:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.firstapplication.myapplication.MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="Name"
android:ems="10"
android:id="#+id/editText" />
</LinearLayout>
</RelativeLayout>
The only problem I am having is, I can't figure out how to split the layout as shown in the picture.
You can solve this multiple ways. I don't know the requirement for your layout but you really don't need two LinearLayout to solve this. However, with what you have currently all you have to do is give your first LinearLayout an id, and set the height to wrap_content like so:
<LinearLayout
android:id="#+id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
then in your second layout set the positioning to be below your first one, set the height to wrap_content and remove layout_alignParentTop otherwise your second layout will overlap to your first. So you have something like this for the second:
<LinearLayout
android:layout_below="#id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
This will put the second layout underneath the first, but the sizing will vary unless the first layout is always a constant height.
If you know you always want a 70:30 ratio regardless of the first layout height, you can use layout_weights instead. I can add that in if that's what you're looking for instead.
To have a constant ratio, change your root layout to be LinearLayout instead of RelativeLayout then set the orientation to be vertical and a weightSum to 1.
Then set your first LinearLayout to be a layout_weight of 0.7 and your second LinearLayout to be a layout_weight of 0.3. Like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="vertical">
<LinearLayout
android:id="#+id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"></LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"></LinearLayout>
</LinearLayout>
Set the LinearLayout's height parameters accordingly to achieve the desired ratio between two layouts.
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="**XYZ dp**"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
My xml file is like following:
<LinearLayout>
<ScrollView>
<LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
First LinearLayout has android:layout_height="match_parent", all others android:layout_height="wrap_content". How to create a layout at bottom of screen always in the foreground with an imageview?
This is best done with a relative layout. Relative layout elements stack on top of each other unless you position them relative to each other. For instance, if you had two image views and did position them, the second image view would be placed on top of the first one.
Here is an example to get you started:
<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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:contentDescription="#string/YOUR_CONTENT_DESC"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"/>
</RelativeLayout>
you could set the gravity of the linear layout to bottom.
android:layout_gravity="bottom"
When your creating your XML document order does matter. So for example:
<ImageView/>
<LinearLayout/>
The LinearLayout will be placed in front of the ImageView.
Try this way,hope this will help you to solve your problem with another one alternative.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:adjustViewBounds="true"
android:layout_gravity="bottom|center_horizontal"/>
</FrameLayout>
I should want the scrollview scroll, but not the image in its background.
Add the image higher up the view hierarchy ahead of your scrollviews frame
An example would be:
<?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/background_image"
android:orientation="vertical">
<ListView
android:id="#+id/category_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#android:color/transparent"/>
<TextView
android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Here the Linearlayout holds the backround image. The list will be displayed above this with an transparent background. For further informations on this topic have a look at ListView Backgrounds