search

gazlaws-dev / codeboard

Codeboard App
Other
566 stars 116 forks source link

Change icon for backspace button #13

Closed fireclouu closed 4 years ago

theintel commented 7 years ago

Why? Although its identical with the "left key", I think its cool how it is.

igrad commented 7 years ago

I think it really just doesn't fit the theme of the rest of the keyboard. Especially on Dark material theme, it just doesn't fit the color scheme.

gazlaws-dev commented 6 years ago

Assigning this issue to @shruti-b150034cs This is a good reference about custom android keyboards: http://www.fampennings.nl/maarten/android/09keyboard/index.htm

Under section 3.4.3, you'll find what you need for this bug (android:keyIcon)

  1. Add a back icon in the app/src/main/res/drawable folder.
  2. Update the key to show the icon instead of '◀'

There are too many templates in app/src/main/res/xml/for each size/layout/qwert/azerty/portrait/landscape for the keyboard, so changing the icon in each file is time-consuming.

I have a script in testxml/makeQ1 that helps to generate all of these.

The back button should be in testxml/qwertyrows (row4 or row 5 depending on when I've changed the layout) and testxml/azertyrows

<Key android:codes="-5" android:keyEdgeFlags="right" android:isRepeatable="true" android:keyLabel="◀" />

You'll have to remove android:keyLabel="◀" and add this instead android:keyIcon="@drawable/back_icon_file_name

Or if the icon looks weird (see step 6), try something like android:keyLabel="Back" or a unicode character from here (I used this, but try this)

The problem with unicode characters is that it looks different on different devices, system fonts, etc.

  1. Now you've updated testxml/qwertyrows/row4. The script makeQ1 has the project directory hardcoded as ~/AndroidStudioProjects/CodeBoard, so if you cloned this repo in another folder you'll have to replace all those lines with your path.

eg sed -f qwerty0Edit.sed KeyboardTemplate7.xml > YOUR_PATH/CodeBoard/app/src/main/res/xml/qwerty2r.xml

To run the script: bash makeQ1

  1. Check an xml file to see if the script actually saved the files, eg app/src/main/res/xml/qwerty2r.xml
  2. If you don't see the changes, check your makeQ1 file to see if the directory is right.
  3. Run the project in your phone and test a few layouts, how the icon looks in landscape, etc. Your icon file may be too big or small, so the real work is repeating steps 1-5 and seeing which icon looks best.
gazlaws-dev commented 5 years ago

Assigning this to @UltimateGamer07

Hari-07 commented 5 years ago

I made a new icon using XML , tested it out and pushed it to my repo. Im not sure how to push it to this main repo.

Its much better than the previous design but needs to be refined a little bit more

Hari-07 commented 5 years ago
  1. Run the project in your phone and test a few layouts, how the icon looks in landscape, etc. Your icon file may be too big or small, so the real work is repeating steps 1-5 and seeing which icon looks best.

I did that and everything seems fine. However when i tried the light theme, since the button is white colored , it doesnt show up. I saw that the other keys turn black when using the light theme, Is this color change part of the maincode? Or must i create a seperate XML file with dark and use it somewhere?

danielo515 commented 4 years ago

I also find the icon a bit annoying, so thumbs up for this