Android Ring / Oval Shape appearing as Square? - android

I have a list view item in android which is appearing correctly in android studio but appearing as square in the actual build when I move it to phone
Can anyone solve this out for me please ?
Layout
<?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="wrap_content">
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:textSize="18dp"
android:text="Title Name"/>
<TextView
android:id="#+id/item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/item_title"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:textColor="#000000"
android:textSize="10dp"
android:text="Price : 100.00 pkr"/>
<TextView
android:id="#+id/item_quantity"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginEnd="11dp"
android:layout_marginRight="11dp"
android:background="#drawable/rectangle"
android:gravity="center"
android:text="10"
android:textColor="#FFFFFF"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>
Rectangle
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#5490CC"></solid>
<size android:width="26dp" android:height="26dp"/>
</shape>
enter image description here

Use a corner radius in your rectangle drawable to make it round:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#5490CC"></solid>
<size android:width="26dp" android:height="26dp"/>
<corners android:radius="13dp"/>
</shape>

You are using android:shape="rectangle" in your rectangle.xml. Use it as android:shape="oval" (if you want oval) as follows
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#5490CC"></solid>
<size android:width="26dp" android:height="26dp"/>
<corners android:radius="13dp"/>
</shape>
I hope its work for you

I Hope this will work for You
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#5490CC" />
<size
android:width="60dp"
android:height="60dp" />
</shape>

Related

Circular Textview with bottom rectangle

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

Layer-List items are not showing in ImageView at run time

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?

semi-circle button android

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>

Android: how to add a triangle shape in the right-top button corner

I would like to do this kind of button with a triangle in the right-top corner of a layout :
I've started this layout without this triangle yet:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center_vertical"
android:paddingLeft="#dimen/keyline_1"
android:paddingRight="#dimen/keyline_2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/grey"
android:text="DESCRIPTION"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentRight="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="#dimen/keyline_4"
android:textColor="#color/grey"
android:text="info"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/grey"
android:text="TITLE"/>
</LinearLayout>
</RelativeLayout>
Use below code to create triangle shape and make it textview background
<?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="45"
android:pivotX="0%"
android:pivotY="1%" >
<shape android:shape="rectangle" >
<stroke
android:width="10dp"
android:color="#00000000" />
<solid android:color="#00ACED" />
</shape>
</rotate>
</item>
</layer-list>
and use below code to rotate the textview
<TextView
android:id="#+id/won_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:paddingTop="20dp"
android:rotation="-45"
android:text="#string/won"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white"
android:textSize="34sp" />
more detail refer How to make custom textview in android?
You've to create a shape and add it as a background like this one :
<?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="45"
android:pivotX="-40%"
android:pivotY="87%" >
<shape
android:shape="rectangle" >
<stroke android:color="#color/transparent" android:width="10dp"/>
<solid
android:color="#color/your_color_here" />
</shape>
</rotate>
</item>
Add a TextView and put this shape as a background and change the gravity to end
Example :
android:background:"#drawable/YOUR_SHAPE"
Also if you don't familiar with shapes try this answer

Background EditText and ImageView are black?

I'm creating a custom border to LinearLayout, to do it I'm using shape . The problem is when I set #drawable/custom_linear_border all EditText has background black. This problem occur with Android 2.3 because superior this problem does not occur.
How could I solve it ?
custom_linear_border
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dip"
android:color="#android:color/darker_gray" />
</shape>
LinearLayout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/custom_linearlayout_border"
android:layout_marginTop="50dp"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:src="#drawable/icon_login"
/>
<EditText
android:id="#+id/etEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="13dp"
android:layout_gravity="center_vertical"
android:hint="Email"
android:inputType="textEmailAddress"
android:background="#00000000"
/>
</LinearLayout>
//Use this drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dip"
android:color="#android:color/darker_gray" />
</shape>

Categories

Resources