I am facing a problem with setting background image for my app. I have linear layout with two imageviews. One with logo and weight 1 and one with background image with weight 3. I want the second one to be always centered horizontally and have sides cropped in vertical orientation and bottom cropped in horizontal orientation. CENTER_CROP almost does the job but I want to have the top of my image drawn. I don't care about the bottom.
In this configuration vertical orientation is perfect but horizontal cuts the top of image and I want the top to be always visible. Bottom can be cropped
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="50dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/masters_logo"
android:id="#+id/imageView" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:scaleType="centerCrop"
android:src="#drawable/masters_login_background"/>
</LinearLayout>
That's what I want to achieve.
Vertical orientation:
Horizontal orientation:
If you want to set background into your login screen, you should add android:background="#drawable/masters_login_background" attribute into your root LinearLayout.
Otherwise, you should use, for example, RelativeLayout as root element and add inside this your ImageView as top element, smth like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/masters_login_background"/>
<!-- other code here -->
</RelativeLayout>
I had to edit the ans as I understood your question wrongly. Please use the below code. This will postion your bg img in the background and logo above the bg img.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:scaleType="centerCrop"
android:src="#drawable/masters_login_background"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="50dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/masters_logo"
android:id="#+id/imageView" />
</LinearLayout>
Related
I am using xamarin android to make a android app in which i am using cardview with recycler view.
Problem
Image height is exceeding the wrap content of the text.
What is Want
I want the image size to be the size covered by text.
What I Have Tried:
I have tried setting image as a background of the linearlayout but it sets the height of the layout itself much greater than shown in images below.
i have tried setting this in framelayout but it gives same result as below
Details about the images
numbers are provided with the instance of the card view in
1: image the image source height is increasing the view height
2: this image is setted perfectly because the original image height resolution is low and the image is stretched to view
3: again image height resolution is high so the view is extended by image
4,5 cardview without image
My Code:
<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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/cardView"
app:cardBackgroundColor="#android:color/transparent">
<ImageView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:id="#+id/cardImage"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/templateLayout"
>
<TextView
android:text="Title:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:id="#+id/listTitle"/>
<TextView
android:text="Start Time:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:id="#+id/listSTime"/>
<TextView
android:text="End Time:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:id="#+id/listFTime"/>
<TextView
android:text="Description:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:id="#+id/listDescription"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Images:
Add the following fields to ImageView
android:scaleType="centerCrop"
android:adjustViewBounds="true"
you can change the imageView attributes to android:scaleType="centreCrop" and change the height to wrap content. you are matching it to parent in you case,its the card view. Whereas, textview is in a linearlayout.
Orelse you can move ImageView to same linearLayout of the textView
I´ve tried a few thinks to achive the following thing:
For the discription: I want to have a header with a textview which wraps over the howl page and below this header I want to display three images beside each other. It should be like a image gallery. This layout i want to duplicate.
But my problem is, that I the height of the ImageView is to high and that there is a distance between the sized image and the title. See figure.
On the Left is what I want and on the right is what I got...
Here is my layout code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:textStyle="bold"
android:text="titel"
android:id="#+id/titel"
android:gravity="center"
android:padding="3dp"
android:textSize="18sp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titel">
<ImageView
android:layout_width="0dp"
android:layout_weight="0.208"
android:layout_height="match_parent"
android:id="#+id/image1"
android:src="#drawable/1"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="0.389"
android:layout_height="match_parent"
android:id="#+id/image2"
android:src="#drawable/2"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="0.403"
android:layout_height="match_parent"
android:id="#+id/image3"
android:src="#drawable/3"/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
my best guess is because your ImageView scales your image in a way that it fits into the center of the view and leaves empty space around the top and bottom of the view. try adding android:adjustViewBounds="true" to your ImageView in the xml.
on a side note, when debugging view hierarchy, it's almost always gonna be helpful to go to Android Device Monitor, select your devices to the right, and click Dump View Hierarchy for UI Automator. You can easily find out which view is taking the extra space by hovering your mouse over different view elements.
I am trying to add a custom border to a framelayout. The framelayout is used as container for the fragment. Thus I want to display fragment with a border. The border should be external to framelayout and should not consume the space inside of framelayout. And it should adjust with change in screen size.
What i can think right now is some sort of custom ViewGroup, add ImageView for border. Use image processing to get the inside area of imageview and in that area inflate a frame layout.
I am looking for some easy way out.
The easiest solution for this would be to create a 9-patch drawable and set it as the background for your FrameLayout. I have created the below 9-patch drawable that you can use. Hope this suffice your requirement.
You can obtain the effect via layout XML using for example LinearLayouts with proper layout_weight, so your centre-most FrameLayout will expand to take up available space.
There are 4 drawables used: for top, bottom, left and right part of frame.
Check out this code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/border_left" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/border_top" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!-- FrameLayout content goes here -->
</FrameLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/border_top" />
</LinearLayout>
<ImageView
android:layout_width="wrap_conttXY"
android:layout_height="match_parght"
android:scaleType="fient"
android:src="#drwable/border_right" />
</LinearLayout>
In my layout I have a FrameLayout which contains 2 ImageViews. One ImageView is shown at a time and the change between ImageViews is done through 3D Rotation animation.
<FrameLayout
android:id="#+id/animContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<ImageView
android:id="#+id/picture1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/malware" />
<ImageView
android:id="#+id/picture2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/browsing"
android:visibility="gone" />
</FrameLayout>
The problem with my xml is that it leaves some empty space above and below the ImageView in the FrameLayout even though I have not specified any top or bottom margin/padding to it.
The ImageViews I'm using in the FrameLayout are of equal heights.
I want the height of the FrameLayout to be exactly same as the height of the ImageViews within it.
How do I achieve this?
Thank you.
EDIT:
Another thing I have observed is that in landscape mode the empty space is added to the left and right of the ImageViews and the width of the FrameLayout does not match with the width of the ImageViews.
How can have the FrameLayout width and height same as that of the ImageViews?
I think you need to use android:adjustViewBounds="true" -> in your ImageView's ... This will resize the imageview to the image inside and hopefully fix your problem.
http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
I think I found a solution, in mine I had to place an image in the right hand corner for the delete icon but had to jump through hoops to get the edge of the X to line up with the top of the photo. fitCenter would create whitespace on top and bottom. fitStart worked like a charm.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/front_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:onClick="imageEditClicked"
android:src="#drawable/myimage"/>
<ImageView
android:id="#+id/front_right_x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#color/white"
android:layout_gravity="end|top"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/com_facebook_tooltip_black_xout" />
</FrameLayout>
I was wondering how to make the four images inside my LinearLayout look as big as possible depending on the screen. When I install the widget in my phone, it always fits only 50% of the screen.
Here comes the xml.
Any hints?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical|clip_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/hora1_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/hora2_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/minuto1_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/minuto2_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
Add android:weightSum="1" to your parent linear layout.
The linear layout should have android:orientation="horizontal"
Now to each of your image views , add android:layout_weight = 0.25.
Hope this works.
hope you read enough about orientation vertical and horizontal .
you should clear here that by filling screen whether you mean altogether all 4 fills the screen such that each takes 25% or every one should take 100% width and added up vertically .
for first case add android:layout_weight=1 for every imageView .
for second case replace android:orientation="horizontal" by android:orientation="vertical" in root LinerLayout
Don't use wrap content, instead use the actual dimensions of the image or fill parent.