Im making a quiz app, and want this bulb image to be present throughout.
I tried adding an ImageView in the layouts, got it to show on the preview,
But when I run the app, image is not shown.
I tried changing the XML code from
app:srcCompat="#drawable/bulb" to android:src="#drawable/bulb"
(crashed my app)
<RelativeLayout
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"
android:gravity="center"
android:background="#color/colorPrimaryDark"
android:orientation="vertical" >
<ProgressBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/progress_bar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:indeterminate="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/progress_bar"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/score"
android:textColor="#color/colorText"
android:textStyle="bold"
android:textSize="25sp"
android:text="#string/initial_score"
android:padding="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginTop="50dp"
android:id="#+id/question_text_view"
android:gravity="center"
android:padding="20dp"
android:text="#string/question_1"
android:textColor="#color/colorText"
android:textStyle="bold"
android:textSize="30sp" />
**<ImageView
android:id="#+id/bulbimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="40dp"
android:paddingTop="60dp"
android:paddingRight="40dp"
android:paddingBottom="50dp"
app:srcCompat="#drawable/bulb"
android:contentDescription=""/>**
<LinearLayout
android:layout_centerHorizontal="true"
android:layout_above="#id/score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:orientation="horizontal">
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
android:id="#+id/true_button"
android:text="#string/true_button"
android:textColor="#color/colorText"
android:textStyle="bold"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:background="#color/colorTrueButton"
android:textSize="20sp" />
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:id="#+id/false_button"
android:text="#string/false_button"
android:background="#color/colorFalseButton"
android:textColor="#color/colorText"
android:textStyle="bold"
android:textSize="20sp"/>
</LinearLayout>
</RelativeLayout>
Check if the image is in drawable folder not in drawable-21 or anything..
Try to add height and width (like 100dp) to image.
Or just check if image is too large!!
If no Syntactical error is present in the code,(Either in the main.java file or the activity.XML file)->
Simply reduce the size of the image being used.
(Either by cropping or compressing)
Detailed logic ->
The maximum size of a Bitmap will vary from device to device, depending on the heap space available. The heap space required as a minimum on any device with Google Play is 16 MB.
The rest of your app also runs in the same heap space, so the entire heap is not available for a single Bitmap.
Additionally, the size of the bitmap will vary depending on the color format and height and width.
The best policy is to load only the size of the bitmap required for that screen size into memory, and nothing bigger.
Related
I have an ImageView with a mail icon, however, it was too big so i reduced its size.
The actual size of the image is smaller, but the content it wraps is still the same, resulting in my lines not being even. The image below demonstrates my problem
As you can see, the size of the imageview does not wrap around the image itself.
Below is the XML for the imageview
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_mail"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:scaleX="0.5"
android:scaleY="0.5"/>
Is there a way to fix this?
Below this is the full XML for the whole layout if that would help
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/PaleGrey">
<Space
android:id="#+id/dummyTopSpaceSc"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_alignParentTop="true"/>
<TextView
android:id="#+id/nameTextView"
android:paddingLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/dummyTopSpaceSc"
android:text="name"
android:textStyle="bold"/>
<TextView
android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:paddingLeft="10dp"
android:layout_height="wrap_content"
android:layout_below="#+id/nameTextView"
android:text="title"/>
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTextView"
android:id="#+id/phoneContainer">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_phone"
android:scaleType="fitCenter"
android:scaleX="0.5"
android:scaleY="0.5"/>
<TextView
android:id="#+id/phoneTextView"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
app:layout_marginLeftPercent="15%"
android:layout_height="wrap_content"
android:autoLink="phone"
android:text="phone"/>
</android.support.percent.PercentRelativeLayout>
<!-- below this comment is the container for the mail icon -->
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/mailContainer"
android:layout_below="#+id/phoneContainer">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_mail"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:scaleX="0.5"
android:scaleY="0.5"/>
<TextView
android:id="#+id/emailTextView"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
app:layout_marginLeftPercent="15%"
android:layout_height="wrap_content"
android:autoLink="email"
android:text="email"/>
</android.support.percent.PercentRelativeLayout>
<Space
android:id="#+id/dummyBottomSpaceSc"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_below="#id/mailContainer"/>
</RelativeLayout>
You should resize your image by giving it exact values for width and height instead of wrap_content if you actually want the bounding box to get smaller as you change the size. Then you can add padding/margins back to it as you wish. Also, you should use the android:src attribute (or maybe even app:srcCompat) instead of android:background.
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_mail" />
I've this problem. I want to put this layout this image:
the size of the image is 297x199. On android I want to put a black EditText into this image, like this:
but when I try to put it on my project I obtain this:
and it's impossible to add and EditText into here, with a correct size.
The xml of my project is:
<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:background="EBEBF1"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginTop="9dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="9dp"
android:layout_marginRight="9dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="#string/cas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="39dp"
android:layout_marginStart="39dp"
android:id="#+id/textView2"
android:textStyle="normal|bold"
android:textSize="18sp"
android:textColor="#000"
android:layout_marginBottom="16dp"
android:layout_alignBottom="#+id/imageView11"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="250dp"
app:srcCompat="#drawable/photoframe"
android:id="#+id/imageView11"
android:layout_marginTop="49dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/textView2"
android:layout_alignStart="#+id/textView2"
android:layout_marginLeft="22dp"
android:layout_marginStart="22dp" />
<EditText
android:layout_height="35dp"
android:inputType="numberSigned"
android:ems="10"
android:background="#000"
android:id="#+id/editText2"
android:layout_width="65dp"
android:layout_marginLeft="46dp"
android:layout_alignBottom="#+id/textView2"
android:layout_toRightOf="#+id/textView2"
android:layout_marginStart="46dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Is there a way to do this? Is there a correct size for this image?
I think I'm understanding your question correctly. I think you just want the EditText to push to the borders of your background image. For my example, I just put a 10dp margin around the EditText. Hope this helps!
<!--Adjust with dimensions for the dimensions of the container and image view-->
<FrameLayout
android:layout_width="297dp"
android:layout_height="199dp">
<ImageView
android:id="#+id/background"
android:layout_width="297dp"
android:layout_height="199dp"
android:src="#drawable/photoframe"/>
<!--Adjust margins as you see fit-->
<EditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#000"/>
</FrameLayout>
You'll then insert the frame layout somewhere in your layout as you need it. ALSO: please remember that the pixel dimensions will vary based on devices and that for higher density displays, you'll have some image degradation if you don't have images for all pixel densities.
How to edit xml file layout. All display screen is the same.
screen size 4.7", 5.0" display accuracy. But screen other than this. Display Distortion. Except screen tablet.
Help me fix it.
screen_main.xml
<FrameLayout 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"
tools:context="jp.vertice.test.MainScreenFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#51c8fc">
<ImageView
android:layout_width="200dp"
android:layout_height="195dp"
android:id="#+id/imageView2"
android:src="#mipmap/ic_launcher"
android:background="#fc0c0c"
android:layout_marginLeft="18dp"
android:layout_marginStart="18dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn1"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/btn3"
android:layout_alignStart="#+id/btn3" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn2"
android:layout_below="#+id/btn1"
android:layout_alignLeft="#+id/btn1"
android:layout_alignStart="#+id/btn1" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn5"
android:layout_below="#+id/btn2"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignStart="#+id/imageView2"
android:layout_marginTop="5dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn4"
android:layout_alignTop="#+id/btn5"
android:layout_toRightOf="#+id/btn5"
android:layout_toEndOf="#+id/btn5"
android:layout_marginLeft="9dp"
android:layout_marginStart="9dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn3"
android:layout_alignTop="#+id/btn4"
android:layout_toRightOf="#+id/btn4"
android:layout_toEndOf="#+id/btn4"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="205dp"
android:background="#F4F4F4"
android:layout_gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="YYYY.MM.DD"
android:id="#+id/txt1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="22dp"
android:layout_marginStart="22dp"
android:layout_marginBottom="173dp" />
<TextView
android:layout_width="230dp"
android:layout_height="50dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
android:id="#+id/text2"
android:layout_alignTop="#+id/txt1"
android:layout_alignLeft="#+id/txt1"
android:layout_alignStart="#+id/txt1"
android:layout_marginTop="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON"
android:id="#+id/btn6"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:layout_alignTop="#+id/text2"
android:layout_toRightOf="#+id/text2"
android:layout_toEndOf="#+id/text2" />
<TextView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="FOOTER"
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="10sp"
android:textStyle="bold"
android:textAlignment="center"
android:gravity="center_vertical"
android:background="#FFFFFF" />
</RelativeLayout>
</FrameLayout>
Don't use Frame Layout here because Frame Layout used to show single view.
I see you are using fixed dp values for layout_width and layout_height.
dp means density independent pixel. It is not a size independent pixel.
The dp makes sure your layout looks the same on devices with the same size, but different pixel density. It will not look the same on bigger devices.
If you want it to scale to larger devices you will have to use match_parent and wrap_content.
Use the power of the relative layout to place items on the right side of the screen also.
You can also make separate layout files for differently sized devices. So you can customise it depending on the size.
You do this by making a new layout folder named for example layout-sw600dp/ (or any number you want) which will only be used on devices that have at least the width you specified (so 600dp in this example).
Make sure your layout file has the same name in this folder as in the normal folder.
You can find very useful information about this in the documentation:
here and here.
You can try using a GridLayout. This way, the image columns will fill the whole screen.
you can't work with dp and expect the same result on different
if you want same display for all the devices you can work with weightSum and weight here is a little example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
I have the following layout that seems to have different heights for each row depending if one image get resolved. The layout is defined below. Without hardcoding the layout_height. How can I ensure all fit the same height. I understand image resolution plays a role. So, It might not be doable. However, I am looking for a creative way to solve the problem.
The first image is my default avator (it is 50x50 .png file). If there is attached image for a row, It would come as 50x50 .jpeg. So, different file types and thus different resolutions.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgOwner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:layout_marginRight="10dp"
android:scaleType="centerInside"
android:contentDescription="Image Owner"
android:src="#drawable/icon_default_avator" />
<TextView
android:id="#+id/txtUserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:text="User Name"
android:textSize="10sp" />
</LinearLayout>
<TextView
android:id="#+id/txtVideoTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Video Title"
android:layout_marginBottom="10dip"
android:textSize="10sp" />
<TextView
android:id="#+id/txtVideoName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="10sp"
android:text="Video Information"
android:layout_marginBottom="10dip"
/>
Try this way
Set imageview property like this
<ImageView
android:id="#+id/imgOwner"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:contentDescription="Image Owner"
android:src="#drawable/ic_launcher" />
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainRlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:src="#drawable/moflow_main_screen"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/txtMoflow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_above="#+id/initCapsText"
android:text="MoFlow"
android:textSize="40sp"
android:textColor="#FA3248"
android:typeface="serif" />
<TextView
android:id="#+id/initCapsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_above="#+id/startBtn"
android:text="TESTING"
android:textSize="16sp"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/startBtn"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:layout_above="#+id/manageBtn"
android:text="Start Testing" />
<Button
android:id="#+id/manageBtn"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Management" />
<Button
android:id="#+id/optionsBtn"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/manageBtn"
android:text="Options" />
<Button
android:id="#+id/aboutBtn"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/optionsBtn"
android:text="About" />
<Button
android:id="#+id/quitBtn"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/aboutBtn"
android:text="Quit" />
</RelativeLayout>
I want the image view picture to go all the way down to the screen, but there is a margin at the bottom and I don't know where it's coming from. I thought it might be the image dimensions, but even setting to 1000x1000 pixels doesn't do anything to get rid of the margins, neither does setting alignParentBottom.
Here is a screenshot:
Does the image you are using match the dimensions of the screen?
If not:
Try setting android:scaleType="fitXY" on the ImageView
- This will scale the image to fit the screen but will not retain the images original aspect ratio.
If you want to maintain the aspect ratio android:scaleType="center" will center the image with no scaling and maintains aspect ratio. However it will crop the image if it is larger than the screen, or it will not fill the screen if it is too small.
For other scale types, check out http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Hope this helps