ALL,
Everywhere I look I see a reply on how to make it work for application icon. My situation is a little different.
In my program I have a ListView which displays images. Every image is associated with the object underneath.
What I want to do is create a design like in the iPhone badge notification, but for all those images in the view.
Trying to ask Google, I found this link. Problem is - it does not work. I'm testing on the LG Android phone with 2.2 kernel and all I see is the small red dot which is not even located on the image itself couple of pixels higher and to the left.
Here's my code:
<?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" >
<ImageView
android:id="#+id/user_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/user_image_description"
android:src="#drawable/placeholder"
/>
<TextView
android:id="#+id/user_messages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/icon"
android:layout_alignBottom="#id/icon"
android:background="#color/red"
android:textColor="#color/silver"
android:layout_marginLeft="-4dp"
android:layout_marginBottom="-4dp"
android:textSize="12sp"
android:textStyle="bold"
android:gravity="center"
/>
</RelativeLayout>
Can someone please look?
I tried to change the margins as well as text size, but it didn't change anything.
Thank you.
Try this way
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dip"
android:focusable="true" >
<ImageView
android:id="#+id/icon"
android:layout_width="60dip"
android:layout_height="60dip"
android:layout_marginTop="8dp"
android:background="#drawable/logo"
android:contentDescription="image"
android:scaleType="center" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/icon"
android:gravity="center"
android:paddingLeft="3dp"
android:paddingTop="10dp"
android:shadowColor="#000000"
android:shadowDx="1"
android:shadowDy="1"
android:shadowRadius="1.5"
android:text="#string/app_name"
android:textColor="#FFF" />
<TextView
android:id="#+id/txt_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="-10dip"
android:layout_toRightOf="#+id/icon"
android:background="#drawable/badge_count2"
android:contentDescription="badge"
android:gravity="center"
android:text="1"
android:textColor="#color/White"
android:textStyle="bold"
android:visibility="visible" />
</RelativeLayout>
Create drawable/badge_count2.xml file like below
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/red" >
</solid>
<stroke
android:width="2dp"
android:color="#FFFFFF" >
</stroke>
<padding
android:bottom="2dp"
android:left="7dp"
android:right="7dp"
android:top="3dp" />
<corners android:radius="10dp" >
</corners>
Output:
Related
I have some xml which working fine with api level above 17 but showing differently on phones api below same. My minSDK is 15.
Should i make layout v-17 , v-16 , v-15 separately or is there any other way around which works for all three at once.?
XML showing different behaviour on devices:
<LinearLayout 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:id="#+id/verify_number_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/app_name_id"
android:layout_marginLeft="17dp"
android:layout_marginRight="17dp"
android:animateLayoutChanges="true"
android:orientation="vertical"
android:visibility="visible"
tools:context=".activities.LoginActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="46dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="24dp"
android:layout_marginTop="30dp"
android:background="#drawable/outline"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="1">
<customViews.TextViewPlus
android:id="#+id/tv_state_code"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:gravity="center|center_horizontal"
android:text="#string/country_code_text"
android:textColor="#color/text_color"
android:textSize="16sp"
app:font="OpenSans-Regular.ttf" />
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#android:color/white" />
<customViews.EditTextPlus
android:id="#+id/et_mobile"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center|center_horizontal"
android:layout_marginLeft="8dp"
android:layout_weight="0.7"
android:gravity="start|center_vertical"
android:hint="#string/mobile_number_hint"
android:imeOptions="actionDone"
android:inputType="phone"
android:maxLength="10"
android:maxLines="1"
android:background="#android:color/transparent"
android:textColor="#color/textview_color_selector"
android:textCursorDrawable="#null"
android:textSize="16sp"
app:font="OpenSans-Regular.ttf" />
</LinearLayout>
<customViews.ButtonPlus
android:id="#+id/next_button"
android:layout_width="match_parent"
android:layout_height="46dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/outline"
android:gravity="center"
android:text="#string/next_button"
android:textColor="#color/textview_color_selector"
android:textSize="17sp"
app:font="Oswald-Light.ttf" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="46dp"
android:layout_gravity="center_horizontal"
android:indeterminate="true"
android:indeterminateTint="#color/text_color"
android:visibility="invisible" />
</LinearLayout>
outline.xml drawable used above and showing differently :
<?xml version="1.0" encoding="utf-8"?><!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<stroke
android:width="0.7pt"
android:color="#FFFF" />
<corners
android:bottomLeftRadius="55dp"
android:bottomRightRadius="55dp"
android:topLeftRadius="55dp"
android:topRightRadius="55dp" />
</shape>
above xml image on device above 17:
image on below api 17:
Please suggest some way around.
I think your corners value is to large(larger than half of view height) in your background drawable.
Try like this:
<corners
android:bottomLeftRadius="23dp"
android:bottomRightRadius="23dp"
android:topLeftRadius="23dp"
android:topRightRadius="23dp" />
Please modify the corners Drawable and change the Radius.Need to decrease the Radius size like this-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<stroke
android:width="0.7pt"
android:color="#FFFF" />
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>
Thanks
I have a view (Seekbar) in which i am setting a drawable shape named seek_bar.xml in progressDrawable, but i am getting different result when i run the layout in different level api. Means when i run the layout in <21 the shape size seems too small but when i run the layout >=21 shape size seems perfect, please help me how to fix this api level issue for this layout. See the images.
and my appcompct version is.
compile 'com.android.support:appcompat-v7:23.1.1'
I have a view named confirm.xml code looks like
<LinearLayout
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_background"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/txt_dia"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="40dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="#string/dialog_title_logout"
android:textColor="#color/gray_dark"
android:textSize="#dimen/dialog_text_title"
android:textStyle="bold"
>
</TextView>
<RelativeLayout
android:id="#+id/yes_no_back_strip"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/swipe_btn"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
>
<SeekBar
android:id="#+id/unlockButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false"
android:max="100"
android:progress="50"
android:thumb="#drawable/slide_thumb"
android:splitTrack="false"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:thumbOffset="1dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:progressDrawable="#drawable/seek_bar"
/>
<LinearLayout
android:id="#+id/yes_no_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:visibility="visible"
>
<TextView
android:id="#+id/confirm_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:paddingLeft="15dp"
android:text="#string/btn_txt_yes"
android:textColor="#color/gray_light_high"
android:textSize="#dimen/common_text_size"
android:textStyle="bold"
/>
<TextView
android:id="#+id/cancel_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="right|center_vertical"
android:paddingRight="15dp"
android:text="#string/btn_txt_no"
android:textColor="#color/gray_light_high"
android:textSize="#dimen/common_text_size"
android:textStyle="bold"
/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
and my seek_bar.xml is ....
<?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>
<gradient
android:angle="0"
android:startColor="#ffe0db"
android:centerColor="#aeff6960"
android:endColor="#ff0002"
/>
<corners android:radius="35dip" />
<size android:height="49dp"
android:width="190dp"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip >
<shape>
<gradient
android:angle="0"
android:startColor="#0b6e07"
android:centerColor="#75ba70"
android:endColor="#97ba93"
/>
<corners android:radius="35dp"
/>
<size android:height="49dp"
android:width="190dp"/>
</shape>
</clip>
</item>
</layer-list>
In api level >20 android:width and android:height not works with shape, i mean it well automatically detect the correct height and width accordingly to the view but it is not the case when you are using the api level <20. So when you fix the min width and height it will remains fixed through out all the api levels.
Otherwise you can specify different -2 layout size.
Just add minHight and maxHight in your seekbar layout
<Seekbar
.....
android:minHeight="50dp"
android:maxHeight="50dp"
....
/>
I'm sorry if I asking a stupid question here.
I'm looking for android layout design. Is there has a web easy for us to design the android layout and finally generate xml code to android studio.
I wanted to have a layout design as image below, however I don't think it is possible to do using android studio layout.
Try this xml code..
Screenshot
<?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:padding="#dimen/value_10"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_corner_up"
android:padding="#dimen/value_10"
android:text="Choose Station"
android:textColor="#color/black"
android:textSize="#dimen/txt_large" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title1"
android:layout_marginTop="-15dp"
android:background="#drawable/round_corner_up">
<EditText
android:layout_width="350dp"
android:layout_height="70dp"
android:layout_margin="#dimen/value_10"
android:background="#drawable/round_corner_square" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/value_10">
<TextView
android:id="#+id/title2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_corner_up"
android:padding="#dimen/value_10"
android:text="Within Next"
android:textColor="#color/black"
android:textSize="#dimen/txt_large" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title2"
android:layout_marginTop="-15dp"
android:background="#drawable/round_corner_up">
<Spinner
android:layout_width="350dp"
android:layout_height="70dp"></Spinner>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/value_20"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:text="Arrivals"
android:textSize="20sp"
android:drawableLeft="#drawable/drawable1"
android:layout_height="#dimen/value_70" />
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:text="Departures"
android:textSize="20sp"
android:drawableLeft="#drawable/drawable2"
android:layout_height="#dimen/value_70" />
</LinearLayout>
round_corner_up.xml
<?xml version="1.0" encoding="utf-8"?><!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#7B7D7B" />
<stroke
android:width="3dip"
android:color="#7B7D7B" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
round_corner_square.xml
<?xml version="1.0" encoding="utf-8"?><!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#color/white" />
<stroke
android:width="3dip"
android:color="#color/light_gray" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
You need to divide the layout in smaller elements. e.g. Choose station will be a TextView having a background image and text on it "Choose Station". Below that there will be a Relativelayout with image background and a EditText. There will be a search button with magnifying glass as background drawable. This will be aligned to right of parent so that it be on top of Edittext.
I'm making an app with it's contents inside card-like views but I am having a couple of problems:
I can't get the label line (the blue line) to move away from the card text. I've tried both padding and margin (on both line imageview and textview from text) and nothing seems to work here.
The bottom part of the card title is getting cropped because of the line spacing. How can I fix this and keep the line spacing?
Check this screenshot for better understanding: http://imgur.com/qsoCFrB
Here's the code to the card background and the interface itself:
card_bg:
<?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="1dp"/>
<solid android:color="#bdbdbd" />
</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="6dp"
android:left="6dp"
android:right="6dp"
android:top="4dp" />
</shape>
</item>
</layer-list>
main acitivity:
<?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="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg" >
<ImageView
android:id="#+id/iconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:src="#drawable/icon_example" />
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cardText0001"
android:layout_marginTop="4dp"
android:background="#drawable/card_label" />
<TextView
android:id="#+id/cardTitle0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/cardText0001"
android:layout_toRightOf="#+id/iconView0001"
android:fontFamily="sans-serif-condensed"
android:maxLines="2"
android:paddingLeft="4dp"
android:lineSpacingExtra="-6dp"
android:text="#string/card_title_002"
android:textColor="#717171"
android:textSize="16sp" />
<TextView
android:id="#+id/cardText0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iconView0001"
android:fontFamily="sans-serif"
android:layout_marginTop="4dp"
android:maxLines="1"
android:text="#string/card_desc_002"
android:textColor="#acacac"
android:textSize="12sp" />
</RelativeLayout>
</FrameLayout>
Thanks in advance.
this is the creator of the Gist on GitHub!
Have you tried increasing padding on the RelativeLayout, perhaps that could fix the problem? Or even on the TextView element?
Try doing that and see what the results are.
EDIT: Also, why is there negative line spacing within the Text View?
DOUBLE EDIT: So what was happening is that your layout_alignBottom in the linkTitle TextView was shorter than the height of two lines of text, therefore it was cropping the title to limit the height of the TextView to that of the FavIcon ImageView. Removing this property fixes the issue.
Similar issue goes for the label shape, that alignBottom is what's messing it up.
Change layout_alignBottom to layout_below and then padding/margin should affect the position as you please.
Here is the updated version of your code that should remedy your issues:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linkCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ccc" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg">
<TextView
android:id="#+id/linkTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/faviconView0001"
android:padding="4dp"
android:maxLines="2"
android:text="#string/link_title_001"
android:textColor="#717171"
android:textSize="17sp" />
<TextView
android:id="#+id/linkDesc0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linkTitle"
android:paddingTop="6dp"
android:paddingBottom="9dp"
android:fontFamily="sans-serif"
android:maxLines="1"
android:text="#string/link_desc_001"
android:textColor="#acacac"
android:textSize="13sp" />
<ImageView
android:id="#+id/faviconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:layout_alignParentLeft="true"
android:src="#drawable/favicon_example" />
<View
android:layout_height="0dp"
android:layout_width="fill_parent"
/>
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linkDesc0001"
android:background="#drawable/card_label" />
</RelativeLayout>
</FrameLayout>
I hope that all of this helps!
I am trying to have a listview where items have rounded corners and the items are spaced out from each other. This is done using a custom ArrayAdapter.
MyCustomAdapter arrAdapter = new MyCustomAdapter();
setListAdapter(arrAdapter);
I am using a drawable image to round the corners
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="10dp" />
<gradient
android:angle="90"
android:endColor="#993333"
android:startColor="#ffffff"
android:type="sweep" />
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
and setting it in the layout as background to the top most container - the LinearLayout
<?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="wrap_content"
android:layout_margin="4dp"
android:background="#drawable/square"
android:orientation="horizontal" >
<TextView
android:id="#+id/routeTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/circle"
android:padding="10dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="some text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/stopD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="5dp"
android:text="(text)"
android:textColor="#777777"
android:textSize="10sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/nextTT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="9dp"
android:paddingTop="5dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/moreTT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/nextTrainTime"
android:paddingBottom="5dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
For some reason in the graphical display I am able to see that single element exactly as I want it - with margins all around (I also want it to move away from the edges of the screen left and right).
But when I run this and let the adapter do its job I am getting a list of items, touching the sides of the screen and no space between them apart forma single line which is used to separate the items on a normal list.
Anyone have a clue how to make it behave?! I have search far and wide.
Thanks for your help
The space between your item and widescreen can be done with:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">...</shape>
</item>
In my case I used android:divider and android:dividerHeight on a ListView block to seperate each element of a ListView, and the left-right space with the android:left android:right properties.
The post where I got the info was this