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.
Related
Well I know about the guidelines of android design but sometimes that wont help you in designing.
Specifically if your given design in no way near to android native design but it is more near to web design .
Well here is my picture which can give you the idea of my problem.
Now this is a layout of the Dialog , which looks good in the LandScape mode , but it screwd up in portrait mode some times some views gets chopped off or out of screen .
Question:?
How can this can be handle in best way my not manipulating the design guide lines?
How can it looks same for each mode?
what is best way of designing to look same on each mode and on all devices ? in sense that it gets wider in wider screen and come near in small screens?
Final Question ?
Isnt it good to not to use the TextView to show labes i.e in my case it is displaying please select amount and each radio button has text which shows amount , is there any way to show the text label on the block level ? just look in the picture below?
in this case you should use linear layout with weights. It automatically adjusts to available dimensions. Here is a sample
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"></RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"></RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"></RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"></RelativeLayout>
</LinearLayout>
You can see more details here
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..
So I am trying to import a custom image as the background of an android app however it does not fill in all of the edges. The option I have seen is to set a second layout to be a frame layout and then place an image view within it with additional coding along the lines of android:scaleType="centerCrop". This will not fill the entire screen up for me however, heres a screenshot of what ends up happening -
Heres the xml code being used:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/backgroundImage"
android:background="#drawable/backgroundImgr"
android:scaleType="centerCrop"
/>
</FrameLayout>
Another issue is that different users use different resolutions so the background image has to be able to accommodate them all without being cut off. I'm not sure how to do this.
Set ScaleType fitXY and add android:adjustViewBounds ="true"
Please use android:src="#drawable/ instead background .I hope it will helps you.
When building layouts for Glass using Activity and Fragment it seems that some additional layout margins on top, left, right and bottom are present. Is there any way to reset that?
Do you also see these margins if you do screencast to yout mobile phone? In my case if i don't set any margin to the main layout of my activity, i can see some margin like you say, but if i do screencast to my mobile (with MyGlass app) I check that there isn't margin.
By convention there is a 40px margin round everything on a screen for glass, see the design guidelines or the developers site with example code
However you don't have to use them, by default the margins should be 0, so if you have a layout like:
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:src="#drawable/bg"
/>
</AbsoluteLayout>
It will show the image 'edge-to-edge' (640x350).
Of course with the screen on Glass it's hard to see where the actual edge is, so you really need to check a screen cast to check it's performing as expected.
I want to create a layout containing only a button, i want the layout to be transparent more even more, i want it 'not to be there', in other words, i want my layout to be only a not full size 'window' but only the button size, so i will be able to continue using any app open behind my app.
i tried :
<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:windowBackground="#android:color/transparent"
android:windowIsTranslucent="true" >
<ToggleButton android:id="#+id/lockButton"
style="#style/lockToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
</ToggleButton>
The background is really transparent but still a layer and the app in the back is not usable.
As u need to operate other apps , surely u need a service
Try to check about
Creating a system overlay window (always on top)