I am working on dark mode for my app which contains a map with a lot of markers. Therefore, I have to darken the custom info windows of the google maps. Because these windows have a margin by default which is white, I had to create one from the ground up.
This is the custom window:
<?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"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#ffffff">
......
</LinearLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/custom_info_window_triangle"
android:rotation="180"/>
<View
android:layout_width="1dp"
android:layout_height="5dp"/>
</LinearLayout>
For the triangle I have found this approach to be the best: https://stackoverflow.com/a/31704460/6612631.
Until here, everything works as expected. The problem is with shadow. I tried to use a cardview, but setting cardElevation doesn't show any shadow.
Later Edit: this is the cardview in which I've tried to put the second linear layout:
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#ffffff"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="4dp">
</androidx.cardview.widget.CardView>
I had the same issue of showing shadow on custom info window on maps,
And I solved by using drawable as a background to the parent layout.
<?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"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_holo_light_frame"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#ffffff">
......
</LinearLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/custom_info_window_triangle"
android:rotation="180"/>
<View
android:layout_width="1dp"
android:layout_height="5dp"/>
</LinearLayout>
I have used the android default drawable, which is nine patch image:
android:background="#android:drawable/dialog_holo_light_frame"
You can use this according to your requirement or can create one such image
with shadow in it and add as your linear layout background instead of cardview.
Hope this helps!
Related
I am brand new to android to android development and just playing around with xmls for building layouts. I wrote the following code stuffs for printing a hello ubuntu and inserting an image in it. But the Image seems to have a unwanted upper and bottom padding or margin (not sure what it's called) which looks wierd. Please anyone help me removing it. Here is my code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorAccent"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:layout_margin="8dp"
android:text="Hello Ubuntu (16.06LTS)"
android:background="#color/colorPrimary"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:src="#mipmap/Ubuntu"
android:layout_margin="0dp"/>
</LinearLayout>
Screenshot here(see the preiew on right side):
those extra padding is autogenerated since the android would try to get the original aspect ratio. please try below
scaletype = "fitCenter"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
You should use android:scaleType (see documentation).
This will allow you to tell the view how to react if the image does not have the exact size of the view.
You can try
android:adjustViewBounds="true",
it works for me.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorAccent"
android:orientation="vertical"
android:padding="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:layout_margin="8dp"
android:text="Hello Ubuntu (16.06LTS)"
android:background="#color/colorPrimary"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/asd"
android:layout_margin="0dp"
android:adjustViewBounds="true"
/>
</LinearLayout>
There is a margin above the imageview but it is not the part of imageview. It is actually because of margin applied to the textview above the imageview. You can do the following code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#00ffff"
android:orientation="vertical"
android:padding="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="Hello Ubuntu (16.06LTS)"
android:background="#000000"/>
<ImageView
android:layout_width="371dp"
android:layout_height="match_parent"
android:padding="0dp"
android:background="#ff0000"
android:layout_margin="0dp"
/>
EDIT -
In your above code, you have applied Margin to all the sides of the view. (android:layout_margin="8dp")
This gives the margin to the view from all the 4 sides including the bottom one, which appears as the imageview's top margin.
Hence, what you need to do is to apply margin to the view side by side by changing
android:layout_margin="8dp"
to
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginUpper="8dp"
EDIT 2 -
Make sure you have 0 padding and 0 margin in the parent (root) container.
I am implementing GridLayout in a recycler view with Images loading from the drawable folder.
Image Link here
So as you can see , the background is white and I want to make it Transparent,
My XML code for this layout is
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:id="#+id/card"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Abcd"
android:textSize="18dp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#ffffff"
android:layout_marginTop="140dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
I have tried a lot of things that such as :-
Making Recycler View's alpha as 0
Card View's Alpha as 0
Setting Card Background Color to Transparent and setting Max Elevation to 0 so as to reduce the shadow
Still, I am not able to get the transparent Background. Can anyone suggest a new way?
Also , the Images used are Vector Images with transparent background.
UPDATE
It works now ,Thanks to #Adley
I just had to remove the card layout that i was using and cast into a normal relative layout
Edited:
Try adding card_view:cardBackgroundColor="#android:color/transparent"
to your root view (CardView).
I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"
Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.
This worked for me!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>
i want to create a button with green color background and a white line in center, like in the image.
If you want to use a 9 patch (name it btn_green.9.png - mind the extension!), put it in your /res/drawable-mdpi folder.
You can use this one:
This is how it is shown in the draw9patch tool:
This is how to add it:
<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"
>
<ImageButton
android:layout_width="match_parent"
android:layout_height="96dp"
android:background="#drawable/btn_green"
/>
</RelativeLayout>
It only uses 1 View, so it's a superfast (the less Views, the better performances)!!
You can create an ImageButton with Background attribute, and then create a View for the line setting the margin attribute to move it the position you want.
This is a very fast xml, but you can start playing with it
<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">
<ImageButton
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#009900" />
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF" /> </RelativeLayout>
If you want to make the button like that, you can use FrameLayout.
<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="wrap_content">
<ImageButton
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#009900" />
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_gravity="center_vertical"
android:background="#FFFFFF" />
</FrameLayout>
The reason why i'm using FrameLayout is to overlap Views. so try this code, i hope it works.
I'm currently trying to build a simple Contacs Card myself. I just want a Profile picture on the top left, about a quarter to a third of the width, and the Name + description on the right side.
No matter what i try, it always looks very similar to the screenshot below.
this is my Layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_standard_padding"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"
style="#style/AppBaseThemeCardBG">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/nowCardStyle">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="top"
android:paddingRight="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/schuckCard"
android:scaleType="fitCenter"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical">
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/schuckHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="JESCO SCHUCK"
android:textSize="#dimen/textSizeVeryLarge" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="Description" />
</LinearLayout>
</LinearLayout>
</ScrollView>
This is how it looks like:
I'd like the image to be approximately as wide as the description in the action bar. Obviously i brutally failed here
Use different values for the layout weights. Like 4 for the image and 6 for the content to give it 40‰ of the cards width
Consider using cardslib ( https://github.com/gabrielemariotti/cardslib) to do your card layout. It is very well put together.
Got my stupid Problem fixed:
In the ImageView I have declared android:scaleType="fitCenter" which apparently also centers the ImageView in my Layout.
When changing the scaleType to fitStart I get the result I wanted.