Develop Reference

Android - How to make a real fake lock screen

I develop an Android application and I need to create a "fake lockscreen". I explain me.
The application should display a black screen like if the screen was locked (easy), then I want to display a fake lockscreen when the user tap on the lock/unlock phone button.
My problem is, when I set the application background with the current wallpaper (get with wallpaper manager) the background is not "cropped". The background image fit on the screen instead of, like in the "home screen" of the phone, fit on the number of desktop.
I try to use getBuiltInDrawable(FLAG_LOCK) but it's available only from API 24 and, when I try, the result is not what I'm expecting =/
Is there someone that have an idea on the question here ?
Thank you in advance.
Baptiste.

Ok, so you need to
1) Create your activity using a FullScreen Theme with no action bar, so it doesn't look like an app. To do that, you'll create a style in styles.xml and apply it in your manifest.xml
Full Screen Theme for AppCompat
2) For the background image, use an ImageView. ImageViews have a scaleType property out of the box that allows you to select different modes: FIT, Center Crop, etc ...
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
3) Create the rest of the logic to enter the Pin. and show your different mock images. There's a nice component that really fits your "project", its called ViewFlipper, and basically lets you to put all images inside and select which one to show. Your root layout will look more or less like this:
<ViewFlipper
android:id="#+id/flipper"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- page 0: the lock screen mock -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:src="#drawable/mock_lock_screen"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<EditText
android:id="#+id/pinCode"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="PIN CODE" />
</FrameLayout>
<!-- page 1: chrome screen mock-->
<ImageView
android:src="#drawable/mock_chrome"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- page 2: wikipedia screen mock-->
<ImageView
android:src="#drawable/mock_wiki"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
.
.
</ViewFlipper>
Then in the activity, you can show the lock screen and any mock page:
ViewFlipper mFlipper;
#Override
public void onCreate(Bundle savedInstanceState) {
.
.
mFlipper = (ViewFlipper)findViewById(R.id.flipper);
.
.
.
}
and to change the displayed screen
mFlipper.setDisplayedChild(0); // will show lock screen
mFlipper.setDisplayedChild(1); // will show chrome mock
mFlipper.setDisplayedChild(2); // will show wikipedia mock
hope you get the idea! happy coding.

How to align a button corresponding to the background image for multiple screens?

I am very new to this forum and really need help in something I got stuck in during developing the app.
This is the image I am using as my background (I named it SampleBG in xml):
https://i.gyazo.com/946507c2690c8170b54a1ace752906bd.png
Basically, this is what I want my design to look like:
https://i.gyazo.com/896e29846dfd9e4bc9ab15ca39f9a796.png
And for smaller devices, it automatically resizes and looks like this:
[i.gyazo.com/f4278339cc8f246187c011474796a12c.png]
And when I switch to a tablet device, it automatically looks like this:
[i.gyazo.com/1b0e233a0b1731148664e0ac78a05f08.png]
And the above is exactly what I want it to look like. The wooden signs are in the same position for all sizes...
But the problem is:
I want the wooden signs to be clickable, because they are meant to be buttons.
So, I tried to use a button widget and made it transparent and placed it over the wooden signs... it worked but it only worked for that particular size I designed it for (designed it for Nexus 5 to be specific).... However, when I switched to the Nexus One layout, or Nexus 9 layout, etc, the buttons weren't placed correctly over the wooden signs and thus didn't work.
I want a way to make the wooden signs clickable and and the buttons to be fixed with the signs for all device sizes/etc, and at the same time.
I would prefer an xml solution but a programmatic solution is nice too.
Here's the layout code right now, it just using the background image right now....
`<?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"
android:background="#drawable/sampleBG">
</RelativeLayout>`
NOTE:
I have tried using the door image as the background only and then adding the wooden signs manually by using the ImageButton widgets, but the wooden signs were being placed differently for different screens and it looked odd, so therefore I fixed the wooden signs with the background (in Photoshop).. now I just want the signs to be clickable.

This is a sample code that you can use, in order to achieve this:
<?xml version="1.0" encoding="utf-8"?>
<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="#mipmap/ic_launcher"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.test.androidtestapp.MainActivity">
<ImageButton
android:id="#+id/equationsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/equationsOfTheWeekButton"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Equations Button"
android:onClick="equationsButtonClick" />
<ImageButton
android:id="#+id/equationsOfTheWeekButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Equations Of The Week Button"
android:onClick="equationsOfTheWeekButtonClick" />
<ImageButton
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/equationsOfTheWeekButton"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Settings Button"
android:onClick="SettingsButtonClick" />
</RelativeLayout>
You need to slice your image and then just change the background attributes in the code above. When you achieve that, you can change the background to a selector where you can change the image depending on the different states -> when it's clicked, focused, normal; that would make it more user friendly.

The wooden signs should NOT be on the background image.
Instead, make a real background image (ie. with only the "door" background) and make separate images with the signs.
Then use these images to build your buttons.
Edit: I did read your note about the fact that you tried that, but you should definitively go this way. Another advantage is that you'll be able to easily make the buttons reacting to the user click, with "onPress" states, which would be impossible (or at least difficult and ugly) with a single background image.

You can separate wood pics that you want to be button and give them as a background for buttons. For example, you named the wooden pics as 'wood1.png' , 'wood2.png' and 'wood3.png' and by this sample code you can set them for background image for buttons :
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/wood1"
/>
Or you can design your app by your own solution that described but you should create your app design by different layout for different size device :
layout-large
layout-small
layout-normal
layout-xlarge
layout-xxlarge
you can search about autoLayout design in android app and find your solution better..

android layout with fixed top and bottombar

I'm trying to build an application with a fixed top and bottombar (bars should host other controls like buttons, progressbar,...).
The content (space between top/bottombar) should be able to host activities and navigates to other activies, which also could be resulting in also changing the content of both bars (also load other activities for bars).
I've started a sample with actionBar, had this issue with fullscreen mode (Is there a theme for Holo, full screen but with Action Bar?). Resolves my problem but setting it in code behind isn't a recommended way.
What do you think? Is there a better way to reach this kind of layout, maybe is it better to use a more simple control then actionbar?
If yes, it would be great if someone knows a starting point for layouting this (example, tut) and how to realize the navigation for the content.
I'm coming from wpf with regions, I also read posts about similar functionality on stackoverflow, but I only found examples where I missed the functionality of a dynamic content (for the bars and the content between the bars).
Tons of thanks for replies

This should work (Replace middle button with say a scrollview) :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/topbutton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true" >
</Button>
<Button
android:id="#+id/bottombutton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true" >
</Button>
<Button
android:id="#+id/middlebutton"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_above="#id/bottombutton"
android:layout_below="#id/topbutton" >
</Button>
</RelativeLayout>
Reason why the bottom button has to be above the middle button in XML's order is that a view can only refer(e.g. android:layout_above) to views above itself.

how to make a View tranparent to see background statusbar in Android

i have created an app which has a TextView which contain some text.
i made it transparent by this code
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Credit Balance 52$"
android:background = "#00000000"
/>
i want my application to be full screen but at the same time user will be able to see device statusbar behind TextView at top.
Please suggest me some solution of this problem.
Thanks

try using android.R.style.Theme_Translucent theme for your activity

Is there a view for a button bar? (Image link describing the view)

I am looking for a view or some sort of information regarding the bottom bar in default applications of Android such as Email, or Unlock pattern as shown in the picture below. I have not been able find anything about this on Androids site nor from Google searches.
Image: http://img11.imageshack.us/i/viewdn.jpg/

I believe that Christopher is correct; there is no special widget to create the bar in your image. However, if you want to emulate it, you can create a layout and use the style style="#android:style/ButtonBar". That will give you the light gray background and the correct margins.

I don't believe there's any standard view for the button bar used at the bottom of these apps; it's generally just two Button items placed together in a LinearLayout or RelativeLayout.
For example, looking at the Android Open Source Project, you can see the button bar for one of the email app setup screens is defined as two plain old Button objects.
However, it is surprising that Google didn't abstract more of the common stuff into an Android theme or sublayout, rather than having the same views and attributes in each layout XML.

From: http://code.google.com/p/k9mail/source/browse/k9mail/trunk/res/layout/account_setup_basics.xml?r=1314
<RelativeLayout
android:layout_marginTop="-45dip"
android:padding="0dip"
android:layout_alignParentBottom="true"
android:gravity="bottom|right"
android:background="#android:drawable/bottom_bar"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<Button
android:id="#+id/manual_setup"
android:text="#string/account_setup_basics_manual_setup_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginBottom="-4dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="false"
/>
<Button
android:id="#+id/next"
android:text="#string/next_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawableRight="#drawable/button_indicator_next"
android:layout_marginBottom="-4dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="false"
/>
</RelativeLayout>