When I am loading an image(more specifically, an image of portrait shape) in an ImageView that image is sometimes covering the Button which is above the ImageView. The ImageView has layout_width and layout_height set to wrap_content. My requirement is that the ImageView will wrap content but, won't cover up the button. I don't want to hardcode pixel values.
layout:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="mg.colorfilters.ResultActivity$PlaceholderFragment" >
<Button
android:id="#+id/button1"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#color/red"
android:text="#string/string3"
android:textStyle="bold"
android:textColor="#color/white"
android:onClick="loadImageWithFilterOrSaveImage" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/abc_ab_bottom_solid_dark_holo"
android:contentDescription="#string/string4" />
</RelativeLayout>
You want your image to be at centre?
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
If yes, then may want to put your Button code below ImageView code, like
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/abc_ab_bottom_solid_dark_holo"
android:contentDescription="#string/string4" />
<Button
android:id="#+id/button1"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#color/red"
android:text="#string/string3"
android:textStyle="bold"
android:textColor="#color/white"
android:onClick="loadImageWithFilterOrSaveImage" />
This way the button will always be on top. If image is large, button will be visible on top of it. Use this solution only if you are OK with this behavior.
In Your Layout.xml
please insert android:layout_above="#+id/button1 line in <ImageView> tag.
you can use a scrollview inside the relative layout and use a linear layout in vertical orientation in the scrollview...then add your button and imageview in the linear layout.....I havent tried this but i think this will work :D
Related
In my relative layout, I have a spinner and an imagebutton. I placed my image button in the right corner through the code below:
android:layout_alignParentRight="true"
Now, I want my spinner to stretch its width to the left of my image button. I can acheive this by using fixed width of my spinner, but I want it dynamically so it can adjust to any screen size.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/coa_searchAccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_youtube_searched_for_black_18dp"
/>
<Spinner
android:id="#+id/coa_parentid"
android:layout_alignParentLeft="true"
android:layout_alignRight="#id/coa_searchAccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Spinner>
Click to see Image
Align your ImageView to the right and then align the Spinner to the left of the ImageView
Use something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/image_view" />
<ImageView
android:id="#id/image_view"
android:layout_width="#dimen/your_dimen"
android:layout_height="#dimen/your_dimen"
android:layout_alignParentRight="true"
android:src="#color/your_drawable" />
</RelativeLayout>
I have TextView and ImageButton in xml layout. And ImageButton is positioned right of TextView and I want group both to center them horizontally at screen. I use RelativeLayout.
What should I do?
I assume you are developing an android application... If so this code can be used:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal">
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
android:layout_centerInParent="true" will place items in the middle of the RelativeLayout parent
android:layout_centerHorizontal="true" will only center items horizontally. You can remove the one you don't need.
An optimized approach, which doesn't use unnecessary layout nesting and reduces the View counts by incorporating the image inside the TextView:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:drawableRight="#drawable/ic_launcher"
android:text="#string/hello_world"
/>
</RelativeLayout>
The secret is the use of the compund drawable android:drawableRight="#drawable/ic_launcher".
To change it programmatically, use setCompoundDrawablesWithIntrinsicBounds()
I am beginner in android .I just want to clear my concepts .So i start making my first screen in android .I want to add on background image .Then one fixed header (on header there is three buttons ).Then scrolling list view ?can you please help me .I know i have to do coding in xml .just give me some hint so that i can start.. .I have all images .
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".First_activity"
android:background="#drawable/a">
<RelativeLayout
android:id="#+id/main_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/header" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
>
<ImageButton
android:id="#+id/setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/settings" />
<ImageButton
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add"/>
<ImageButton
android:id="#+id/edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit" />
</RelativeLayout>
</RelativeLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</RelativeLayout>
Till now i succeed upto this..
header image is not display ..three button are not shown..?
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
>
In your code I can't understand why you have this extra '>' at the end of third imageButton?
Putting your listview inside the parent RelativeLayout is advisable.
And, as #thecoder mentioned, change your images names, as images and layout xml files only accept [a-z,0-9,_] in their names.
EDIT--
you have used 'match parent' for ListView, and its parent is your main relative layout, so it occupies all the space, your header is not showing, you will have to use android:background, not src. It will work then.
What you wrote for your three imagebuttons, is for linear laout. For relativelayout, things will be slightly different. Check this out, your three images will be shown this way -
use following layout -
`
<RelativeLayout
android:id="#+id/main_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/header" >
<ImageButton
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/imageView1"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/imageView2"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="104dp"
android:layout_below="#id/main_title">
</ListView>
`
From what you said you need to use a Linear Layout, in which items are placed one after other, either horizontally or vertically. In your case you will have a main LinearLayout, oriented vertically, which will contain two children: onether LinearLayout and a ListView.
The second Linear Layout will have horizontal orientation, and here you will put the buttons. The ListView will represent your scroll-able list. But before starting I advice you to read about Layouts and ListView on android official documentatin. As you said you know xml I didn't put any actual example and tried just to explain theoretically, if you need any just say.
I hope this helps.
my layout is very simple. i use a vertical relative layout which contains an imageview on top of 2 textviews (heading and text). In portrait it looks fine. However in landscape it happens, that the imageview will not fill out the whole width of the screen but the text below still does. that doesnt look good. is there a simply way i can make the text width as wide as the imageview above, so all views will have the same right boarder on any screen size?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/picture" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_alignLeft="#id/imageView1"
android:layout_below="#id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/heading" />
<TextView
style="#style/DescriptionText"
android:id="#+id/textView2"
android:layout_alignLeft="#id/imageView1"
android:layout_below="#id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text" />
</RelativeLayout>
</ScrollView>
Add android:layout_alignRight="#id/imageView1" to your TextView. You may need to use android:layout_width="0dp"; also on the same TextView.
insted of using android:src="#drawable/picture"
use android:background="#drawable/picture" hope it will work for you
How do I get my relative layout to display my image view like this:
Instead of this?:
I want my layout to display as much of the image as it can and crop the outsides of the image, like when you're setting desktop background image to "Fill" in windows:
My xml layout so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true" android:alwaysDrawnWithCache="false">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:src="#drawable/background_race_light"/>
<LinearLayout
android:id="#+id/linearLayout1"
style="#style/SessionResumeBar"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/home_resumeSessionBar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/home_resumeSessionBar_buttonResume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Resume" />
</LinearLayout>
</RelativeLayout>
Add a scale type to your imageview. There are several types. The one you need is
android:scaleType="center"
This page will help explain all the different types.
Set the ImageView layout parameters to match_parent and set scale type to an appropriate scale type which fulfills your needs:
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:scaleType="centerCrop"
android:layout_alignParentTop="true" android:src="#drawable/background_race_light"/>
Set scalexy = true in ImageView