I have background imageview (green with 3 red circle) and 3 textview (A,B,C).
how can I put textviews exactly on center of red circles that support multi screen devices , portrait/landscape?
Edited:
maybe I asked wrong question.
my main question is:
1- I've an image in my layout for example like this:
2- I want put textview on image in exact positions
when I test on different screen size , position of textviews changed.
Try this
activity_main.xml
<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:background="#00FF00"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:id="#+id/num_txt"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="20dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="A"
android:textColor="#000000"
android:textSize="20dp" />
<TextView
android:id="#+id/num_txt2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="30dp"
android:layout_marginLeft="100dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="B"
android:textColor="#000000"
android:textSize="20dp" />
<TextView
android:id="#+id/num_txt3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="100dp"
android:layout_marginLeft="50dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="C"
android:textColor="#000000"
android:textSize="20dp" />
Save in drawable bg_red.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#FF0000" android:width="5dip"/>
<solid android:color="#FF0000"/>
</shape>
The Output is :
In the text view xml attribute
android:gravity="center"
and make the circle xml file width as warp content
width = "wrap_content"
Related
I'd like to put attach file icon into EditText for example how it was made into WhatsApp. How can I do it?
That is not a custom EditBox. Here EditText is wrapped with parent view with other ImageViews.
In whatsapp example there is a Imogi ImageView, An EditText, An Attach ImageView, and a camera ImageView inside a LinearLayout. And parent LinearLayout is having round corner background.
You can also use Drawable left and Drawable right, but I will not suggest that because that does not have much control.
Just a suggestion:
I always want to save time. Here is an whatsapp clone, you can just pull it and use its views.
https://github.com/Shahar2k5/whatsappClone
This guy has done good work in this library.
Use drawableRight attribute in EditText
<EditText
android:id="#+id/account_et"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:drawableRight="#drawable/icon_backall" //your drawable which you want to use
android:ems="10"
android:hint="#string/str_md_email"
android:padding="10dp" >
</EditText>
You have to manage like below image :
For above UI design code is below :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="#dimen/_10sdp"
android:background="#drawable/stockbg"
android:orientation="horizontal">
<EditText
android:id="#+id/edt_sendMeassage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_marginRight="#dimen/_10sdp"
android:layout_weight="1"
android:maxLines="4"
android:backgroundTint="#android:color/transparent"
android:paddingLeft="#dimen/_10sdp"
android:paddingRight="#dimen/_10sdp"
android:textSize="#dimen/normal_input_text_size" />
<LinearLayout
android:id="#+id/ll_send"
android:layout_weight="6"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="#dimen/_40sdp"
android:layout_height="#dimen/_20sdp"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:src="#drawable/ic_next_arrow"
android:tint="#color/color_gray" />
</LinearLayout>
</LinearLayout>
I'd like to put attach file icon into EditText for example how it was made into WhatsApp.
if you want to add icon in EditText you can use
android:drawableStart=""
android:drawableEnd=""
android:drawableTop=""
android:drawableLeft=""
android:drawableRight=""
how it was made into WhatsApp. How can I do it?
That is not Custom Edittext
You need to wrap your ImageView and EditText in side a ViewGroup like LinearLayout or RelativeLayout
SAMPLE CODE
<LinearLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:padding="10dp"
android:background="#drawable/test"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_camera" />
<EditText
android:layout_width="0dp"
android:background="#android:color/transparent"
android:layout_weight="1"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:src="#drawable/ic_menu_camera" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:src="#drawable/ic_menu_camera" />
</LinearLayout>
android:background="#drawable/test"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/colorPrimary" />
<corners android:radius="25dp" />
</shape>
OUTPUT
You need to put edittext and attach icon in layout (according to your need) and set rounded background to parent layout
like this
<RelativeLayout
android:id="#+id/sendLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/roundedbg"
android:orientation="horizontal">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/attachFile"
android:background="#null"
android:padding="#dimen/five_dp" />
<ImageView
android:id="#+id/attachFile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
/>
</RelativeLayout>
roundedbg.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<stroke android:width="3dp" android:color="#B1BCBE" />
<corners android:radius="10dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
better you use wrap edittext and imageview in relative layout like below
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/custom_edittext"
android:hint="Password"
android:minLines="10"
app:passwordToggleEnabled="true"
android:singleLine="true"
android:inputType="textPassword"
android:textSize="14sp"
android:paddingLeft="20dp"
android:layout_weight="1"
android:paddingRight="20dp"
tools:ignore="MissingPrefix" />
<ImageView
android:id="#+id/ivPasswordToggle"
android:layout_width="24dp"
android:elevation="10dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:layout_height="24dp"
android:background="#drawable/ic_remove_red_eye_black_24dp"/>
</RelativeLayout>
output :
in java code use click on imageview
I have a listview with custom adaptor.
<?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:gravity="center_vertical"
android:layout_margin="10dp"
android:background="#drawable/product_list_item_bg" >
<ImageView
android:id="#+id/iv_thumb"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginRight="10dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/iv_thumb"
android:layout_marginLeft="5sp"
android:layout_marginTop="15dp"
android:layout_toRightOf="#+id/iv_thumb"
android:textColor="#color/text_color"
android:ellipsize="marquee"
android:singleLine="true"
android:textSize="24sp"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:textStyle="bold"></TextView>
<TextView
android:id="#+id/tv_dealer_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:ellipsize="end"
android:textColor="#color/text_color"
android:layout_alignLeft="#+id/tv_title"
android:layout_below="#+id/tv_title"
android:textSize="18sp"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
product_list_item_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="5dp">
<solid android:color="#c6e2b2"/>
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
When i use the dummy placeholder the row correctly wraps around the image but when a custom image is loaded using picaso in the adaptor there is gap left on the top and bottom.
Picasso.with(context)
.load(img_url)
.placeholder(R.drawable.dummy_placeholder)
.error(R.drawable.dummy_placeholder)
.into(holder.iv_ThumbImage);
I tried using wrap_content in relative layout it does not work.
If you mean your RelativeLayout and ImageView are not resizing while you set a new Bitmap to your ImageView, I think setting the attribute android:adjustViewBounds of ImageView to true will do your work. Of course the height and width of your ImageView and RelativeLayout need to be wrap_content
In My android I want :--
here "Or" is a text view..this textview is surrounded by circle view and a vertical line is passing by the circle..
Here is my code:--
This code is for textview with rounded circle
round.xml in drawable folder:--
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:color="#22ff55" android:width="3dip"/>
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<size
android:height="60dp"
android:width="60dp" />
</shape>
and in my layout
I have textviews as:
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_tv"
android:gravity="center_vertical|center_horizontal"
android:text="or"
android:textColor="#000"
android:textSize="20sp" />
and this code for vertical line:--
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#FF0000FF" />
So I have textview with rounded Circle and a verticle line..
But my problem is how can I join this two codes???
or If my concept is wrong..How can I achieve that thing??????suggest me..
Easiest way is to make the circle and line a .png image, and make it the background for a TextView with the text.
Also, you should avoid using views for dividers (like that line) if at all possible. Views are fairly heavyweight to create and layout all the time. If you have a complex app they'll come back to bite you in performance issues.
As you have done this you can take the Textview and view inside the FrameLayout. FrameLayout will help you show one control over the other
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
//Put here
</FrameLayout>
You can use a RelativeLayout as the container for all the above views and use it to properly position all the views.
Here's an example to get you started:
<RelativeLayout
android:layout_width="..."
android:layout_height="...">
<Button
android:id="#+id/btnRegister"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#FF0000FF" />
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_tv"
android:layout_centerInParent="true"
android:text="or"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
I've got layout like this
<ListView>
andorid:layout_width="math_parent"
android:layout_height="math_parent"
android:orientation="vertical" >
<ListView>
andorid:layout_width="math_parent"
android:layout_height="wrap_content"
android:orientation="horisontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:textColor="#android:color/black"
android:layout_gravity="center_vertical"
android:text="bla bla"
android:textSize="13sp" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#drawable/round_button"
android:layout_weight="1" />
</ListView>
.........
</ListView>
So my round button is not rounded cause the number of pixels in child layout on height less than in parent main layout. How could i get the round button?
Thanks
If you want the round button then create an XML file named round.xml inside drawable folder.
Then add the following to xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#e5e4e2" />
<corners android:radius="3dp" />
</shape>
Then make this as background of Button
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/myButton"
android:background="#drawable/round" />
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!