I know that in Android we can use function setCompoundDrawables(..) to add drawable.
My problem is that my EditText is multy-lines and i want to put drawable in EditText's top|left corner. But using at setCompoundDrawables() function, only give choice to put drawable in specific side.
Is it possibility at Android API to Do it?
Seems it's impossible to do it with only EditText / TextView without anyside effect and additional views (I've provided the way at the end, but it needs more work with image and can be not applicable for every phone, because of different edit text backgorunds depending of manufature). The same question have been asked already many times: here and here for example.
Per my understanding the easiest and fastests way might be not as suggested in above questions (by usage of RelativeLayout), but just using FrameLayout the following way (You'll have 2 views vs 3 view using RelativeLayout+ImageView):
Make your icon 9patch (using 9patch tool). E.g. you have the following icon initially:
Then You can convert it to the following one:
(You can see black pixels which shows area to be stretched with view and areas for content)
Using the following xml:
<!-- Main activity layout -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Edit text with drawable at top left -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/icon_9patch">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit"
android:hint="Enter text"
android:maxLines="10"
android:inputType="textMultiLine" />
</FrameLayout>
</RelativeLayout>
Gives the following result (I've added multiple lines of text):
Moreover, it's even possible to comply the task with only EditText (but You might loose default EditText background which might not be good, however You can include it into your ning-patch image; but it will still be the same on all phones instead of native one).
The following xml also works fine:
<!-- Main activity layout -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Edit text with drawable at top left -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit"
android:hint="Enter text"
android:maxLines="10"
android:inputType="textMultiLine"
android:layout_alignParentBottom="true"
android:background="#drawable/icon_9patch" />
</RelativeLayout>
Give the following result (note that default frame for edit has disappeared):
Try this one :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/scale_10"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/map_mark"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/scale_10"
android:gravity="top"
android:text="TEXT HERE"/>
</LinearLayout>
Related
This layout:
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="90sp"
android:text="5000"
android:id="#+id/textView"
android:layout_gravity="center"
/>
</LinearLayout>
produces the following:
I want to get rid of the top and bottom margin. Where are they coming from in the first place? Maybe for certain letters in certain fonts/languages.
There is already a thread for this question, but none of the answers really work in all situations or the solutions are hacks. There has to be a simple way.
First idea from the thread: android:includeFontPadding="true" (does not change anyting)
Second idea from the thread: android:height="90sp" (removes at least bottom margin)
So, I changed my layout regarding the ideas:
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="90sp"
android:text="5000"
android:id="#+id/textView"
android:layout_gravity="center"
android:includeFontPadding="true" <!-- idea 1 -->
android:height="90sp" <!-- idea 2 -->
/>
</LinearLayout>
Still it procudes a top margin:
Third idea from the thread: android:layout_marginTop="-12sp"
If add this property it looks at least as desired. But -12sp seems so arbitrary to me. I just adjusted this value via trial and error and I don't like that.
This does not seem like a clean solution to me. This is such a simple thing, I just cannot believe how Android can make it so hard, that you have to use hacks.
Is there a clean solution out there?
Use the below syntax to set text size programmatically and set the required size in dimes file.
textView.setTextSize(getResources().getDimension(R.dimen.textsize));
To set padding use below code based on your needs
yourTextView.setPadding(0, 10, 0, 0);
Set Linearlayout and TextView padding and margins to 0dp. Should work.
Add those to both views:
android:padding="0dp"
android:layout_margin="0dp"
My question is more informative. I just want to know how to make such design. I found android application called "weather timeline" and inside of that application between CardViews (as I understand) they used this element which I pointed out in picture below. I think its just ImageView but how to set it as here. It will be interesting to know any idea about that! Thanks for attection!
You could easily do it in the following way.
Let us assume that we are using a collection view where the card element is one type and the black gap with text in the middle is the other.
The cardView would look something like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="#dimen/circle_radius_half_size"
android:layout_marginBottom="#dimen/circle_radius_half_size">
</CardView>
<ImageView
android:layout_width="#dimen/circle_radius"
android:layout_height="#dimen/circle_radius"
android:layout_align_parentLeft="true"
android:layout_marginLeft="24dp"
android:src="#drawable/circle"
android:rotation="180"/>
<ImageView
android:layout_width="#dimen/circle_radius"
android:layout_height="#dimen/circle_radius"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="24dp"
android:src="#drawable/circle" />
</RelativeLayout>
Where drawable circle looks something like this
and the layout for black grape with text in the middle looks something like this
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp">
<View
android:layout_width="#dimen/width_of_line"
android:layout_height="match_parent"
android:layout_margin_left="#dimen/line_margin"
android:background="#color/white" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin_left="#dimen/line_margin" >
<!-- The Text View Layouts Here -->
</LinearLayout>
</LinearLayout>
Where line_margin is 24dp + CircleHalfSize - LineWidthHalfSize
Of course the CircleHalfSize and LineWidthHalfSize are in DP
Now it is just a question of arranging them properly via the adapter. Personally I would use the RecyclerView. Great Flexibility.
Also this way if you wanted the bubbles to be gone, all you have to do is set the bubble ImageView's visibility to GONE and that too you can do specifically either for the top or the bottom.
I'm pretty sure that this could be accomplished using 9-patched images.
By determining the way to draw your patches and how to set them as a background for your layouts you'll get the same result.
Quick illustrated demo
By adjusting the two backgrounds exactly one above the other you'll get the UI you posted.
Hope it helps.
Further reading
To see how to draw 9-patched images here is a documentation.
This can be accomplished by using a RelativeLayout. Then you can align all your views however you want inside your main view.
Thus, you would layout Card1 at the top, then layout the bubble connector with your marginTop attribute (remember this is from the top of the container, not from the bottom of the card) to layout that view wherever you want.
Basically, you would use a single RelativeLayout, then align the various views within that container wherever you want in relation to each other (or really in relation to the the top of your main view).
Checkout this Pseudo-code:
<RelativeLayout >
<CardView
layout_height = "8dp"
alignParentTop = "true"
/>
<!-- Connector Image -->
<ImageView
alignParentTop = "true"
layoutMarginTop = "10dp" <!-- or whatever it takes to align properly with CardView -->
/>
</RelativeLayout>
I have a edittext and a button in a relative layout. Here is the xml:
<?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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5sp" >
<Button
android:id="#+id/action_home_button"
android:layout_width="35sp"
android:layout_height="35sp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/home_button" />
<EditText
android:id="#+id/action_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/action_home_button"
android:focusable="true"
android:focusableInTouchMode="true"
android:hint="Some hint..."
android:textColor="#FFFFFF"
android:textColorHint="#DDDDDD" />
</RelativeLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="5sp"
android:layout_alignParentBottom="true"
android:background="#EC9D21" />
</RelativeLayout>
The problem is that the button is centered in the RelativeLayout just fine, but my EditText is aligned to the top of the layout. Is there anything that I'm missing? Thank you in advance.
Edit Above I updated my xml. I set this as a custom view of my action bar. But that should not make a difference, since the button has no problem aligning to center vertical. Thanx
Edit EditText should be aligned center vertical
The standard EditTexts in some themes seem to have some built in padding or margin around and/or under it. If you wish to eliminate this issue, then I would heavily suggest either using a nine patch, background color, or some other form of custom background.
Trying to set a negative bottom margin or something crazy might fix the issue for one standard EditText, but you have to be careful between Android versions as their EditTexts can have different themes and give rather unexpected behavior.
As for why the theme designers chose to have this gap underneath is beyond me. My best guess would be that is their way of "saving face" when the developer doesn't add a margin between vertically aligned EditTexts?
+1 for Uxonith. Changing the background seemed to do the trick eg. android:background="#000000". For me this works fine, because I had to change the background anyways, but if you need the standard edit text, this will not be a solution.
I have the following template
<?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:orientation="vertical"
android:background="#drawable/borders" >
<RelativeLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/category_starred_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rating_not_important"
android:contentDescription="#string/app_name" />
<TextView
android:id="#+id/category_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/category_starred_icon"
android:textIsSelectable="false"
android:textSize="18sp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:textColor="#android:color/white"
android:hint="#string/category" />
</RelativeLayout>
</LinearLayout>
i get a warning This RelativeLayout layout or its LinearLayout parent is possibly useless; transfer the background
attribute to the other view, i want solve it, but i have the follow problem i have a border in the LinearLayout is like a drop shadow but when i change the background color in my code
mLayout.setBackgroundColor(Color.paseColor(mColorString));
i lost the border, how i can solve the warning witout lose the border, the main problem is the background colors are dynamically
Have a look at this: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
This is an drawable that organizes other drawables in a layer list (one on top of the other). With it, you can use other drawables, like shape, to define the borders and the background the way you want.
I can't make a complete answer now, but if you search for this, I'm sure you can do it. When I have more time, I may come back to help you, if you haven't found out how to solve this yet.
I have some preoblems when it comes to designing a view, As you can see I have open my xml file with a view-tag, and it gives me error. why is that? if I change it to LinearLayout than it works.
<View xmlns:android="http://schemas.android.com/apk/res/android"
class="android.app.SearchDialog$SearchBar"
android:id="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:focusable="true"
android:descendantFocusability="afterDescendants">
<!-- Outer layout defines the entire search bar at the top of the screen -->
<TextView
android:id="#+id/search_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dip"
android:drawablePadding="0dip"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorPrimaryInverse" />
<!-- Inner layout contains the app icon, button(s) and EditText -->
<LinearLayout
I don't think you can create a view like that in xml. The purpose of the xml files is to create a layout, which will be shown in your activity. Thus, the top level element needs to be one of the layout elements. See declaring layouts.