I just replaced png drawables in my app with vector drawables and this seems to work fine on most devices, but for some reasons I experience some weird display on some random icons on a Samsung S8 running Android 8.
Some icons are displayed with the outline kind of pixelated and I have no clue why as I tested the exact same APK one maybe 10 other device without any issue.
For example with the following layout, the first icon (previous track) has this issue, but none if the other ones
If I change the vector drawable for this icon it still shows the issue.
Any idea what could be causing this?
<LinearLayout
android:id="#+id/streamControlsLayout"
android:layout_width="match_parent"
android:layout_height="62dp"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/previousTrack"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/previousTrackButtonContentDescription"
android:padding="6dp"
android:scaleType="fitCenter"
android:src="#drawable/previous_track_button" >
</ImageButton>
<ImageButton
android:id="#+id/rewind"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/fastRewindTrackButtonContentDescription"
android:padding="6dp"
android:scaleType="fitCenter"
android:src="#drawable/rewind_button" />
<ImageButton
android:id="#+id/playButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/playPauseButtonContentDescription"
android:scaleType="fitCenter"
android:src="#drawable/play_button" >
</ImageButton>
<ImageButton
android:id="#+id/fastForward"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/fastForwardButtonContentDescription"
android:padding="6dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_fast_forward" />
<ImageButton
android:id="#+id/nextTrack"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/nextTrackButtonContentDescription"
android:padding="6dp"
android:scaleType="fitCenter"
android:src="#drawable/next_track_button" >
</ImageButton>
</LinearLayout>
Example of the issue
Related
How to change that share icon color to white
The code is same for all three image buttons, even icons in the resource file have the same color, but the color of share button is different though in the preview it shows white!
I have even tried running on different devices but same result.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/fullscreen_image"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
android:adjustViewBounds="false"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/fullscreen_background"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:gravity="center">
<ImageButton
android:id="#+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_get_app_white_24dp" />
<ImageButton
android:id="#+id/set_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_image_white_24dp" />
<ImageButton
android:id="#+id/share_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_share_white_24dp" />
</RelativeLayout>
</LinearLayout>
The answer is lying in your drawable file, please check the color of your picture in the drawable file, I think the foreground color of your share button is black, so just reset the image by right click res->click new->click image asset, and get the share icon,then set the foreground color to white, I think this will work!
I am developing an android application that also implements a chat but I am facing a weird issue on a galaxy s3 device running api 18.
s the image clearly show the text aligned on the right isn't well formatted as it should be on a single line. The layout file is as simple as possibile and no issue is shown on other phones and emulators.
Issue Image
Here is my xml layout file:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textMine"
android:layout_marginBottom="15dp"
android:visibility="visible" >
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/silh"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:id="#+id/profilePicMine"
android:layout_alignParentTop="true"
android:focusable="false" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/profilePicMine"
android:layout_toStartOf="#+id/profilePicMine"
android:id="#+id/nuvolaMine">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone"
android:layout_marginRight="10dp"
android:layout_marginLeft="80dp"
android:src="#drawable/home_pic"
android:id="#+id/picMine"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/chat_yellow"
android:paddingRight="15dp"
android:layout_marginRight="10dp"
android:id="#+id/textLayoutMine"
android:paddingBottom="10dp"
android:visibility="visible"
android:paddingTop="10dp"
android:paddingLeft="10dp">
<com.sonarmusic.robotoTextViews.RobotoRegularTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="16sp"
android:text="non so"
android:id="#+id/textMessageMine" />
</RelativeLayout>
</RelativeLayout>
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignBottom="#id/profilePicMine"
android:layout_alignLeft="#id/profilePicMine"
android:src="#drawable/verde_on"
android:id="#+id/isArtistMine"/>
<RelativeLayout
android:layout_width="5dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:background="#color/chat_yellow"
android:layout_alignParentTop="true">
</RelativeLayout>
<com.sonarmusic.robotoTextViews.RobotoLightTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="6sp"
android:textColor="#color/gray_text"
android:text="08-08-2016"
android:id="#+id/timeMine"
android:layout_marginRight="10dp"
android:layout_below="#+id/nuvolaMine"
android:layout_marginTop="5dp"
android:layout_alignLeft="#+id/nuvolaMine" />
</RelativeLayout>
To me it looks like an issue due to right alignment that either android api 18 or both os and device can't render well, another reason why I have this thought is that the texts on the left side(the received ones in green background) are formatted the right way. But I have no clue on how possibily solve it.
PS Not supporting that device is NOT an option
Replace
android:layout_width="wrap_content"
by
android:layout_width="match_parent"
in your RelativeLayouts
My xml works just fine on the android studios nexus 7 and nexus 10 emulators and the xml looks fine running on my nexus 4. But when I run it on a 7 inch tablet it stretches my image in the y direction only (in landscape activity) and doesn't keep the aspect ratio. I've tried 2 different 7 inch tablets with the same result.I think I've tried changing layoutwidth and layoutheight to just about every possible combination. I also have the same scaling issue if I try it with a imageview instead of an imagebutton. I googled and googled and tried everything but haven't found a solution that works for me. Please help me...
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/horizontalScrollView"
android:scrollbars="none"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:measureWithLargestChild="false">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton2"
android:src="#drawable/mainmenu1"
android:background="#android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:onClick="goToLab101" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton3"
android:src="#drawable/mainmenu2"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:onClick="goToPeriodicTable" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton4"
android:src="#drawable/mainmenu3"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:onClick="goToLab102"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton5"
android:src="#drawable/fountainselector"
android:background="#android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton6"
android:src="#drawable/mainmenu5comingsoon"
android:background="#android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:onClick="goToLab103"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton7"
android:src="#drawable/mainmenu6"
android:background="#android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
</LinearLayout>
</HorizontalScrollView>
Add your same image drawables in drawable-large-xhdpi for 7 inch tablet support
I have made an app that shows 6 images, 3 per row. It looks perfect in the layout designer of android studio but not on physical device that has an other screen resolution. I wasn't surprised about that but I don't know how to make the app compatible to all screen sizes.
Layout designer Android Studio:(1:4)
Physical Device:(1:2)
Source code:
<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"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.test.testing.app.MainActivity">
<ImageView
android:id="#+id/Image1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:contentDescription="Image1"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/Image2"
android:layout_marginRight="5dp"
android:contentDescription="Image3"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignTop="#+id/Image1"
android:layout_centerHorizontal="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#id/Image3"
android:layout_toRightOf="#id/Image1"
android:contentDescription="Image2"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image4"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/Image1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:contentDescription="Image4"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image5"
android:layout_width="100dp"
android:layout_height="100dp"
android:contentDescription="Image5"
android:src="#drawable/_5221802"
android:layout_alignTop="#+id/Image6"
android:layout_alignRight="#+id/Image2"
android:layout_alignEnd="#+id/Image2"
android:layout_alignLeft="#+id/Image2"
android:layout_alignStart="#+id/Image2" />
<ImageView
android:id="#+id/Image6"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_below="#id/Image3"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:contentDescription="Image6"
android:src="#drawable/_5221802" />
Why not use Linear Layout and set equal weights for all three images in a row.
Look at this code, I have trimmed it a bit, but the main parts are:
Changed RelativeLayout to LinearLayout (with 'horizontal' orientation), then changed the width of all three images to 0dp - android:layout:width="0dp", and added equal weight layout_weight = "1" for all three of them'
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/Image1"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:contentDescription="Image1"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image3"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:contentDescription="Image3"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image2"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:contentDescription="Image2"
android:src="#drawable/_5221802" />
</LinearLayout>
This would work on any device of any screen size.
Actually, you need not have to run the app to see how your app's layout will look on particular device, you can check that in Eclipse - layout editor. There are many dropdowns at the top bar for you to select the type of device where you want your app to run and find out, how it will look there.
To answer your question, ideally, you should define Gridview and add your images there.
I have few buttons in my app that i have applied circular png images on them but the edges gets pixelated, i don't know how to nine patch a circular image. If anybody knows a different way of doing it
Plzzz help
here is the code
<LinearLayout
android:id="#+id/containerofbluefi"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="30dp"
android:layout_weight="70"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="100" >
<Button
android:id="#+id/b_Select_blue"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:background="#drawable/selector_bluetooth"
/>
<ImageView
android:id="#+id/b_Select_wifi"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:background="#drawable/selector_wifi"
/>
</LinearLayout>
here is the screeshot:-
you can see the upper and lower portion is blured....