what should be the size of Drawer Header Image? - android

public DrawerProfile(Context context) {
super(context);
HeaderImageView = new ImageView(context);
HeaderImageView.setVisibility(VISIBLE);
HeaderImageView.setScaleType(ImageView.ScaleType.CENTER);
HeaderImageView.setImageResource(R.mipmap.drawer_background_image);
addView(HeaderImageView);
}
I want to add an image in Drawer and it should cover the entire area of drawer header. I want to know what should the size of the Image (resolution) be; which will be suitable for every phone with variety of screen resolution. How can I minimize the size of the photo?
Here in this screenshot, The header image is not covering the entire area of Drawer

i recently made an app and did thorough research on almost every Material Design aspect, so i would like to share my experience here, it might help you.
1st go through this wonderful article, it will guide you set up Nav Drawer with every property and views used with it.
Drawer Image should be or usually 16/9 of your Nav Drawer's width.
( HeaderHeight = NavDrawerWidth * 9/16 )
I used an image of 576x324 pixels (pretty clean and nice pic, nearly 27KB) and put it inside drawable-nodpi to avoid auto scaling and memory issues.
I use nav Drawer of width 304dp (mostly you will find it, on google apps, but they have also used 320dp on some apps as well, like Play Music, Hangouts etc).
Height of HeaderImage probably stay the same for almost all Devices except tablets.
For devices till sw-480dp-xxxhdpi use Drawer width 304dp and Header Height of 170dp.
From devices sw-600dp above, use Drawer width 400dp and Header Image height 225dp at least.
This is my drawer_header.xml
<?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="#dimen/navDrawer_header_height"
android:background="#drawable/img_navdrawer_header"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark" >
</LinearLayout>
And this is how i have used it inside NavigationView
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer" />
Now time to set their boundaries, /res/values/dimens/
<dimen name="nav_drawer_width">304dp</dimen>
<dimen name="navDrawer_header_height">170dp</dimen>
For tablets: /res/values-sw600dp/, /res/values/sw-720dp
<dimen name="nav_drawer_width">400dp</dimen>
<dimen name="navDrawer_header_height">225dp</dimen>
Hope this helps someone.

I use this library for dimension
https://github.com/intuit/sdp
And put header highlight as #dimen/_180sdp.
So 180 dp is the size of header
Looks perfect !

Given HeaderImageView is set to match the width and height of the Drawer, just set the ScaleType to FIT_CENTER then your image will scale to fill the entire Drawer.

Use the code Below to load an image into a Relative or Linear Layout in Navigation Drawer Header
RelativeLayout imgNavHeaderBg = navHeader.findViewById(R.id.headerRelativelayout);
imgNavHeaderBg.post(new Runnable(){
public void run(){
Glide.with("Your Class".this).load("URL").asBitmap().into(new SimpleTarget<Bitmap>(imgNavHeaderBg.getMeasuredWidth(), imgNavHeaderBg.getMeasuredHeight()) {
#Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
Drawable drawable = new BitmapDrawable(getResources(), resource);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
imgNavHeaderBg.setBackground(drawable);
}
}
});
}
});

Rule of thumb for header view height is
HeaderHeight = NavDrawerWidth * 9/16.
So basically it's between 140 to 169dp.
use different dimen file for best result in different screen
hdpi - height = 170dp
xhdpi - height = 180dp

Related

Material Design: Nav Drawer Width

According to the Material Design specs the Nav Drawer's width on mobile devices must be
side nav width = screen width - app bar height
How do we implement this on android?
I have two partial solutions. First is the hacky way: in the containing activity I put this code:
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB_MR1) {
final Display display = getWindowManager().getDefaultDisplay();
final Point size = new Point();
display.getSize(size);
final ViewGroup.LayoutParams params = mDrawerFragment.getView().getLayoutParams();
params.width = size.x - getResources().getDimensionPixelSize(
R.dimen.abc_action_bar_default_height_material
);
mFragmentUserList.getView().setLayoutParams(params);
}
This, however, causes a second layout cycle and doesn't work in gingerbread: it is not optimal.
The second solution involves adding a Space between the fragment and the drawerLayout. It however, displaces the shadow and the spot where the user can press to return to the main app. It also crashes when the "hamburguer" icon is pressed. Not optimal either.
Is there a better solution, preferably one that involves styles and xml?
I managed to make a solution using XML style declarations but it is a bit hacky as well. My approach was to use margins instead of applying a set width to avoid writing any code to calculate the layout manually. I've created a basic style rule to highlight how to get this working.
Unfortunately, DrawerLayout currently applies a minimum margin of 64dp. For this approach to work, we need to offset that value with negative margins so we can get the desired width for the navigation drawer. Hopefully this can be resolved in the future (Someone has filed an issue regarding it) so we can just reference the abc_action_bar_default_height_material dimension reference for the margin.
Follow these steps:
Add the following dimension and style definitions:
values/dimens.xml
<!-- Match 56dp default ActionBar height on portrait orientation -->
<dimen name="nav_drawer_margin_offset">-8dp</dimen>
values-land/dimens.xml
<!-- Match 48dp default ActionBar height on landscape orientation -->
<dimen name="nav_drawer_margin_offset">-16dp</dimen>
values/styles.xml
<!-- Nav drawer style to set width specified by Material Design specification -->
<style name="NavDrawer">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_marginRight">#dimen/nav_drawer_margin_offset</item>
</style>
values-sw600dp/styles.xml
<!-- Margin already matches ActionBar height on tablets, just modify width -->
<style name="NavDrawer">
<item name="android:layout_width">320dp</item>
<item name="android:layout_marginRight">0dp</item>
</style>
Once you have added the rules above in your project, you can reference the NavDrawer style in your navigation drawer view:
layout/navigation_drawer.xml (or other appropriate view being used for your navigation drawer)
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/navigation_drawer"
style="#style/NavDrawer"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#FFF"
/>
With the Android Design Support Library it is now really simple to implement navigation drawer including correct sizing. Use the NavigationView and either use its ability to make drawer out of menu resource (example here) or you can just wrap it around the view which you currenty use for showing your drawer list (e.g. ListView, RecyclerView). NavigationView will then take care of the drawer sizing for you.
Here's an example how I use the NavigationView wrapped around ListView:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navdrawer_layout"
android:fitsSystemWindows="true">
<!-- Layout where content is shown -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include android:id="#+id/toolbar"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar" />
<!-- Toolbar shadow for pre-lollipop -->
<View style="#style/ToolbarDropshadow"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_below="#id/toolbar" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:id="#+id/navdrawer_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:dividerHeight="0dp"
android:divider="#null"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
This way you can use NavigationViews sizing and still use your own drawer list. Though it is much easier to make the drawer list out of menu resource (example here) you can't use custom views for the list items.
After looking for a simpler solution, I found a very clarifying article: Material Navigation Drawer sizing.
Here:
The Nexus 5 screen is a nice 640 x 360 dp (xxhdpi), and an app bar on
it is 56 dp tall. So the nav drawer should be:
[width in dp] = 360dp — 56dp = 304dp
A Nexus 4 sports a 640 x 384 dp (xhdpi) screen
instead. Same 56dp app bar height. Its nav drawer?
[width in dp] = 384dp — 56dp = 328dp
So, how did the Google designers come up with
288dp and 304dp widths, respectively? I have no idea.
Google apps, on
the other hand, seem to agree with my maths. Oh, and you know what the
funniest thing is in all this? The iPhone (which has different screen
heights, but a constant 320 dp width) is marked correctly as having a
264dp nav drawer.
Basically, it shows that some guidelines about the navigation drawer contradict themselves and that you can use the following rule to avoid calculations:
You can basically always use 304dp on -sw360dp
and 320dp on -sw384dp for your navigation drawer, and you'll get it right.
They already updated specs, now navigation drawer width is:
Math.min(screenWidth — actionBarSize, 6 * actionBarSize);
Well I found this very difficult to understand and implement. Unfortunately, Matthew's solution made my nav drawer too wide for landscape, and it seemed contrary to Google's practices, i.e. the nav width is determined by the device's smallest width. In any event it wouldn't work in my case as I disabled the configuration in my manifest. So I decided to changed the nav width dynamically with the following code.
It should be noted my app is just for phones and I settled on 320dp being the maximum width. This is also why I've settled on 56dp toolbar height for both orientations.
Hope it helps someone, and that they can avoid the unnecessary stress it caused me.
navDrawLayout.post(new Runnable()
{
#Override
public void run() {
Resources r = getResources();
DisplayMetrics metrics = new DisplayMetrics();
if(r.getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int height = metrics.heightPixels;
float screenWidth = height / r.getDisplayMetrics().density;
float navWidth = (screenWidth - 56);
navWidth = Math.min(navWidth, 320);
int newWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, navWidth, r.getDisplayMetrics());
DrawerLayout.LayoutParams params = (DrawerLayout.LayoutParams) navDrawLayout.getLayoutParams();
params.width = newWidth;
navDrawLayout.setLayoutParams(params);
}
if(r.getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int width = metrics.widthPixels;
float screenWidth = width / r.getDisplayMetrics().density;
float navWidth = screenWidth - 56;
navWidth = Math.min(navWidth, 320);
int newWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, navWidth, r.getDisplayMetrics());
DrawerLayout.LayoutParams params = (DrawerLayout.LayoutParams) navDrawLayout.getLayoutParams();
params.width = newWidth;
navDrawLayout.setLayoutParams(params);
}
}
}
);
The Navigation Drawer width depends on the device smallest width, orientation and Android version.
Check out this article about sizing Navigation Drawer.

Dynamic positioning of a Button [Android]

I have a RelativeLayout which holds an ImageView and an ImageButton. The ImageView serves as an container for a background image. Now I'm trying to set the button at a fixed position so that it always appears on the same position on the background image.
Here is the layout file I'm using:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1" android:layout_height="match_parent"
android:layout_width="match_parent" android:gravity="center_horizontal">
<ImageView android:src="#drawable/bg_1" android:id="#+id/imgView"
android:adjustViewBounds="true" android:layout_height="match_parent"
android:layout_width="match_parent" />
<ImageButton android:layout_width="120dp"
android:background="#drawable/button_1" android:layout_height="30dp"
android:id="#+id/imgButton" android:layout_marginLeft="100dp"
android:layout_marginTop="170dp" />
</RelativeLayout>
As you can see I've tried positioning the button with it's left-/top-margin using dp as unit, but this doesn't work. Since the background image is beeing scaled down/up, the position would have to be dynamic in some kind of way.
I understand that absolute positioning, with pixel-values for x-/y-position, is something that won't work on Android, like it is explained here. I still need to solve this and am not sure how.
Would I have to calculate the values for left-/top-margin (not sure how that would be) and then set them with something like this?
final float density = getResources().getDisplayMetrics().density;
int width = (int)((float)120 * density);
int height = (int)((float)120 * density);
RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(width, height);
rlp.leftMargin = newMargin;
rlp.topMargin = newTopMargin;
ImageButton imgButton = (ImageButton) findViewById(R.id.imgButton);
imgButton.setLayoutParams(rlp);
Hope I didn't forget something ...
//EDIT:
I was thinking, the reason for the issue might be, that the scaled image has different "borders", depending on the screen size.
With an image at a 1:1.6 ratio on a HVGA screen I have black bars on the left and right, whereas on a WVGA screen the bars are on the left. Considering I'm using the default scaling. I will look into it and post again, if necessaray...
Why scaling happens? Because of different dpi on different devices? Do you have different drawabled for different dpi settings? If it isn't just dpi issue and you want to scale that background image freely then you can't do the job using standard layouts. You should implement a custom one.

How to implement an android:background that doesn't stretch?

I found this great thread describing how to "eat the cake and have it too", i.e. use image for a Button instead of ImageButton (which doesn't allow SetText(), resizing, etc.).
This is achieved by using the View attribute:
android:background="#drawable/bgimage"
The only problem with this is that it stretches the image to fit the button size.
Short of hard-coding a fixed button size (in pixels!), is there a way to tell Android not to stretch the background image at all and either crop or pad it?
You can create an xml bitmap and use it as background for the view. To prevent stretching you can specify android:gravity attribute.
for example:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/dvdr"
android:tileMode="disabled" android:gravity="top" >
</bitmap>
There are a lot of options you can use to customize the rendering of the image
http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap
You should use ImageView if you don't want it to stretch.
Background images will always stretch to fit the view.
You need to set it as a Drawable to force the image aspect to the object.
Otherwise, if you are sticking with the Button idea, then you will need to force the scaling in the button to prevent the image from stretching.
Code:
onCreate(Bundle bundle) {
// Set content layout, etc up here
// Now adjust button sizes
Button b = (Button) findViewById(R.id.somebutton);
int someDimension = 50; //50pixels
b.setWidth(someDimension);
b.setHeight(someDimension);
}
Simply using ImageButton instead of Button fixes the problem.
<ImageButton android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/bgimage" />
and you can set
android:background="#null"
to remove button background if you want.
Quick Fix !! :-)
I am using an ImageView in an RelativeLayout that overlays with my normal layout. No code required.
It sizes the image to the full height of the screen (or any other layout you use) and then crops the picture left and right to fit the width. In my case, if the user turns the screen, the picture may be a tiny bit too small. Therefore I use match_parent, which will make the image stretch in width if too small.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/main_backgroundImage"
android:layout_width="match_parent"
//comment: Stretches picture in the width if too small. Use "wrap_content" does not stretch, but leaves space
android:layout_height="match_parent"
//in my case I always want the height filled
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
//will crop picture left and right, so it fits in height and keeps aspect ratio
android:contentDescription="#string/image"
android:src="#drawable/your_image" />
<LinearLayout
android:id="#+id/main_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I had the same problem: you should only use a 9-patch image (.9.png) instead of your original picture.
Serge
Use draw9patch... included within Android Studio's SDK tools. You can define the stretchable areas of your image. Important parts are constrained and the image doesn't look all warped. A good demo on dra9patch is HERE
Use draw9patch to change your existing splash.png into new_splash.9.png,
drag new_splash.9.png into the drawable-hdpi project folder
ensure the AndroidManifest and styles.xml are proper as below:
AndroidManifest.xml:
<application
...
android:theme="#style/splashScreenStyle"
>
styles.xml:
<style name="splashScreenStyle" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowBackground">#drawable/new_splash</item>
</style>
I had a background image, not big in size, but with weird dimensions - therefore the stretching and bad performance. I made a method with parameters Context, a View and a drawable ID(int) that will match the device screen size. Use this in e.g a Fragments onCreateView to set the background.
public void setBackground(Context context, View view, int drawableId){
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(),drawableId);
bitmap = Bitmap.createScaledBitmap(bitmap, Resources.getSystem().
getDisplayMetrics().widthPixels,
Resources.getSystem().getDisplayMetrics().heightPixels,
true);
BitmapDrawable bitmapDrawable = new BitmapDrawable(context.getResources(),
bitmap);
view.setBackground(bitmapDrawable);
}
Here's a version of Santosh's answer for programmatically-created buttons, without the need for a separate XML configuration:
Button button = new Button(getContext());
Bitmap backgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_button);
BitmapDrawable backgroundDrawable = new BitmapDrawable(getResources(), backgroundBitmap);
backgroundDrawable.setGravity(Gravity.CENTER); // also LEFT, CENTER_VERTICAL, etc.
backgroundDrawable.setColorFilter(new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP));
button.setBackground(backgroundDrawable);
I included the ColorFilter line since that works a little differently from buttons with a normal background image.
You can use a FrameLayout with an ImageView as the first child, then your normal layout as the second child:
<?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="match_parent">
<ImageView
android:id="#+id/background_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/your_drawable"/>
<LinearLayout
android:id="#+id/your_actual_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</FrameLayout>
The key is to set the drawable as the image of the button, not as a background. Like this:
rb.setButtonDrawable(R.drawable.whatever_drawable);
One can use a plain ImageView in his xml and make it clickable
(android:clickable="true")?
You only have to use as src an image that has been shaped like a button i.e round corners.

TabHost / TabWidget - Scale Background Image?

I need to scale my TabWidget background images so they maintain aspect ratio.
I am using a TabHost with a TabWidget. I am then using setBackgroundDrawable to set the images.
I found a close answer here - Background in tab widget ignore scaling. However, I'm not sure just where to add the new Drawable code. (Working with the HelloTabWidget example, none of my modules use RelativeLayout, and I don't see any layout for "tabcontent".)
I also found this thread - Android: Scale a Drawable or background image?. According to it, it sounds like I would have to pre-scale my images, which defeats the whole purpose of making them scaleable.
I also found another thread where someone subclassed the Drawable class so it would either not scale, or it would scale properly. I can't find it now, but that seems like a LOT to go through when you should just be able to do something simple like mTab.setScaleType(centerInside).
Here's my code:
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/main_background">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>
main activity:
tabHost.setOnTabChangedListener(new OnTabChangeListener() {
TabHost changedTabHost = getTabHost();
TabWidget changedTabWidget = getTabWidget();
View changedView = changedTabHost.getTabWidget().getChildAt(0);
public void onTabChanged(String tabId) {
int selectedTab = changedTabHost.getCurrentTab();
TabWidget tw = getTabWidget();
if(selectedTab == 0) {
//setTitle("Missions Timeline");
View tempView = tabHost.getTabWidget().getChildAt(0);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_timeline_on));
tempView = tabHost.getTabWidget().getChildAt(1);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_map_off));
tempView = tabHost.getTabWidget().getChildAt(2);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_search_off));
tempView = tabHost.getTabWidget().getChildAt(3);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_news_off));
tempView = tabHost.getTabWidget().getChildAt(4);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_license_off));
//ImageView iv = (ImageView)tabHost.getTabWidget().getChildAt(0).findViewById(android.R.id.icon);
//iv.setImageDrawable(getResources().getDrawable(R.drawable.tab_timeline_on));
//iv = (ImageView)tabHost.getTabWidget().getChildAt(1).findViewById(android.R.id.icon);
//iv.setImageDrawable(getResources().getDrawable(R.drawable.tab_map_off));
} else if (selectedTab == 1) {
//setTitle("Spinoffs Around You");
View tempView = tabHost.getTabWidget().getChildAt(0);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_timeline_off));
tempView = tabHost.getTabWidget().getChildAt(1);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_map_on));
tempView = tabHost.getTabWidget().getChildAt(2);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_search_off));
tempView = tabHost.getTabWidget().getChildAt(3);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_news_off));
tempView = tabHost.getTabWidget().getChildAt(4);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_license_off));
}
I also tried 9patch images, but they wind up being too small.
So, what's the best way to go about this?
Check this out and let me know whether it worked for you.
Custom Android Tab
I suspect the reason you're struggling to find an out-of-the-box way to perform background image scaling is that it's not generally seen as good practice. Scaling of images tends to introduce artifacts and banding which can make your UI look nasty. The exception to this is within an Imageview, but I would argue the scaling support this class provides is more intended to support things like photos or web content (i.e. images you have not shipped with your app).
Your UI layout should be designed in such a way that any resource-based background images should be pre-scaled to the correct resolution for the density / screen size of the device. In other words you should be providing multiple versions of each drawable to cater for multiple screen densities and sizes using the resource folder naming convention outlined in the Supporting Multiple Screens dev guide.
The UI should then be laid out such that any slight differences of screen size between devices can be handled without needing to scale background images of its contained views. Obviously I don't know what your proposed UI looks like so it's difficult to make any concrete suggestions, but generally I use simple background block colors or ShapeDrawables to dynamically fill the space between views.
However, if you're really really sure you want to scale your background images despite the preaching above :-), why not try using a ScaleDrawable to wrap your existing drawable?
If you know the height and width of both your view and background image drawable, then you can do something like:
Drawable backgroundDrawable = getResources().getDrawable(R.drawable.tab_license_off);
tempView.setBackgroundDrawable(
new ScaleDrawable(
backgroundDrawable,
Gravity.CENTER,
tempView.getWidth() / backgroundDrawable.getIntrinsicWidth(),
tempView.getHeight() / backgroundDrawable.getIntrinsicHeight());

How to create a view that is bigger than the screen?

Is it possible to create a view that is bigger than the screen?
I need a view that has a bigger width then the screen of the device. I use this view in a rotation animation. During the rotation the parts that were not on the screen before animating the view will become visible.
Is there a way to achieve this effect with the android framework?
Update
I tried to set my parent layout much bigger then the screen and it is working. This will make somethings a little bit uncomfortable but it could work. The next problem now is that my layout still starts at the left side of the screen. I can't think of a method to make the layout to expand itself to the left and the right of the screen.
Ok I got an answer. It is not very nice because it uses a deprecated View class but it works at least on my current testing screen resolution other resolutions are tested tomorrow.
I wrapped the view that I wanted to expand beyond the screen in an absolute layout like this:
<AbsoluteLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/content"
android:layout_width="600dip"
android:layout_height="420dip"
android:scaleType="centerCrop"
android:layout_x="-200dip"
android:layout_y="60dip"
android:src="#color/testcolor" />
</AbsoluteLayout>
The -200 x coordinate makes the view stick 200dip out of the left side of the screen. If I'm animating the view those parts that are outside the screen will gradually become visible.
E.g. setting negative bottom margin together with setting extra large layout_height (large enough for you) solved the similar issue as for me.
Works fine at least using API 11+ animations/rotations.
Could look like:
android:layout_marginBottom="-1000dp"
android:layout_height="1000dp"
In case anyone still comes up on this page. The key is your root layout, it will only work with a FrameLayout (or the deprecated absolutelayout). Then you have two options to make your child view bigger.
through xml, this is quick and easy but you don't know the actual screen width & height in advance so your off with setting a ridiculously high value for layout_width & layout_height to cover all screens.
Calculate the screen size programatically and make the view's width/height proportional bigger to this..
Also be aware that your bigger view still starts in the top left corner of the screen so to account this you will have to give a negative top & left margin that's half of what you are adding to the view's width/height
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) viewToMakeBigger.getLayoutParams();
int marginLeft = (int) (viewToMakeBigger.getWidth()*0.1);
int marginTop = (int) (viewToMakeBigger.getHeight()*0.1);
params.width = (int) (viewToMakeBigger.getWidth()*1.2);
params.height = (int) (viewToMakeBigger.getHeight()*1.2);
params.leftMargin = -marginLeft;
params.topMargin = -marginTop;
viewToMakeBigger.setLayoutParams(params);
HorizontalScrollView:
http://developer.android.com/reference/android/widget/HorizontalScrollView.html
Layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display.
The simple axml below creates an ImageView that is 400dp wider than the screen (even though the layout_width is set to equal the parent's width) using a negative left and right margin of 200dp.
The ImageView is situated 250dp above the top of the screen using a negative top margin, with 450dp of 700dp vertical pixels visible on the screen.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:background="#FFFF0000"
android:layout_height="700dp"
android:layout_marginLeft="-200dp"
android:layout_marginRight="-200dp"
android:layout_marginTop="-250dp"
android:layout_width="match_parent" />
</RelativeLayout>
You can override the views in the onMeasure method. This will set your View dimensions to 1000x1000 px.
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(1000, 1000);
}
Is it possible to create a view that is bigger than the screen?
Why not, you can define the layout_width and layout_height in px(or dip) as you want:
android:layout_width="10000px"
android:layout_height="20000px"
You need to change the size of the window, by getWindow().setLayout. This will increase the size for your window. Since the root layout can be as big as its parent you can then increase the size of the view you want to be bigger than the screen size. It works for me let me know
You can use ViewSwitcher to handle that. Used with Animation and a OnGestureListener looks pretty good.
You can do it programmatically:
FrameLayout.LayoutParams rootViewParams = (FrameLayout.LayoutParams) rootView.getLayoutParams();
rootViewParams.height=displayMetrics.heightPixels+(int)dpToPixels(60);
rootViewParams.width=displayMetrics.widthPixels+(int)dpToPixels(60);
rootView.setLayoutParams(rootViewParams);
rootView.setX(rootView.getX() - dpToPixels(30));
rootView.setY(rootView.getY() - dpToPixels(30));
MUST BE ONLY IN
"public void onWindowFocusChanged(boolean hasFocus)" method.
and
rootView = (RelativeLayout) findViewById(R.id.rootLayout);
Inside "protected void onCreate(Bundle savedInstanceState)" method.
Where yout .xml file is like this:
<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/rootLayout"
tools:context="com.example.Activity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_centerHorizontal="true"
android:layout_margin="30dp"
android:layout_centerVertical="true"
android:layout_height="match_parent">
// Bla bla bla
</RelativeLayout>
and:
public float dpToPixels(float dp) {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
}

Categories

Resources