I am trying to code one of my first android apps. I am trying to position a text below an image, but the image takes up most of the screen and one of the textviews which are supposed to be below it are not displayed. I am using a RelativeLayout.
Here is my code snippet.
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/i1"
/>
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img"
android:textSize="24sp"
android:text="Description"/>
</RelativeLayout>
I have also tried changing the scale type of the imageview, but it doesn't work. Only when I explicitly specify the width and height parameters of the image, the text is visible below the image.
What changes can I make in this code to get the desired output ?
If you add a rough diagram of what you want to achieve your question can be answered better. From my understanding, and by looking at your code it seems you are trying to add 2 TextView's at the top and bottom (one each) and then an ImageViewsandwiched in between.
First, add the 2 TextView's. Set the one as android:layout_alignParentTop = true and android:layout_alignParentBottom = true. Then add the ImageView. In the ImageView, you can set android:layout_height = "wrap_content" and then android:layout_below=<id of the top text view> as well as android:layout_above = <id of the bottom text view>.
So something like this:
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="24sp"
android:text="Description"/>`
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/i1"
android:layout_above="#id/t2"
/>
</RelativeLayout>
If you're using wrap_content for your ImageView's height and if your ImageView's actual image is large enough then it will surely take up entire space.
In that case, you'll have to explicitly mention exact height of the View, so that text below is show up.
What you want to do to fix this situation is to change actual height of the image itself. If you do that, image will fit itself entirely but takes less height and then text should show up.
So you have two options,
1) Either fix your image height in your layout, OR
2) Fix actual image height so that it's more appropriate in your usecase
I hope this answers your question.
You need to assign a size for ImageView based on screen size
Use PercentRelativeLayout
My compileSdkVersion is 24 so I use compile 'com.android.support:percent:24.0.0' inside my app:gradle dependencies
example :
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
app:layout_heightPercent="50%" <---------- here its taking 50% of screen height
android:src="#drawable/myImageName"
/>
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img"
android:textSize="24sp"
android:text="Description"/>
</android.support.percent.PercentRelativeLayout>
If you use LinearLayout go for layout_weight attribute
make t2 alignParentBottom true
and
let img view layout_above t2
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_above="#+id/t2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/i1"
/>
<TextView
android:id="#id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="24sp"
android:text="Description"/>
</RelativeLayout>
Related
I have a TextView and a square ImageView that I would like to show in a horizontal linear layout. Each should take half of the parent view's width and the height should fit the content (i.e. the image). The text should be centered vertically.
Additional constraint is that the image should not grow beyond a given maxWidth (= maxHeight), and excess width should be made available to the TextView. Obviously, this conflicts with the 50/50 rule above. Is there a way to prioritize the constraints, i.e. allow the image to take half of the space unless it exceeds a given size?
These are layouts I tried:
The first one nicely stretches the left side to the available space. But the image takes more than half of the width as its layout_weight is not specified (as in image below).
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text."/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
When I add layout_weight to the ImageView it always takes half of the width and ignore the maxWidth (see image below).
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
Enclosing the ImageView in another LinearLayout enables the maxWidth again, but the enclosing LinearLayout still takes half of the available space (see image below).
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
Another option I have found for similar scenarios is to use a RelativeLayout with an invisible view as a center divider, but that locks the division to 50/50 (or wherever the divider is placed).
Okay, gonna go on ahead and post the xml I created, it's pretty much simple, it does most of your conditions.. One thing I'm having trouble with is the part where each view takes half of the parent view's width. Hope this still helps you in some way.
sample_layout.xml
<?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="wrap_content"
android:layout_margin="2dp"
android:background="#android:color/darker_gray">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/img_sample"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/img_sample"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
android:text="Some text." />
<ImageView
android:id="#id/img_sample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="2dp"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:src="#drawable/sample_img" />
</RelativeLayout>
Here is a sample screenshot:
If ever you figure out how to the the half of each thing, kindly comment it here, It'd be nice to know about it for possible future use. :)
PS: Have you considered doing the half of each thing programatically? Like checking the LayoutParams then dynamically setting weightSum and the layout_weights.
Sample Image retrieved from this link
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#color/blue"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toStartOf="#id/imageView"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Some text. " />
</RelativeLayout>
It won't be a perfect solution in term of performance. But you can achieve it by playing with FrameLayout and ImageView.
Here is the output:
Layout.xml:
<?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="#color/textGray"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/skyBlue">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:src="#drawable/ic_settings"
android:visibility="invisible" />
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:text="!" />
</FrameLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:src="#drawable/ic_settings" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
In order to achieve desire behaviour, You would have to set same images to both imagesviews in this layout. one of them is invisble, It is just helping to make parent with same width and heights which would lead us to create TextView with same dimensions.
Note: If you want to change textView alignment, you can do it with layout_gravity or gravity.
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>
There has a listView and imageView in Activity A. If listView.size is equal to 0, it will display the image in the imageView, it not equal to 0, it will display the list.
This is the xml of my Activtiy A. I want to make the text and button display below the image but I found it so difficult to adjust.
<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="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ImageView
android:src="#mipmap/data"
android:paddingTop="30dp"
android:layout_gravity="center"
android:layout_width="330dp"
android:layout_height="300dp"
android:id="#+id/imageView2"
android:paddingLeft="20dp"></ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No Data"
android:textSize="15dp"
android:layout_marginLeft="140dp"
android:paddingTop="160dp"
android:textColor="#color/honey_dew2"
android:layout_gravity="center"
android:id="#+id/NoData"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Data"
android:paddingTop="20dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="130dp"
android:id="#+id/button2"
android:layout_centerVertical="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
</RelativeLayout>
This is what I want. Thanks
http://i.stack.imgur.com/OSL4I.png
I think this is pretty much what you are looking for
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:src="#mipmap/data"
android:paddingTop="30dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView2"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="No alarms"
android:textSize="15sp"
android:textColor="#color/honey_dew2"
android:id="#+id/NoData"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="Add alarms"
android:paddingTop="48dp"
android:id="#+id/button2" />
</LinearLayout>
Notice that I changed from a RelativeLayout to a LinearLayout with a orientation value of vertical. I think that the RelativeLayout adds unnecessary complexity to this problem.
By using the layout_centerVertical and layout_centerHorizontal attributes instead of the padding you solve two problems at once.
The position now scales to different devices.
The layout is far less complex.
Notice also that the TextView textSize attribute is now in the units sp (scaling pixels) instead of dp (density-independent pixels). The size of your text should always be defined in sp and the size of your views should be defined either relatively or in dp.
This tutorial from the prolific mkyong should provide a strong foundation for manipulating the XML with your Java code.
I'd rework your entire approach. Use ListView.setEmptyView(View) to set a separate view to display when the list is empty. Then your base layout is just the list, and you have a separate layout for what to display for the empty case.
I need to put two images one below the other in the center of the screen. They need to be in the center. the images will keep changing depending on the code so how do i get the images to work on all screens without moving or the size increasing or decreasing?
I tried using grid view but it seems too much code for two images. it works but is there anything more efficient?
For this type of design i always create a center point on screen,check below code -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerHorizontal="true"
android:layout_above="#+id/center_point" />
<View
android:id="#+id/center_point"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/ic_launcher"
android:layout_below="#+id/center_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
it will surely works.
All the best
If u have always only 2 images, you can set it in xml file like that:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
First image centers in parent and the second one centers horizontal and also aligns bottom of the screen.
Good luck.
Here this code may help you.You must create one LinearLayout and set him vertical orientation and layout_gravity = center horizontal.After that create two image views which are automatic position in center of the screen one below other.I hope this will help you.Happy coding :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/image_view_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/image_view_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Make a vertical Linear-layout that contains both of your ImageViews and then set an equal layout_weight for both of them. Set the layout_centerInParent true for your Linear_layout
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/lock_layout_keypad"
android:orientation="vertical"
android:layout_centerInParent="true"
android:layout_marginBottom="4dp">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
You can remove android:layout_weight.
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"