I am trying to make a simple recyclerview with image on left and text on right so i gave image width and height of 70dp both and i used png image 1000x1000 exported from illustrator using export for screens(android), but it's showing edgy tried with 512x512 same result also tried putting different resolution in ldpi,hdpi,mdpi,xhdp still same result
without the recyclerview the problem persist
Single row screenshot
Here's my xml code for single row
<?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="wrap_content"
android:orientation="horizontal"
android:layout_margin="20dp">
<ImageView
android:id="#+id/img"
android:layout_width="70dp"
android:layout_height="70dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp">
<TextView
android:id="#+id/heading_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:gravity="start"/>
<TextView
android:id="#+id/sub_heading_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/heading_txt"
android:textStyle="normal"
android:textSize="12sp"
android:gravity="start"/>
</RelativeLayout>
</LinearLayout>
Related
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="96dp"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingStart="24dp"
android:paddingBottom="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/pushIcon"
android:layout_width="16dp"
android:layout_height="16dp"
app:srcCompat="#drawable/push_icon" />
<TextView
android:id="#+id/textView23"
style="#style/TextAppearance.Compat.Notification.Info.Media"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:text="YOLOL"
android:textColor="#color/browser_actions_title_color" />
</LinearLayout>
<TextView
android:id="#+id/text_view_collapsed_1"
style="#style/TextAppearance.Compat.Notification.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="New Message!"
android:textColor="#color/colorPrimary" />
<TextView
android:id="#+id/text_view_collapsed_2"
style="#style/TextAppearance.Compat.Notification.Info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Expand to show!" />
</LinearLayout>
<ImageView
android:id="#+id/notifPreviewImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
app:srcCompat="#drawable/bb" />
</LinearLayout>
The pushIcon ImageView takes the place but is invisible, any idea why?
A quick tip that always helps in the debug process - add a background color to the view in question (also helps to set a specific Width and Height as well for testing) - it will enable you to see if the view is being rendered at all or not. If you see the background color, then the view is being rendered properly, but the image is not loading correctly. Without knowing this, it could be any combination of those issues.
With that aside, if you are dynamically changing the icon at runtime, I would look at your code there. If this is a static image then I would check that your resource file is a Vector drawable as that is only allowed when using app:srcCompat="#drawable/push_icon"
If your file is a non-vector drawable, then use android:src="#drawable/push_icon"
Here's a discussion that elaborates on this in more detail.
So I have a image view and below a relative layout. The desired is to always have the users see the text views and buttons in the nested layout. And the image is a top image ( not a full screen background) but some how there is a small gap and the background of the image is bleed past the image view. I have tried different Image scale types and different layouts completely(frame, all linear,etc..)
http://imgur.com/a/n4aIq
and some code
https://gist.github.com/whatkai/92f66d2322957d86dd3fe28a9a5d03c0
FYI layout-weights left gaps too.
There is too many ways to do it.
Try this solution using LinearLayout (orientation: vertical):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/REFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#color/accidentAssistanceColor">
<ImageView
android:id="#+id/SettingsImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/ers"
android:layout_weight="1"/>
<LinearLayout
android:background="#color/appStartERSBackground"
android:layout_centerHorizontal="true"
android:id="#+id/onView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/SettingsImage"
android:gravity="bottom|clip_vertical|center"
android:orientation="vertical">
<Button
android:gravity="bottom|end"
android:layout_centerHorizontal="true"
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/transparent"
android:text="Not Now"
android:textColor="#color/white"/>
<Button
android:id="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/button"
android:text="approve"
android:textColor="#color/white"/>
<TextView
android:gravity="center_horizontal|center_vertical"
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button2"
android:layout_gravity="center"
android:text="BLdfdsAH"
android:textColor="#color/white"/>
<TextView
android:gravity="center_horizontal|center_vertical"
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BLAH"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
And to answer you about how to scall your image i used android:scaleType fitXY to respect to ratio aspet.
If you desire to understand how every scallType works, see the following link:
https://robots.thoughtbot.com/android-imageview-scaletype-a-visual-guide
set view tag between your image and layout.
like this.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" />
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 am trying to create a large square and inside the large square there will be 25 small squares.I am using a png image of the square with small 25 squares in it and using linear and linear horizontal to align the large text view inside the square. But when I change the device screen the text comes out of the boundary of the png image square.
Is there any solution for this?
This the square image i am using
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.nijinsha.bingomultiplayer.Game_Act"
android:background="#drawable/bkgd"
android:padding="5dp">
<ImageView
android:layout_width="330dp"
android:layout_height="340dp"
android:id="#+id/imageView"
android:src="#drawable/bgrid"
android:background="#drawable/gdbk"
android:scaleType="fitXY"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<LinearLayout
android:orientation="vertical"
android:layout_width="330dp"
android:layout_height="340dp"
android:layout_alignTop="#+id/imageView"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="68.5dp"
android:weightSum="1">
<TextView
android:layout_width="62dp"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="02"
android:id="#+id/textView1"
android:gravity="center_vertical|center_horizontal"
android:textSize="50sp" />
<TextView
android:layout_width="62dp"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="05"
android:id="#+id/textView2"
android:gravity="center_vertical|center_horizontal"
android:textSize="50sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Edit
The problem is with devices which is not HD
The problem was with the width of the imageView. I changed the width to 300 and now no problem. The problem was imageView was at its maximum and could not be bigger on low pixel density devices.
I have a list of images with textviews. Below is the xml file for that view. But when I add images to this first image clipped off and the and the left screen of the phone. Also same thing happen to last image and right part of it clipped off .I tried to adding margin. But it applies for all the images. Then the middle images has more gap.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_gravity="center_vertical"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="6dp"
android:layout_marginLeft="0dp"
android:background="#FFFFFFFF">
<ImageView
android:id="#+id/image"
android:layout_width="55dp"
android:layout_height="95dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/title"
android:background="#90202020"
android:padding="1dp"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFFFF"
android:layout_centerHorizontal="true"
android:textSize="10sp"
android:text="1" >
</TextView>
</RelativeLayout>
Below is the left side screenshot.
You can add some margin/padding on the parent view (the one containing the list of images).