I'm working an a layout which I will have a bitmap centered, and I'd like the left & right margin bitmaps to scale (horizontally) to fill the screen, such that my center item can be a decorated titlebar, and the left & right are filler bitmaps that match the center bitmaps background, and thus stretching horizontally.
But what I'm seeing is there is a space between the bitmaps. The left & right scale, but there is a space between them.
Eg what I'm getting is:
http://www.58seconds.com/getting.png
What I want is:
http://www.58seconds.com/want.png
Any ideas?
Here is a snippet of the Layout code I use:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:layout_width="1dp"
android:layout_weight="1"
android:layout_height="45sp"
android:src="#drawable/mdjleftfiller"
android:layout_gravity="top"
android:gravity="top"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/command_selection_topImage"
android:layout_width="wrap_content"
android:layout_height="45sp"
android:src="#drawable/top_image"
android:layout_gravity="top"
android:gravity="top"
android:layout_weight="0"
/>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="45sp"
android:src="#drawable/mdjrightfiller"
android:layout_gravity="top"
android:gravity="top"
android:scaleType="fitXY"
/>
</LinearLayout>
Have you thought about creating a 9-patch with your single title bar image? If you have your "stretched" parts on either side of the actual title it will stretch to fit whatever you want without resorting to layout trickery.
Try creating two images, one as a background and scaleType to FIT_CENTER, then set the other one to lay on top and just move to the center.
Here's a nice clean way of doing this, that is pretty much exactly what Lucas was talking about, but in xml:
<FrameLayout android:id="#+id/navbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#drawable/titlebar_repeat">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/titlebar_logo" android:layout_gravity="center" />
</FrameLayout>
In this case titlebar_repeat is just a single pixel wide, and titlebar_logo is just the text with a transparent background. In your case, since you don't seem to want highly stylized text, you could probably just make the ImageView a TextView instead if you like.
Related
I'm fairly new to Android Studios so sorry if this may come of as a stupid question.
I'm trying to put two buttons on the top of my screen. I want them to be in the top left and right corner like in this image.
However this is what they look like.
I don't want any space between the top of the screen and the two buttons. This is my code..
LinearLayout
<LinearLayout
android:layout_marginTop="0dp"
android:id="#+id/LinearLayout02"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="50dp"
android:id="#+id/settingsBTN"
android:layout_weight="1"
android:src="#drawable/HomeBTNunpressed"/>
<View android:layout_width="3dp"
android:layout_height="50dp"
android:background="#android:color/black"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="50dp"
android:id="#+id/homeBTN"
android:layout_weight="1"
android:src="#drawable/settingsBTNunpressed"/>
</LinearLayout>
First of all in parent don't use fillParent(Deprecated) rather use MatchParent.
Second if using linear layout and specifying weight for view and in your case you want to devide space equally then specify width 0dp and weight 1 to both and weightsum 2.
Third use any layout containing ImageView at center and specify background color to whatever you want
You are using Image Button, and image gets resized in aspect ratio so don't fit accordingly.
Actually you are using Image Button so that border is actually of button.Instead of using image button you can use Image View and make it clickable in your code.I have used my own Image here but you can use your own Image in your xml.
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/settingsBTN"
android:layout_weight=".5"
android:layout_marginTop="0dp"
android:background="#B6B6B6"
android:src="#drawable/username_icon"/>
<View android:layout_width="3dp"
android:layout_height="50dp"
android:background="#android:color/black"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight=".5"
android:layout_marginTop="0dp"
android:background="#B6B6B6"
android:src="#drawable/username_icon"/>
</LinearLayout>
I want to have two buttons at the top of my program taking users to different activities. I'm having a lot of trouble with the formatting.
How can I make it so that the buttons will stretch proportionally based on the screen size? Right now, they will look OK for one screen size, then I will switch to a different one and it will appear all smushed or stretched. I've tried all of the different ScaleTypes and none seem to make a difference. I also went though and proportionally saved all of the images to the correct sizes regardimg xhdpi, hdpi, etc using Shubhayu's answer.
Here's my code so far:
<LinearLayout 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/brushed_metal_background_dark"
tools:context=".HomeActivity" >
<ImageButton
android:id="#+id/incidentsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/incident_bar2"
android:contentDescription="Incidents"
android:onClick="chooseIncident"
android:scaleType="center" />
<ImageButton
android:id="#+id/operationalPeriodsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/operationalperiod_bar2"
android:contentDescription="Operational Periods"
android:onClick="chooseOperationalPeriod"
android:scaleType="fitCenter" />
Change android:background to android:src that will keep the aspect ratio. Use android:scaleType="centerInside" to fit whole image inside button area and optionally use android:adjustViewBounds=true to remove empty spaces. Example:
<ImageButton
android:id="#+id/incidentsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="Incidents"
android:onClick="chooseIncident"
android:src="#drawable/incident_bar2"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
<ImageButton
android:id="#+id/operationalPeriodsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="Operational Periods"
android:onClick="chooseOperationalPeriod"
android:src="#drawable/operationalperiod_bar2"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
I am guessing that you are trying to size the buttons evenly on the top of the screen. If that's the case then you should set android:layout_width="0dp".
Just use android:layout_width = "wrap_content"
Below is how I have designed my xml. Now what I am trying to fit a textview inside the white box shown below. But am being restricted by FrameLayout (at least I think so) that I need to hard code values to make the text view fit in the middle or some where inside the white box. I cannot use Relative or other layouts for this purpose as I have understood by my trials as this whole is a single image.
Here is my layout,
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:visibility="visible" android:layout_marginTop="60dip"
android:layout_gravity="center" android:id="#+id/xxx">
<ImageView android:id="#+id/calloutquizImage"
android:background="#drawable/callout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="fitCenter" />
<ImageView android:id="#+id/triviaImage"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/calloutquizImage" android:layout_gravity="left"
android:src="#drawable/trivia" android:background="#drawable/trivia"
android:layout_marginTop="50dip" android:layout_marginLeft="85dip"></ImageView>
<TextView android:text="TextView" android:id="#+id/triviAnswerText"
android:layout_marginTop="125dip" android:layout_marginLeft="85dip"
android:layout_gravity="left" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#000000"
android:typeface="sans"></TextView>
<ImageButton android:id="#+id/triviaanswercloseButton"
android:src="#drawable/closebtn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="#drawable/closebtn"
android:layout_marginRight="8dip" android:layout_marginTop="43dip"
android:layout_gravity="right" android:onClick="triviaanswerClose"></ImageButton>
<ImageView android:id="#+id/buttontoclose"
android:layout_gravity="left"
android:visibility="visible" android:onClick="triviaanswerClose"
android:layout_marginTop="50dip" android:layout_marginLeft="75dip"
android:layout_width="230dip" android:layout_height="170dip"></ImageView>
</FrameLayout>
Because of this the text view looks in different positions in various handsets.
Any guesses what can be done for this instead?
Below is my image :
I think you are not doing the right thing. If you want a text to appear inside a white box (or even resize it, if there is to many text to fit to it) - you can still avoid any layouts ad do it with only one TextView.
Please have a look what is NinePatch image in Android:
http://developer.android.com/reference/android/graphics/NinePatch.html
http://developer.android.com/tools/help/draw9patch.html - drawing tools
So basically you will need only 1 textView and your image, properly converted to 9-patch with 2nd link. (Basically - just add a few black pixels on image border).
No just set this 9-patch as a background of textView. It will place text right where you need, and will shrink white box if you'll define so in 9-patch.
UPD:
Please find the resulting screenshot:
As you can see, textView not handles
WhiteBox" itself, filling it with text and resizing the box if necessary.
Here is how to make it work:
<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">
<TextView
android:id="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text" />
<TextView
android:layout_below="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Not so many text" />
</RelativeLayout>
And here is your image, converted to 9patch. Just place it to "drawable/" folder. Note: it MUST have "back.9.png" name.
For details of how 9patch works you can check links above. The main idea: by making black dots on left and top border - you specify which part of the image will be stretched when image must be upscaled. By making dots on right/bottom side you tell the View where to place the content. In our case content is a text of the TextView.
Hope it helps, good luck
I think you can use a RelativeLayout within the FrameLayout for the ImageView and the TextView, and by using the parameters, you can navigate the TextView to the white box. Refer to the LayoutParams documentation for details.
for eg. you can add the ImageView block first and then the TextView, so that the TextView will lay over the ImageView, and by using align bottom, and specifying top margin with a negative value, you can make the TextView go over the image. Or rather, if you are using eclipse, you can directly move the text view in the graphic layout.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/xxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="0dp"
android:visibility="visible" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margintop="0dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/user2" />
<TextView
android:id="#+id/Textviewtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:layout_below="#+id/imageView1"
android:layout_marginTop="-10dp"
app:context=".TestActivity" />
</RelativeLayout>
</FrameLayout>
Similar to above, you can specify margin left and right to properly position your TextView as you want. Check with graphic layout for feedback to know the correct position.
Please reply if this helped.
Use your images and values for the height and width. I just tried for testing.
I'm using LinearLayout to place two ImageView horizontally. I have image placed on ImageView. Now I need to add an small image over the image on ImageView. I have seen a lot of post but all of them deals with Relativelayout or Framelayout. Here is the XML code segment that I have used.
<LinearLayout
android:id="#+id/relativeLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgmode31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:maxHeight="180dp"
android:maxWidth="140dp"
android:scaleType="fitXY"
android:src="#drawable/i5" >
</ImageView>
<ImageView
android:id="#+id/imgmode32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:longClickable="false"
android:maxHeight="180dp"
android:maxWidth="280dp"
android:scaleType="fitXY"
android:src="#drawable/i1" >
</ImageView>
</LinearLayout>
Any help will be highly appreciated.
This is exactly what a linear layout is supposed to prevent. You may however be able to override the positioning of the next element using negative padding. The problem with that is what happens on different screen densities.
I think this is what a surface view is meant for. It provides a transparent drawing surface over the entire screen allowing you to draw in top of other views.
One last idea would be to place your first image in a frame layout inside your linear layout. Then you could add your superimposed image to the frame layout using padding to position it.
you can do it easily with relative layout
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/i5"
android:id="#+id/imgmode31"
android:maxHeight="180dp"
android:maxWidth="140dp">
</ImageView>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitXY"
android:longClickable="false"
android:adjustViewBounds="true"
android:src="#drawable/i1"
android:id="#+id/imgmode32"
android:maxHeight="180dp"
android:maxWidth="280dp">
</ImageView>
</RelativeLayout>
if you want ImagView to overlap each other then make their Height and Width same and you can also bring any of the ImageView at front in runtime
A LinearLayout places elements linearly, one next to the other. If you want to place an element on top of another, then you need to resort to a FrameLayout or RelativeLayout.
If you change your LinearLayout to a FrameLayout you should see the two ImageViews overlapping.
Hey, I'm having some trouble with ImageView in my XML file.
My layout is as follows:
<LinearLayout android:id="#+id/row"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView android:id="#+id/image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<TextView android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"
android:layout_weight="4"/>
</LinearLayout>
Basically, what I am trying to achieve in something similar to the android contact list, where there is a picture (taking up about 1/5 width of the screen), followed by a text box with information in the other part of the screen. I tried to use weight to make the TextView more important, and thus receive more space, but that doesn't seem to what.
What's even stranger is that the scale seems to be working in reverse. If I set the weight of the ImageView to something high, like 10, it scales the image down.