Please help me in customizing like in the image
Below is my grid_mainborders.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:drawable="#drawable/grid_two_borderselected"
/> <!-- focused -->
<item android:state_focused="false"
android:drawable="#drawable/grid_two_bordernormal"/>
</selector>
Below is my grid_two_borderselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#android:color/holo_blue_light" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="3dp" />
</shape>
Below is my grid_two_bordernormal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#android:color/white" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="3dp" />
</shape>
Below is my GridView Item file
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginTop="2dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="2dp"
android:background="#drawable/grid_mainborders">
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cardViewGridLangsItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/grid_mainborders">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="10dp">
<TextView
android:id="#+id/tvMaintext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="English"
android:textSize="26sp"
android:padding="5dp"
android:textStyle="bold"/>
<TextView
android:id="#+id/tvSubText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="English"
android:textSize="20sp"
android:padding="5dp"/>
<TextView
android:id="#+id/tvAlphabet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="E"
android:textSize="38sp"
android:padding="5dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
I am using gridview with base adapter,
I have tried with few links but background is changing not with the corners of selected item.
Please help me on this Thanks in advance
Related
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 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.
I have a custom listview whose row contains 2 textviews. Everything is fine but the textviews are having black backgrounds. Here is the image:
Here is the code:
row.xml
<?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"
android:background="#drawable/list_selector"
android:orientation="horizontal"
android:padding="5dip" >
<LinearLayout
android:id="#+id/list_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip"
android:background="#drawable/image_bg"
android:padding="3dip" >
<ImageView
android:id="#+id/listimage"
android:layout_width="50dip"
android:layout_height="50dip"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:id="#+id/listtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/list_image"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/list_image"
android:text=""
android:textColor="#ffffff"
android:textSize="15sp"
android:textStyle="bold"
android:typeface="sans" />
<!-- Artist Name -->
<TextView
android:id="#+id/listpubdate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="1dip"
android:layout_toRightOf="#+id/list_image"
android:text=""
android:textColor="#ffffff"
android:textSize="10sp" />
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
gradient_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#f1f1f2"
android:centerColor="#e7e7e8"
android:endColor="#cfcfcf"
android:angle="270" />
</shape>
gradient_bg_hover.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#18d7e5"
android:centerColor="#16cedb"
android:endColor="#09adb9"
android:angle="270" />
</shape>
list_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg" />
<item android:state_pressed="true"
android:drawable="#drawable/gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg_hover" />
</selector>
image_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#dbdbdc" />
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
On your ListView, set the attribute android:cacheColorHint to #00000000
I was looking for some ListView, styling techniques and I found this one Post-How to make card List, I wanted the ListItems to be just like this :
list_item_background.xml is :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
I have implemented that in my RowOfListView.xml like :
<?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"
android:layout_margin="#dimen/ten"
android:background="#drawable/list_item_background" >
<ImageView
android:id="#+id/imageView_in_row"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/row_member_name"
android:layout_marginBottom="#dimen/ten"
android:layout_marginLeft="#dimen/five"
android:background="#drawable/rectangle"
android:contentDescription="#string/image"
android:src="#drawable/member" />
<TextView
android:id="#+id/row_member_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/ten"
android:layout_marginRight="#dimen/ten"
android:layout_marginTop="#dimen/ten"
android:layout_toRightOf="#+id/imageView_in_row"
android:ellipsize="end"
android:text="Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
.
.
.
</RelativeLayout>
But I'm getting this one :
unable to get that margin between Items of ListView as in prior picture, where I should set that margin.
You can try like this for listview row xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/outer"
style="#style/CardOuterStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_white"
android:orientation="vertical" >
//your fields here
</LinearLayout>
</FrameLayout>
and CardOuterStyle
<style name="CardOuterStyle">
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
<item name="android:paddingTop">5dp</item>
</style>
You should set the dividerHeight of the ListView as :
<ListView android:id="#+id/MyListView"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:divider="#android:color/transparent"
android:dividerHeight="#dimen/ten"/>
Alternatively, you may also give padding in your relative layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten"
android:background="#drawable/list_item_background"
android:paddingTop="#dimen/five"
android:paddingBottom="#dimen/five" >