Photoshop Question posted in
The official user guide can be found here.

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

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.

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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..

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search