I have a custom toolbar with icons, etc that is modeled after the Android 3.x ActionBar.
One thing I'd like to add are dividers modeled after the ActionBar dividers.
I grabbed the 9-patch divider image from the SDK, and then tried incorporating that in a drawable that I set as the image for a 1dp wide ImageView, but no luck. Here is the Drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/divider_vertical_holo_dark"
android:dither="true" />
Here is the 'divider' ImageView:
<ImageView
android:id="#+id/toolbar_notification_div"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_toRightOf="#id/toolbar_notification_txt_accel"
android:visibility="gone"
android:gravity="center_vertical"
android:src="#drawable/bg_actionbar_div"
android:contentDescription="#string/content_desc_div" />
Te end result is that nothing shows up for the divider. Any pointers?
EDIT:
Note that I am turning the various Image and TextViews to View.VISIBLE in the application itself depending on state. Assume they are all visible.
Found the problem, I was using android:src, when I should have been using android:background:
<ImageView
android:id="#+id/toolbar_notification_div"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_toRightOf="#id/toolbar_notification_txt_accel"
android:visibility="gone"
android:gravity="center_vertical"
android:background="#drawable/bg_actionbar_div"
android:contentDescription="#string/content_desc_div" />
Your ImageView has android:visibility="gone", so it won't be shown.
Related
I'm trying to put an image header at the top of the constraintlayout but when i run the app in a real device it is wrong and the header is not in the top:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="207dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_header" />
</androidx.constraintlayout.widget.ConstraintLayout>
below we can see how looks it in a real device:
There is a space between the action bar and the header.
I tried to remove the action bar but also does not work.
Thanks in advance.
This is my content of ic_header:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="360dp"
android:height="180dp"
android:viewportWidth="360"
android:viewportHeight="180">
<path
android:pathData="M0,0h360v180h-360z"
android:fillColor="#fbc711"/>
</vector>
I think the issue is with the src drawable and the ImageView both having a fixed height.
Try using android:scaleType="centerCrop" in your ImageView xml, so that the source image expands to cover the empty area.
I tried running your code and found out that given constraints are right but your SVG isn't scaling to the total length for your ImageView. You can see the view bounds below
Solution:
You can consider adding this line.
android:scaleType="fitXY"
The result will be like the following image.
and the alternate solution is you can also use shape drawable if all you need is a solid layout.
And if you drawable isn't a solid color and some complex vector image. try not to resize your image view.
keep
android:layout_height="wrap_content"
In Android UI design using XML, how is it possible to put an ImageButton to align exactly with the background of the activity xml file.
Suppose, I have two images, one acts as the background image for the activity, and the second one acts as the image button source.
This is the background image.
http://i.stack.imgur.com/e1Ow5.png
This is the button image. http://i.stack.imgur.com/m0tUU.png
I will set the first image as background to the activity. My question is how will I properly place and align the second image,that is the button to be exactly inside the "central rectangle" of the background. The "central rectangle" is the place holder, and it can be anywhere in the screen.
Not: I tried using relative layout, but, couldn't really place the button depending on the background.
Edit:-
Actually the rectangle and the rounded-rectangle at the center of the background is just a place-holder. It can be anything, even nothing. Or it can be anywhere. It might not be at the center. Consider the whole image, I need to put the button image where the place-holder is. That is my intention. Say for example , consider a radio application, where there is a turning button acting as volume rocker. Everything else in the image is the background, and the volume rocker might be a different image.
The answer is its impossible the way your are trying to do it.
What you want to do is cut the background up further so the button is centered.
So using your images as an example, here is how the view hierarchy would look
->FrameLayout1
---->Framelayout2
-------->Button
FrameLayout1 would be the background without the inner square
FrameLayout2 would be the inner square
Button would the button asset and placed centered in FrameLayout 2.
There are other techniques on top of this you will need to make it look pixel perfect, like using 9 patch drawables.
Considering you are trying out in landscape mode( your images seems so)
You can try the following code.
bg : your background
img: your center image
<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="#drawable/bg" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/img" />
</RelativeLayout>
<?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/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_bg" />
</RelativeLayout>
drawable/img_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg">
</item>
<item android:drawable="#drawable/fr">
</item>
</layer-list>
or
<?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/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/bg" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/fr" />
</RelativeLayout>
bg.png and fr.png are transparent image with same height and width.
So I have a list of images that come from the web, I don't know which color are they and I want to place a text over the ImageView.
My idea is to place the ImageView, an image overlay with transparency gradient over that ImageView and the text above it. I want to mimic this behaviour:
Is there anyway to do this via XML?
When you write the XML for your list items which get inflated in the getView(...) of whatever ListAdapter you've written you can surely do this.
Something like this for the list item:
<?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:layout_width="320dp"
android:layout_height="240dp"
android:background="#ACACAC"/>
<RelativeLayout
android:layout_width="320dp"
android:layout_height="240dp"
android:background="#drawable/gradient">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Here is your text"
android:textColor="#000000"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</RelativeLayout>
Then you create that drawable/gradient. For that you can recycle the answer from here.
Thanks to adityajones I managed to get there :)
So although this is my right answer, I'll mark his as the correct one!
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="fill_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/image" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="200dp"
android:background="#drawable/gradient_image" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_margin="6dp"
android:layout_marginBottom="18dp"
android:shadowColor="#000"
android:shadowRadius="7.0"
android:text="This is some random text"
android:textColor="#color/white"
android:textSize="22sp" />
</RelativeLayout>
I'd use a FrameLayout or RelativeLayout. The first View you add to either should be the background ImageView, then obviously you'll need some TextViews and Other ImageViews [or Buttons, or ImageButtons, etc]
Seems like a reasonable layout: a background image, and then one additional view in each corner.
For the gradient, you'll probably want a separate Layout/View at the bottom with a gradient drawable as the background, although I can imagine you might be able to get away with setting the background of one of your TextViews as the gradient.
You do not have to use a gradient drawable file or set it in your xml..
you can do this pragmatically using GradientDrawable Class as explained in this related Question (Create a radial gradient programmatically) then set it as a background for a layout that covers your ImageView, this gives you ability to use different colors and orientations
In my Android project, I am not quite sure how to make my background image fill the entirety of the RelativeLayout root element in XML, which is the size of the screen. I want to be sure that this works for all aspect ratios, so the image will clip vertically or horizontally as necessary. Does someone know how to do this easily? I've only seen questions regarding ImageViews and Buttons, but not really generic Views.
My XML file currently:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/enclosing_rl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:fitsSystemWindows="false">
<!-- Other elements -->
</RelativeLayout>
Other than turning your image into a nine patch I don't think this is possible. What you could do instead is-
Add an ImageView as the first view in your RelativeLayout.
Set layout_centerInParent to true.
Have the layout_width and layout_height set to match_parent.
Then set scaleType to centerCrop.
That will make sure the image fills the screen without any distortion, but depending on screen size/orientation either some of the top/bottom or left/right of the image may be cut off.
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/background" />
Any other views in the RelativeLayout will appear on top of the ImageView, as long as it is the first view in the RelativeLayout (when you are in the xml).
Create a bitmap drawable XML resource in your res/drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat" />
Use that drawable as background instead of #drawable/background
according to this answer If you want your ImageView fill your RelativeLayout,use align parameters for ImageView.
you can put all of your views to a LinearLayout and set align parameter to your background ImageView:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/my_background"
android:scaleType="centerCrop"
android:layout_alignTop="#+id/my_views"
android:layout_alignBottom="#+id/my_views"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/my_views"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
</RelativeLayout>
Its smart and 100% working answer is to set the property scaleType of image view !
android:scaleType="fitCenter"
In my Android application I've hidden the default title bar, introduced a TabView and added my own titlebar under that TabView's tabs. At the moment, I'm using the ?android:attr/windowTitleStyle style which makes my new titlebar look gray and gradient. It looks pretty good, but my screens are looking pretty grayscale. I'd like to spice things up a bit by making this titlebar a different color gradient.
What am I looking at here? Creating my own image and using it? The ?android:attr/windowTitleStyle style seems to expand depending on the height of your custom titlebar; so I'm not sure it's actually a single image.
I've attempted to throw a LinearLayout over it with a bit of translucency (ex: making the color #800000FF), but the gradient style I have behind this LinearLayout disappears.
Thanks for your help
Update:
Per my answer down below, I've figured out that I can create an XML file that defines a gradient and use that. It works fine inside a LinearLayout (titlebar_gradient) I have on my layout. However, it is not working on the outer-most LinearLayout (background_gradient). Could someone tell me why? As I understand it, the ListView should be transparent...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_gradient"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="47dip"
android:background="#drawable/titlebar_gradient"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Item"
style="?android:attr/windowTitleStyle"
android:paddingLeft="5dip"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="10dip"
android:clickable="false"
/>
<TextView
android:id="#+id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
I understand my problem now.
I've created an XML file in my drawables folder that looks like this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#00CC66"
android:endColor="#009966"
android:angle="270"/>
/shape>
In my toolbar, I set the background to this drawable.