I'm trying to code a simple MapActivity which uses the following layout (only contains the mapview for the moment, as I plan to add share the screen with a ListView in the future) :
<?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="fill_parent">
<com.google.android.maps.MapView
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="200dip"
android:enabled="true"
android:clickable="true"
android:apiKey="mykey"
android:layout_alignParentBottom="true" />
</RelativeLayout>
I have applied a simple shape to the mapview in order to have round corners and a stroke :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
<stroke android:width="3dp"
android:color="#color/bordure_tables" />
</shape>
I use the following to apply the shape :
mapView.setBackgroundResource(R.layout.map);
Problem is that it does not have any effect and I can't see my rounded corners, nor the stroke.
Just wrote a tutorial to have rounded corners on a MapView it's done programmatically so should scale well to all devices:
http://www.anddev.org/novice-tutorials-f8/rounded-corners-map-view-t56908.html
Once you have added the custom view class you can just instantiate a rounded mapview like so:
<com.blundell.tut.ui.widget.RoundedMapView
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
Have you tried assigning it a padding?
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
So your strokes and radius should be visible.
So I've achieved this affect by doing following: I've created a 9-patch drawable called round_corners and placed it in my drawable folder, then I use following xml to plot the map:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">/
<com.google.android.maps.MapView
android:id="#+id/center_map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="your_key"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/round_corners"
></LinearLayout>
</FrameLayout>
I was able to achieve this creating a rounded drawable like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke android:width="10dp" android:color="#color/color_gray5_eeeeee" />
<corners android:radius="10px" />
</shape>
then using a linear layout and a margin of the same size of the drawable stroke width, like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_gray_rectangle_rounded_corners"
android:orientation="vertical">
<com.google.android.gms.maps.MapView
android:id="#+id/map_details_map_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:clickable="true"
android:enabled="true" />
</LinearLayout>
Just put the Mapview into a CardView
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:elevation="0dp"
app:cardCornerRadius="5dp">
<com.google.android.gms.maps.MapView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v7.widget.CardView>
Related
I have a RelativeLayout where I Inflate the current view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#drawable/selected_background"
android:clipChildren="false"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:translationX="-5dp"
android:translationY="-5dp"
android:background="#drawable/selected_edge_circle"
android:layout_width="25dp"
android:layout_height="25dp"/>
</LinearLayout>
selected_background is a drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark"/>
<stroke android:width="3dp" android:color="#4fa5d5"/>
</shape>
and the selected_edge_circle:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="25dp" android:height="25dp"/>
<solid android:width="3dp" android:color="#4fa5d5"/>
<stroke android:width="3dp" android:color="#4fa5d5"/>
</shape>
I'm getting this result:
As you can see the circle is cut-of, although I ahve specified not to clip it. I want to show a circle on the top left corner that looks like this:
I don't want to wrap this Layout in another container and set a padding or a margin, I want, no matter what, overflow the top left circle. Any ideas who this can be achieved? Thanks!
I don't know if it's the way you want it. I believe it is a way of doing.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:background="#drawable/selected_background"
android:clipChildren="false"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<View
android:translationX="-5dp"
android:translationY="-5dp"
android:background="#drawable/selected_edge_circle"
android:layout_width="25dp"
android:layout_height="25dp"/>
</LinearLayout>
</RelativeLayout>
I'm using mapview on main Relative Layout
I want to mapView to be completely rounded.
I searched it for in internet get answer saying that I should make new drawable xml and add it to Layout that I want to make it rounded by setBackgorund(R.drawable.xxxx).
so, I made layout_bg.xml in drawable folder.
layout_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!-- solid background -->
<solid android:color="#ffffba54"/>
<!-- border-->
<stroke
android:color="#ffff206a"
android:width="2dp"
/>
<corners android:radius="25dp"/>
<!-- different corners with different radius-->
<!--corners
android:bottomLeftRadius="5dp"
android:topLeftRadius="10dp"
android:topRightRadius="15dp"
android:bottomRightRadius="20dp"
/-->
</shape>
</item>
but It's not working at all.
so, I tried to do it in programmatically.
MainActivity.java
setContentView(R.layout.activity_main);
mapView = new MapView(this);
ViewGroup mapViewContainer = (ViewGroup)
findViewById(R.id.map_view);
mapViewContainer.setBackgroundDrawable(R.drawable.layout_bg);
<--- Here I get error. because R.drawable.layout_bg is int
Log.e("mp","mapView2");
mapViewContainer.addView(mapView);
activity_main.xml
<android.support.constraint.ConstraintLayout 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:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:layout_marginTop="85dp"
android:text="aaaaaaaa" />
<RelativeLayout
android:id="#+id/map_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
Use (MainActivity.this).getResources().getDrawable(R.drawable.layout_bg) then you wont get the error.. !!
I am trying not to use image view. This is because, later, I will generate many objects with the same shape but different colors, so I wouldn't need to keep adding image views but simply adding colors on my code.
How can I create those images on Android Studio? I looked over Paint, onDraw, Canvas, etc, but this looks difficult to me.
If you want to use from XML , Try this way it will work
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#5EB888" />
<corners android:radius="0dp"/>
</shape>
</item>
<item
android:top="-26dp"
android:bottom="31dp"
android:left="-90dp"
android:right="75dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT
You can create vector image using any vector program like Adobe Illustrator or convert it using a conversion tool like vectormagic or find already existing one then import it to android studio.
it will be imported as xml file where you can change the colors as you want
Create a drawable file as named left_arrow.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="90"
android:pivotX="0%"
android:pivotY="1%" >
<shape android:shape="rectangle" >
<stroke
android:width="10dp"
android:color="#00000000" />
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
Now, create a view layout to create this type of stripes or image like this, here is the below code:-
<?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="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/llMain"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:background="#color/black"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:background="#drawable/left_arrow"
android:contentDescription="#string/app_name" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:contentDescription="#string/app_name" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9" />
This above layout creates the required arrow stripe as a layout.
Now add this layout to your required layout where you wan't to show this stripes. For example,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/llMain"
layout="#layout/xtra"/>
</LinearLayout>
Now, you are able to also use OnClickListener by using "llMain".
Hope it will help.
You could use the white png image you already have and use the setColorFilter method on the image view class to tint it with any color you desire
I am drawing custom header to input information in my app. I have drawn 2 shapes in xml and then positioned them in a layout. That layout is then put in my main layout using . However there is a black border that is drawn around each of the included headers. This seems to only be on api 21 devices. What is going on?
circle.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/icon_background"
android:shape="oval">
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
<solid
android:color="#color/color_primary"
android:angle="270">
</solid>
</shape>
line.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="5dp"
android:color="#color/color_primary"/>
<size android:height="10dp" />
</shape>
Header layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="5dp"
android:layout_width="match_parent"
android:layout_alignParentStart="true"
android:layout_marginTop="14dp"
android:src="#drawable/line">
</ImageView>
<ImageView
android:id="#+id/circle"
android:layout_height="32dp"
android:layout_width="32dp"
android:src="#drawable/circle"
android:layout_centerHorizontal="true">
</ImageView>
<ImageView
android:id="#+id/header_icon"
android:layout_height="32dp"
android:layout_width="32dp"
android:src="#drawable/ic_action_car"
android:layout_centerHorizontal="true">
</ImageView>
</RelativeLayout>
Included layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/header_horizontal_margin"
android:paddingRight="#dimen/header_horizontal_margin"
android:paddingTop="#dimen/header_vertical_margin"
android:paddingBottom="#dimen/header_vertical_margin">
<include
android:id="#+id/carSpecs"
layout="#layout/header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</include>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/header_vertical_margin"
android:paddingBottom="#dimen/header_vertical_margin"
android:layout_gravity="center_horizontal"
android:id="#+id/vehicleSpinner"
android:layout_below="#+id/carSpecs"/> ...
Try to add this <solid android:color="#00FFFFFF"/> in your line.xml.
Remove this:
<stroke android:width="5dp"
android:color="#color/color_primary"/>
From line.xml
This is adding the extra "border", using the color_primary color resource as defined in your colors.xml.
Figured it out! Using same basis as #Der Golem I removed the
<size android:height="10dp" />
from the line.xml. Since the stroke was half of the size I was receiving the border. Thanks for the help all!
I was following this tutorial and I've applied that code in my xml but round corner is on full listview not in particular row. And I did exactly like the tutorial
<?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:orientation="vertical"
android:baselineAligned="true">
<ListView
android:id="#+id/listaPedidos"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#color/background_pedidos"
android:dividerHeight="7dp"
android:padding="20dp"
android:background="#drawable/pedidos_shape"
android:smoothScrollbar="true"/>
</LinearLayout>
pedidos_shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="2dp"
android:color="#color/custom_gray" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
<corners
android:radius="8dp" />
<solid
android:color="#color/white"/>
</shape>
set background item.xml(custom listview row xml)
custom_listview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/pedidos_shape">
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"/>
</LinearLayout>
Mistake:
You have given background to whole ListView.
Resolution:
Background should be given it to individual items. Remove android:background="#drawable/pedidos_shape" from the <ListView> and include it inside the row XML layout file.
You need to set android:background="#drawable/pedidos_shape"to the item layout that you are inflating in your adapter.