Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ Build beautifully for Android Wearโ€™s Round Screen using API 23โ€™s -round identifier

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š Build beautifully for Android Wearโ€™s Round Screen using API 23โ€™s -round identifier


๐Ÿ’ก Newskategorie: Android Tipps
๐Ÿ”— Quelle: feedproxy.google.com

Posted by Hoi Lam, Android Wear Developer Advocate

Android Wear is about choice. From the beginning, users could choose the style they wanted, including watches with circular screens. With Android Wear API 23, we have enabled even better developer support so that you can code delightful experiences backed by beautiful code. The key component of this is the new round resource identifier which helps you separate resource files such as layouts, dimens between round and square devices. In this blog post, I will lay out the options that developers have and why you should consider dimens.xml! In addition, I will outline how best to deal with devices which have a chin.

Getting started? Consider BoxInsetLayout!

If all your content can fit into a single square screen, use the BoxInsetLayout. This class has been included in the Wearable Support Library from the start and helps you put all the content into the middle square area of the circular screen and is ignored by square screens. For details on how to use the BoxInsetLayout, refer to the Use a Shape-Aware Layout section in our developer guide.

Without BoxInsetLayout
With BoxInsetLayout

Goodbye WatchViewStub, Hello layout-round!

Developers have been able to specify different layouts for square and round watches using WatchViewStub from the beginning. With Android Wear API 23, this has become even easier. Developers can put different layouts into layout-round and layout folders. Previously with WatchViewStub, developers needed to wait until the layout was inflated before attaching view elements, this added significant complexity to the code. This is eliminated using the -round identifier:

 Pre Android Wear API 23 - WatchViewStub (4 files)

1. layout/activity_main.xml
 <?xml version="1.0" encoding="utf-8"?>  
 
<android.support.wearable.view.WatchViewStub    
     xmlns
:android="http://schemas.android.com/apk/res/android"  
     xmlns
:app="http://schemas.android.com/apk/res-auto"  
     xmlns
:tools="http://schemas.android.com/tools"  
     android
:id="@+id/watch_view_stub"  
     android
:layout_width="match_parent"  
     android
:layout_height="match_parent"  
     app
:rectLayout="@layout/rect_activity_main"  
     app
:roundLayout="@layout/round_activity_main"  
     tools
:context="com.android.example.watchviewstub.MainActivity"  
     tools
:deviceIds="wear"></android.support.wearable.view.WatchViewStub>

2. layout/rect_activity_main.xml - layout for square watches

3. layout/round_activity_main.xml - layout for round watches

4. MainAcitivity.java
  
 
protected void onCreate(Bundle savedInstanceState) {  
   
super.onCreate(savedInstanceState);  
   setContentView
(R.layout.activity_main);  
   
final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);  
   stub
.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {  
     
@Override  
     
public void onLayoutInflated(WatchViewStub stub) {  
       mTextView
= (TextView) stub.findViewById(R.id.text);  
     
}  
   
});  
 
}  

 After Android Wear API 23 - layout-round (3 files)

1. layout-notround/activity_main.xml - layout for square watches

2. layout-round/activity_main.xml - layout for round watches

3. MainAcitivity.java
 protected void onCreate(Bundle savedInstanceState) {  
     
super.onCreate(savedInstanceState);  
     setContentView
(R.layout.activity_main);  
     mTextView
= (TextView) findViewById(R.id.text);    
 
}  

That said, since WatchViewStub is part of the Android Wear Support Library, if your current code uses it, it is not a breaking change and you can refactor your code at your convenience. In addition to the -round identifier, developers also use the -notround idenifier to separate resources. So why would you want to use it in place of the default layout? It’s a matter of style. If you have a mixture of layouts, you might consider organising layouts in this way:

  • layout/ - Layouts which works for both circular and square watches
  • layout-round/ and layout-notround/ - Screen shape specific layouts

An even better way to develop for round - values-round/dimens.xml

Maintaining multiple layout files is potentially painful. Each time you add a screen element, you need to go to all the layout files and add this. With mobile devices, you will usually only do this to specify different layouts for phones and tablets and rarely for different phone resolutions. For watches, unless your screen layout is significantly different between round and square (which is rare based on the applications I have seen thus far), you should consider using different dimens.xml instead.

As I experimented with the -round identifier, I found that the easiest way to build for round and square watches is actually by specifying values/dimens.xml and values-round/dimens.xml. By specifying different padding settings, I am able to create the following layout with the same layout.xml file and two dimens files - one for square and one for round. The values used suits this layout, you should experiment with different values to see what works best:

values-round/dimens.xml values/dimens.xml
 <dimen name="header_start_padding">36dp</dimen>  
 
<dimen name="header_end_padding">22dp</dimen>  
 
<dimen name="list_start_padding">36dp</dimen>  
 
<dimen name="list_end_padding">22dp</dimen>  
 <dimen name="header_start_padding">16dp</dimen>  
 
<dimen name="header_end_padding">16dp</dimen>  
 
<dimen name="list_start_padding">10dp</dimen>  
 
<dimen name="list_end_padding">10dp</dimen>  

Before API 23, to do the same would have involved a significant amount of boilerplate code manually specifying the different dimensions for all elements on the screen. With the -round identifier, this is now easy to do in API 23 and is my favourite way to build round / square layouts.

Don’t forget the chin!

Some watches have an inset (also know as a “chin”) in an otherwise circular screen. So how should you can you build a beautiful layout while keeping your code elegant? Consider this design:

activity_main.xml

 <FrameLayout  
   
...>  
   
<android.support.wearable.view.CircledImageView  
     android
:id="@+id/androidbtn"  
     android
:src="@drawable/ic_android"  
     
.../>  
   
<ImageButton  
     android
:id="@+id/lovebtn"  
     android
:src="@drawable/ic_favourite"  
     android
:paddingTop="5dp"  
     android
:paddingBottom="5dp"  
     android
:layout_gravity="bottom"  
     
.../>  
 
</FrameLayout>  

If we are to do nothing, the heart shape button will disappear into the chin. Luckily, there’s an easy way to fix this with fitsSystemWindows:

 <ImageButton  
     
android:id="@+id/lovebtn"  
     
android:src="@drawable/ic_favourite"  
     
android:paddingTop="5dp"  
     
android:paddingBottom="5dp"  
   
android:fitsSystemWindows="true"  
     ...
/>  

For the eagle-eyed (middle image of the screen shown below under “fitsSystemWindows=”true””), you might noticed that the top and bottom padding that we have put in is lost. This is one of the main side effect of using fitsSystemWindows. This is because fitsSystemWindows works by overriding the padding to make it fits the system window. So how do we fix this? We can replace padding with InsetDrawables:

inset_favourite.xml

 <inset  
   
xmlns:android="http://schemas.android.com/apk/res/android"  
   
android:drawable="@drawable/ic_favourite"
   
android:insetTop="5dp"  
   
android:insetBottom="5dp"
/>  

activity_main.xml

 <ImageButton  
     
android:id="@+id/lovebtn"  
     
android:src="@drawable/inset_favourite"  
     
android:paddingTop="5dp"  
     
android:paddingBottom="5dp"  
     
android:fitsSystemWindows="true"  
     ...
/>  

Although the padding setting in the layout will be ignored, the code is tidier if we remove this redundant code.

Do nothing
fitsSystemWindows=”true”
fitsSystemWindows=”true”
and use InsetDrawable

If you require more control than what is possible declaratively using xml, you can also programmatically adjust your layout. To obtain the size of the chin you should attach a View.OnApplyWindowInsetsListener to the outermost view of your layout. Also don’t forget to call v.onApplyWindowInsets(insets). Otherwise, the new listener will consume the inset and inner elements which react to insets may not react.

How to obtain the screen chin size programmatically

MainActivity.java

 private int mChinSize;  
 
protected void onCreate(Bundle savedInstanceState) {  
     
super.onCreate(savedInstanceState);  
     setContentView
(R.layout.activity_main);  
     
// find the outermost element  
     
final View container = findViewById(R.id.outer_container);  
     
// attach a View.OnApplyWindowInsetsListener  
     
container.setOnApplyWindowInsetsListener(new View.OnApplyWindowInsetsListener() {  
         
@Override  
         
public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {  
             mChinSize
= insets.getSystemWindowInsetBottom();  
           
 // The following line is important for inner elements which react to insets  
             v.onApplyWindowInsets(insets);

             
return insets;  
     
}  
   
});  
 
}  

Last but not least, remember to test your code! Since last year, we have included several device images for Android Wear devices with a chin to make testing easier and faster:

Square peg in a round hole no more!

Android Wear has always been about empowering users to wear what they want. A major part in enabling this is the round screen. With API 23 and the -round resource identifier, it is easier than ever to build for both round and square watches - delightful experiences backed by beautiful code!

Additional Resources

Why would I want to fitsSystemWindows? by Ian Lake - Best practice for using this powerful tool including its limitations. ScreenInfo Utility by Wayne Piekarski - Get useful information for your display including DPI, chin size, etc.

...













๐Ÿ“Œ Far Cry 5โ€™s PC Version Runs Beautifully Even on Older Hardware


๐Ÿ“ˆ 31.73 Punkte

๐Ÿ“Œ Keep receipts organized, digitally and beautifully


๐Ÿ“ˆ 31.73 Punkte

๐Ÿ“Œ Google/Apple Exposure Notification API up to Beta 2020-05-29 Rolling Proximity Identifier information disclosure


๐Ÿ“ˆ 25.34 Punkte

๐Ÿ“Œ TIBCO FTP Community Edition up to 6.5.0 on Windows Server/C API/Golang API/Java API/.Net API access control


๐Ÿ“ˆ 25.11 Punkte

๐Ÿ“Œ LexisNexis Emailage: Reimagining fraud detection by using email intelligence as a core risk identifier


๐Ÿ“ˆ 24.22 Punkte

๐Ÿ“Œ Validate LEI(Legal Identity Identifier) using Regular Expression


๐Ÿ“ˆ 24.22 Punkte

๐Ÿ“Œ Wear OS: Android Wear erhรคlt wohl neuen Namen


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Aus Android Wear wird Wear OS by Google


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Aus Android Wear wird Wear OS by Google


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Android Wear heiรŸt jetzt Wear OS


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Android Wear heiรŸt jetzt Wear OS


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Google Announces Wear OS, the New Name of Its Android Wear Operating System


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Google Announces Wear OS, the New Name of Its Android Wear Operating System


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Wear OS by Google: Neue Namensgebung fรผr Android Wear


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Wear OS by Google: Neue Namensgebung fรผr Android Wear


๐Ÿ“ˆ 23.33 Punkte

๐Ÿ“Œ Fun Map API projects to build using Bing Maps API


๐Ÿ“ˆ 23.13 Punkte

๐Ÿ“Œ Google Android up to 7.1.1 Recovery Identifier privilege escalation


๐Ÿ“ˆ 21.57 Punkte

๐Ÿ“Œ Google Android bis 7.1.1 Recovery Identifier erweiterte Rechte


๐Ÿ“ˆ 21.57 Punkte

๐Ÿ“Œ Wear OS: TicWatch 3 Pro mit Snapdragon Wear 4100 zeigt sich


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Aufschwung in Sicht: Google beerdigt Wear OS und plant Neustart mit Wear


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Google in den Schlagzeilen: Pixel 6 XL, Wear statt Wear OS, Pixel-Deals, Play Store-Updates und mehr


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Diesel On Fadelite: Neue Fossil-Smartwatch mit Wear OS und Wear 3100


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear OS: Neue geleakte Bilder zeigen die erste Oppo Smartwatch mit Googles Betriebssystem Wear OS


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear OS: Kommt eine neue Samsung-Smartwatch mit Googles Betriebssystem? Wear OS-App im Galaxy Store


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear OS: Fitbit ist nicht fit โ€“ Googles neue Smartwatch-Tochter verliert weiter Marktanteile; Wear OS im Nichts


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear ersetzt Wear OS und Tablet-Update unterwegs โ€“ Google kรผmmert sich wieder


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear: Google baut Wear OS zusammen mit Samsung um


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Montblanc Summit 3: Luxury Google Wear OS smartwatch sports new Snapdragon Wear processor


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear OS: Fitbit ist nicht fit โ€“ Googles neue Smartwatch-Tochter verliert weiter Marktanteile; Wear OS im Nichts


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Snapdragon Wear 4100+: Mehr Performance, weniger Stromverbrauch fรผr Wear-OS-Smartwatches


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear OS: Fitbit ist nicht fit โ€“ Googles neue Smartwatch-Tochter und Wear OS verlieren weiter Marktanteile


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear OS: Neue Samsung-Smartwatch setzt auf Googles Plattform & bringt erstmals One UI zu Wear OS (Bericht)


๐Ÿ“ˆ 20.82 Punkte

๐Ÿ“Œ Wear OS: Google feiert groรŸen Erfolg โ€“ Neustart hat die Anzahl der Wear OS-Smartwatches verdreifacht


๐Ÿ“ˆ 20.82 Punkte

matomo