Android Floating Action button : Resize inside icon - java

Hi I want to set image into FloatingActionButton i did this :
<android.support.design.widget.FloatingActionButton
android:id="#+id/qick_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#drawable/quick_menu"
app:elevation="7dp"
app:layout_anchor="#id/mapview"
app:layout_anchorGravity="bottom|right|end" />
But I have a small image in my button

try this: in Layout:
<?xml version="1.0" encoding="utf-8"?>
<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.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="0dp"
android:scaleType="fitXY"
android:src="#drawable/map"
app:backgroundTint="#android:color/transparent"
app:borderWidth="0dp"
app:useCompatPadding="true" />
</RelativeLayout>
Now in res/values/dimens.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="fab_margin">16dp</dimen>
<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>
</resources>
This line is important <dimen name="design_fab_image_size" tools:override="true">56dp</dimen>
output:

you can use fabSize attribute
app:fabSize="normal"

Try this: android:scaleType="center" and try image size 56dp. It worked for me.

The image/icon inside FAB can be resized in XML.
app:maxImageSize = "32dp" This will be your image size inside Floating Action Button.
app:fabCustomSize = "64dp" This will be your Floating Action Button size.

You can change the image if you want to change the size of the inner image, just choose the image of your choice and add it to floating button.

Related

How to display an image in navigation drawer

I am trying to make my first hamburger menu with some images, but they are displayed in grey scale, not the real image. Here is a photo of how it looks:
And here is the code for the XML file:
<item
android:id="#+id/desp_mercedes"
android:icon="#drawable/mercedes"
android:title="Mercedes" />
<item
android:id="#+id/desp_audi"
android:icon="#drawable/audi"
android:title="Audi" />
<item
android:id="#+id/desp_bmw"
android:icon="#drawable/bmw"
android:title="BMW" />
I want to know how to display the original images. I have both SVG and PNG files for better quality.
In your nav_header_main.xml layout resource file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/nav_header"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
//here you can add your image src
<ImageView
android:id="#+id/nav_header_imageView"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/ic_imageview" />
<TextView
android:id="#+id/nav_header_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:text="Chike Mgbemena"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
You can maybe try this out: How do I customize the navigation drawer in Android Studios?
TL;DR: Create a ListView in your DrawerLayout with the appropriate implementation, Adapter, item.xml and such.
I found the way to display the original images, here is the fragment of code:
navigationView.setItemIconTintList(null);
"navigationView" is the name for my drawer, change it to yours on your MainActivity

How can i Blur the background of my textview in android studio

I have an image with a textview on top of it. I am wondering how I can blur the background of my textview (only part of the image) to make it more readable. I have tried looking at the Blurry library but it seems like it can only blur the whole picture.
Add this custom BlurView solution: https://github.com/mmin18/RealtimeBlurView
Then put your BlurView positioned behind the TextView in your layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<com.github.mmin18.widget.RealtimeBlurView
android:id="#+id/textview_blurview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/my_textview"
android:layout_alignBottom="#+id/my_textview"
android:layout_alignStart="#+id/my_textview"
android:layout_alignLeft="#+id/my_textview"
android:layout_alignEnd="#+id/my_textview"
android:layout_alignRight="#+id/my_textview"/>
<TextView
android:id="#+id/my_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text in front of blur view"/>
</RelativeLayout>
Finally, set the blur and color as desired in code
blurView.setBlurRadius(80.0f);
blurView.setOverlayColor(R.color.background_blur_color);
You can use frame layout to produce a blur effect , frame layout allows to align views along z-axis the last child appears above all other children, example of usage:-
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView android:layout_width="match_parent"
android:layout_gravity="top"
android:layout_height="200dp"/>
<TextView
android:layout_width="match_parent"
android:background="#10000000"
android:layout_gravity="bottom"
android:layout_height="100dp" />
<TextView
android:layout_width="wrap_content"
android:text="Text Here"
android:layout_marginBottom="50dp"
android:layout_gravity="bottom|center_horizontal"
android:layout_height="wrap_content" />
</FrameLayout>
You can also set the textview background to some color (#AARRGGBB) with lower aplha (AA < "FF" ->max alpha) to reproduce a similar effect easily.
As you want to make your textview more readable as it sits over the imageview. To do this instead of blurring image why don't you use gradient drawable or color.
I had same requirement in my app and I simply went with placing grading view over the part of ImageView.
Let's do this
Step 1: Create a gradient shape and put it under drawable folder, let say shape name is gradient_overlay.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#00000000"
android:startColor="#BB000000"/>
</shape>
Step 2: Create a dummy view and place this over the ImageView or part of ImageView.
<View
android:id="+#id/gradientView"
android:layout_width="match_parent"
android:layout_height="60dp" // adjust the height
android:layout_alignBottom="#id/picture" // give the id of your image
android:background="#drawable/gradient_overlay">
</View>
Step 3: Then align your textview over the gradientView. so that text become proper visible.

Forcing image to be cropped to wrap content

I have a Dialog where I set the layout to a custom layout I created. What I'm trying to do is make the background image (in this case the ImageView) crop to just what is needed to cover the space of the content of the TextView. This is how it looks now:
But what I need is for the background image to be cut off after the "content" line of the TextView. I'm not sure of a way to do this. The only way I found was to hardcode the RelativeLayout height (i.e. 200dp) but the TextView's content will be dynamic and will grow/shrink so this isn't an solution for me. Any ideas? Thanks
Here is the XML for this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/blue9" >
</ImageView>
<TextView
android:id="#+id/tvMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tvTitle"
android:layout_marginTop="5dp"
android:gravity="center"
android:textColor="#FFF"
android:text="This \n is \n my \n content"
android:textSize="20sp" />
</RelativeLayout>
Also, the same effect happens when I set the background of the RelativeLayout to the drawable. I was hoping the scaleType attribute on the ImageView would help.
I believe you should be able to set the TextView's background attribute to be the drawable.

Android ImageView scale type centerCrop

I'm creating an activity on Android. I want to show a background image in it. I put a ImageView into my main RelativeLayout.
<RelativeLayout
android:id="#+id/relativeLayoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/bgImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="#drawable/bg4"
android:scaleType="centerCrop" />
</RelativeLayout>
It makes view like this.
I need to make view like this
How can I do it?
Try set ImageView attribute ScaleType=fitEnd ?
use this code.it's give the out-put as you want.
Code
<?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" >
<RelativeLayout
android:id="#+id/relativeLayoutMain"
android:layout_width="150dp"
android:background="#android:color/background_dark"
android:layout_height="150dp" >
<ImageView
android:id="#+id/bgImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
one advice if u give the imageview width fill parent then it's contain whole space according to main container.
Best Luck
Set the android:background="#drawable/bg4" in the RelativeLayout like that:
The whole XML should look like that:
<RelativeLayout
android:id="#+id/relativeLayoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#drawable/bg4
android:orientation="vertical" >
</RelativeLayout>
First, I believe there are a couple of things wrong in the xml:
RelativeLayout does not make use of an orientation, you should remove that
Is this your full xml file? If so then the alignParentLeft in the RelativeLayout doesn't do anything because that is an attribute you use if it's parent is a RelativeLayout.
fill_parent is the deprecated name of match_parent, you should use that.
I also believe that code you have would center the image on the screen putting anything that is to big evenly on both sides and not at all what you said it does.
If you just want a background you can just use android:background="#drawable/bg4" in the RelativeLayout
EDIT: Changing the layoutparams of the ImageView to wrap_content both height and width and removing the scaleType alltogether might make it like you wanted it to be.

How to make a transparent layout?

I have following code for main layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layout"
android:gravity="center"
android:background="#00000000"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#FFFFFF" />
</LinearLayout>
I need that the LinearLayout will be transparent. I thought that I can do it using the alpha setting in a background attibute, but it doesn't work. Please, tell me - I need that my application will be empty and has a white rectangle on the center of a screen.
You want the activity to be transparent?
Try using this theme in your activity tag (in the manifest file): #android:style/Theme.Translucent
For other possible ways, ie child theme see the following answers:
Activity should be transparent, but has black background
How do I create a transparent Activity on Android?
how to make activities transparent
Use below line in the xml file:
<Linearlayout android:background="#android:color/transparent"/>

Categories