Hi i would like to do this:
And my solution
this set corner for linearlayout:
drawable/draw_arc_corner_shape
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid
android:color="#color/bg_trip_tab_view" >
</solid>
<!--<stroke-->
<!--android:width="0dp"-->
<!--android:color="#color/bg_trip_tab_view" >-->
<!--</stroke>-->
<padding
android:left="0dp"
android:top="5dp"
android:right="0dp"
android:bottom="5dp" >
</padding>
<corners
android:radius="11dp" >
</corners>
This part dwaw circle:
drawable/draw_circle_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false" >
<solid android:color="#color/bg_my_trip_tab_view" />
<size
android:height="10dp"
android:width="10dp" />
</shape>
this draw dash line: drawable/draw_dash_line_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:dashGap="3dp"
android:dashWidth="2dp"
android:width="1dp"
android:color="#color/bg_my_trip_tab_view" />
</shape>
and here create view (separator) with circle (semicircle) on start and end and dash line between: layout/separator
<?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="horizontal"
android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<View
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="-10dp"
android:background="#drawable/draw_circle_shape"
/>
<View
android:layout_width="0dp"
android:layout_height="5dp"
android:background="#drawable/draw_dash_line_shape"
android:layerType="software"
android:layout_weight="1"
android:paddingRight="15dp"
/>
<View
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="-10dp"
android:background="#drawable/draw_circle_shape"
/>
</LinearLayout>
and here i use it: layout/main_screen
<?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"
android:orientation="vertical"
android:background="#color/bg_my_trip_tab_view"
>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/draw_arc_corner_shape"
>
<include
android:layout_marginTop="#dimen/grid_20"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/separator"
/>
</LinearLayout>
and this is my result:
And my question:
How can I remove border with shadow? And How can I do it better?
Are you getting border shadow in Android Studio xml design view. On real device no shadow showing.
Related
I have a fragment shown on top of another with a transparent background, How can I remove this white space behind the blue drawable?
this is my Drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<solid android:color="#android:color/holo_blue_light" />
</shape>
</item>
</selector>
and this is the fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:clickable="true"
android:orientation="vertical"
android:layout_height="match_parent"
android:weightSum="2.2"
tools:context=".ui.main.signup.IdModeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1.2"
android:background="#color/black_transparent_60"
android:layout_height="0dp"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/id_mode_fragment_round_background"
android:padding="#dimen/app_padding"
android:weightSum="6"
android:layout_height="0dp">
Thanks for any help!
I'm trying to create a circular text-view with a rectangle at bottom for reference purpose here I'm sharing the Sample image and code what I'm trying to achieve
Can anyone help me in create this following screen shot, Thanks in advance.
Try this
<?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:background="#ff0"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/myTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_dot"
android:gravity="center"
android:padding="10dp"
android:text="sdsjhdsd"
android:textColor="#ff00" />
<TextView
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myTv"
android:gravity="center"
android:layout_centerHorizontal="true"
android:background="#drawable/test"
android:text="sdsjhdsd" />
</RelativeLayout>
</LinearLayout>
android:background="#drawable/ic_dot"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="100dp"
android:bottomRightRadius="100dp"
android:topLeftRadius="100dp"
android:topRightRadius="100dp" />
<solid android:color="#color/lightWhite" />
<size
android:width="100dp"
android:height="100dp" />
<stroke
android:width="3dp"
android:color="#22ff00" />
</shape>
android:background="#drawable/test"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#e60707" />
<corners android:radius="50dp" />
</shape>
RESULT
I'm using a layer-list items to show speech bubble:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="55dp"
android:left="0dp"
android:height="30dp"
android:width="60dp"
android:gravity="center_horizontal">
<rotate
android:fromDegrees="-45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#6bc160" />
</shape>
</rotate>
</item>
<item android:left="0dp"
android:bottom="0dp"
android:height="70dp"
android:width="140dp"
android:gravity="center_horizontal">
<shape android:shape="rectangle" >
<solid android:color="#6bc160" />
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>
And I'm showing this layer-list drawable in an ImageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_marker"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
android:layout_gravity="center_horizontal"
android:background="#android:color/transparent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text (text)"
android:layout_gravity="center_horizontal"
android:background="#android:color/transparent"/>
</LinearLayout>
</RelativeLayout>
At compile time it is showing proper drawable in Android Studio but when I run the Application in mobile, nothing will show in ImageView. Can someone help me why is it happening?
I have two buttons and I want to change the shape of them to be semi-circles. Then place them beside each other to make a full circle. An image has been attached to show how I want the buttons to look. Any help would be greatly appreciated. Thank you.
You have to create one drawable xml file.
left_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp"
android:bottomRightRadius="0dp" android:bottomLeftRadius="25dp"
android:topLeftRadius="25dp" android:topRightRadius="0dp"/> // here you have to put dimen as per reqiurement
<solid android:color="#color/green" />
</shape>
right_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp"
android:bottomRightRadius="25dp" android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp" android:topRightRadius="25dp"/> // here you have to put dimen as per reqiurement
<solid android:color="#color/green" />
</shape>
layout.xml
<Linearlayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:background="#draable/left_corner"/>
<Button android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:background="#draable/right_corner"/>
</Linearlayout>
This was work for me..
Try this way it work for me
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="15dp" >
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/btns"
android:text="A"
android:textColor="#android:color/white"
/>
<View
android:layout_width="1dp"
android:layout_height="2dp"
android:background="#f0f0f0"
/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/bbb"
android:text="B"
android:textColor="#android:color/white"
/>
</LinearLayout>
</LinearLayout>
btns.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="30dp"
android:width="30dp"/>
<solid android:color="#000000"/>
<corners android:topLeftRadius="15dp"
android:bottomLeftRadius="15dp"/>
</shape>
bbb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="30dp"
android:width="30dp"/>
<solid android:color="#000000"/>
<corners android:topRightRadius="15dp"
android:bottomRightRadius="15dp"/>
</shape>
OUTPUT
#. First, create two custom shape drawable for left and right half-circle.
left_half_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="1000dp"
android:topLeftRadius="1000dp"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp" />
<solid android:color="#android:color/holo_red_light" />
</shape>
right_half_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="1000dp"
android:topRightRadius="1000dp" />
<solid android:color="#android:color/holo_green_light" />
</shape>
USE:
1. Create a horizontal LinearLayout and add two Button inside it. Use attribute layout_weight to Buttons for equal width.
2. Set left_half_circle as a background of button_left and set right_half_circle as a background of button_right.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="horizontal"
android:weightSum="2"
android:layout_gravity="center">
<Button
android:id="#+id/button_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="RED"
android:textColor="#android:color/white"
android:background="#drawable/left_half_circle" />
<Button
android:id="#+id/button_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="GREEN"
android:textColor="#android:color/white"
android:background="#drawable/right_half_circle" />
</LinearLayout>
OUTPUT:
Hope this will help~
Hi user23423534,
Applying xml shape as background to button and placing button side by side will help u solve the problem.
Please check the below code.
Layout file:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#drawable/shape"/>
<Button
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#drawable/shape1"/>
</LinearLayout>
shape drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<corners android:bottomLeftRadius="50dp"
android:topLeftRadius="50dp"/>
</shape>
shape1 drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<corners android:bottomRightRadius="50dp"
android:topRightRadius="50dp"/>
</shape>
Have tried many ways to design a thermometer in android but they are all suck.
The last work is using a vertical progress plus a circle.xml:
drawable\verticalprogressbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
</shape>
</item>
<item android:id="#android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape>
<corners android:radius="50dip"/>
<solid android:color="#FF0000"/>
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
<shape>
<solid android:color="#FF0000"/>
</shape>
</clip>
</item>
</layer-list>
drawable\circle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="#FF0000" />
</shape>
layout\activity_main.xml:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ProgressBar
android:id="#+id/tempGauge"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="10dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:max="50"
android:progress="25"
android:progressDrawable="#drawable/verticalprogressbar" />
<View
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:layout_marginBottom="10dp"
android:background="#drawable/circle" />
</LinearLayout>
What is the best way to draw a real mercury-like meter with this background:
http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Thermometer_CF.svg/345px-Thermometer_CF.svg.png
Change the layout from linear to relative:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.myview.MainActivity" >
<View
android:id="#+id/view1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBottom="#+id/tempGauge"
android:layout_marginLeft="0dp"
android:background="#drawable/circle" />
<ProgressBar
android:id="#+id/tempGauge"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="10dp"
android:layout_height="fill_parent"
android:layout_alignRight="#+id/view1"
android:layout_marginRight="10dp"
android:max="50"
android:progress="25"
android:progressDrawable="#drawable/verticalprogressbar" />
</RelativeLayout>
Although it is not perfect, but finally looks better.
Now I need to add scales to it.