I try to make a Layout with two TextViews on top and an ImageView on the bottom of the Layout. But I have problems with the scalingtyp of the ImageView. The Image should always resize propotional but be always on the center buttom. Here is a picture with my problem:
I hope you unterstand my problem.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
android:orientation="vertical" >
<TextView
android:id="#+id/textViewGameOver1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="top|center_horizontal"
android:gravity="center"
android:text="TextView1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textViewGameOver2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewGameOver1"
android:layout_centerHorizontal="true"
android:layout_gravity="top|center_horizontal"
android:gravity="center"
android:text="TextView2"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageViewGameOver"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_below="#+id/textViewGameOver2"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom|center_horizontal"
android:scaleType="fitEnd"
android:src="#drawable/sheldon_win" />
</RelativeLayout>
Have anybody a idea to solve this problem?
Best regards!
You should be using a RelativeLayout instead of a LinearLayout. This will let you position the image where you want it and then you can set the size of the ImageView to be whatever size you want.
<ImageView
android:id="#+id/imageViewGameOver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/sheldon_win" />
This should put the image in the lower-right corner and the image should be whatever size the image file is. If you want to change that you can set the width and height to some size in dp's.
Related
I am having this simple layout for chat bubble.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bubble_layout_chat_parent"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bubble_layout_chat"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/message_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/primary_text_light"
android:layout_gravity="top"
android:textSize="16sp"/>
<TextView
android:id="#+id/message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#999"
android:textSize="10sp"
android:textStyle="italic"
android:textColorHint="#color/grey"
android:layout_gravity="bottom|end"/>
</LinearLayout>
However, when I set image it leaves unwanted margins above and below the image.
How can I remove margins and make the bubble to fit image?
(Note: What I observed is the margins appears only when image width is larger than height. For images having width much smaller than height no margins observed)
use android:scaleType="fitXY" for your imageview
Thanks for everyone's comments. Setting android:adjustViewBounds="true" to ImageView fixed my problem. So my working ImageView now looks like:
<ImageView
android:id="#+id/message_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
I would like to know if there is a way to overlay text on an image in Android and cater for various different screen sizes? Currently I simply use the image as the background image to the layout and then I just use textview's over that.
The problem I have is that when the image is scaled on another device with a smaller or bigger screen, the position of this text changes and it looks different since the text does not scale the same way the image does on a different device, even though I use DP to position the textview's.
Is there some way to anchor these textview's to a certain point on the screen so that it looks more or less the same on different screen sizes?
Check this. this Xml will work well in any Device.
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/yourimage"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/advrttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center Text in any Device"
android:textStyle="bold"
android:textSize="40sp"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="59dp" />
</RelativeLayout>
You can also use a relative layout and do something like this
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#drawable/uninorsample"
android:id="#+id/imageView12"/>
<TextView
android:id="#+id/example_Txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Example Text"
android:textSize="16sp"
android:gravity="bottom|center_horizontal"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignBottom="#+id/imageView12"
android:layout_alignRight="#+id/imageView12"
android:layout_alignEnd="#+id/imageView12"/>
</RelativeLayout>
You can set image as background in any widget or layout than set textview on that with appropriate dimension.i.e you can set shadow image in relative layout and set textview on it use property like centerinparent so it will always center of the parent in any DP.
Try this:-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/clock_number"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Hello World!" />
</RelativeLayout>
Use FrameLayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Overlayed Text"
android:layout_gravity="center"/>
</FrameLayout>
I am trying to give a border to an image view using a layout to wrap it and set the border as background to that particular layout. However the image view appears small and in the top left corner of the frame background.
Here is my code:
<RelativeLayout
android:id="#+id/Relative1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="25dp"
android:layout_marginTop="40dp"
android:background="#drawable/pic_frame_big_01" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
How can I modify this code so that image fits into the relative layout and occupies it.
EDIT Changed the code of ImageView the image is centered now, but it appears as a very small image centered in the parent.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
Try adding: android:padding="10dp" to the RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Relative1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="25dp"
android:layout_marginTop="40dp"
android:background="#drawable/pic_frame_big_01"
android:padding="10dp">
<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/image1" />
</RelativeLayout>
android:src="#drawable/image1 is important too.. where you replace image1 with some image in your project.
Because you set it to align top left. Remove them and change width and height to match. Try this:
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
edit: Your relative layout is also aligned top left. Try to remove alignment attributes.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Relative1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:background="#drawable/border_red" >
<ImageView
android:src="#drawable/holotaglogo"
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>
There are some rows in listView and each rows has the same format :
From left to Right
ImageView TextViews ImageButton.
i am using relative layout to fix the position of the components but the size of the ImageButton is scaled and only imageButton displayed on each rows.
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_resultItem_Layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imgBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
/>
<LinearLayout
android:id="#+id/bBasicDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignRight="#id/imgBook">
<TextView
android:id="#+id/bid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="gone" />
<TextView
android:id="#+id/bName"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:textSize="18sp" />
<TextView
android:id="#+id/authors"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/authors" />
<TextView
android:id="#+id/publisher"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/publisher" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/status" />
</LinearLayout>
<ImageButton
android:id="#+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/temp"
android:layout_toRightOf="#id/bBasicDesc"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Any wrong in my xml coding?
Because you are doing wrap_content it takes the size of the image that you set as src. That is why its getting scaled and bigger..
To resolve this, instead of using wrap_content you should think about what is the right height that you want for the listView item, and then for both ImageView and ImageButton set something like:
android:layout_width="50dp" // sample value of 50dp
android:layout_height="50dp" // sample value of 50dp
android:adjustViewBounds="true"
android:scaleType="centerCrop" // or android:scaleType="centerInside"
You can set custom height and width of the image you are inputting into your layout. This way no matter what the image will stay that size and not try to stretch or shrink.
You can do this within your activity's .xml file using:
android:layout_width="yourwidthhere.dp"
android:layout_height="yourheighthere.dp"
I'm trying to do a layout with dynamic scaling of test view. The layout looks like - see bottom left corner.
Now that portion is a composite control. The circle scales just fine, but I can't figure out how to make the text positioned perfectly in the middle while scaling properly. I want the text at let's say 50% of the container size and positioned perfectly in the center. RelativeLayout only allows for absolute values, and I can't seem to get the weighting working with text view for linear layout with textview.
Composite control:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/VarioCircle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:contentDescription="Vario Circle"
android:scaleType="fitCenter"
android:src="#drawable/circle" />
<LinearLayout
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:weightSum="1.0"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>
<TextView
android:id="#+id/VarioText"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="200"
android:textColor="#FF0000"
android:textSize="60dp"
android:layout_weight="0.7"
android:textStyle="bold"
android:typeface="monospace" />
</LinearLayout>
</RelativeLayout>
Overal layout:
<com.proflite.VarioView
android:id="#+id/Vario"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
/>
Put the TextView inside of container. And set Gravity (Views attribute) to Center.
Set TextViews width and height to wrap_content.
This will make TextView centered in it's container.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
</FrameLayout>
This will get TextView centered inside of FrameLayout
try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/VarioCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="Vario Circle"
android:scaleType="fitCenter"
android:src="#drawable/circle" />
<TextView
android:id="#+id/VarioText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="200"
android:textColor="#FF0000"
android:textSize="60dp"
android:layout_weight="0.7"
android:textStyle="bold"
android:typeface="monospace" />
</RelativeLayout>
</RelativeLayout>
I suggest you make an Button widget and set an image as background which has .png format, having transparent background.
Like this:
After that Make sure to save it as .png
1)Then go to your xml layout create a Button or ImageButton widget.
2)Set this pic saved as a background image ( android:background="#drawable/yourcircle")
3)then finally you can put any text inside ( android:text="blabla") + you can change it from the code for sure using Button.setText("blablabla")
4)You will also want to change the font size using Button.setTextSize(49) for example.
5)Finally to make it in the center, android:gravity="center"