Style of application changed after upgrading to supportlib:v7 - android

After i upgraded support library from v4 to v7 the syle of Buttons changed.
Even when use an ImageButton and set View.setVisibility(View.Gone) it stills shows the location of it by highlighting like picture below.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#F44336" >
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="2"
android:background="#E53935"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<ImageButton
android:id="#+id/btnSearch"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/find" />
</LinearLayout>

You are seeing "location highlight" because colors of background and textview are different. Background is in this color:
android:background="#F44336"
and linear layout is:
android:background="#E53935"
Those colors are both red and very similar but yet different. Remove background from TextView and "location highlight" will be removed because only layout background color will stay.

Related

Align layout item to the right and RTL on Android

I'm trying to put three items in horizontal align using this code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_gravity="right"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="10dp"
android:src="#drawable/address"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="#string/lbl_address"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/txtAddress" />
</LinearLayout>
The problem is gravity never worked, the ImageView always starts from the left and other items follows in the same order.
I have tried to reverse item orders in the code which will work on none RTL languages, but my application targets both, so it shows wrong on RTL supported devices.
Also I have tried RelativeLayout but items come over each other.
Note: All languages should start from right to left, this is my desired behavior
Add this attribute to your root LinearLayout tag:
android:layoutDirection="rtl"
This will make your view lay out as though the user had chosen a right-to-left language, regardless of what language they've actually chosen.
Try to use this code in AndroidManifest.xml
android:supportsRtl="true"
For support languages that start from right in app.
Because you use android:layout_width="0dp" android:layout_weight="1" in your code .The TextView will use the rest of space .So the left image will on the left .So you can remove android:layout_weight="1" and change the width of TextView .
You can change
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/txtAddress" />
to
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/txtAddress" />
Note
If you want to change the location of the LinearLayout's item .You can use android:gravity="right" .
If you want to change the location of the LinearLayout ,you can use android:layout_gravity="right" .
And you code is android:layout_width="match_parent" , so the android:layout_gravity="right" has no effect .
And you can use android:layoutDirection="rtl" in your LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_gravity="right"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:layoutDirection="rtl"
xmlns:android="http://schemas.android.com/apk/res/android">

Android ImageButton with gradient AND transparent image background[Image included]

Id like to achieve the effect seen in the image ive provided below.....possible?
I know how to do a gradient and I know how to set a imagebuttons src/bg to a drawable but i have nooooooo idea where to even start with pulling off both at the same time.
It's actually incredibly simple. To avoid overdraw by layering a bunch of views, just add a ColorFilter to your ImageView:
imageView.setColorFilter(Color.parseColor("#994dace3"), PorterDuff.Mode.SRC_OVER);
No added overdraw, and you can set whatever color you want, and experiment with different PorterDuff blending modes.
Example:
I know how to do a gradient and I know how to set a imagebuttons
src/bg to a drawable but i have nooooooo idea where to even start with
pulling off both at the same time
I think what you are referring to as being a gradient is actually a color with transparency value set. From what I can tell, you are looking for something like this:
You can achieve this using the following layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/the_picture"
android:src="#color/transparent_color" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Message!" />
</RelativeLayout>
The RelativeLayout is used to position the TextView over the ImageButton. The Picture is set as the background. The src is set to a color(any color) with a transparency value between 00(completely transparent) and ff (completely opaque). In the image above, I have used a transparency of 70. So, say you pick Green(#00ff00), add transparent value to it: #7000ff00 and add it to res/values/colors.xml. You can also use it directly as I have done below.
Here's the complete xml code for the activity in the pic above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/original" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/original"
android:src="#7000ff00" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Optional Message!"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
You can set a custom font to the TextView(as in the picture you've provided) in code.

Cannot set Font size as TextView's height

In my app I set one TextView and I noticed that there were some spaces above and below the text, as in the image below.
But my expected result is this :-
I Googled lots and found this answer link, but nothing happens.
Updated :
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50dp"
android:background="#484848"
android:textColor="#fff"
android:text="A"
android:layout_centerInParent="true"/>
This is the tag I used for displaying text.
Updated :
<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:id="#+id/rl"
tools:context=".MainActivity" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50dp"
android:background="#484848"
android:textColor="#fff"
android:text="A"
android:paddingTop="0dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
Updated Image :
Actually, its a padding of 9-patch backgrounds drawable which is by default for Android TextView background. And you are just set color to it #484848. So you don't have any solution for it.
As per my concern use the same size of height (android:layout_height) for your TextView as same as your TextSize (android:textSize="50dip") of your TextView. (instead of android:layout_height="wrap_content")
Try with below code:
<TextView android:layout_width="wrap_content"
android:layout_height="50dip"
android:layout_marginTop="-5dip"
android:textSize="50dip"
android:background="#484848"
android:textColor="#fff"
android:text="A"
android:includeFontPadding="false"
android:layout_centerInParent="true"/>
I also added some margin in negative. android:layout_marginTop="-5dip"
Hope this will help you a little bit.
android:layout_height="wrap_content" only works at certain times, for example, when you setHeight(), setWidth(), setText(), setMinHeight(), .... These methods will request the layout to wrap the content again.
But setTextSize() doesn't request the layout.
To trigger wrap_content to work again, you can call setMinHeight(0).

Android - Button disappear from the layout when it has transparent background

I have following Table in my Android app. Everything works, except the last button - about me. When I set background to transparent color - it is not beign display on my device (however, it is visible on the graphical view of the layout in the eclipse. By "not display" I mean, that it is not on the screen - on its place its "next". If I remove android:background from the last button - it comes back to device. Whats wrong?
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/buttonShare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:onClick="shareIt"
android:src="#drawable/social_share" />
<ImageButton
android:id="#+id/buttonBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:onClick="prevImage"
android:src="#drawable/navigation_previous_item" />
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:src="#drawable/navigation_accept" />
<ImageButton
android:id="#+id/buttonAbout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:onClick="showAbout"
android:src="#drawable/action_about" />
<ImageButton
android:id="#+id/buttonForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:onClick="nextImage"
android:src="#drawable/navigation_next_item" />
<ImageButton
android:id="#+id/buttonAbout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:onClick="showAbout"
android:src="#drawable/action_about" />
</TableRow>
</TableLayout>
Part of my color resource is like below:
<color name="transparent">#00000000</color>
I just loaded overwrited action_about.png picture with new one. Now, the button appears - but it shows old png, about, not the new one. What is going on?
Why are you trying to set the background to transparent? Do you just want a button that does not have the device default button "frame" and instead has only your action_about drawable? If so you can do that with a normal Button instead of ImageButton like so:
<Button
android:id="#+id/buttonAbout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/action_about"
android:onClick="showAbout"/>
EDIT: Also note that you have the buttonAbout element twice in your layout, it is at the bottom, and 3 from the bottom.
EDIT 2: Do you not have a clean... option at all under the Project menu at the top? or is it just grayed out?
I downloaded Eclipse Indigo sr2 (I can't find link on the site for sr1) and It is there for me.

android layout: This tag and its children can be replaced by one <TextView/> and a compound drawable

When I run layout on a specific XML file, I get this:
This tag and its children can be replaced by one <TextView/>
and a compound drawable
What change should be done for the following xml code:
<LinearLayout android:id="#+id/name_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:background="#drawable/grouplist_single_left_grey_area" >
<ImageView android:id="#+id/photo_image"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:paddingBottom="5dip"
android:paddingTop="5dip"
android:paddingRight="5dip"
android:paddingLeft="5dip"
android:layout_marginRight="5dip"
android:clickable="true"
android:focusable="true"
android:scaleType="fitCenter"
android:src="#*android:drawable/nopicture_thumbnail"
android:background="#drawable/photo_highlight" />
<TextView android:id="#+id/name"
android:paddingLeft="5dip"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
This is how it looks like on the screen:
The camera icon is the default. Clicking on that will give the user an option to choose another image.
To expand on Romain Guy's answer, here is an example.
Before:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="5dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My Compound Button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_drawable" />
</LinearLayout>
After:
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawableRight="#drawable/my_drawable" android:padding="5dp" />
Merge the TextView and the ImageView into one, by using TextView's setCompoundDrawable*() methods, or using android:drawableLeft.
Thought I would try to get some extra puntos for this as well: you can add padding between the image and the text using android:drawablePadding. https://stackoverflow.com/a/6671544/1224741
Add tools:ignore="UseCompoundDrawables" to <LinearLayout>.
Sometimes it is possible to replace ImageView (or multiple) and TextView with one TextView with compound drawable(s). There are NOT many parameters which can be applied to compound drawable using native API and this TextViewRichDrawable library, but if you can manage one TextView instead of using LinearLayout you should definitely use it.
The list of attributes and parameters which can be applied to compound drawables:
Size: (YES, really):
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:compoundDrawableHeight="24dp"
app:compoundDrawableWidth="24dp"/>
Even set vector resource as drawable:
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:drawableTopVector="#drawable/some_vector_drawble"
app:drawableEndVector="#drawable/another_vector_drawable" />
Drawable's Padding using native API android:drawablePadding -> link
Here is an example:
A LinearLayout which contains an ImageView and a TextView can
be more efficiently handled as a compound drawable (a single
TextView, using the drawableTop, drawableLeft, drawableRight
and/or drawableBottom attributes to draw one or more images
adjacent to the text).
If the two widgets are offset from each other with margins, this
can be replaced with a drawablePadding attribute.
There's a lint quickfix to perform this conversion in the Eclipse
plugin.
From: Android Official API docs!
When I followed the code above, text inside the TextView doesn't set properly.
You need to set its gravity to center|start to achieve what shown in the asked question.
The textview looks like this:
<TextView
android:id="#+id/export_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableLeft="#drawable/up_arrow"
android:drawableStart="#drawable/up_arrow"
android:gravity="center|start"
android:text="....."
android:textSize="#dimen/font_size15" >
</TextView>
the latest correct way at time of writing to add a compound drawable is using app:drawableStartCompat rather than android:drawableLeft.
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawablePadding="5dp"
app:drawableStartCompat="#drawable/my_drawable" />
You can refer this code for example
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/myName"
android:textAlignment="center"
android:textColor="#color/myColor"
app:drawableTopCompat="#drawable/image_name" />
If you don't want to change the ImageView and TextView, you can change the version in the AndroidManifest.xml as:
<uses-sdk`
android:minSdkVersion="8"
android:targetSdkVersion="18"
/>
If your version is android:targetSdkVersion="17" change it s "18".
Hope this will rectify. I did it and got it right
I don't know if this is an efficient solution. But using <androidx.appcompat.widget.LinearLayoutCompat> to wrap the imageView and TextView instead of <LinearLayout> will fix this error. Also by using LinearLayoutCompat, you will be able to adjust the image's width and height which you can't when using a drawableRight, drawableLeft, drawableTop or drawableBottom inside a TextView.
This warning is rather misleading. You can use a compound drawable using a TextView as others have suggested but it doesn't necessarily give you the desired result. You have very littler control over how you want your button to look like using a compound drawable, so it is better to just add tools:ignore="UseCompoundDrawables" and ignore this warning.
Another approach is embed the ViewImage into another LinearLayout (allow handle it with alone id):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/blue_3"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp" />
</LinearLayout>
<TextView
android:id="#+id/tvPrompt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp"
android:text="#string/xy" />
This tag and its children can be replaced by one <TextView/> and a compound drawable
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:contentDescription="."
android:padding="3dp"
android:src="#drawable/tab_home_btn">
</ImageView>
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="10sp"
android:textColor="#ffffff">
</TextView>
</LinearLayout>

Categories

Resources