I am building an app widget and the layout is going to have a View aligned at the bottom of the widget, to hold a TextView and a ImageView, then a View above it to hold the main text. The problem with what I have is that is seems the "top" View is overlapping with the bottom View:
UPDATE
Now I'm thinking the "top" view is not overlapping the bottom view, but that something is cutting off the top of the image. Here is another screenshot:
As you can see, the text is being cutoff at the top of the bottom view, but the image is getting cut of as well. Here is a screenshot with the image not being scaled to 18dp:
I'm extremely confused.
This is the code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widgetLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="#dimen/widget_margin">
<RelativeLayout
android:id="#+id/widgetBgLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/bg_widget"
>
<RelativeLayout
android:id="#+id/widgetStatusLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingTop="10dp"
>
<TextView
android:id="#+id/widgetStatus"
style="#style/WidgetStatus"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/widgetIcon"
android:src="#drawable/icon"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_above="#id/widgetStatusLayout"
android:layout_alignParentTop="true"
>
<TextView
android:id="#+id/widgetTitle"
style="#style/WidgetTitle"
/>
<TextView
android:id="#+id/widgetText"
style="#style/WidgetText"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I figured it out. I had to set the height of the icon to a higher number (28dp). I don't think the icon is a true rectangle (I had someone else make the icons for me), which probably caused issues with the aspect ratio.
Related
I'm quite new to android programming and I stumbled upon a problem with my layout.
At first, I had a Linearlayout with a textview, 2 buttons and a imageview scaled to fit the screen.
Now I wanted to put this under a scrollview, so the imageview could be scaled larger (to the width of the screen).
Without the scrollview everything just went fine, but with the scrollview, my imageview is not scaled anymore.
What am I doing wrong? I tried numerous solutions on StackOverflow but I can't get it to work with a ScrollView. Thanks in advance!
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/pageno" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/texta" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/textb" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/page1" />
</LinearLayout>
</ScrollView>
Make LinearLayout/RelativeLayout as parent view. In that make a scroll view and set alignparentTop=true. This scrollView will contain a single layout in which all other views will be placed.
I have been facing a strange problem with layout. The problem is that the main layout have a background i.e. gray color (#DCDCDC). It consists of a child which is ScrollView with vertical LinearLayout. It contains 2 views: one is TextView with black background and next is google map.
Now the problem is: when the TextView becomes visible it is ok. But when ScrollView is scrolled to make the map visible whole screen gets dimmer which is not desirable from the consistency point of view.
And the surprising thing is that the problem is only in case of 4.x versions of Android.
Following is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/grey"
android:orientation="vertical"
android:padding="5dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" >
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:background="#drawable/_btn_back"
android:onClick="clickHandler"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:text="#string/terms_and_condition_terug"
android:textColor="#color/white"
android:textStyle="normal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="10dp"
android:clickable="true"
android:onClick="clickHandler"
android:src="#drawable/_info" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="700dp"
android:background="#drawable/itemlistbackground" />
<com.readystatesoftware.maps.TapControlledMapView
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="700dp"
android:layout_weight="1"
android:apiKey="#string/mapApiKey"
android:clickable="true" />
</LinearLayout>
</ScrollView>
</LinearLayout>
And following is the screenshot when the TextView is visible
and following screenshot was taken when map was visible
If you look carefully at those screen second image is dimmer than the first which is not desired. I don't want the dimmer screen while showing map in it. Please help me out.
I cut out pieces of the grey border to compare them next to each other, they look the same to me. There is also a gradient in the first screenshot which gives it a glossier feel as well.
I'm doing an Android gallery and I need to have the ImageView which shows a picture in full screen, and on top of it -meaning that it has to overlap the ImageView- the Gallery.
The problem is that now the ImageView occupies the portion that is not occupied by the Gallery, but I don't know how to achieve this.
This is my layout:
<?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:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/GalleryImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:scaleType="fitXY" />
<Gallery
android:id="#+id/GalleryThumbnails"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/GalleryImage" />
</RelativeLayout>
Thanks a lot in advance!
You can use layout_alignTop=[Reference] to achieve that effekt.
Makes the top edge of this view match the top edge of the given
anchor view ID.
<ImageView
android:id="#+id/GalleryImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:scaleType="fitXY" />
<Gallery
android:id="#+id/GalleryThumbnails"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/GalleryImage" />
Proof that it works
I have a problem with my ImageView. The icons all display correct size, except the last one is always bigger in my ListView.
Can somebody please help?
<?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:orientation="horizontal" >
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:src="#drawable/icon"
android:gravity="center_vertical" />
<TextView android:id="#+id/naam"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#FFFF00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/waarde"
android:textColor="#ffffffff"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/naam"
android:layout_marginLeft="2dip"/>
</LinearLayout>
If i change the ImageView as follows, it is ok but too big:
android:layout_height="wrap_content"
Edit: Problem solved, i needed to reduce the TextSize in the TextViews
is this you list item layout?
android:layout_height="fill_parent"
in your ImageView is probably what is doing it - you likely need to fix the height somewhere otherwise fill_parent can push the height up if its not specified somewhere higher up in the view hierarchy - generally i fix the height it the list item root element
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
or whatever you item height should be.
I have the following layout for a custom title bar. However, the problem is this: both the imageview and the imagebutton are coming at the centre. I was expecting the imagebutton to be at the extreme right. Can anyone kindly let me know what I did wrong here ? Thanks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="35dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#323331">
<ImageView
android:src="#drawable/header"
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
</ImageView>
<ImageButton
android:id="#+id/saveButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/savetap"
android:background="#null"
android:gravity="right"
android:layout_above="#+id/header">
</ImageButton>
</LinearLayout>
Your layout is only 35dip tall, so pressumibly if you show your ImageView the ImageButton gets positioned outside the screen. Consider changing your layout_height to wrap_content, if appropiate.
You're using a vertically oriented LinearLayout, all View will be presented in a vertical fashion. Use a RelativeLayout so that you'll have more control over where Views are positioned. If you'd still like to use a LinearLayout, you'll have to use horizontal orientation so that the Views can be on the same "line".
Use layout_gravity to layout the item to the right, just gravity is used by the contents of the view.
At first if width is set to fill parent it really fills parent so it use all the width.
Second: why not RelativeLayout? It provides more options and control.
Maybe this is what you looking for:
`
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="35dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#323331">
<ImageView
android:src="#drawable/header"
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left">
</ImageView>
<ImageButton
android:id="#+id/saveButton"
android:layout_height="wrap_content"
android:src="#drawable/savetap"
android:background="#null"
android:layout_marginLeft="20dp"
android:layout_width="wrap_content" android:layout_alignParentRight="true">
</ImageButton>
</RelativeLayout>
`